المكوّنات · قسم مزايا ثلاثي
قسم مزايا ثلاثي
ثلاث بطاقات متساوية الارتفاع مهما اختلف طول النصّ
12 تصاميم من هذه العائلة
<div class="bk bkf"><section>
<div class="head">
<span class="eyebrow" data-ar="ما نقدّمه" data-en="WHAT WE DO">ما نقدّمه</span>
<h3 data-ar="حملات تُقاس بالنتيجة لا بالانطباعات" data-en="Campaigns measured by outcome, not impressions">حملات تُقاس بالنتيجة لا بالانطباعات</h3>
</div>
<ul class="grid">
<li><span class="ic" aria-hidden="true">◎</span>
<h4 data-ar="استهداف دقيق" data-en="Precise targeting">استهداف دقيق</h4>
<p data-ar="نبني الشرائح من سلوك حقيقي لا من تخمين ديموغرافي." data-en="Segments built from real behaviour, not demographic guesswork.">نبني الشرائح من سلوك حقيقي لا من تخمين ديموغرافي.</p></li>
<li><span class="ic" aria-hidden="true">◈</span>
<h4 data-ar="محتوى بالعربية" data-en="Arabic-native content">محتوى بالعربية</h4>
<p data-ar="كتابة أصلية لا ترجمة، ولهجة تناسب سوقك." data-en="Written natively, in the dialect your market actually uses.">كتابة أصلية لا ترجمة، ولهجة تناسب سوقك.</p></li>
<li><span class="ic" aria-hidden="true">▤</span>
<h4 data-ar="تقرير أسبوعي" data-en="Weekly reporting">تقرير أسبوعي</h4>
<p data-ar="رقم واحد يهمّك، وما تحته يشرحه." data-en="One number that matters, and the detail behind it.">رقم واحد يهمّك، وما تحته يشرحه.</p></li>
</ul>
</section></div>
/* pt-scoped */
/* block-features — وكالة تسويق */
.bkf{width:100%;height:100%;display:flex;flex-direction:column;
font-size:10px;color:var(--pt-text-secondary);overflow:hidden}
.bkf h2{margin:0;font-size:19px;line-height:1.35;color:var(--pt-text-primary);
font-weight:700;letter-spacing:-.01em}
.bkf h3{margin:0;font-size:12px;line-height:1.4;color:var(--pt-text-primary);font-weight:600}
.bkf h4{margin:0;font-size:10px;color:var(--pt-text-primary);font-weight:600}
.bkf p{margin:0;font-size:9.5px;line-height:1.85;color:var(--pt-text-muted)}
.bkf .eyebrow{font-size:8px;letter-spacing:.14em;color:var(--pt-accent);font-weight:700}
.bkf .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bkf button, .bkf a{font:inherit;cursor:pointer;text-decoration:none}
.bkf button:focus-visible, .bkf a:focus-visible, .bkf input:focus-visible, .bkf summary:focus-visible{outline:2px solid var(--pt-focus-ring);outline-offset:2px}
/* الأقسام تمتدّ من حافّة إلى حافّة — هذا ما يميّزها عن المكوّنات */
.bkf > section{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
@media(pointer:coarse){.bkf button, .bkf a{min-height:44px;display:inline-flex;
align-items:center;justify-content:center}
}
/* شخصية: شبكة ثلاثية، بطاقات محدّدة، انحناء متوسّط */
.bkf > section{gap:11px;padding:15px 22px;background:var(--pt-bg-inset)}
.bkf .head{display:flex;flex-direction:column;gap:3px;text-align:center;align-items:center}
.bkf .grid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:9px;align-items:stretch}
.bkf .grid li{display:flex;flex-direction:column;gap:5px;padding:11px;
border-radius:var(--pt-radius-md);background:var(--pt-surface);
border:1px solid var(--pt-border-subtle);
transition:border-color var(--pt-motion-duration-fast) var(--pt-motion-easing-standard),
transform var(--pt-motion-duration-fast) var(--pt-motion-easing-standard)}
.bkf .grid li:hover{border-color:var(--pt-accent);transform:translateY(-2px)}
.bkf .ic{width:24px;height:24px;display:grid;place-items:center;flex:none;
border-radius:var(--pt-radius-sm);background:var(--pt-accent-muted);
color:var(--pt-accent);font-size:12px}
.bkf .grid p{font-size:8.5px;line-height:1.75}
@media(prefers-reduced-motion:reduce){.bkf .grid li{transition:none}
}
/* هذا القسم لا يحتاج شيفرة — بنية ونمط فقط */
# Three-up Features
**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.
**Goal:** Three-up Features — Three cards of equal height regardless of copy length
**Why this component matters:** Feature cards must stretch to equal height — align-items:stretch on the grid — or a shorter card leaves a ragged baseline that reads as a rendering bug.
**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.
**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.
**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.
**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.
**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.
**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.
**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.
**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.