/* jdtheme26 - shared TIMELINE component (.jd-timeline), 2026-10-06. Extracted from the /about/ "our journey" timeline: one hand-drawn line, hand-drawn uneven circles, a butter-yellow current stop with an uneven outer ring, Baloo 2 labels above the line. The drawing (stroke mask, circle, ring, tokens) lives HERE, once; jd-about.css (.jd-journey) uses the same tokens and the shared rules below and keeps only its own layout / states. First user: order progress (account view-order). Markup:
  1. ..(done)
  2. ...
  3. ...
    4. (upcoming) is-done = reached (tick), is-now = current step, none = upcoming (muted). --jd-timeline-at = current index / (steps - 1). Motion: the line is drawn once when the list is seen (jd-flow.js adds .is-ready then .is-in); reduced motion shows the final state. */ :root { --jd-timeline-line: rgba(59, 42, 31, .16); --jd-timeline-done: rgba(59, 42, 31, .46); --jd-timeline-ring: rgba(59, 42, 31, .36); --jd-timeline-butter: #fbeaa9; --jd-timeline-gold: rgba(201, 168, 74, .75); --jd-timeline-gold-soft: rgba(201, 168, 74, .5); --jd-timeline-dot: 13px; --jd-timeline-bg: #fff; --jd-timeline-stroke-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0%203c10-.45%2020%20.45%2030%20.1s20-.5%2030-.1%2020%20.45%2030%200%2020-.4%2030%200' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); --jd-timeline-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.3l2.1 2.1L8 2.8' fill='none' stroke='%233b2a1f' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .jd-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--jd-timeline-n, 5), minmax(0, 1fr)); margin: 6px 0 0; padding: 0 0 6px; list-style: none; } /* SHARED DRAWING (one source, also used by the /about/ journey in jd-about.css): the hand-drawn stroke of the line, the uneven circle of a stop and its outer ring. A component adds only its own layout, colours and states. */ .jd-timeline::before, .jd-timeline::after, .jd-journey__line, .jd-journey__line::after { position: absolute; height: 6px; pointer-events: none; -webkit-mask: var(--jd-timeline-stroke-mask) 0 50% / 120px 6px repeat-x; mask: var(--jd-timeline-stroke-mask) 0 50% / 120px 6px repeat-x; } .jd-timeline__dot, .jd-journey__dot { position: relative; display: grid; place-items: center; width: 16px; height: 16px; } .jd-timeline__dot::before, .jd-journey__dot::before { /* the hand-drawn circle */ content: ""; box-sizing: border-box; width: var(--jd-timeline-dot); height: var(--jd-timeline-dot); border: 1px solid var(--jd-timeline-ring); border-radius: 52% 48% 50% 50% / 49% 52% 48% 51%; transition: width .3s ease, height .3s ease, background-color .3s ease, border-color .3s ease; } .jd-timeline__dot::after, .jd-journey__dot::after { /* the current stop's uneven outer ring */ content: ""; position: absolute; inset: -4px; border: 1px solid var(--jd-timeline-gold-soft); border-radius: 56% 44% 53% 47% / 46% 55% 45% 54%; opacity: 0; transform: rotate(-14deg) scale(.7); transition: opacity .3s ease, transform .3s ease; } /* the line runs from the first dot's centre to the last one's; the darker part ends at the current stop */ .jd-timeline::before, .jd-timeline::after { content: ""; left: calc(50% / var(--jd-timeline-n, 5)); bottom: 5px; /* 6px list padding + half of the dot's 16px box - half of the stroke's 6px box */ transform-origin: left center; } .jd-timeline::before { right: calc(50% / var(--jd-timeline-n, 5)); background: var(--jd-timeline-line); } .jd-timeline::after { width: calc((100% - 100% / var(--jd-timeline-n, 5)) * var(--jd-timeline-at, 0)); background: var(--jd-timeline-done); } .jd-timeline__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 0 2px; color: var(--jd-ink-500); font-family: "Baloo 2", var(--jd-font-body); font-size: 13px; line-height: 1.2; letter-spacing: .12em; text-align: center; transition: color .3s ease; } .jd-timeline__step.is-done { color: var(--jd-ink-900); } .jd-timeline__step.is-now { color: var(--jd-ink-900); font-weight: 600; } .jd-timeline__state { /* spoken state (done / current / upcoming), not shown */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .jd-timeline__dot::before { background: var(--jd-timeline-bg) center / 8px 8px no-repeat; } .jd-timeline__step:not(.is-done):not(.is-now) .jd-timeline__dot::before { border-style: dashed; } .jd-timeline__step.is-done .jd-timeline__dot::before { border-color: var(--jd-timeline-done); background-image: var(--jd-timeline-tick); } .jd-timeline__step.is-now .jd-timeline__dot::before { width: 16px; height: 16px; border-color: var(--jd-timeline-gold); background-color: var(--jd-timeline-butter); } .jd-timeline__step.is-now .jd-timeline__dot::after { opacity: 1; transform: rotate(-14deg); } /* entrance, once: the line is drawn from the left, then the stops appear one after another */ .jd-timeline.is-ready:not(.is-in)::before, .jd-timeline.is-ready:not(.is-in)::after { transform: scaleX(0); } .jd-timeline.is-ready:not(.is-in) .jd-timeline__step { opacity: 0; } .jd-timeline.is-ready.is-in::before, .jd-timeline.is-ready.is-in::after { transform: none; transition: transform .8s cubic-bezier(.4, 0, .2, 1); } .jd-timeline.is-ready.is-in .jd-timeline__step { opacity: 1; transition: opacity .45s ease calc(.55s + var(--i, 0) * .12s), color .3s ease; } @media (max-width: 767.98px) { .jd-timeline__step { gap: 14px; padding-inline: 0; font-size: 12px; letter-spacing: .06em; } } @media (prefers-reduced-motion: reduce) { .jd-timeline *, .jd-timeline *::before, .jd-timeline *::after, .jd-timeline::before, .jd-timeline::after { transition: none; animation: none; } .jd-timeline.is-ready:not(.is-in)::before, .jd-timeline.is-ready:not(.is-in)::after { transform: none; } .jd-timeline.is-ready:not(.is-in) .jd-timeline__step { opacity: 1; } }