HarvardSites 设计系统.

<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research forum — HarvardSites pattern interpretation</title><style>*{box-sizing:border-box}body{margin:0;font:1rem/1.6 Arial,sans-serif;color:#242424;background:#fff}main{max-width:70rem;margin:auto;padding:2rem 1.25rem}.config{padding:1rem 0;border-bottom:1px solid #b9b4ac;margin-bottom:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}select,button{font:inherit;color:inherit;background:white;border:1px solid #615a51;padding:.65rem .9rem}button{cursor:pointer}h1,h2{font-family:Georgia,serif;line-height:1.15}h1{font-size:clamp(2.5rem,6vw,4rem);max-width:15ch;margin:1rem 0}h2{font-size:1.75rem}a{color:#653f3a;text-underline-offset:4px}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #005fcc;outline-offset:4px}.hero{padding-bottom:2rem;border-bottom:1px solid #b9b4ac}.meta{color:#653f3a;font-weight:bold}.split{display:grid;gap:1.5rem;margin:2rem 0;padding:1.5rem;background:#f4f1ec}.split h2{margin:0}.split p{margin:0 0 1rem}table{width:100%;border-collapse:collapse;margin:1rem 0 2rem}caption{text-align:left;font-weight:bold;margin-bottom:1rem}th,td{text-align:left;padding:1rem .5rem;border-bottom:1px solid #b9b4ac;vertical-align:top}th:first-child,td:first-child{width:7rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}details{border-top:1px solid #b9b4ac;padding:1rem 0}details:last-of-type{border-bottom:1px solid #b9b4ac}summary{font-weight:bold;cursor:pointer}details p{max-width:55ch;margin-bottom:0}.note{margin:2rem 0 0;padding:1rem;border-left:4px solid #653f3a;background:#f4f1ec}footer{padding-top:2rem;margin-top:2rem;border-top:1px solid #b9b4ac}body[data-style="bold"] .split{border:2px solid #242424}body[data-style="friendly"] .split{border-radius:1.5rem}body[data-style="friendly"] button{border-radius:3rem}body[data-style="light"] .split{border-radius:.3rem;background:#faf9f6}@media(min-width:48rem){.split{grid-template-columns:1fr 1fr;padding:2rem}.body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}main{padding:2.5rem}}</style></head><body data-style="bold"><main><div class="config"><label for="style">Explore framing</label><select id="style"><option value="bold">Bold &amp; Compelling interpretation</option><option value="light">Light &amp; Elegant interpretation</option><option value="friendly">Friendly &amp; Approachable interpretation</option></select></div><header class="hero"><p class="meta">An original academic event example</p><h1>Ideas across disciplines</h1><p>A one-day forum on how researchers turn shared questions into new methods.</p><p><strong>Friday, 16 October · 9:30–16:00 · Example Learning Centre</strong></p><p>Fictional programme. No registration or university affiliation is implied.</p></header><section class="split" aria-labelledby="theme"><h2 id="theme">One question.<br>Many ways of seeing.</h2><div><p>Historians, scientists, and designers compare the evidence they work with and the assumptions they bring to it.</p><a href="#agenda">Explore the day’s programme →</a></div></section><div class="body-grid"><section id="agenda" tabindex="-1"><h2>The day at a glance</h2><table><caption>Illustrative programme</caption><thead><tr><th scope="col">Time</th><th scope="col">Session</th></tr></thead><tbody><tr><td>09:30</td><td><strong>Welcome and questions</strong><br>Shared framing for the day</td></tr><tr><td>10:00</td><td><strong>Working with evidence</strong><br>A conversation across disciplines</td></tr><tr><td>13:30</td><td><strong>Methods in practice</strong><br>Small-group demonstrations</td></tr><tr><td>15:30</td><td><strong>What changes next?</strong><br>Reflection and closing discussion</td></tr></tbody></table></section><section><h2>Attendee information</h2><div class="controls"><button id="open-all" type="button">Open all sections</button><button id="close-all" type="button">Close all sections</button></div><details><summary>What will I need?</summary><p>Bring a notebook. All reading material is provided in this fictional programme, and no specialist preparation is required.</p></details><details><summary>Can I join part of the day?</summary><p>The example schedule has morning and afternoon sessions. A real event page should state whether individual sessions require separate registration.</p></details><p class="note"><strong>Access information stays visible.</strong><br>A real event must provide verified venue access details and an accommodation contact here, outside collapsed panels.</p></section></div><footer>Independent interpretation of HarvardSites editorial guidance. Original layout values and colors; Arial and Georgia fallbacks. This is not a HarvardSites CMS page.</footer></main><script>document.querySelector('#style').addEventListener('change',e=>document.body.dataset.style=e.target.value);const panels=[...document.querySelectorAll('details')];document.querySelector('#open-all').addEventListener('click',()=>panels.forEach(p=>p.open=true));document.querySelector('#close-all').addEventListener('click',()=>panels.forEach(p=>p.open=false));</script></body></html>