/* Process timeline — SINGLE SOURCE. tools/build-process-timeline.py writes this file into of every consumer and each timeline into its host section (process-timeline.json). Two layouts: rail — six numbered nodes on one horizontal connector (desktop), 3×2 (tablet), vertical (mobile); optional legend (marker shape + text) and per-step dependency chip. vertical — a compact vertical list beside an optional editorial photograph (two columns on desktop, image after the list on mobile). 2026-09-08 (owner brief): the rail is a milestone rail — 30px ink-ringed markers, a stem from the timing label, one track through every marker's centre, desktop-pointer hover (marker fills, siblings to .72, adjacent segments deepen). Consumers: the visas and Golden Visa sections (process-timeline.json) and the seven emirate setup timelines (build-emirate-setup-timeline.py imports steps_html from build-process-timeline.py) — ONE implementation. Semantic
    ; order is DOM order; connectors and nodes are decorative; markers are two-digit index numbers. No authority marks, no stamps, no document imagery. Dark is the base; light hangs off :root[data-theme="light"]. */ .pt-legend { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--muted); } .pt-legend li { display: inline-flex; align-items: center; gap: 8px; } .pt-mark { width: 12px; height: 12px; border: 1.5px solid var(--text); border-radius: 50%; flex: 0 0 auto; } .pt-steps { list-style: none; margin: 0; padding: 0; position: relative; } .pt-step { position: relative; min-width: 0; } /* milestone marker (2026-09-08, owner brief): 30px circle, 1px ink ring on the section ground, two-digit mono index inside */ .pt-node { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--text); background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; font-weight: 500; position: relative; z-index: 1; transition: background-color 200ms ease-out, color 200ms ease-out; } .pt-step[data-kind="company"] .pt-node { background: var(--text); color: var(--bg); } .pt-step[data-kind="route"] .pt-node, .pt-step[data-kind="appointment"] .pt-node { border-radius: 8px; } .pt-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--muted); } .pt-icon svg { width: 18px; height: 18px; } .pt-step h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text); line-height: 1.3; } .pt-step h3 small { font-weight: 400; color: var(--muted); } .pt-step p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .pt-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--muted); } .pt-chip .pt-mark { width: 9px; height: 9px; } .pt-caveat { margin: 22px 0 0; max-width: 78ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); } /* shared primitive additions (2026-09-07, owner): five-stage rails (the emirate setup timelines), the optional timing label above a stage title, and one small supporting photograph beside the heading/lede row of a rail timeline */ @media (min-width: 1101px) { .pt-steps--rail[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pt-steps--rail[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* desktop only — the shared 3×2 (≤1100px) and vertical (≤640px) reflows below apply to every count */ .pt-when { margin: 0 0 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.4; } /* the stage's time label: quiet, above the marker on a rail */ /* rail — the milestone rail (2026-09-08, owner brief): timing label → 10px stem → 30px marker on ONE track drawn from the first marker's centre to the last's (per-step segments, so the segments beside a hovered marker can deepen) → title → detail */ .pt-steps--rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 18px; --pt-when-h: 0px; --pt-track: color-mix(in srgb, var(--text) 30%, transparent); --pt-track-hi: color-mix(in srgb, var(--text) 55%, transparent); --pt-stem: color-mix(in srgb, var(--text) 26%, transparent); } .pt-steps--rail[data-timed] { --pt-when-h: 26px; } /* 16px timing line + the 10px stem */ .pt-steps--rail .pt-step { display: flex; flex-direction: column; gap: 0; padding-right: 6px; transition: opacity 200ms ease-out; } .pt-steps--rail .pt-when { height: 16px; line-height: 16px; margin: 0; } /* one fixed line so every marker sits on the track whatever the label */ .pt-steps--rail .pt-head { display: flex; align-items: center; gap: 8px; position: relative; margin-top: 10px; } .pt-steps--rail[data-timed] .pt-head::before { content: ""; position: absolute; left: 15px; top: -10px; width: 1px; height: 10px; background: var(--pt-stem); } /* the stem from the timing label to its marker */ .pt-steps--rail .pt-step::after { content: ""; position: absolute; left: 15px; right: -18px; top: calc(var(--pt-when-h) + 15px); height: 1px; background: linear-gradient(90deg, var(--pt-track), color-mix(in srgb, var(--text) 34%, transparent)); transition: background-color 200ms ease-out; } /* this marker's centre → the next marker's centre (the 18px gap included) */ .pt-steps--rail .pt-step:last-child::after { content: none; } .pt-steps--rail .pt-body { margin-top: 14px; } @media (hover: hover) and (pointer: fine) { .pt-steps--rail:hover .pt-step { opacity: .72; } .pt-steps--rail .pt-step:hover { opacity: 1; } .pt-steps--rail .pt-step:hover .pt-node { background: var(--text); color: var(--bg); } .pt-steps--rail .pt-step:hover::after, .pt-steps--rail .pt-step:has(+ .pt-step:hover)::after { background: var(--pt-track-hi); } } @media (max-width: 1100px) { .pt-steps--rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } .pt-steps--rail::before { content: none; } .pt-steps--rail .pt-step::after { content: none; } /* 3 × 2: no track — a row-to-row connector would run through the descriptions (2026-09-08); the stem and marker carry the sequence */ .pt-steps--rail .pt-step::before { content: none; } } @media (max-width: 640px) { .pt-steps--rail { grid-template-columns: 1fr; gap: 0; } .pt-steps--rail .pt-step { padding: 0 0 22px 46px; } .pt-steps--rail .pt-step::before { content: ""; left: 15px; top: 0; bottom: 0; } .pt-steps--rail .pt-step:last-child::before { content: none; } .pt-steps--rail .pt-head { position: absolute; left: 0; top: var(--pt-when-h); margin-top: 0; } /* timing stays above its own circle; the vertical track runs through the circle */ .pt-steps--rail[data-timed] .pt-head::before { content: none; } .pt-steps--rail .pt-body { margin-top: 0; } .pt-steps--rail .pt-step::before { top: 0; } .pt-steps--rail .pt-head .pt-icon { display: none; } .pt-steps--rail .pt-step h3 { padding-top: 6px; } } /* vertical + media */ .pt-split { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 48px; align-items: start; } .pt-steps--vertical { display: grid; gap: 0; } .pt-steps--vertical::before { content: ""; position: absolute; left: 15px; top: 15px; bottom: 15px; width: 1px; background: color-mix(in srgb, var(--text) 30%, transparent); } .pt-steps--vertical .pt-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding: 10px 0 14px; align-items: start; } .pt-steps--vertical .pt-step + .pt-step { border-top: 1px solid var(--line-soft); } .pt-steps--vertical .pt-step h3 { padding-top: 6px; } .pt-media { margin: 0; position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); aspect-ratio: 4 / 5; align-self: start; } .pt-media-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pt-pos, center center); filter: saturate(0.66) contrast(0.92) brightness(0.74); } :root[data-theme="light"] .pt-media-img { filter: saturate(0.80) contrast(0.94) brightness(1.01); } @media (max-width: 900px) { .pt-split { grid-template-columns: 1fr; gap: 28px; } .pt-media { aspect-ratio: 16 / 10; } } @media (prefers-reduced-motion: reduce) { .pt-step, .pt-node, .pt-steps--rail .pt-step::after { transition: none; } } /* EmirateSetupTimeline — section shell only. tools/build-emirate-setup-timeline.py writes this after the shared process-timeline rules inside the "GENERATED emirate-setup-timeline" region. Since 2026-09-07 the stages render through the shared numbered rail (pt-steps / pt-step / pt-node / pt-when — _shared/process-timeline.css); nothing about markers, connector or stage type lives here. Left heading + lede as before. Tokens only. */ .dub-timeline { padding:100px 0;} .dub-timeline-head { max-width:640px; margin-bottom:48px; } .dub-timeline-head h2 { font-size:clamp(28px,3.2vw,40px); line-height:1.14; letter-spacing:-.02em; font-weight:400; margin:0 0 12px; color:var(--text); } .dub-timeline-head p { font-size:15px; color:var(--muted); line-height:1.55; margin:0; }