← back to Gallery Agentabrams
builds/objects-golden-road/index.html
328 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Objects in the Golden Road</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent1: #b0472e;
--accent2: #2f4c39;
--display-font: 'Playfair Display', Georgia, serif;
--body-font: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--caption: 12px;
--body: 16px;
--lead: 21px;
--h3: 28px;
--h2: 38px;
--h1: 50px;
--display: 67px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--body-font);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
padding: 96px 48px;
text-align: center;
background: linear-gradient(135deg, #faf8f4, #fff9f1);
box-shadow: 0 0 48px rgba(0,0,0,0.08);
animation: ambientDrift 18s ease-in-out infinite;
}
h1 {
font-family: var(--display-font);
font-size: var(--h1);
color: var(--accent1);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 8px;
}
h2 {
font-family: var(--display-font);
font-size: var(--h2);
color: var(--text);
margin-bottom: 4px;
}
p {
font-size: var(--body);
color: var(--muted);
}
main {
flex: 1;
padding: 48px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.card {
background-color: var(--surface);
padding: 24px;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
transition: box-shadow 150ms ease-in-out;
}
.card:hover {
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.title {
font-size: var(--h3);
font-family: var(--display-font);
margin-bottom: 12px;
color: var(--accent1);
}
.accession {
font-size: var(--caption);
color: var(--muted);
margin-bottom: 12px;
}
.label {
font-size: var(--caption);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 8px;
}
.detail {
font-size: var(--body);
margin-bottom: 16px;
}
.curator {
font-size: var(--lead);
font-family: var(--display-font);
color: var(--text);
margin-top: 24px;
}
footer {
background-color: var(--accent1);
color: var(--surface);
padding: 24px 48px;
text-align: center;
font-size: var(--body);
}
@keyframes ambientDrift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 90ms; }
.card:nth-child(3) { animation-delay: 180ms; }
.card:nth-child(4) { animation-delay: 270ms; }
.card:nth-child(5) { animation-delay: 360ms; }
.card:nth-child(6) { animation-delay: 450ms; }
.card:nth-child(7) { animation-delay: 540ms; }
.card:nth-child(8) { animation-delay: 630ms; }
.saved-tray, .collection-view, .compare-view, .zoom-view, .glossary, .print-mode {
display: none;
}
button {
background: var(--accent1);
color: var(--surface);
border: none;
padding: 12px 24px;
font-family: var(--display-font);
font-size: var(--caption);
text-transform: uppercase;
letter-spacing: 0.15em;
cursor: pointer;
transition: background 150ms ease-in-out;
}
button:hover {
background: #c65f38;
}
.zoomable {
cursor: zoom-in;
}
</style>
</head>
<body>
<header>
<h1>Objects in the Golden Road</h1>
<h2>A Curated Exhibition of Grateful Dead Fan Culture</h2>
<p>Presented as a museum artifact of memory, community, and the transcendent power of art.</p>
</header>
<main>
<div class="card">
<div class="title">Hand-Painted Road Case</div>
<div class="accession">Accession #001</div>
<div class="label">Materials</div>
<div class="detail">Hand-painted wood, gold leaf, and glass</div>
<div class="label">Dimensions</div>
<div class="detail">120 cm × 80 cm × 30 cm</div>
<div class="label">Date Range</div>
<div class="detail">1990–1992</div>
<div class="label">Provenance</div>
<div class="detail">Acquired from the estate of Jerry Garcia’s touring crew</div>
<div class="label">Condition</div>
<div class="detail">Excellent; minor wear consistent with use</div>
<div class="curator">This road case is a portal to the nomadic soul of a generation. Painted in the glow of late-night shows, it is both a vessel and a memory, carrying the weight of a journey that never truly ends.</div>
</div>
<div class="card">
<div class="title">Embroidered Tour Jacket</div>
<div class="accession">Accession #002</div>
<div class="label">Materials</div>
<div class="detail">Cotton canvas, silk thread</div>
<div class="label">Dimensions</div>
<div class="detail">78 cm × 62 cm</div>
<div class="label">Date Range</div>
<div class="detail">1986–1988</div>
<div class="label">Provenance</div>
<div class="detail">Gift from a long-time Deadhead to the museum’s collection</div>
<div class="label">Condition</div>
<div class="detail">Excellent; some fading of embroidery</div>
<div class="curator">The jacket is a tapestry of movement and memory, stitched with care by fans who wore it to every show, every festival, every celebration of life. It is not just clothing, but a map of belonging.</div>
</div>
<div class="card">
<div class="title">Annotated Cassette Box</div>
<div class="accession">Accession #003</div>
<div class="label">Materials</div>
<div class="detail">Cardboard, vinyl, handwritten notes</div>
<div class="label">Dimensions</div>
<div class="detail">28 cm × 22 cm × 10 cm</div>
<div class="label">Date Range</div>
<div class="detail">1983–1985</div>
<div class="label">Provenance</div>
<div class="detail">Collected by a fan from a private archive</div>
<div class="label">Condition</div>
<div class="detail">Fair; tapes intact, notes slightly faded</div>
<div class="curator">This box is a time capsule of a different era, one where music was carried in your hands, not on your phone. The annotations are a dialogue between the artist and the listener, a shared language of gratitude.</div>
</div>
<div class="card">
<div class="title">Pressed-Flower Notebook</div>
<div class="accession">Accession #004</div>
<div class="label">Materials</div>
<div class="detail">Paper, pressed flowers, ink</div>
<div class="label">Dimensions</div>
<div class="detail">22 cm × 15 cm</div>
<div class="label">Date Range</div>
<div class="detail">1978–1980</div>
<div class="label">Provenance</div>
<div class="detail">Donated by a family member of a long-time fan</div>
<div class="label">Condition</div>
<div class="detail">Good; some pages yellowed</div>
<div class="curator">Each page is a memory held in botanical form, a reminder that the spirit of the Dead lives on in the smallest details. This is a notebook of love, of time, of the beauty of impermanence.</div>
</div>
<div class="card">
<div class="title">Enamel Pin Board</div>
<div class="accession">Accession #005</div>
<div class="label">Materials</div>
<div class="detail">Wood, enamel pins</div>
<div class="label">Dimensions</div>
<div class="detail">60 cm × 40 cm</div>
<div class="label">Date Range</div>
<div class="detail">1995–2000</div>
<div class="label">Provenance</div>
<div class="detail">Acquired from a fan's personal collection</div>
<div class="label">Condition</div>
<div class="detail">Excellent; pins intact</div>
<div class="curator">This board is a mosaic of identity and fandom. Each pin is a story, a symbol, a piece of a shared journey. It is a visual language of community, one that transcends words.</div>
</div>
<div class="card">
<div class="title">Tie-Dyed Textile Study</div>
<div class="accession">Accession #006</div>
<div class="label">Materials</div>
<div class="detail">Cotton fabric, dye</div>
<div class="label">Dimensions</div>
<div class="detail">110 cm × 80 cm</div>
<div class="label">Date Range</div>
<div class="detail">1975–1976</div>
<div class="label">Provenance</div>
<div class="detail">Collected from a private archive of Grateful Dead memorabilia</div>
<div class="label">Condition</div>
<div class="detail">Excellent; vibrant colors</div>
<div class="curator">This textile is a celebration of spontaneity and expression. It is a canvas of chaos and harmony, a reflection of the improvisational spirit that defines the Grateful Dead and their followers.</div>
</div>
<div class="card">
<div class="title">Weathered Venue Sign</div>
<div class="accession">Accession #007</div>
<div class="label">Materials</div>
<div class="detail">Plywood, paint, weathering</div>
<div class="label">Dimensions</div>
<div class="detail">150 cm × 100 cm</div>
<div class="label">Date Range</div>
<div class="detail">1973–1975</div>
<div class="label">Provenance</div>
<div class="detail">Acquired from the original venue site</div>
<div class="label">Condition</div>
<div class="detail">Fair; weathered and aged</div>
<div class="curator">This sign is a relic of the early days, a testament to the raw energy of a scene that would grow into a global movement. Its weathering is a badge of honor, a marker of time and place.</div>
</div>
<div class="card">
<div class="title">Fan-Built Radio</div>
<div class="accession">Accession #008</div>
<div class="label">Materials</div>
<div class="detail">Wood, metal, vacuum tubes</div>
<div class="label">Dimensions</div>
<div class="detail">60 cm × 40 cm × 30 cm</div>
<div class="label">Date Range</div>
<div class="detail">1989–1991</div>
<div class="label">Provenance</div>
<div class="detail">Built by a fan and donated to the museum</div>
<div class="label">Condition</div>
<div class="detail">Good; functional with minor wear</div>
<div class="curator">This radio is a tribute to the spirit of DIY and the deep connection between art and audience. It is a device that brings people together, a symbol of the shared experience of music and memory.</div>
</div>
</main>
<footer>
<p>© 2025 Museum of Living Memory</p>
</footer>
</body>
</html>