Test5/index.html at main · Dornawcox/Test5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>OpenTEAM — Open Technology Ecosystem for Agricultural Management</title>
  <meta name="description" content="OpenTEAM is a collaborative ecosystem of open-source tools, data practices, and community convenings that help farmers, ranchers, and land stewards manage land regeneratively." />

  <meta property="og:title" content="OpenTEAM" />
  <meta property="og:description" content="Open Technology Ecosystem for Agricultural Management" />
  <meta property="og:image" content="assets/bg_malawi.jpg" />
  <meta name="twitter:card" content="summary_large_image" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,400&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="styles.css" />
</head>

<body id="top">
  <a class="skip-link" href="#main">Skip to content</a>

  <!-- OEDP-inspired: sticky header + over-left drawer -->
  <header class="nav-shell" role="banner">
    <button class="menu-button" id="menuButton" aria-controls="drawer" aria-expanded="false">
      <span class="menu-icon" aria-hidden="true"><span></span></span>
      <span class="menu-label">MENU</span>
    </button>

    <div class="nav-title">
      <div class="nav-title-text">Open Technology Ecosystem for Agricultural Management</div>
    </div>

    <div class="nav-logo" aria-hidden="true">
      <img src="assets/openteam_logo.svg" alt="" />
    </div>
  </header>

  <aside class="drawer" id="drawer" aria-hidden="true">
    <div class="drawer-inner">
      <div class="drawer-top">
        <div class="drawer-mark">
          <img src="assets/openteam_logo.svg" alt="OpenTEAM logo" />
        </div>
        <div class="drawer-vertical">OpenTEAM</div>
        <button class="drawer-close" id="drawerClose" aria-label="Close menu">✕</button>
      </div>

      <nav class="drawer-links" aria-label="Site">
        <a href="#home" class="drawer-link">HOME</a>
        <a href="#initiatives" class="drawer-link">INITIATIVES</a>
        <a href="#pilots" class="drawer-link">PILOTS</a>
        <a href="#convenings" class="drawer-link">CONVENINGS</a>
        <a href="#library" class="drawer-link">TOOL &amp; DATA LIBRARY</a>
        <a href="#join" class="drawer-link">JOIN</a>
      </nav>

      <div class="drawer-meta">
        <div class="drawer-meta-title">Contact</div>
        <a class="drawer-meta-link" href="mailto:info@openteam.community?subject=OpenTEAM%20Website%20Inquiry">info@openteam.community</a>
      </div>
    </div>
  </aside>
  <div class="scrim" id="scrim" aria-hidden="true"></div>

  <main id="main">
    <!-- HERO -->
    <section id="home" class="hero">
      <div class="container hero-grid">
        <div class="hero-left">
          <div class="feature-head">A Community for growing an Agricultural Knowledge Commons</div>
          <p class="feature-sub">
            OpenTEAM (Open Technology Ecosystem for Agroecological Management) works with diverse agriculture communities,
            technologists, and aligned organizations to collaboratively generate, share, and sustain agricultural knowledge to enable
            climate resilience, food system equity, and land stewardship for future generations. Together, we advance open agricultural
            technologies and data systems that are transparent, equitable, and regenerative.
          </p>

          <div class="hero-ctas">
            <a class="btn primary" href="#join">Join OpenTEAM</a>
            <a class="btn" href="#initiatives">Explore initiatives</a>
          </div>

          <div class="hero-notes">
            <div class="note">
              <div class="note-title">Our community</div>
              <div class="note-body">A collaborative network putting farmers, ranchers, and land stewards at the center of agricultural innovation.</div>
            </div>
            <div class="note">
              <div class="note-title">Our approach</div>
              <div class="note-body">Building ethically, establishing sovereignty, and ensuring accessibility so knowledge can become a true commons.</div>
            </div>
          </div>
        </div>

        <div class="hero-right">
          <div class="tile-grid" aria-label="Primary sections">
            <a class="tile tile-covercrop" href="#initiatives">
              <div class="tile-top">
                <div class="tile-title">Our Work</div>
                <div class="tile-arrow" aria-hidden="true">→</div>
              </div>
              <div class="tile-desc">Tools • Frameworks • Learning</div>
            </a>

            <a class="tile tile-mycelium" href="#convenings">
              <div class="tile-top">
                <div class="tile-title">Convene</div>
                <div class="tile-arrow" aria-hidden="true">→</div>
              </div>
              <div class="tile-desc">In-Depths • Library • Stories</div>
            </a>

            <a class="tile tile-fieldpatterns" href="#pilots">
              <div class="tile-top">
                <div class="tile-title">Facilitate</div>
                <div class="tile-arrow" aria-hidden="true">→</div>
              </div>
              <div class="tile-desc">Collabathons • Working Groups</div>
            </a>

            <a class="tile tile-malawi" href="#library">
              <div class="tile-top">
                <div class="tile-title">Collaborators</div>
                <div class="tile-arrow" aria-hidden="true">→</div>
              </div>
              <div class="tile-desc">Allied efforts & projects</div>
            </a>
          </div>

          <div class="hero-caption">
            <strong>Reactivating OpenTEAM.</strong> We’re operationalizing a community-centered approach with clear pathways for participation and shared governance.
          </div>
        </div>
      </div>
    </section>

    <!-- INITIATIVES -->
    <section id="initiatives" class="section">
      <div class="container">
        <div class="section-head">
          <h2>Our Work</h2>
          <p>
            Discover tools, frameworks, and knowledge developed and stewarded by our community.
          </p>
        </div>

        <div class="cards">
          <article class="card card-covercrop">
            <h3>Convene</h3>
            <p>In-Depths series and library—orientation, primers, glossary updates, and stories that make community work accessible.</p>
            <p class="muted">Video library available via OpenTEAM channels.</p>
          </article>

          <article class="card card-mycelium">
            <h3>Facilitate</h3>
            <p>Collabathons and working groups that map actors, surface offers/asks, and pressure-test ideas across communities.</p>
            <p class="muted">Structured, longer-form collaboration.</p>
          </article>

          <article class="card card-fieldpatterns">
            <h3>Steward shared infrastructure</h3>
            <p>Ethical technical infrastructure and practical governance patterns to reduce duplication and vendor lock-in.</p>
            <p class="muted">Open standards and interoperability.</p>
          </article>

          <article class="card card-malawi">
            <h3>Celebrate collaborators</h3>
            <p>Related efforts, communities, and projects that we’re in community with—shared learning and shared momentum.</p>
            <p class="muted">An ecosystem approach.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- PILOTS -->
    <section id="pilots" class="section alt">
      <div class="container">
        <div class="section-head">
          <h2>Working Groups & Pilots</h2>
          <p>
            Where community priorities become shared projects—testing workflows, developing templates, and publishing reusable outputs.
          </p>
        </div>

        <div class="split">
          <article class="panel">
            <h3>Example work</h3>
            <ul>
              <li>Grazing Lands Carbon Data Initiative</li>
              <li>Agricultural data use agreements</li>
              <li>PODS, Conservation Cost Database, TRAC</li>
              <li>Ag Data Wallet UI/UX</li>
              <li>Soil health tech stack</li>
            </ul>
          </article>

          <article class="panel">
            <h3>How we choose</h3>
            <p>As a community we decide together on the working groups that address critical challenges in agriculture.</p>
            <ul>
              <li>Field relevance and practical impact</li>
              <li>Interoperability and reuse</li>
              <li>Stewardship and long-term maintenance</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <!-- CONVENINGS -->
    <section id="convenings" class="section">
      <div class="container">
        <div class="section-head">
          <h2>Convenings</h2>
          <p>
            Community calls, demos, and working sessions that keep tools aligned with practice and move shared work forward.
          </p>
        </div>

        <div class="events">
          <div class="event">
            <div class="event-date">
              <div class="event-month">JOIN</div>
              <div class="event-day">•</div>
            </div>
            <div class="event-body">
              <h3>Community calls</h3>
              <p class="muted">Connect with a collaborative network and shape priorities together.</p>
            </div>
          </div>

          <div class="event">
            <div class="event-date">
              <div class="event-month">BUILD</div>
              <div class="event-day">•</div>
            </div>
            <div class="event-body">
              <h3>Collabathons</h3>
              <p class="muted">Structured collaboration to map needs, test ideas, and publish outputs.</p>
            </div>
          </div>

          <div class="event">
            <div class="event-date">
              <div class="event-month">SHARE</div>
              <div class="event-day">•</div>
            </div>
            <div class="event-body">
              <h3>Demos & learning sessions</h3>
              <p class="muted">Show what’s working and document what’s learned.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- LIBRARY -->
    <section id="library" class="section alt">
      <div class="container">
        <div class="section-head">
          <h2>Tool &amp; Data Library</h2>
          <p>
            A growing index of resources our community uses in practice—expanding over time with tags, notes, and interoperability signals.
          </p>
        </div>

        <div class="cards two">
          <article class="card card-fieldpatterns">
            <h3>Tools & frameworks</h3>
            <p>Open-source tools, implementations, and shared templates for land management workflows.</p>
            <p class="muted">Coming next: searchable listings.</p>
          </article>

          <article class="card card-mycelium">
            <h3>Agreements & governance</h3>
            <p>Consent, provenance, stewardship roles, and reuse patterns that keep power with communities.</p>
            <p class="muted">Coming next: reusable agreements.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- JOIN -->
    <section id="join" class="section">
      <div class="container">
        <div class="section-head">
          <h2>Join</h2>
          <p>Bring your experience, your tools, your questions, and your needs. We’ll build the commons together.</p>
        </div>

        <div class="cards two">
          <article class="card card-covercrop">
            <h3>Join a community call</h3>
            <p>Stay connected and help shape OpenTEAM’s priorities and working groups.</p>
            <a class="btn small" href="mailto:info@openteam.community?subject=OpenTEAM%20-%20Community%20Call">Email for next call</a>
          </article>

          <article class="card card-malawi">
            <h3>Partner or propose a working group</h3>
            <p>Bring a pilot idea, integration need, or stewardship challenge and collaborate with the community.</p>
            <a class="btn small" href="mailto:info@openteam.community?subject=OpenTEAM%20-%20Working%20Group%20Proposal">Email to propose</a>
          </article>
        </div>

        <div class="callout">
          <div class="callout-title">Institutional home</div>
          <div class="callout-body">OpenTEAM is a fiscally sponsored project of Raft Foundation Inc, a 501(c)(3).</div>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container footer-grid">
      <div class="footer-brand">
        <img src="assets/openteam_logo.svg" alt="OpenTEAM logo" class="footer-logo" />
        <div>
          <div class="footer-title">OpenTEAM</div>
          <div class="footer-subtitle">Open Technology Ecosystem for Agricultural Management</div>
          <div class="footer-meta">© <span id="year"></span> OpenTEAM — Built for GitLab Pages / GitHub Pages</div>
          <div class="footer-meta small">Design attribution: inspired by Open Environmental Data Project (openenvironmentaldata.org).</div>
        </div>
      </div>

      <div class="footer-links">
        <a href="#home">Home</a>
        <a href="#initiatives">Our Work</a>
        <a href="#pilots">Working Groups</a>
        <a href="#convenings">Convenings</a>
        <a href="#library">Library</a>
        <a href="#join">Join</a>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>