Timeline

<section class="sl-timeline" style="padding:clamp(48px,7vw,80px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 auto 3rem;max-width:640px;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.4rem 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading | default: 'Our story' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <style>
      .sl-tl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.5rem; position:relative; }
      .sl-tl::before { content:""; position:absolute; top:0; bottom:0; left:1.1rem; width:2px; background:currentColor; opacity:.2; }
      .sl-tl > li { position:relative; padding-left:3rem; }
      .sl-tl > li::before { content:""; position:absolute; left:.6rem; top:.6rem; width:1rem; height:1rem; border-radius:50%; background:var(--sl-accent,#0a5cff); border:3px solid #fff; box-shadow:0 0 0 1px currentColor; }
      @media (min-width: 1024px) {
        .sl-tl { flex-direction:row; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:2rem; }
        .sl-tl::before { top:2.1rem; bottom:auto; left:0; right:0; height:2px; width:auto; }
        .sl-tl > li { padding-left:0; padding-top:3.5rem; flex:0 0 clamp(220px,28vw,320px); scroll-snap-align:start; text-align:center; }
        .sl-tl > li::before { left:50%; top:1.5rem; transform:translateX(-50%); }
      }
    </style>
    <ol class="sl-tl">
      {%- for block in section.blocks -%}
        <li {{ block.shopify_attributes }}>
          <time datetime="{{ block.settings.year }}" style="display:inline-block;padding:.2rem .6rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.25rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;margin-bottom:.5rem;">{{ block.settings.year }}</time>
          <h3 style="margin:0 0 .35rem;font-size:1.1rem;line-height:1.3;font-weight:700;">{{ block.settings.title }}</h3>
          {%- if block.settings.description != blank -%}
            <p style="margin:0;opacity:.8;line-height:1.55;font-size:.92rem;max-width:32ch;">{{ block.settings.description }}</p>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ol>
  </div>
</section>
{% schema %}
{
  "name": "Timeline",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Our journey" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Our story" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "From kitchen-table beginnings to a team of 30 across three continents." }
  ],
  "blocks": [
    {
      "type": "milestone",
      "name": "Milestone",
      "settings": [
        { "type": "text", "id": "year", "label": "Year", "default": "2020" },
        { "type": "text", "id": "title", "label": "Title", "default": "Milestone title" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "Short description of what happened this year." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Timeline",
      "blocks": [
        { "type": "milestone", "settings": { "year": "2019", "title": "Founded", "description": "Started in a Brooklyn apartment with $2k and a prototype." } },
        { "type": "milestone", "settings": { "year": "2021", "title": "First 10k customers", "description": "Grew entirely by word of mouth with zero paid advertising." } },
        { "type": "milestone", "settings": { "year": "2023", "title": "Opened flagship store", "description": "Launched our flagship in SoHo, New York — now 30 staff strong." } },
        { "type": "milestone", "settings": { "year": "2025", "title": "Carbon neutral", "description": "Hit full carbon neutrality across shipping and production." } }
      ]
    }
  ]
}
{% endschema %}