/* =====================================================================
ecommerceworld-article-system.css
Site: ecommerceworld-sa.com (عالم التجارة الإلكترونية)
Wrapper: .ecw-article-layout
Brand: Ecommerce Orange (#ff5b46) + Store Blue (#0073e6) + Highlighter Yellow (#ffb800)
Font: Cairo
Layout version: 1.0
Variants: ecommerce-guide, store-setup, comparison, how-to, strategy, service-support
===================================================================== *//* ------- Wrapper ------- */
.ecw-article-layout {
--ecw-orange: #ff5b46;
--ecw-orange-2: #e6452f;
--ecw-blue: #0073e6;
--ecw-blue-2: #0058b0;
--ecw-yellow: #ffb800;
--ecw-heading: #1a2238;
--ecw-text: #3a3f4b;
--ecw-muted: #6b7280;
--ecw-border: #e3e6ec;
--ecw-surface: #f5f7fa;
--ecw-white: #ffffff;
--ecw-cta: #ff5b46;
--ecw-radius: 10px;
--ecw-shadow: 0 6px 20px rgba(0, 88, 176, 0.08);
--ecw-shadow-soft: 0 3px 12px rgba(0, 88, 176, 0.05);max-width: 1200px;
margin: 0 auto;
padding: 32px 24px 64px;
font-family: "Cairo", system-ui, -apple-system, sans-serif;
color: var(--ecw-text);
line-height: 1.8;
background: var(--ecw-white);
box-sizing: border-box;
direction: rtl;
}
.ecw-article-layout *,
.ecw-article-layout *::before,
.ecw-article-layout *::after { box-sizing: border-box; }/* ------- Hero ------- */
.ecw-article-layout .ecw-article-hero {
background: linear-gradient(120deg, var(--ecw-blue) 0%, #1a4fa3 50%, var(--ecw-orange) 130%);
color: var(--ecw-white);
padding: 48px 40px;
border-radius: var(--ecw-radius);
margin-bottom: 36px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ecw-article-layout .ecw-article-hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at top left, rgba(255, 184, 0, 0.18), transparent 50%),
radial-gradient(circle at bottom right, rgba(255, 91, 70, 0.22), transparent 60%);
pointer-events: none;
}
.ecw-article-layout .ecw-article-h1 {
font-size: clamp(24px, 4vw, 38px);
line-height: 1.35;
font-weight: 800;
color: var(--ecw-white);
margin: 0 0 16px;
letter-spacing: -0.01em;
}
.ecw-article-layout .ecw-article-lede {
font-size: clamp(15px, 2vw, 18px);
line-height: 1.7;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 20px;
max-width: 780px;
}
.ecw-article-layout .ecw-meta-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.ecw-article-layout .ecw-meta-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.18);
color: var(--ecw-white);
border: 1px solid rgba(255, 255, 255, 0.32);
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
backdrop-filter: blur(4px);
}/* ------- Quick Answer ------- */
.ecw-article-layout .ecw-quick-answer {
background: linear-gradient(180deg, var(--ecw-surface) 0%, #fff8f5 100%);
border: 1px solid rgba(255, 91, 70, 0.25);
border-right: 4px solid var(--ecw-orange);
border-radius: var(--ecw-radius);
padding: 20px 24px;
margin: 0 0 32px;
position: relative;
}
.ecw-article-layout .ecw-quick-answer::before {
content: "⚡";
position: absolute;
top: -14px;
right: 20px;
background: var(--ecw-orange);
color: var(--ecw-white);
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 16px;
}
.ecw-article-layout .ecw-qa-label {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--ecw-orange-2);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.ecw-article-layout .ecw-quick-answer p { margin: 0; }/* ------- TOC ------- */
.ecw-article-layout .ecw-article-toc {
background: var(--ecw-surface);
border: 1px solid var(--ecw-border);
border-radius: var(--ecw-radius);
padding: 20px 24px;
margin: 0 0 32px;
}
.ecw-article-layout .ecw-toc-title {
font-size: 14px;
font-weight: 700;
color: var(--ecw-heading);
margin-bottom: 12px;
letter-spacing: 0.02em;
}
.ecw-article-layout .ecw-article-toc ol {
margin: 0;
padding: 0 0 0 20px;
list-style: decimal;
color: var(--ecw-text);
}
.ecw-article-layout .ecw-article-toc li { padding: 4px 0; }
.ecw-article-layout .ecw-article-toc a {
color: var(--ecw-text);
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color 0.2s, color 0.2s;
}
.ecw-article-layout .ecw-article-toc a:hover { color: var(--ecw-blue); border-bottom-color: var(--ecw-orange); }/* ------- Sections ------- */
.ecw-article-layout .ecw-section { margin: 0 0 36px; }
.ecw-article-layout .ecw-section h2 {
font-size: clamp(20px, 3vw, 28px);
font-weight: 800;
color: var(--ecw-heading);
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 3px solid var(--ecw-orange);
display: inline-block;
}
.ecw-article-layout .ecw-section h3 {
font-size: clamp(16px, 2.4vw, 20px);
font-weight: 700;
color: var(--ecw-blue-2);
margin: 24px 0 10px;
}
.ecw-article-layout .ecw-section p { margin: 0 0 14px; font-size: 16px; }
.ecw-article-layout .ecw-section ul,
.ecw-article-layout .ecw-section ol { padding-right: 22px; margin: 0 0 16px; }
.ecw-article-layout .ecw-section li { padding: 4px 0; }
.ecw-article-layout .ecw-section a {
color: var(--ecw-blue);
text-decoration: none;
border-bottom: 1px solid rgba(0, 115, 230, 0.3);
}
.ecw-article-layout .ecw-section a:hover { color: var(--ecw-orange); }/* ------- Checklist ------- */
.ecw-article-layout .ecw-checklist {
list-style: none;
padding: 0;
margin: 16px 0;
background: var(--ecw-white);
border: 1px solid var(--ecw-border);
border-radius: var(--ecw-radius);
overflow: hidden;
box-shadow: var(--ecw-shadow-soft);
}
.ecw-article-layout .ecw-checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--ecw-border);
font-size: 15px;
}
.ecw-article-layout .ecw-checklist li:last-child { border-bottom: none; }
.ecw-article-layout .ecw-checklist li::before {
content: "✓";
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ecw-orange);
color: var(--ecw-white);
display: grid;
place-items: center;
font-size: 14px;
font-weight: 700;
}
.ecw-article-layout .ecw-checklist strong { color: var(--ecw-heading); font-weight: 700; }/* ------- Steps ------- */
.ecw-article-layout .ecw-steps {
list-style: none;
padding: 0;
margin: 16px 0;
counter-reset: ecw-step;
}
.ecw-article-layout .ecw-steps li {
counter-increment: ecw-step;
position: relative;
padding: 18px 64px 18px 18px;
margin-bottom: 14px;
background: var(--ecw-white);
border: 1px solid var(--ecw-border);
border-right: 4px solid var(--ecw-blue);
border-radius: var(--ecw-radius);
box-shadow: var(--ecw-shadow-soft);
}
.ecw-article-layout .ecw-steps li::before {
content: counter(ecw-step);
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ecw-blue) 0%, var(--ecw-blue-2) 100%);
color: var(--ecw-white);
display: grid;
place-items: center;
font-weight: 700;
font-size: 16px;
box-shadow: 0 4px 10px rgba(0, 115, 230, 0.35);
}/* ------- Comparison Table ------- */
.ecw-article-layout .ecw-comparison {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 16px 0;
background: var(--ecw-white);
border: 1px solid var(--ecw-border);
border-radius: var(--ecw-radius);
overflow: hidden;
box-shadow: var(--ecw-shadow-soft);
}
.ecw-article-layout .ecw-comparison th {
background: var(--ecw-blue);
color: var(--ecw-white);
text-align: right;
padding: 14px 16px;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
}
.ecw-article-layout .ecw-comparison td {
padding: 12px 16px;
border-top: 1px solid var(--ecw-border);
font-size: 14px;
vertical-align: top;
}
.ecw-article-layout .ecw-comparison tr:nth-child(even) td { background: var(--ecw-surface); }/* ------- Tip / Note / Warning ------- */
.ecw-article-layout .ecw-tip,
.ecw-article-layout .ecw-note,
.ecw-article-layout .ecw-warning {
padding: 16px 20px;
margin: 16px 0;
border-radius: var(--ecw-radius);
font-size: 15px;
border-right: 4px solid;
}
.ecw-article-layout .ecw-tip {
background: #fff8eb;
border-color: var(--ecw-yellow);
color: #6b4f00;
}
.ecw-article-layout .ecw-note {
background: #eaf3fc;
border-color: var(--ecw-blue);
color: #1d3a5f;
}
.ecw-article-layout .ecw-warning {
background: #fdece7;
border-color: var(--ecw-orange);
color: #7a2a16;
}/* ------- FAQ ------- */
.ecw-article-layout .ecw-faq-list { margin: 16px 0; }
.ecw-article-layout .ecw-faq-item {
background: var(--ecw-white);
border: 1px solid var(--ecw-border);
border-right: 4px solid var(--ecw-blue);
border-radius: var(--ecw-radius);
padding: 18px 22px;
margin-bottom: 12px;
box-shadow: var(--ecw-shadow-soft);
}
.ecw-article-layout .ecw-faq-item h3 {
margin: 0 0 8px;
color: var(--ecw-heading);
font-size: 17px;
font-weight: 700;
}
.ecw-article-layout .ecw-faq-item p { margin: 0; color: var(--ecw-text); }/* ------- CTA ------- */
.ecw-article-layout .ecw-article-cta {
background: linear-gradient(120deg, var(--ecw-orange) 0%, var(--ecw-orange-2) 100%);
color: var(--ecw-white);
padding: 36px 32px;
border-radius: var(--ecw-radius);
margin: 36px 0 0;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.ecw-article-layout .ecw-article-cta::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255, 184, 0, 0.25), transparent 60%);
pointer-events: none;
}
.ecw-article-layout .ecw-article-cta h3 {
margin: 0 0 10px;
color: var(--ecw-white);
font-size: clamp(20px, 3vw, 26px);
font-weight: 800;
}
.ecw-article-layout .ecw-article-cta p { margin: 0 0 18px; color: rgba(255, 255, 255, 0.95); font-size: 16px; }
.ecw-article-layout .ecw-article-cta a {
display: inline-block;
background: var(--ecw-white);
color: var(--ecw-orange-2);
padding: 14px 32px;
border-radius: var(--ecw-radius);
text-decoration: none;
font-weight: 700;
font-size: 16px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
transition: transform 0.2s, box-shadow 0.2s;
}
.ecw-article-layout .ecw-article-cta a:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}/* ------- Variant: comparison (highlight) ------- */
.ecw-article-layout[data-layout-variant="comparison"] .ecw-comparison {
box-shadow: var(--ecw-shadow);
}
.ecw-article-layout[data-layout-variant="comparison"] .ecw-comparison th {
background: linear-gradient(135deg, var(--ecw-blue) 0%, var(--ecw-blue-2) 100%);
}/* ------- Variant: store-setup (blue dominant) ------- */
.ecw-article-layout[data-layout-variant="store-setup"] .ecw-article-hero {
background: linear-gradient(120deg, var(--ecw-blue) 0%, var(--ecw-blue-2) 100%);
}/* ------- Variant: how-to (orange dominant) ------- */
.ecw-article-layout[data-layout-variant="how-to"] .ecw-steps li {
border-right-color: var(--ecw-orange);
}
.ecw-article-layout[data-layout-variant="how-to"] .ecw-steps li::before {
background: linear-gradient(135deg, var(--ecw-orange) 0%, var(--ecw-orange-2) 100%);
box-shadow: 0 4px 10px rgba(255, 91, 70, 0.35);
}/* ------- Variant: strategy (yellow accent) ------- */
.ecw-article-layout[data-layout-variant="strategy"] .ecw-section h2 {
border-bottom-color: var(--ecw-yellow);
}/* ------- Variant: service-support (blue/orange split) ------- */
.ecw-article-layout[data-layout-variant="service-support"] .ecw-article-cta {
background: linear-gradient(120deg, var(--ecw-blue) 0%, var(--ecw-orange) 100%);
}/* ------- Variant: ecommerce-guide (default) ------- */
.ecw-article-layout[data-layout-variant="ecommerce-guide"] .ecw-meta-chip {
background: rgba(0, 115, 230, 0.22);
border-color: rgba(255, 255, 255, 0.4);
}/* ------- Responsive ------- */
@media (max-width: 768px) {
.ecw-article-layout { padding: 20px 16px 48px; }
.ecw-article-layout .ecw-article-hero { padding: 32px 22px; }
.ecw-article-layout .ecw-article-toc { padding: 16px 18px; }
.ecw-article-layout .ecw-article-cta { padding: 28px 20px; }
.ecw-article-layout .ecw-comparison th,
.ecw-article-layout .ecw-comparison td { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 480px) {
.ecw-article-layout { padding: 16px 12px 40px; }
.ecw-article-layout .ecw-article-hero { padding: 26px 18px; }
.ecw-article-layout .ecw-meta-chips { gap: 6px; }
.ecw-article-layout .ecw-meta-chip { padding: 5px 10px; font-size: 12px; }
.ecw-article-layout .ecw-steps li { padding: 14px 56px 14px 14px; }
.ecw-article-layout .ecw-steps li::before { width: 32px; height: 32px; font-size: 14px; top: 12px; right: 12px; }
}/* =====================================================================
Visual Article System v2.0 - BEM-style class aliases
Maps generic BEM class names to the same visual styling as the prefixed
class names. This enables the renderer to use either naming scheme.
===================================================================== *//* article-display-title - hero title that is NOT an h1 (theme renders h1) */
.article-display-title {
font-size: clamp(24px, 4vw, 38px);
line-height: 1.35;
font-weight: 800;
margin: 0 0 16px;
letter-spacing: -0.01em;
}/* article-section - generic section wrapper (inherits from prefixed variants) */
.article-section { margin: 0 0 36px; }/* article-card-grid + article-card */
.article-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin: 16px 0;
}
.article-card {
background: var(--ecw-white, #fff);
border: 1px solid var(--ecw-border, #e3e6ec);
border-radius: var(--ecw-radius, 10px);
padding: 20px 22px;
box-shadow: var(--ecw-shadow-soft, 0 3px 12px rgba(0, 88, 176, 0.05));
display: flex;
flex-direction: column;
gap: 8px;
}
.article-card-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--ecw-heading, #1a2238);
}
.article-card-body {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--ecw-text, #3a3f4b);
}
.article-card-icon {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ecw-surface, #f5f7fa);
color: var(--ecw-blue, #0073e6);
font-size: 18px;
display: inline-grid;
place-items: center;
margin-bottom: 4px;
}/* article-step-card-grid + article-step-card */
.article-step-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 16px 0;
}
.article-step-card {
position: relative;
background: var(--ecw-white, #fff);
border: 1px solid var(--ecw-border, #e3e6ec);
border-right: 4px solid var(--ecw-blue, #0073e6);
border-radius: var(--ecw-radius, 10px);
padding: 18px 20px 16px 20px;
box-shadow: var(--ecw-shadow-soft, 0 3px 12px rgba(0, 88, 176, 0.05));
counter-increment: ecw-step;
}
.article-step-card-num {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ecw-blue, #0073e6) 0%, var(--ecw-blue-2, #0058b0) 100%);
color: var(--ecw-white, #fff);
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
}
.article-step-card-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
color: var(--ecw-heading, #1a2238);
}
.article-step-card-body {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--ecw-text, #3a3f4b);
}/* article-faq - native accordion */
.article-faq { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.article-faq__item {
background: var(--ecw-white, #fff);
border: 1px solid var(--ecw-border, #e3e6ec);
border-right: 4px solid var(--ecw-blue, #0073e6);
border-radius: var(--ecw-radius, 10px);
padding: 14px 18px;
box-shadow: var(--ecw-shadow-soft, 0 3px 12px rgba(0, 88, 176, 0.05));
transition: box-shadow 0.2s, border-color 0.2s;
}
.article-faq__item[open] {
border-right-color: var(--ecw-orange, #ff5b46);
box-shadow: var(--ecw-shadow, 0 6px 20px rgba(0, 88, 176, 0.08));
}
.article-faq__q {
cursor: pointer;
font-weight: 700;
color: var(--ecw-heading, #1a2238);
font-size: 16px;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
}
.article-faq__q::-webkit-details-marker { display: none; }
.article-faq__q::before {
content: "+";
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--ecw-surface, #f5f7fa);
color: var(--ecw-blue, #0073e6);
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.article-faq__item[open] .article-faq__q::before {
content: "−";
background: var(--ecw-orange, #ff5b46);
color: var(--ecw-white, #fff);
}
.article-faq__answer {
padding: 10px 0 4px 34px;
color: var(--ecw-text, #3a3f4b);
font-size: 15px;
line-height: 1.7;
}
.article-faq__answer p { margin: 0; }/* article-table-wrap - responsive table container */
.article-table-wrap {
margin: 16px 0;
overflow-x: auto;
background: var(--ecw-white, #fff);
border: 1px solid var(--ecw-border, #e3e6ec);
border-radius: var(--ecw-radius, 10px);
box-shadow: var(--ecw-shadow-soft, 0 3px 12px rgba(0, 88, 176, 0.05));
}
.article-comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.article-comparison-table caption {
padding: 14px 16px;
font-weight: 700;
text-align: right;
color: var(--ecw-heading, #1a2238);
border-bottom: 1px solid var(--ecw-border, #e3e6ec);
}
.article-comparison-table th {
background: var(--ecw-blue, #0073e6);
color: var(--ecw-white, #fff);
text-align: right;
padding: 14px 16px;
font-weight: 700;
font-size: 14px;
}
.article-comparison-table td {
padding: 12px 16px;
border-top: 1px solid var(--ecw-border, #e3e6ec);
font-size: 14px;
vertical-align: top;
}
.article-comparison-table tr:nth-child(even) td { background: var(--ecw-surface, #f5f7fa); }/* article-toc, article-checklist, article-steps, article-tip, article-note, article-warning, article-cta */
/* These are mostly inherited from the prefixed variants; just ensure the wrapper class is targeted */
.article-toc { display: block; }
.article-checklist { list-style: none; padding: 0; margin: 16px 0; }
.article-checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--ecw-border, #e3e6ec);
font-size: 15px;
}
.article-checklist li::before {
content: "✓";
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--ecw-orange, #ff5b46);
color: var(--ecw-white, #fff);
display: grid;
place-items: center;
font-size: 13px;
font-weight: 700;
}
.article-steps { list-style: none; padding: 0; margin: 16px 0; counter-reset: ecw-step; }
.article-steps li {
counter-increment: ecw-step;
position: relative;
padding: 16px 56px 16px 16px;
margin-bottom: 12px;
background: var(--ecw-white, #fff);
border: 1px solid var(--ecw-border, #e3e6ec);
border-right: 4px solid var(--ecw-blue, #0073e6);
border-radius: var(--ecw-radius, 10px);
}
.article-steps li::before {
content: counter(ecw-step);
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ecw-blue, #0073e6) 0%, var(--ecw-blue-2, #0058b0) 100%);
color: var(--ecw-white, #fff);
display: grid;
place-items: center;
font-weight: 700;
font-size: 14px;
}
.article-tip, .article-note, .article-warning {
padding: 14px 18px;
margin: 14px 0;
border-radius: var(--ecw-radius, 10px);
font-size: 15px;
border-right: 4px solid;
}
.article-tip { background: #fff8eb; border-color: var(--ecw-yellow, #ffb800); color: #6b4f00; }
.article-note { background: #eaf3fc; border-color: var(--ecw-blue, #0073e6); color: #1d3a5f; }
.article-warning { background: #fdece7; border-color: var(--ecw-orange, #ff5b46); color: #7a2a16; }
.article-cta { display: block; }
.article-cta h3 { margin: 0 0 10px; }
.article-cta a { display: inline-block; padding: 12px 28px; border-radius: var(--ecw-radius, 10px); text-decoration: none; font-weight: 700; }
.article-roadmap-item { padding: 14px 18px; border-right: 3px solid; margin-bottom: 12px; }/* Mobile responsive for BEM classes */
@media (max-width: 768px) {
.article-card-grid, .article-step-card-grid { grid-template-columns: 1fr; }
.article-comparison-table th, .article-comparison-table td { padding: 10px 12px; font-size: 13px; }
.article-display-title { font-size: 24px; }
}
@media (max-width: 480px) {
.article-step-card { padding: 16px 18px; }
.article-faq__answer { padding-left: 0; padding-right: 24px; }
.article-faq__q { font-size: 15px; }
}
المنزل وظيفة معلم "ريادة الأعمال الرقمية" Tag: ريادة الأعمال الرقمية
