Back to CSS Timelines Stratigraphy Timeline Pure CSS
Share
HTML
<section class="tl1-wrap">
  <header class="tl1-head">
    <h2 class="tl1-title">Dig Site <em>K-7</em><br>Anatolian Plateau</h2>
    <div class="tl1-meta">
      <strong>EXCAVATION LOG · SEASON 04</strong>
      42°14′N 33°08′E · Lead: Dr. M. Eren<br>
      Surface elevation 1,142m · Total depth 6.4m<br>
      Catalogued artifacts: 218 · Hover any layer to inspect.
    </div>
  </header>

  <div class="tl1-dig">
    <div class="tl1-ruler">
      <div class="tl1-tick">0.0m</div>
      <div class="tl1-tick">1.0m</div>
      <div class="tl1-tick">2.5m</div>
      <div class="tl1-tick">3.8m</div>
      <div class="tl1-tick">5.0m</div>
      <div class="tl1-tick">6.4m</div>
    </div>

    <div class="tl1-stack">
      <div class="tl1-layer tl1-l1">
        <div class="tl1-era">Topsoil &amp; Ottoman</div>
        <div class="tl1-years">CE 1453 – present · 0.0–1.0m</div>
        <div class="tl1-find">Plowed agricultural soil mixed with glazed Iznik shards, a worn copper para from the reign of Selim II, and clay pipe fragments. Heavy modern disturbance; treat all surface finds as out of context.</div>
      </div>
      <div class="tl1-layer tl1-l2">
        <div class="tl1-era">Byzantine Habitation</div>
        <div class="tl1-years">CE 330 – 1200 · 1.0–2.5m</div>
        <div class="tl1-find">Compacted clay floors of a small basilica, three intact storage amphorae, a hoard of 47 bronze folles, and bone styluses. Evidence of fire damage in the eastern quadrant suggests abandonment by the late 12th century.</div>
      </div>
      <div class="tl1-layer tl1-l3">
        <div class="tl1-era">Roman Provincial</div>
        <div class="tl1-years">63 BCE – CE 330 · 2.5–3.8m</div>
        <div class="tl1-find">Hypocaust tile system, fragment of a tessellated mosaic depicting a stag, two terra sigillata bowls stamped with the maker's mark CAESIVS. Coin of Hadrian recovered at 3.2m.</div>
      </div>
      <div class="tl1-layer tl1-l4">
        <div class="tl1-era">Hellenistic</div>
        <div class="tl1-years">323 – 63 BCE · 3.8–4.6m</div>
        <div class="tl1-find">Lower courses of an ashlar wall (probable agora boundary). Fine black-glaze pottery from Pergamon, three iron arrowheads, and a sealed cache of 12 silver tetradrachms of Eumenes II.</div>
      </div>
      <div class="tl1-layer tl1-l5">
        <div class="tl1-era">Late Bronze</div>
        <div class="tl1-years">1600 – 1200 BCE · 4.6–5.6m</div>
        <div class="tl1-find">Hittite-period storage pithoi in situ, cuneiform tablet fragment (administrative, grain inventory), bronze fibula. Burn layer at 5.4m correlates with the regional collapse horizon documented at Boğazköy.</div>
      </div>
      <div class="tl1-layer tl1-l6">
        <div class="tl1-era">Neolithic</div>
        <div class="tl1-years">7000 – 5000 BCE · 5.6–6.4m</div>
        <div class="tl1-find">Mudbrick platform, obsidian blades sourced to Göllü Dağ, animal bone assemblage (caprines dominant), and the partial remains of a clay figurine — seated female, headless. Sterile soil at 6.4m.</div>
      </div>
    </div>

    <aside class="tl1-artifacts">
      <h4 class="tl1-art-title">Featured Finds · Season 04</h4>
      <div class="tl1-card">
        <div class="tl1-card-name">Tetradrachm of Eumenes II</div>
        <div class="tl1-card-id">CAT. K7-H-0042 · Layer 4</div>
        <div class="tl1-card-desc">Silver, 17.1g. Obverse: diademed head of Philetairos. Reverse: seated Athena with shield. Mint of Pergamon, c. 180 BCE.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Cuneiform Inventory Tablet</div>
        <div class="tl1-card-id">CAT. K7-B-0117 · Layer 5</div>
        <div class="tl1-card-desc">Unfired clay, fragmentary. Ten lines of Hittite syllabic script recording wheat (ZÍZ) quantities. Awaiting full transliteration by Eren &amp; Tunç.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Mosaic Stag Fragment</div>
        <div class="tl1-card-id">CAT. K7-R-0008 · Layer 3</div>
        <div class="tl1-card-desc">Tesserae in limestone and smalti, 38×42cm. Likely from the threshold of a peristyle court. Provincial workshop, late 2nd c. CE.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Obsidian Blade Cache</div>
        <div class="tl1-card-id">CAT. K7-N-0156 · Layer 6</div>
        <div class="tl1-card-desc">Six pressure-flaked prismatic blades. XRF analysis confirms Göllü Dağ source, ~270km southeast. Trade evidence for early Neolithic exchange networks.</div>
      </div>
    </aside>
  </div>
