/* ════════════════════════════════════════════════════════════════════════════ MADA · BASEERA — CAPABILITY SURFACE (S3) Founder Directive — Capability Wiring. Registry-driven grid. ALL styles scoped to #page-capabilities / .cap-* so the FROZEN global visual identity is untouched: NO :root token / radius changes. Global accent stays cyan #00E5D4 (reuses --p-cyan from prism-pages.css). Tier chips use EXACT registry colors, injected per-card via inline --tier. RTL is handled by the global dir=rtl on ; numbers stay LTR via .cap-ltr. ════════════════════════════════════════════════════════════════════════════ */ #page-capabilities .cap-surface { padding-bottom: 40px; } /* ── Header meta + demo banner ── */ #page-capabilities .cap-meta b { font-weight: 700; } #page-capabilities .cap-demo-banner { margin-top: 12px; display: inline-block; padding: 5px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #FFD600; background: rgba(255, 214, 0, 0.08); border: 1px solid rgba(255, 214, 0, 0.4); border-radius: 4px; } /* ── Category section ── */ #page-capabilities .cap-section { margin-bottom: 26px; } #page-capabilities .cap-section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px 2px; border-bottom: 1px solid rgba(0, 229, 212, 0.14); padding-bottom: 6px; } #page-capabilities .cap-cat-label { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; color: var(--p-cyan); text-transform: uppercase; } #page-capabilities .cap-cat-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--p-text-dim); } /* ── Grid ── */ #page-capabilities .cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; } /* ── Card ── */ #page-capabilities .cap-card { position: relative; display: flex; flex-direction: column; min-height: 116px; padding: 11px 13px 12px; border-radius: 8px; background: rgba(8, 14, 22, 0.62); border: 1px solid rgba(0, 229, 212, 0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 16px rgba(0,0,0,0.3); transition: border-color 0.18s, box-shadow 0.18s; } #page-capabilities .cap-card.cap-live:hover { border-color: rgba(0, 229, 212, 0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 22px rgba(0,229,212,0.12); } /* S4 — COMING_SOON dimmed 40% opacity, no interactivity */ #page-capabilities .cap-card.cap-coming { opacity: 0.4; pointer-events: none; border-style: dashed; } #page-capabilities .cap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } /* ── Tier chip — EXACT registry color via inline --tier ── */ #page-capabilities .cap-tier-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--tier, #00C853); background: color-mix(in srgb, var(--tier, #00C853) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tier, #00C853) 55%, transparent); border-radius: 3px; white-space: nowrap; } #page-capabilities .cap-tier-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 5px var(--tier, #00C853); } /* ── State badge ── */ #page-capabilities .cap-state { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; } #page-capabilities .cap-state-live { color: #00C853; background: rgba(0, 200, 83, 0.1); border: 1px solid rgba(0, 200, 83, 0.4); } #page-capabilities .cap-state-coming { color: #FF8C00; background: rgba(255, 140, 0, 0.1); border: 1px solid rgba(255, 140, 0, 0.4); } /* ── Name ── */ #page-capabilities .cap-name { font-family: 'IBM Plex Sans Arabic', 'JetBrains Mono', sans-serif; font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 8px; } /* ── Body ── */ #page-capabilities .cap-body { margin-top: auto; } #page-capabilities .cap-summary { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--p-text); line-height: 1.4; margin-bottom: 7px; min-height: 17px; word-break: break-word; } #page-capabilities .cap-loading { color: var(--p-text-dim); font-size: 11px; } #page-capabilities .cap-sample { display: block; font-size: 10.5px; color: var(--p-text-dim); margin-top: 2px; } /* provenance row: provider + last refresh */ #page-capabilities .cap-prov-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--p-text-dim); letter-spacing: 0.04em; border-top: 1px solid rgba(0, 229, 212, 0.08); padding-top: 6px; } #page-capabilities .cap-provider { color: var(--p-cyan); opacity: 0.85; } #page-capabilities .cap-refresh { white-space: nowrap; } /* COMING_SOON body */ #page-capabilities .cap-body-coming { margin-top: auto; } #page-capabilities .cap-coming-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: #FF8C00; margin-bottom: 4px; } #page-capabilities .cap-body-coming .cap-provenance { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--p-text-dim); } /* ── Honest degraded states ── */ #page-capabilities .cap-card.cap-awaiting { border-color: rgba(255, 140, 0, 0.4); } #page-capabilities .cap-awaiting-txt { color: #FF8C00; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } #page-capabilities .cap-card.cap-offline { border-color: rgba(255, 23, 68, 0.35); } #page-capabilities .cap-offline-txt { color: #FF1744; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } /* ── S6 demo footnote — 9px monospace ── */ #page-capabilities .cap-demo-foot { margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; color: #FFD600; opacity: 0.9; } /* ── Numbers stay LTR even in RTL layout ── */ #page-capabilities .cap-ltr { unicode-bidi: isolate; direction: ltr; } /* ── RTL mirroring (global dir=rtl on ) ── */ html[dir="rtl"] #page-capabilities .cap-card { text-align: right; } html[dir="rtl"] #page-capabilities .cap-cat-label, html[dir="rtl"] #page-capabilities .cap-name { text-align: right; } /* ── Responsive ── */ @media (max-width: 720px) { #page-capabilities .cap-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { #page-capabilities .cap-grid { grid-template-columns: 1fr; } }