/* ============================================================================ MOEDATECH ยท WALKTHROUGH PLAYLIST walkthrough.css 2026-09-14 One template for both audiences (suppliers, contractors) and both languages. The page is a video course: a playlist of short steps and one player. English playlist at the START (left), player at the END (right) Arabic the same markup with dir="rtl" -> playlist right, player left Everything is written with logical properties, so there is not one RTL override for layout. Tokens fall back to the site's own values so the file also works on a page that does not load v4.css. ========================================================================= */ /* ---- the no-JS fallback, and why it is hidden ------------------------------ The embed ships a plain

+
    of the steps inside .wt-fallback, and walkthrough.js replaces the whole section with the player. The script is deferred, so on a cold load the browser paints that bare list FIRST and the page reads as broken for a moment - Hisham, 2026-09-17: "when I open the page it look like this for maximum 1 second". So the list is hidden the instant we know a script will replace it. The flag is Webflow's own `w-mod-js`, which an inline script in the HEAD puts on - so it is already set by the time this section is parsed. A class the walkthrough script set itself would land at the same moment as the player and save nothing. Script off: no class, the list shows exactly as it does today. The built player carries the same single

    , so nothing is lost to a crawler that runs JS, and the text stays in the DOM for one that does not. run() marks a section [data-wt-failed] when build() throws, which puts the list back - the one failure mode where this rule must get out of the way. */ .wt-fallback { max-width: 72ch; margin-inline: auto; padding: var(--wt-gut); } .wt-fallback ol { line-height: 1.9; } html.w-mod-js [data-wt] .wt-fallback { display: none; } html.w-mod-js [data-wt-failed] .wt-fallback { display: block; } .wt { --wt-bg: var(--bg, #f3efea); --wt-card: var(--bg-raised, #ffffff); --wt-sunk: var(--bg-sunk, #e8dfd5); --wt-ink: var(--ink, #000000); --wt-soft: var(--ink-soft, #323232); --wt-mut: var(--ink-muted, #4e4e4e); --wt-line: var(--hairline, #ddd3c7); --wt-dark: var(--bg-dark, #101112); --wt-acc: #e65d00; --wt-acc-d: #c04d00; /* white on this: 4.9:1 */ --wt-ok: #1f8f4e; --wt-r: var(--radius-card, 26px); --wt-ease: var(--ease-out, cubic-bezier(.23, 1, .32, 1)); --wt-gut: clamp(18px, 4vw, 56px); --wt-max: 1320px; --wt-list: clamp(320px, 30vw, 400px); /* playlist column */ --wt-top: 96px; /* clears the fixed site header */ color: var(--wt-ink); font-family: "Inter", var(--font, ui-sans-serif), system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } .wt[dir="rtl"], [lang="ar"] .wt { font-family: "Al Qassam", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; } .wt *, .wt *::before, .wt *::after { box-sizing: border-box; } .wt button { font: inherit; color: inherit; } .wt-in { max-width: var(--wt-max); margin-inline: auto; padding-inline: var(--wt-gut); } /* ---- head --------------------------------------------------------------- */ .wt-head { padding-block: clamp(28px, 3.4vw, 52px) clamp(18px, 2vw, 28px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 40px; } .wt-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--wt-acc-d); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .wt-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wt-acc); } [dir="rtl"] .wt-kicker, [lang="ar"] .wt-kicker { letter-spacing: 0; text-transform: none; } .wt-h1 { margin: 0; font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; white-space: nowrap; /* company rule: no wrapping */ } .wt-sub { margin: 10px 0 0; max-width: none; color: var(--wt-soft); font-size: clamp(1rem, 1.25vw, 1.2rem); white-space: nowrap; } @media (max-width: 899px) { .wt-head { grid-template-columns: 1fr; } .wt-h1, .wt-sub { white-space: normal; text-wrap: balance; } } /* audience switch: two links styled as a segmented control */ .wt-aud { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--wt-sunk); justify-self: end; } .wt-aud a { padding: 10px 18px; border-radius: 999px; color: var(--wt-soft); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: background .25s var(--wt-ease), color .25s var(--wt-ease); } .wt-aud a:hover { color: var(--wt-ink); } .wt-aud a[aria-current="page"] { background: var(--wt-ink); color: #fff; } @media (max-width: 899px) { .wt-aud { justify-self: start; } } /* ---- the two columns ---------------------------------------------------- */ .wt-body { display: grid; grid-template-columns: var(--wt-list) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 32px); align-items: start; padding-bottom: clamp(56px, 7vw, 110px); } @media (max-width: 899px) { .wt-body { grid-template-columns: 1fr; } .wt-stage { order: -1; } /* player first on a phone */ } /* ---- playlist ----------------------------------------------------------- */ .wt-list { position: sticky; top: var(--wt-top); max-height: calc(100vh - var(--wt-top) - 24px); display: flex; flex-direction: column; background: var(--wt-card); border: 1px solid var(--wt-line); border-radius: var(--wt-r); overflow: hidden; } @media (max-width: 899px) { .wt-list { position: static; max-height: none; } } .wt-list-top { padding: 20px 22px 16px; border-bottom: 1px solid var(--wt-line); } .wt-progress-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--wt-mut); } .wt-progress-row b { color: var(--wt-ink); font-weight: 600; } .wt-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: var(--wt-sunk); overflow: hidden; } .wt-bar i { display: block; height: 100%; width: 0; background: var(--wt-acc); border-radius: inherit; transition: width .6s var(--wt-ease); } .wt-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 14px; scrollbar-width: thin; } .wt-group + .wt-group { margin-top: 6px; } .wt-group-h { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 12px 8px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wt-mut); } [dir="rtl"] .wt-group-h { letter-spacing: 0; text-transform: none; font-size: .85rem; } .wt-group-h span { font-weight: 500; letter-spacing: 0; } .wt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .wt-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 16px; background: transparent; text-align: start; cursor: pointer; transition: background .2s var(--wt-ease), transform .2s var(--wt-ease); } .wt-item:hover { background: var(--wt-bg); } .wt-item:active { transform: scale(.985); } .wt-item:focus-visible { outline: 2px solid var(--wt-ink); outline-offset: 1px; } .wt-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--wt-sunk); color: var(--wt-soft); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .25s var(--wt-ease), color .25s var(--wt-ease); } .wt-num svg { width: 16px; height: 16px; display: none; } .wt-txt { min-width: 0; } .wt-txt b { display: block; font-size: .98rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wt-txt small { display: block; margin-top: 3px; font-size: .8rem; color: var(--wt-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wt-tag { font-size: .72rem; font-weight: 600; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: var(--wt-sunk); color: var(--wt-mut); } .wt-tag.is-soon { background: transparent; border: 1px dashed var(--wt-line); } /* watched */ .wt-item.is-done .wt-num { background: rgba(31, 143, 78, .12); color: var(--wt-ok); } .wt-item.is-done .wt-num span { display: none; } .wt-item.is-done .wt-num svg { display: block; } /* now playing */ .wt-item[aria-current="true"] { background: var(--wt-ink); color: #fff; } .wt-item[aria-current="true"] .wt-num { background: var(--wt-acc); color: #fff; } .wt-item[aria-current="true"] .wt-txt small { color: rgba(255,255,255,.66); } .wt-item[aria-current="true"] .wt-tag { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; } /* ---- stage: player + details ------------------------------------------- */ .wt-stage { min-width: 0; } .wt-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--wt-r); overflow: hidden; background: var(--wt-dark); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .45); isolation: isolate; } .wt-player iframe, .wt-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; } /* the facade: poster + one big play button. Nothing heavy loads until asked. */ .wt-facade { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: var(--wt-dark) center / cover no-repeat; display: grid; place-items: center; } .wt-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.62)); } .wt-play { position: relative; z-index: 1; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #000; box-shadow: 0 12px 40px rgba(0,0,0,.35); transition: transform .35s var(--wt-ease), background .35s var(--wt-ease); } /* a play triangle is never mirrored, not even in Arabic: it means "play", not "forward in reading order". Physical margin keeps it optically centred. */ .wt-play svg { width: 34%; height: 34%; margin-left: 6%; } .wt-facade:hover .wt-play { transform: scale(1.06); background: #fff; } .wt-facade:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } .wt-cap { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: clamp(14px, 2vw, 26px); color: #fff; text-align: start; } .wt-cap b { font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 600; white-space: nowrap; } .wt-cap span { font-size: .85rem; opacity: .8; white-space: nowrap; } /* a step that has no video yet */ .wt-soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 120%, rgba(230,93,0,.28), transparent 60%), var(--wt-dark); } .wt-soon-n { font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; color: rgba(255,255,255,.14); font-variant-numeric: tabular-nums; } .wt-soon b { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 600; white-space: nowrap; } .wt-soon span { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font-size: .82rem; color: rgba(255,255,255,.78); } /* placeholder badge, so nobody mistakes a stand-in clip for the real video */ .wt-badge { position: absolute; z-index: 2; top: 14px; inset-inline-start: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* details under the player */ .wt-info { margin-top: clamp(18px, 2vw, 26px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: start; } @media (max-width: 699px) { .wt-info { grid-template-columns: 1fr; } } .wt-step { margin: 0 0 6px; font-size: .8rem; font-weight: 600; color: var(--wt-acc-d); letter-spacing: .08em; text-transform: uppercase; } [dir="rtl"] .wt-step { letter-spacing: 0; text-transform: none; } .wt-title { margin: 0; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; white-space: nowrap; } @media (max-width: 699px) { .wt-title { white-space: normal; text-wrap: balance; } } .wt-desc { margin: 10px 0 0; max-width: 62ch; color: var(--wt-soft); font-size: 1.02rem; line-height: 1.6; } .wt-nav { display: flex; gap: 10px; } .wt-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--wt-line); background: var(--wt-card); cursor: pointer; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: background .2s var(--wt-ease), border-color .2s var(--wt-ease), transform .2s var(--wt-ease); } .wt-btn:hover { border-color: var(--wt-ink); } .wt-btn:active { transform: scale(.97); } .wt-btn[disabled] { opacity: .4; pointer-events: none; } .wt-btn.is-primary { background: var(--wt-ink); border-color: var(--wt-ink); color: #fff; } .wt-btn svg { width: 16px; height: 16px; } [dir="rtl"] .wt-btn svg { transform: scaleX(-1); } /* what the step covers - short, scannable, and readable by search engines */ .wt-points { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .wt-points li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--wt-card); border: 1px solid var(--wt-line); font-size: .95rem; line-height: 1.45; color: var(--wt-soft); } .wt-points li::before { content: counter(wtp); counter-increment: wtp; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--wt-sunk); color: var(--wt-ink); font-size: .75rem; font-weight: 600; } .wt-points { counter-reset: wtp; } /* the display:grid above is an author rule and beats the browser's own [hidden]{display:none}, so a step with no points needs this said out loud */ .wt-points[hidden] { display: none; } /* help strip */ .wt-help { grid-column: 1 / -1; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: var(--wt-sunk); } .wt-help p { margin: 0; color: var(--wt-soft); } .wt-help a { color: var(--wt-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; } /* the swap between steps: a short cross-fade on the stage only */ .wt-stage.is-swapping .wt-player, .wt-stage.is-swapping .wt-info { opacity: 0; transform: translateY(6px); } .wt-player, .wt-info { transition: opacity .28s var(--wt-ease), transform .28s var(--wt-ease); } @media (prefers-reduced-motion: reduce) { .wt *, .wt *::before, .wt *::after { transition: none !important; } } /* ============================================================================= HARDENING against the site skin (measured on staging 2026-09-14) The v4 skin styles every p (16px, #323232, 400, 1.6), every h2 (36.8px, 500, tight tracking) and every small (14px) on the page, and it won: group names rendered as 37px headings and the orange labels went grey. These repeat the intended values with enough weight to win, scoped to .wt only. ========================================================================== */ html body .wt .wt-kicker { font-size: .78rem !important; font-weight: 600 !important; color: var(--wt-acc-d) !important; letter-spacing: .14em !important; line-height: 1.2 !important; margin: 0 0 14px !important; } html body .wt .wt-h1 { font-size: clamp(1.9rem, 3.5vw, 3rem) !important; font-weight: 500 !important; color: var(--wt-ink) !important; letter-spacing: -.035em !important; line-height: 1.04 !important; margin: 0 !important; } html body .wt .wt-sub { font-size: clamp(1rem, 1.25vw, 1.2rem) !important; font-weight: 400 !important; color: var(--wt-soft) !important; line-height: 1.45 !important; margin: 10px 0 0 !important; letter-spacing: normal !important; } html body .wt .wt-group-h { font-size: .72rem !important; font-weight: 600 !important; color: var(--wt-mut) !important; letter-spacing: .12em !important; line-height: 1.2 !important; margin: 0 !important; padding: 14px 12px 8px !important; text-transform: uppercase !important; } html body .wt .wt-group-h span { font-size: inherit !important; font-weight: 500 !important; letter-spacing: 0 !important; } html body .wt .wt-txt b { font-size: .98rem !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: normal !important; } html body .wt .wt-txt small{ font-size: .8rem !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: normal !important; color: var(--wt-mut) !important; } html body .wt .wt-item[aria-current="true"] .wt-txt small { color: rgba(255,255,255,.66) !important; } html body .wt .wt-step { font-size: .8rem !important; font-weight: 600 !important; color: var(--wt-acc-d) !important; letter-spacing: .08em !important; line-height: 1.3 !important; margin: 0 0 6px !important; } html body .wt .wt-title { font-size: clamp(1.4rem, 2.3vw, 2rem) !important; font-weight: 500 !important; color: var(--wt-ink) !important; letter-spacing: -.025em !important; line-height: 1.15 !important; margin: 0 !important; } html body .wt .wt-desc { font-size: 1.02rem !important; font-weight: 400 !important; color: var(--wt-soft) !important; line-height: 1.6 !important; margin: 10px 0 0 !important; letter-spacing: normal !important; } html body .wt .wt-points li{ font-size: .95rem !important; line-height: 1.45 !important; color: var(--wt-soft) !important; letter-spacing: normal !important; } html body .wt .wt-help p { font-size: 1rem !important; color: var(--wt-soft) !important; margin: 0 !important; line-height: 1.4 !important; } html body .wt .wt-soon b { color: #fff !important; } html body .wt .wt-cap b { color: #fff !important; } html body .wt .wt-progress-row, html body .wt .wt-progress-row b { font-size: .9rem !important; letter-spacing: normal !important; } html body .wt[dir="rtl"] .wt-kicker, html body .wt[dir="rtl"] .wt-step, html body .wt[dir="rtl"] .wt-group-h { letter-spacing: 0 !important; text-transform: none !important; } html body .wt[dir="rtl"] .wt-group-h { font-size: .85rem !important; } html body .wt ol, html body .wt ul { margin-block: 0; } html body .wt .wt-points { margin: 4px 0 0 !important; padding: 0 !important; } html body .wt .wt-items { margin: 0 !important; padding: 0 !important; } @media (max-width: 699px) { html body .wt .wt-title { white-space: normal; } } /* no text wrapping (company rule): every label in the playlist and the stage head stays on one line; long step names end in an ellipsis instead */ html body .wt .wt-group-h, html body .wt .wt-step, html body .wt .wt-kicker, html body .wt .wt-progress-row, html body .wt .wt-tag, html body .wt .wt-btn, html body .wt .wt-aud a, html body .wt .wt-help a { white-space: nowrap !important; } html body .wt .wt-group-h { overflow: hidden; } /* ============================================================================= PLAYLIST SCROLLING - 2026-09-14 The browser's default bar (grey track, arrow buttons) looked like a system window inside the card. Replaced with a slim rounded thumb that stays faint until the playlist is hovered, and soft fades at the edges that say "there is more" without any chrome at all. Chrome/Edge: ::-webkit-scrollbar is ignored whenever the standard scrollbar-width / scrollbar-color are set, so those are reset to auto here and the standard pair is used only where the WebKit pseudo does not exist (Firefox). ========================================================================== */ html body .wt .wt-scroll { scrollbar-width: auto; scrollbar-color: auto; } html body .wt .wt-scroll::-webkit-scrollbar { width: 10px; } html body .wt .wt-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; } html body .wt .wt-scroll::-webkit-scrollbar-track { background: transparent; margin-block: 10px; } html body .wt .wt-scroll::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .10); border: 3px solid transparent; /* makes a 4px pill inside a 10px gutter */ background-clip: padding-box; border-radius: 999px; min-height: 48px; } html body .wt .wt-list:hover .wt-scroll::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .24); } html body .wt .wt-scroll::-webkit-scrollbar-thumb:active { background-color: rgba(0, 0, 0, .42); } @supports not selector(::-webkit-scrollbar) { html body .wt .wt-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; } } /* edge fades, switched by walkthrough.js as the list scrolls */ html body .wt .wt-scroll { --wt-fade-top: 0px; --wt-fade-bot: 28px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wt-fade-top), #000 calc(100% - var(--wt-fade-bot)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wt-fade-top), #000 calc(100% - var(--wt-fade-bot)), transparent 100%); } html body .wt .wt-scroll.is-scrolled { --wt-fade-top: 22px; } html body .wt .wt-scroll.is-end { --wt-fade-bot: 0px; } @media (max-width: 899px) { /* on a phone the playlist is not a scroll box at all */ html body .wt .wt-scroll { -webkit-mask-image: none; mask-image: none; } } /* ============================================================================= FIRST SCREEN - 2026-09-14 "Keep the page true to the first view: all content should appear without having to scroll" + "less is more". walkthrough.js adds .is-fit on desktop (>= 900 px wide and >= 560 px tall), sets --wt-avail to the height left under the site header, and sizes the player column so a 16:9 video, its title and its buttons fit exactly. The playlist scrolls inside its own panel. ========================================================================== */ html body .wt .wt-help { grid-column: auto; margin: 10px 0 0 !important; padding: 0; border-radius: 0; background: none; display: block; font-size: .95rem !important; color: var(--wt-mut) !important; line-height: 1.4 !important; } html body .wt .wt-help a { color: var(--wt-ink); font-weight: 600; margin-inline-start: 4px; } html body .wt.is-fit .wt-in { height: var(--wt-avail); display: flex; flex-direction: column; padding-bottom: clamp(16px, 2.6vh, 32px); } html body .wt.is-fit .wt-head { flex: none; align-items: center; padding-block: clamp(10px, 2.4vh, 30px) clamp(12px, 2.2vh, 26px); } html body .wt.is-fit .wt-h1 { font-size: clamp(1.7rem, min(3.2vw, 5.2vh), 2.75rem) !important; } html body .wt.is-fit .wt-body { flex: 1; min-height: 0; padding-bottom: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; justify-content: center; } html body .wt.is-fit .wt-list { position: static; max-height: none; height: 100%; min-height: 0; } html body .wt.is-fit .wt-scroll { flex: 1; min-height: 0; } html body .wt.is-fit .wt-stage { min-height: 0; align-self: start; } html body .wt.is-fit .wt-info { margin-top: clamp(12px, 2vh, 22px); } html body .wt.is-fit .wt-desc { margin-top: 6px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html body .wt.is-fit .wt-list-top { padding: 16px 20px 14px; } html body .wt.is-fit.is-short .wt-in { height: auto; } html body .wt.is-fit.is-short .wt-body { flex: none; } html body .wt.is-fit .wt-info { row-gap: 4px; } .wt-cap { justify-content: flex-end; }