</section>
CSS
.tl1-wrap {
  background: #1a1410;
  color: #e8dfc8;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 2.5rem 2rem 3rem;
}
.tl1-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.tl1-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 0.95;
  color: #f0e5cc;
  margin: 0;
}
.tl1-title em { font-style: italic; color: #c89860; }
.tl1-meta {
  font-size: 11px;
  line-height: 1.7;
  color: #a89570;
  border-left: 1px solid #5a4830;
  padding-left: 1rem;
  align-self: end;
}
.tl1-meta strong { color: #e8dfc8; display: block; margin-bottom: 0.25rem; }
.tl1-dig {
  display: grid;
  grid-template-columns: 60px 1fr 260px;
  gap: 0;
}
.tl1-ruler {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: #8a7550;
  border-right: 1px solid #5a4830;
}
.tl1-tick {
  flex: 1;
  padding: 0.5rem 0.5rem 0 0;
  text-align: right;
  border-top: 1px dashed rgba(138,117,80,0.3);
  letter-spacing: 0.1em;
}
.tl1-stack { display: flex; flex-direction: column; }
.tl1-layer {
  flex: 1;
  min-height: 110px;
  padding: 1.25rem 1.5rem;
  position: relative;
  border-bottom: 2px solid rgba(0,0,0,0.4);
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  overflow: hidden;
}
.tl1-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.tl1-l1 { background: linear-gradient(180deg, #6b5840, #574332); }
.tl1-l1::before { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.1) 8px 9px); }
.tl1-l2 { background: linear-gradient(180deg, #8a6840, #6e5232); }
.tl1-l2::before { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0 3px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.2) 0 4px, transparent 4px); background-size: 40px 40px, 60px 60px; }
.tl1-l3 { background: linear-gradient(180deg, #a47a48, #80582e); }
.tl1-l3::before { background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,0.08) 20px 22px); }
.tl1-l4 { background: linear-gradient(180deg, #c08850, #9a6638); }
.tl1-l4::before { background: radial-gradient(ellipse at 50% 50%, rgba(255,200,120,0.2), transparent 70%); }
.tl1-l5 { background: linear-gradient(180deg, #7a5a3a, #4e3820); }
.tl1-l5::before { background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px); }
.tl1-l6 { background: linear-gradient(180deg, #3a2818, #1a1008); }
.tl1-layer:hover { flex: 3; }
.tl1-layer:hover .tl1-find { opacity: 1; transform: translateX(0); }
.tl1-era {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #f5ecd1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.tl1-years {
  font-size: 10px;
  color: rgba(245,236,209,0.7);
  letter-spacing: 0.15em;
  margin-top: 0.25rem;
}
.tl1-find {
  margin-top: 0.75rem;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(245,236,209,0.85);
  max-width: 500px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.tl1-artifacts {
  border-left: 1px solid #5a4830;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tl1-art-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #8a7550;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #5a4830;
  margin: 0 0 0.5rem;
}
.tl1-card {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(138,117,80,0.3);
}
.tl1-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #c89860;
}
.tl1-card-id {
  font-size: 9px;
  color: #8a7550;
  letter-spacing: 0.15em;
  margin: 0.25rem 0;
}
.tl1-card-desc {
  font-size: 10.5px;
  line-height: 1.5;
  color: #a89570;
}
@media (max-width: 720px) {
  .tl1-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl1-dig { grid-template-columns: 50px 1fr; }
  .tl1-artifacts { grid-column: 1 / -1; border-left: none; border-top: 1px solid #5a4830; padding: 1rem 0 0; margin-top: 1rem; }
}