/* ============================================================ Workshop site — layered on tokens.css Borrows G&K visual language: white canvas, hairlines, sparse blue / cyan / teal accents, Roboto Light for display. ============================================================ */ /* ---------- Bilingual visibility ---------- Both languages live in the DOM. CSS hides the inactive one based on . Switching is one attribute change. */ html[lang="en"] [lang="ar"] { display: none; } html[lang="ar"] [lang="en"] { display: none; } /* Arabic typography & RTL polish */ html[lang="ar"] body { font-family: var(--font-arabic); line-height: var(--lh-relaxed); } html[lang="ar"] .ws-mono, html[lang="ar"] .ws-code, html[lang="ar"] code, html[lang="ar"] pre { font-family: var(--font-mono); direction: ltr; } /* Hero italic em is a Latin-style flourish; keep it subtle in AR */ html[lang="ar"] .ws-hero-title em { font-style: normal; } /* ---------- Page shell ---------- */ .ws-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } body { background: var(--bg-1); color: var(--fg-1); } /* Skip link */ .ws-skip { position: absolute; left: -9999px; top: 0; background: var(--ink-900); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 500; font-size: 14px; } .ws-skip:focus { left: 0; } /* ---------- Top language bar ---------- Slim band above the header. Both languages visible at all times so trainees and instructor can switch with one click, no menus. */ .ws-langbar { background: var(--ink-900); color: var(--ink-300); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ws-langbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 36px; } .ws-langbar-label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #6E7787; } .ws-langbar-options { display: inline-flex; align-items: center; gap: 8px; } .ws-langbar-sep { color: rgba(255, 255, 255, 0.18); } .ws-langbar-opt { background: transparent; border: 0; padding: 4px 10px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-300); cursor: pointer; border-radius: var(--r-sm); transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); line-height: 1.2; } .ws-langbar-opt:hover { color: #fff; } .ws-langbar-opt.is-active { color: #fff; background: rgba(255, 255, 255, 0.08); } .ws-langbar-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Native Arabic glyphs read regardless of the current page lang */ .ws-langbar-opt[data-lang="ar"] { font-family: var(--font-arabic), var(--font-sans); } html[lang="ar"] .ws-langbar-opt[data-lang="ar"] { font-family: var(--font-sans); } /* In RTL, keep the bar reading right-to-left naturally */ html[lang="ar"] .ws-langbar-inner { justify-content: flex-end; } /* ---------- Header ---------- */ .ws-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .ws-header-inner { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Logo lockup: DMA + G&K side by side, hairline between */ .ws-logo-lockup { display: inline-flex; align-items: center; gap: 16px; height: 56px; text-decoration: none; } .ws-logo { display: block; height: 48px; width: auto; } .ws-logo-dma { height: 50px; } .ws-logo-gk { height: 44px; } .ws-logo-sep { width: 1px; height: 36px; background: var(--line-strong); } .ws-nav { display: flex; gap: 24px; align-items: center; flex: 1; justify-content: center; } .ws-nav a { font-size: 14px; font-weight: 500; color: var(--fg-1); text-decoration: none; padding: 6px 2px; transition: color var(--t-fast) var(--ease-out); } .ws-nav a:hover { color: var(--blue); } .ws-actions { display: flex; align-items: center; gap: 16px; } .ws-toggle-group { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .ws-toggle-group .ws-dot { color: var(--ink-300); } /* ---------- Buttons ---------- */ .ws-btn { font-family: inherit; font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; line-height: 1; letter-spacing: 0; white-space: nowrap; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; } .ws-btn-primary { background: var(--blue); color: #fff; } .ws-btn-primary:hover { background: var(--blue-700); } .ws-btn-primary:active { background: var(--blue-800); } .ws-btn-ghost { background: transparent; color: var(--blue); border-color: var(--border-strong); } .ws-btn-ghost:hover { background: var(--blue-50); border-color: var(--blue); } .ws-btn-text { background: transparent; color: var(--blue); padding: 6px 4px; } .ws-btn-text:hover { color: var(--blue-700); } .ws-btn-lg { padding: 14px 24px; font-size: 15px; } /* Language button reads Arabic naturally regardless of page lang */ .ws-lang { font-family: var(--font-arabic), var(--font-sans); } html[lang="ar"] .ws-lang { font-family: var(--font-sans); } /* ---------- Common primitives ---------- */ .ws-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; display: block; } .ws-eyebrow-teal { color: var(--teal-700); } /* Legacy alias — older HTML used ws-eyebrow-cyan; keep mapped to teal */ .ws-eyebrow-cyan { color: var(--teal-700); } .ws-rule { border: 0; border-top: 1px solid var(--line-strong); margin: 0; } .ws-lede { font-size: 18px; line-height: 1.6; color: var(--fg-2); margin: 0 0 32px; text-wrap: pretty; } .ws-section-title { font-weight: 300; font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 12px; } .ws-h4 { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-900); margin: 36px 0 14px; padding-top: 4px; } /* ---------- Hero ---------- */ .ws-hero { padding: 80px 0 64px; background: #fff; } .ws-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: center; } .ws-hero-copy { padding-inline-end: 16px; } .ws-hero-title { font-weight: 300; font-size: 64px; line-height: 1.04; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 28px; max-width: 18ch; text-wrap: balance; } .ws-hero-title em { font-style: italic; color: var(--blue); font-weight: 400; } html[lang="ar"] .ws-hero-title em { font-style: normal; font-weight: 400; } .ws-hero-lede { font-size: 18px; line-height: 1.65; color: var(--fg-2); max-width: 58ch; margin: 0 0 32px; text-wrap: pretty; } .ws-hero-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } /* Hero TOC card (replaces founders photo) */ .ws-hero-toc { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px 32px 28px; position: relative; } .ws-toc-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 20px; } .ws-toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; } .ws-toc-list li { border-top: 1px solid var(--border); } .ws-toc-list li:first-child { border-top: 0; } .ws-toc-list a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; text-decoration: none; color: var(--ink-900); transition: color var(--t-fast) var(--ease-out); } .ws-toc-list a:hover { color: var(--blue); } .ws-toc-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--blue); min-width: 28px; flex-shrink: 0; } .ws-toc-title { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.35; flex: 1; } .ws-toc-units { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; flex-shrink: 0; } /* TOC grouped by Block — module heading + nested topic list */ .ws-toc-block + .ws-toc-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .ws-toc-block-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .ws-toc-block-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; background: var(--blue); border-radius: var(--r-sm); padding: 4px 9px; letter-spacing: 0.02em; line-height: 1; } .ws-toc-block-title { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; } .ws-toc-block-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.02em; } .ws-toc-block .ws-toc-list { margin-left: 0; } .ws-toc-block .ws-toc-list a { padding: 10px 0; } .ws-toc-block .ws-toc-num { font-size: 12px; letter-spacing: 0.04em; min-width: 70px; } /* ---------- Unit jump bar inside each section ---------- Horizontal pill row so the instructor can say "Open Unit 3.5" and the trainees click straight to it. */ .ws-unit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 32px; padding: 16px 20px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); } .ws-unit-bar-label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); margin-inline-end: 6px; } .ws-unit-pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-700); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 6px 12px; text-decoration: none; letter-spacing: 0.02em; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .ws-unit-pill:hover { background: var(--blue); color: #fff; border-color: var(--blue); } /* Case-study pill — visually distinct from the regular numbered units */ .ws-unit-pill-case { color: var(--teal-700); border-color: var(--teal-700); background: var(--teal-50); } .ws-unit-pill-case:hover { background: var(--teal-700); color: #fff; border-color: var(--teal-700); } /* ---------- Stats ---------- */ .ws-stats { padding: 56px 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ws-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .ws-stat { padding: 0 28px; border-inline-start: 1px solid var(--border-strong); } .ws-stat:first-child { border-inline-start: 0; padding-inline-start: 0; } .ws-stat-num { font-size: 56px; font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: var(--ink-900); margin-bottom: 10px; display: flex; align-items: baseline; gap: 6px; } /* Bilingual stat — EN and ع at the same visual size */ .ws-stat-bilingual { align-items: center; gap: 10px; font-size: 52px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; } .ws-bi-en { color: var(--cyan); font-size: 1em; line-height: 1; } .ws-bi-ar { color: var(--teal-700); font-family: var(--font-arabic), var(--font-sans); font-size: 1em; line-height: 1; } .ws-bi-sep { color: var(--ink-300); font-size: 0.9em; font-weight: 300; line-height: 1; } .ws-stat-unit { font-size: 24px; color: var(--fg-2); font-weight: 400; } .ws-stat-label { font-size: 13px; color: var(--fg-2); line-height: 1.5; max-width: 24ch; } /* ============================================================ BLOCK BANNERS (module dividers between section pairs) ============================================================ */ .ws-block-banner { padding: 80px 0 48px; background: #fff; border-top: 1px solid var(--border); scroll-margin-top: 100px; } .ws-block-banner-teal { background: var(--bg-2); } .ws-block-banner-teal .ws-block-num { color: var(--teal-700); } .ws-block-banner-teal .ws-block-topic { background: #fff; } .ws-block-banner-teal .ws-block-topic-tag { color: var(--teal-700); } .ws-block-banner-teal .ws-block-topic:hover { border-color: var(--teal-700); } .ws-block-banner-inner { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; } .ws-block-num { font-family: var(--font-mono); font-weight: 300; font-size: 96px; line-height: 0.9; letter-spacing: -0.02em; color: var(--blue); padding-top: 4px; min-width: 100px; } /* removed — block II now uses teal */ .ws-block-meta { max-width: 720px; } .ws-block-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px; } .ws-block-title { font-weight: 300; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 18px; } .ws-block-lede { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 0 0 28px; text-wrap: pretty; } .ws-block-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ws-block-topics-3 { grid-template-columns: repeat(3, 1fr); } .ws-block-topic { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } /* removed — block II now uses teal */ .ws-block-topic:hover { border-color: var(--blue); transform: translateY(-1px); } .ws-block-topic-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--blue); letter-spacing: 0.04em; } /* removed — block II now uses teal */ .ws-block-topic-name { font-size: 16px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; } /* ============================================================ AGENDA — covered-row indicators ============================================================ */ .ws-row-covered td { background: color-mix(in srgb, var(--blue-50) 50%, white); } .ws-row-covered td:first-child { position: relative; } .ws-row-covered td:first-child::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); } .ws-row-link { font-weight: 500; color: var(--ink-900); } .ws-row-link:hover { color: var(--blue); } .ws-row-sub { margin-top: 6px; font-size: 13px; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .ws-row-sub a { color: var(--blue); font-weight: 400; } .ws-row-sub a:hover { color: var(--blue-700); } .ws-row-sep { color: var(--ink-300); } .ws-cell-status { white-space: nowrap; font-size: 12px; } .ws-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill); margin-inline-end: 8px; vertical-align: 1px; } .ws-status-covered { background: var(--teal-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-700) 18%, transparent); } .ws-status-pending { background: var(--ink-300); } .ws-status-label { color: var(--ink-700); font-size: 12px; letter-spacing: 0.02em; } /* ============================================================ COLLAPSIBLE SECTIONS ============================================================ */ .ws-section { border-top: 1px solid var(--border); background: #fff; } .ws-section-alt { background: var(--bg-2); } .ws-section[open] + .ws-section, .ws-section + .ws-section { /* hairline divider preserved */ } /* Hide the default disclosure triangle */ .ws-section > summary { list-style: none; cursor: pointer; } .ws-section > summary::-webkit-details-marker { display: none; } .ws-section > summary::marker { content: ""; } .ws-summary { padding: 56px 0 40px; } .ws-summary-inner { display: flex; align-items: flex-start; gap: 28px; } /* Icon sits on the leading edge: left in LTR, right in RTL */ .ws-summary-inner .ws-summary-icon { order: -1; } .ws-summary-inner > div:first-child { flex: 1; } /* + / − indicator */ .ws-summary-icon { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); position: relative; background: #fff; transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .ws-summary-icon::before, .ws-summary-icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink-700); transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out); } .ws-summary-icon::before { width: 14px; height: 1.5px; } .ws-summary-icon::after { width: 1.5px; height: 14px; } .ws-section[open] .ws-summary-icon::after { transform: scaleY(0); } .ws-section > summary:hover .ws-summary-icon { border-color: var(--blue); background: var(--blue-50); } .ws-section > summary:hover .ws-summary-icon::before, .ws-section > summary:hover .ws-summary-icon::after { background: var(--blue); } .ws-section > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; } .ws-section-body { padding: 8px 0 88px; } /* ---------- Slide blocks within a section ---------- */ .ws-prose { display: flex; flex-direction: column; gap: 28px; max-width: 1080px; } .ws-slide { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 40px 32px; box-shadow: var(--shadow-1); position: relative; scroll-margin-top: 100px; } .ws-section-alt .ws-slide { background: #fff; } .ws-slide:target { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50), var(--shadow-2); } /* Unit header — visible "Unit X.Y" chip on every slide so the instructor can say "open Unit 3.5" and trainees scan to find it. */ .ws-unit-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .ws-unit-tag { display: inline-flex; align-items: baseline; gap: 10px; } .ws-unit-label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } .ws-unit-num { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--blue); letter-spacing: 0.02em; line-height: 1; } .ws-slide-title { font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); margin: 0 0 18px; } /* CTA row inside slides — multiple buttons side-by-side */ .ws-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 24px; } /* Placeholder briefing styles for sections that aren't fully written yet */ .ws-slide-pending { border-style: dashed; border-color: var(--border-strong); background: var(--bg-2); } .ws-pending-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-700); background: var(--cyan-50); border: 1px solid var(--cyan-100); border-radius: var(--r-pill); padding: 4px 12px; line-height: 1.4; } /* Resource list — links to external tools, PDFs, etc. */ .ws-resource-list { list-style: none; padding: 0; margin: 8px 0 24px; display: flex; flex-direction: column; gap: 8px; } .ws-resource { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--ink-900); transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .ws-resource:hover { border-color: var(--blue); background: var(--blue-50); transform: translateY(-1px); } .ws-resource-tag { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 4px 10px; border-radius: var(--r-sm); min-width: 48px; text-align: center; } .ws-resource-tag-pdf { color: var(--teal-700); background: var(--teal-50); border-color: var(--teal-100); } .ws-resource-tag-audio { color: var(--ink-900); background: var(--bg-2); border-color: var(--border-strong); } .ws-resource-tag-image { color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); } /* NotebookLM outputs — audio + infographics */ .ws-output-block { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin: 8px 0 18px; } .ws-output-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ws-output-title { font-size: 15px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; } .ws-audio { width: 100%; height: 40px; border-radius: 6px; } .ws-output-caption { margin: 12px 0 0; font-size: 13px; color: var(--fg-2); line-height: 1.55; } .ws-output-caption strong { color: var(--ink-900); font-weight: 500; } .ws-output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 18px; } .ws-output { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin: 0; } .ws-output figcaption { display: contents; } .ws-output-img-link { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .ws-output-img-link:hover { border-color: var(--blue); transform: translateY(-1px); } .ws-output-img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; background: #fff; } @media (max-width: 720px) { .ws-output-grid { grid-template-columns: 1fr; } } .ws-resource-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .ws-resource-title { font-size: 15px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; } .ws-resource-desc { font-size: 13px; color: var(--fg-2); line-height: 1.5; } .ws-resource-arrow { flex-shrink: 0; font-size: 18px; color: var(--ink-300); transition: color var(--t-fast) var(--ease-out); } .ws-resource:hover .ws-resource-arrow { color: var(--blue); } .ws-pending-note { margin: 24px 0 0; padding: 14px 18px; background: #fff; border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-size: 13px; color: var(--fg-2); font-style: italic; } .ws-slide p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 16px; text-wrap: pretty; } .ws-slide p:last-child { margin-bottom: 0; } /* Bullet lists inside slides */ .ws-bullets { list-style: none; padding: 0; margin: 8px 0 18px; } .ws-bullets li { position: relative; padding-inline-start: 22px; padding-block: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-700); } .ws-bullets li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 0.95em; width: 8px; height: 1.5px; background: var(--blue); } /* Quotes / callouts */ .ws-quote { margin: 18px 0; padding: 14px 22px; border-inline-start: 3px solid var(--blue); background: var(--blue-50); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 15px; line-height: 1.6; color: var(--ink-900); } html[lang="ar"] .ws-quote { border-radius: var(--r-md) 0 0 var(--r-md); } .ws-quote-strong { border-color: var(--cyan); background: var(--cyan-50); font-weight: 500; font-size: 17px; } /* ---------- Tables ---------- */ .ws-table { margin: 8px 0 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; } .ws-table table { width: 100%; border-collapse: collapse; font-size: 14px; } .ws-table th, .ws-table td { padding: 12px 18px; text-align: start; vertical-align: top; line-height: 1.55; border-bottom: 1px solid var(--border); } .ws-table thead th { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-500); background: var(--bg-2); border-bottom: 1px solid var(--border-strong); } .ws-table tbody tr:last-child td { border-bottom: 0; } .ws-table tbody tr:hover td { background: color-mix(in srgb, var(--blue-50) 60%, white); } .ws-table td strong { color: var(--ink-900); font-weight: 500; } .ws-row-total td { background: var(--bg-2); border-top: 1px solid var(--border-strong); font-weight: 500; } /* ---------- Persona card emphasis ---------- */ .ws-persona-card .ws-table tbody td:first-child { width: 28%; background: var(--bg-2); border-inline-end: 1px solid var(--border); } /* ============================================================ MESSAGE HOUSE diagram ============================================================ */ .ws-mh { display: grid; gap: 16px; margin: 16px 0 20px; font-size: 14px; } .ws-mh-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px; } .ws-mh-text { font-size: 15px; font-weight: 400; color: var(--ink-900); } .ws-mh-roof, .ws-mh-foundation { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 22px; } .ws-mh-roof { border-top: 3px solid var(--blue); } .ws-mh-foundation { border-bottom: 3px solid var(--ink-700); background: #fff; } .ws-mh-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ws-mh-pillar { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: var(--r-md); padding: 16px 18px; min-height: 90px; } .ws-mh-pillar:nth-child(2) { border-top-color: var(--teal-700); } .ws-mh-pillar:nth-child(3) { border-top-color: var(--blue); } /* ---------- Numbered steps ---------- */ .ws-steps { display: flex; flex-direction: column; gap: 18px; margin: 12px 0 8px; } .ws-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 18px 22px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); } .ws-step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #fff; background: var(--ink-900); border-radius: var(--r-sm); height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; letter-spacing: 0.04em; } .ws-step-title { font-size: 16px; font-weight: 500; color: var(--ink-900); margin-bottom: 4px; } .ws-step p { margin: 0; font-size: 15px; } /* ---------- Two-column block ---------- */ .ws-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 8px 0 12px; } .ws-twocol-h { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* ---------- Vertical flow diagram ---------- */ .ws-flow { margin: 12px 0 6px; display: flex; flex-direction: column; align-items: stretch; gap: 0; } .ws-flow-step { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 20px; font-size: 15px; font-weight: 500; color: var(--ink-900); text-align: center; } .ws-flow-warn { border-color: var(--cyan); background: var(--cyan-50); color: var(--ink-900); } .ws-flow-end { background: var(--blue); color: #fff; border-color: var(--blue); } .ws-flow-arrow { text-align: center; font-size: 16px; color: var(--ink-300); padding: 6px 0; line-height: 1; } /* ---------- Stack list (intelligence layers) ---------- */ .ws-stack { list-style: none; padding: 0; margin: 8px 0 18px; counter-reset: layer; } .ws-stack li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 18px 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; } .ws-stack li:nth-child(1) .ws-stack-num { background: var(--blue); } .ws-stack li:nth-child(2) .ws-stack-num { background: var(--cyan-700); } .ws-stack li:nth-child(3) .ws-stack-num { background: var(--teal-700); } .ws-stack li:nth-child(4) .ws-stack-num { background: var(--ink-700); } .ws-stack li:nth-child(5) .ws-stack-num { background: var(--ink-900); } .ws-stack-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #fff; border-radius: var(--r-sm); height: 28px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; letter-spacing: 0.04em; } .ws-stack-h { font-size: 16px; font-weight: 500; color: var(--ink-900); margin-bottom: 4px; } .ws-stack li p { margin: 0; font-size: 14px; color: var(--fg-2); line-height: 1.55; } /* ---------- Do / Don't grid ---------- */ .ws-do-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 12px; } .ws-do { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 22px; background: #fff; } .ws-do-h { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ws-do-do { color: var(--teal-700); } .ws-do-dont { color: var(--danger); } /* ---------- Code blocks ---------- */ .ws-code { background: var(--ink-900); color: #E5E7EA; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 22px 26px; border-radius: var(--r-md); overflow-x: auto; margin: 12px 0 8px; white-space: pre; } .ws-code code { background: transparent; color: inherit; padding: 0; } .ws-code-ar { font-family: var(--font-arabic), var(--font-mono); font-size: 14px; line-height: 1.85; text-align: right; white-space: pre-wrap; word-break: keep-all; } /* ---------- Floating, always-visible language toggle ---------- Sticks to the corner regardless of scroll position so the switch is reachable from anywhere on the page. */ .ws-floating-lang { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 60; background: var(--ink-900); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-pill); padding: 12px 22px; font-size: 14px; font-weight: 500; font-family: var(--font-arabic), var(--font-sans); cursor: pointer; box-shadow: var(--shadow-3); transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); line-height: 1; } .ws-floating-lang:hover { background: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-4); } .ws-floating-lang:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } html[lang="ar"] .ws-floating-lang { font-family: var(--font-sans); } /* ---------- Dubai AI Seal credentials ---------- */ .ws-credentials { padding: 96px 0; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ws-credentials-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } .ws-credentials-copy { max-width: 56ch; } .ws-credentials-body { font-size: 17px; line-height: 1.65; color: var(--fg-2); margin: 0 0 22px; text-wrap: pretty; } .ws-link { font-weight: 500; color: var(--blue); font-size: 15px; } .ws-link:hover { color: var(--blue-700); } .ws-seal-link { display: block; justify-self: end; width: 320px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); border: 1px solid var(--border); transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .ws-seal-link:hover { box-shadow: var(--shadow-4); transform: translateY(-2px); } .ws-seal { width: 100%; height: auto; display: block; } html[lang="ar"] .ws-seal-link { justify-self: start; } /* ---------- Closing ---------- */ .ws-close { padding: 96px 0 64px; background: var(--blue-50); border-top: 1px solid var(--blue-100); } .ws-close .ws-section-title { font-size: 36px; max-width: 22ch; } .ws-close .ws-lede { max-width: 58ch; margin-bottom: 0; } /* ---------- Footer ---------- */ .ws-footer { background: var(--ink-900); color: var(--ink-300); padding: 72px 0 28px; } .ws-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ws-footer-mark { font-size: 28px; font-weight: 300; letter-spacing: 0.04em; color: var(--silver); margin-bottom: 14px; } .ws-footer-tag { font-size: 14px; line-height: 1.65; color: var(--ink-300); margin: 0; max-width: 42ch; } .ws-footer-h { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); margin-bottom: 14px; } .ws-footer a { display: block; color: var(--ink-300); font-size: 14px; padding: 4px 0; text-decoration: none; transition: color var(--t-fast) var(--ease-out); } .ws-footer a:hover { color: #fff; } .ws-footer p { font-size: 14px; line-height: 1.6; color: var(--ink-300); margin: 0 0 6px; } .ws-footer-base { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; gap: 24px; } .ws-footer-copy { font-size: 12px; color: #6E7787; } .ws-footer-legal { display: flex; gap: 18px; align-items: center; } .ws-footer-lang { background: transparent; color: var(--silver) !important; border: 1px solid rgba(255, 255, 255, 0.18); padding: 8px 16px !important; border-radius: var(--r-md); } .ws-footer-lang:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.04); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .ws-hero-grid { grid-template-columns: 1fr; gap: 40px; } .ws-hero-title { font-size: 52px; } .ws-stats-grid { grid-template-columns: 1fr 1fr; gap: 24px 0; } .ws-stat { padding: 12px 20px; } .ws-stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } } @media (max-width: 1024px) { .ws-block-banner-inner { grid-template-columns: 1fr; gap: 16px; } .ws-block-num { font-size: 72px; min-width: 0; } .ws-block-title { font-size: 38px; } .ws-block-topics, .ws-block-topics-3 { grid-template-columns: 1fr; } } @media (max-width: 720px) { :root { --gutter: 1.25rem; } .ws-langbar-inner { height: 32px; gap: 10px; } .ws-langbar-label { display: none; } .ws-langbar-opt { font-size: 12px; padding: 3px 8px; } .ws-block-banner { padding: 48px 0 32px; } .ws-credentials { padding: 56px 0; } .ws-credentials-inner { grid-template-columns: 1fr; gap: 32px; } .ws-seal-link { width: 240px; justify-self: start; } .ws-logo-dma { height: 36px; } .ws-logo-gk { height: 32px; } .ws-logo-sep { height: 26px; } .ws-stat-bilingual { font-size: 38px; } .ws-block-num { font-size: 56px; } .ws-block-title { font-size: 28px; } .ws-block-lede { font-size: 15px; } .ws-row-sub { font-size: 12px; } .ws-cell-status { font-size: 11px; } .ws-toc-block .ws-toc-num { min-width: 56px; } .ws-header-inner { height: 64px; gap: 12px; } .ws-logo, .ws-logo img { height: 40px; } .ws-nav { display: none; } .ws-toggle-group { display: none; } .ws-hero { padding: 48px 0 32px; } .ws-hero-title { font-size: 38px; } .ws-hero-lede { font-size: 16px; } .ws-hero-toc { padding: 24px 22px; } .ws-stats { padding: 36px 0; } .ws-stats-grid { grid-template-columns: 1fr; gap: 18px; } .ws-stat { padding: 14px 0; border-inline-start: 0; border-top: 1px solid var(--border); } .ws-stat:first-child { border-top: 0; } .ws-stat-num { font-size: 44px; } .ws-summary { padding: 36px 0 24px; } .ws-summary-inner { gap: 16px; } .ws-summary-icon { width: 36px; height: 36px; } .ws-section-title { font-size: 30px; } .ws-section-body { padding: 4px 0 56px; } .ws-slide { padding: 24px 22px; } .ws-slide-title { font-size: 20px; } .ws-mh-pillars { grid-template-columns: 1fr; } .ws-twocol { grid-template-columns: 1fr; gap: 20px; } .ws-do-grid { grid-template-columns: 1fr; } .ws-step { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 16px; } .ws-stack li { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 16px; } .ws-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; } .ws-footer { padding: 48px 0 24px; } .ws-close { padding: 56px 0 40px; } .ws-close .ws-section-title { font-size: 28px; } .ws-table th, .ws-table td { padding: 10px 12px; font-size: 13px; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }