/* ========================================================================== rzaz-articles.css — ARTICLE PAGES ONLY. HARD RULE: every selector in this file is scoped under `.rz-article-page`, which is set on of article/blog-index pages ONLY. Nothing here can reach the homepage or any legacy template. FORBIDDEN in this file (and absent by construction): bare h1/h2/h3/img/a/body, .container, .row, .site-header, .site-footer, or any other legacy class used outside the article body. Colours/typography are inherited from the legacy stack (style.minb04c.css / skin-6 / templete / rtl). Only the article reading surface is styled here. ========================================================================== */ .rz-article-page { --rza-primary: #019444; --rza-secondry: #f36523; --rza-dark: #152332; --rza-body: #6f6f6f; --rza-border: #e4e4e4; --rza-soft: #f7f8f8; --rza-radius: 4px; } /* ---------- skip link ---------- */ .rz-article-page .rz-skip { position: absolute; right: -9999px; top: 0; z-index: 9999; background: var(--rza-primary); color: #fff; padding: 12px 20px; } .rz-article-page .rz-skip:focus { right: 0; color: #fff; } /* ---------- page shell ---------- Every legacy template puts a full-bleed Slider Revolution hero directly under the transparent header, which is what makes its WHITE logo readable. Article pages have no hero, so without this the white logo would sit on white and disappear. We give the header the same solid dark backdrop it effectively has over the homepage hero — same markup, same geometry, same logo, just an opaque bar. Scoped to .rz-article-page, so the homepage header is untouched. */ .rz-article-page .site-header .main-bar { background-color: #152332; } .rz-article-page .rz-article-main { padding-top: 100px; } @media (max-width: 991px) { .rz-article-page .rz-article-main { padding-top: 84px; } } /* ---------- breadcrumb ---------- */ .rz-article-page .rz-breadcrumb { background: var(--rza-soft); border-bottom: 1px solid var(--rza-border); padding: 13px 0; font-size: 14px; } .rz-article-page .rz-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .rz-article-page .rz-breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--rza-body); } .rz-article-page .rz-breadcrumb li + li::before { content: "\203A"; color: #b9b9b9; } .rz-article-page .rz-breadcrumb a { color: var(--rza-primary); } .rz-article-page .rz-breadcrumb a:hover { color: var(--rza-secondry); } .rz-article-page .rz-breadcrumb [aria-current="page"] { color: #333; } /* ---------- reading container (does NOT touch .container) ---------- */ .rz-article-page .rz-article { padding: 44px 0 70px; } .rz-article-page .rz-article-inner { max-width: 820px; margin: 0 auto; } @media (max-width: 767px) { .rz-article-page .rz-article { padding: 26px 0 48px; } } /* ---------- header ---------- */ .rz-article-page .rz-article-cat { display: inline-block; margin-bottom: 12px; font-size: 13px; padding: 4px 14px; border-radius: 20px; background: rgba(1,148,68,.10); color: var(--rza-primary); } .rz-article-page .rz-article-title { font-size: 36px; line-height: 48px; margin: 0 0 14px; color: #1a1a1a; } .rz-article-page .rz-article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: #8a8a8a; padding: 0 0 16px; margin: 0 0 22px; border-bottom: 1px solid var(--rza-border); } .rz-article-page .rz-article-meta span { display: inline-flex; align-items: center; gap: 6px; } .rz-article-page .rz-article-lede { font-size: 18px; line-height: 33px; color: #3d3d3d; border-right: 4px solid var(--rza-primary); background: var(--rza-soft); padding: 18px 20px; margin: 0 0 28px; border-radius: var(--rza-radius); } @media (max-width: 767px) { .rz-article-page .rz-article-title { font-size: 25px; line-height: 36px; } .rz-article-page .rz-article-lede { font-size: 16px; line-height: 29px; } } /* ---------- figures (natural aspect ratio, never cropped) ---------- */ .rz-article-page .rz-article-figure { margin: 0 0 28px; } .rz-article-page .rz-article-figure img { width: 100%; height: auto; display: block; border-radius: var(--rza-radius); } .rz-article-page .rz-article-figure figcaption, .rz-article-page .rz-article-video figcaption { font-size: 13px; color: #8a8a8a; padding-top: 8px; line-height: 22px; } /* ---------- collapsible TOC ---------- Native

: closed on load, keyboard operable, screen-reader exposed. No permanent display:none, no hidden keyword text. */ .rz-article-page .rz-article-toc { border: 1px solid var(--rza-border); border-radius: var(--rza-radius); background: #fff; margin: 0 0 32px; } .rz-article-page .rz-article-toc > summary { cursor: pointer; list-style: none; padding: 15px 20px; font-size: 17px; font-weight: 600; color: #222; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rz-article-page .rz-article-toc > summary::-webkit-details-marker { display: none; } .rz-article-page .rz-article-toc > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--rza-primary); flex: 0 0 auto; } .rz-article-page .rz-article-toc[open] > summary::after { content: "\2013"; } .rz-article-page .rz-article-toc > summary:hover { color: var(--rza-primary); } .rz-article-page .rz-article-toc > summary:focus-visible { outline: 2px solid var(--rza-primary); outline-offset: -2px; } .rz-article-page .rz-article-toc-body { padding: 0 20px 18px; border-top: 1px solid var(--rza-border); } .rz-article-page .rz-article-toc-body ol { margin: 14px 0 0; padding-right: 20px; } .rz-article-page .rz-article-toc-body li { margin-bottom: 8px; line-height: 25px; } .rz-article-page .rz-article-toc-body a { color: #444; } .rz-article-page .rz-article-toc-body a:hover { color: var(--rza-primary); } /* ---------- article body ---------- */ .rz-article-page .rz-article-content { font-size: 17px; line-height: 33px; color: var(--rza-body); } .rz-article-page .rz-article-content h2 { font-size: 27px; line-height: 38px; color: #1a1a1a; margin: 46px 0 16px; padding-right: 14px; border-right: 4px solid var(--rza-primary); scroll-margin-top: 100px; } .rz-article-page .rz-article-content h3 { font-size: 21px; line-height: 31px; color: #222; margin: 32px 0 12px; scroll-margin-top: 100px; } .rz-article-page .rz-article-content h4 { font-size: 18px; line-height: 27px; color: #333; margin: 24px 0 10px; } .rz-article-page .rz-article-content p { margin: 0 0 19px; } .rz-article-page .rz-article-content ul, .rz-article-page .rz-article-content ol { margin: 0 0 21px; padding-right: 22px; } .rz-article-page .rz-article-content li { margin-bottom: 10px; } .rz-article-page .rz-article-content a { color: var(--rza-primary); text-decoration: underline; text-underline-offset: 3px; } .rz-article-page .rz-article-content a:hover { color: var(--rza-secondry); } .rz-article-page .rz-article-content strong { color: #333; } .rz-article-page .rz-article-content hr { border: 0; border-top: 1px solid var(--rza-border); margin: 34px 0; } @media (max-width: 767px) { .rz-article-page .rz-article-content { font-size: 16px; line-height: 31px; } .rz-article-page .rz-article-content h2 { font-size: 22px; line-height: 32px; margin-top: 34px; } .rz-article-page .rz-article-content h3 { font-size: 18px; line-height: 28px; } } .rz-article-page .rz-article-content blockquote { margin: 26px 0; padding: 18px 20px; background: #fff8f3; border-right: 4px solid var(--rza-secondry); border-radius: var(--rza-radius); color: #4a4a4a; } .rz-article-page .rz-article-content blockquote p:last-child { margin-bottom: 0; } .rz-article-page .rz-article-note { margin: 26px 0; padding: 16px 20px; background: #fffaf0; border: 1px solid #f0d9b5; border-radius: var(--rza-radius); color: #6a5320; } .rz-article-page .rz-article-note p:last-child { margin-bottom: 0; } /* real HTML tables stay real tables on mobile — they scroll inside their own box */ .rz-article-page .rz-article-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 26px; } .rz-article-page .rz-article-table table { width: 100%; border-collapse: collapse; min-width: 460px; background: #fff; } .rz-article-page .rz-article-table th, .rz-article-page .rz-article-table td { border: 1px solid var(--rza-border); padding: 11px 13px; text-align: right; vertical-align: top; font-size: 15px; line-height: 26px; } .rz-article-page .rz-article-table thead th { background: var(--rza-dark); color: #fff; font-weight: 600; } .rz-article-page .rz-article-table tbody tr:nth-child(even) { background: var(--rza-soft); } .rz-article-page .rz-article-content pre { background: var(--rza-dark); color: #dfe6ec; padding: 18px 20px; border-radius: var(--rza-radius); overflow-x: auto; direction: ltr; text-align: left; font-size: 14px; line-height: 23px; margin: 0 0 24px; } .rz-article-page .rz-article-content pre[dir="rtl"] { direction: rtl; text-align: right; } /* ---------- in-article gallery ---------- */ .rz-article-page .rz-article-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 12px; } @media (max-width: 991px) { .rz-article-page .rz-article-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .rz-article-page .rz-article-gallery { grid-template-columns: 1fr; } } .rz-article-page .rz-article-gallery-item { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--rza-radius); overflow: hidden; line-height: 0; } .rz-article-page .rz-article-gallery-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .3s ease; } .rz-article-page .rz-article-gallery-item:hover img { transform: scale(1.05); } .rz-article-page .rz-article-gallery-item:focus-visible { outline: 2px solid var(--rza-primary); outline-offset: 2px; } .rz-article-page .rz-article-gallery-note { font-size: 13px; color: #8a8a8a; margin: 0 0 30px; } /* ---------- lightbox (self-contained; does not touch legacy lightGallery) ---------- */ .rz-article-page .rz-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(8,12,16,.94); display: none; align-items: center; justify-content: center; padding: 40px 20px; } .rz-article-page .rz-lightbox.is-open { display: flex; } .rz-article-page .rz-lightbox img { max-width: 100%; max-height: 84vh; display: block; border-radius: var(--rza-radius); } .rz-article-page .rz-lightbox-cap { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #dfe6ec; font-size: 14px; padding: 0 20px; } .rz-article-page .rz-lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; cursor: pointer; } .rz-article-page .rz-lightbox-btn:hover { background: var(--rza-primary); } .rz-article-page .rz-lightbox-prev { right: 18px; } .rz-article-page .rz-lightbox-next { left: 18px; } .rz-article-page .rz-lightbox-close { top: 18px; left: 18px; transform: none; font-size: 20px; } .rz-article-page .rz-lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ---------- video ---------- */ .rz-article-page .rz-article-video { margin: 0 0 28px; } .rz-article-page .rz-article-video video { width: 100%; height: auto; display: block; border-radius: var(--rza-radius); background: #000; } /* ---------- FAQ ---------- */ .rz-article-page .rz-article-faq { margin: 42px 0 0; } .rz-article-page .rz-article-faq > h2 { font-size: 27px; line-height: 38px; color: #1a1a1a; margin: 0 0 18px; } .rz-article-page .rz-article-faq details { border: 1px solid var(--rza-border); border-radius: var(--rza-radius); background: #fff; margin-bottom: 10px; } .rz-article-page .rz-article-faq summary { cursor: pointer; list-style: none; padding: 15px 18px; font-size: 16px; font-weight: 600; color: #262626; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rz-article-page .rz-article-faq summary::-webkit-details-marker { display: none; } .rz-article-page .rz-article-faq summary::after { content: "+"; color: var(--rza-primary); font-size: 20px; flex: 0 0 auto; } .rz-article-page .rz-article-faq details[open] summary::after { content: "\2013"; } .rz-article-page .rz-article-faq summary:hover { color: var(--rza-primary); } .rz-article-page .rz-article-faq summary:focus-visible { outline: 2px solid var(--rza-primary); outline-offset: -2px; } .rz-article-page .rz-article-faq-answer { padding: 0 18px 16px; border-top: 1px solid var(--rza-border); font-size: 16px; line-height: 30px; color: var(--rza-body); } .rz-article-page .rz-article-faq-answer p { margin: 14px 0 0; } .rz-article-page .rz-article-faq-answer a { color: var(--rza-primary); } /* ---------- CTA ---------- */ .rz-article-page .rz-article-cta { margin: 44px 0 0; padding: 30px; border-radius: var(--rza-radius); background: var(--rza-dark); color: #fff; text-align: center; } .rz-article-page .rz-article-cta h3 { color: #fff; font-size: 24px; line-height: 34px; margin: 0 0 10px; } .rz-article-page .rz-article-cta p { color: #c6d0d8; margin: 0 0 20px; } .rz-article-page .rz-article-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .rz-article-page .rz-article-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--rza-radius); font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid transparent; } .rz-article-page .rz-article-btn-primary { background: var(--rza-primary); color: #fff; } .rz-article-page .rz-article-btn-primary:hover { background: var(--rza-secondry); color: #fff; } .rz-article-page .rz-article-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .rz-article-page .rz-article-btn-ghost:hover { background: #fff; color: var(--rza-dark); } /* ---------- sources ---------- */ .rz-article-page .rz-article-sources { margin: 40px 0 0; padding: 22px 24px; background: var(--rza-soft); border-radius: var(--rza-radius); } .rz-article-page .rz-article-sources h2 { font-size: 19px; line-height: 28px; margin: 0 0 12px; color: #222; } .rz-article-page .rz-article-sources ul { margin: 0; padding-right: 20px; font-size: 15px; line-height: 28px; } .rz-article-page .rz-article-sources a { color: var(--rza-primary); } /* ---------- related articles ---------- */ .rz-article-page .rz-related-articles { margin: 50px 0 0; } .rz-article-page .rz-related-articles > h2 { font-size: 27px; line-height: 38px; margin: 0 0 22px; color: #1a1a1a; } .rz-article-page .rz-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 991px) { .rz-article-page .rz-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .rz-article-page .rz-related-grid { grid-template-columns: 1fr; } } .rz-article-page .rz-related-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--rza-border); border-radius: var(--rza-radius); background: #fff; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .rz-article-page .rz-related-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.10); transform: translateY(-3px); } .rz-article-page .rz-related-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eee; line-height: 0; } .rz-article-page .rz-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rz-article-page .rz-related-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; } .rz-article-page .rz-related-card h3 { font-size: 17px; line-height: 27px; margin: 0 0 9px; } .rz-article-page .rz-related-card h3 a { color: #1c1c1c; text-decoration: none; } .rz-article-page .rz-related-card h3 a:hover { color: var(--rza-primary); } .rz-article-page .rz-related-card p { font-size: 14px; line-height: 24px; color: #7c7c7c; margin: 0 0 14px; } .rz-article-page .rz-related-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--rza-primary); text-decoration: none; } .rz-article-page .rz-related-more:hover { color: var(--rza-secondry); } /* ---------- blog index (same scope, same identity) ---------- */ .rz-article-page .rz-blog-head { text-align: center; max-width: 760px; margin: 0 auto 40px; } .rz-article-page .rz-blog-head h1 { font-size: 36px; line-height: 48px; margin: 0 0 14px; color: #1a1a1a; } .rz-article-page .rz-blog-head p { font-size: 17px; line-height: 31px; color: var(--rza-body); } @media (max-width: 767px) { .rz-article-page .rz-blog-head h1 { font-size: 25px; line-height: 36px; } } .rz-article-page .rz-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 991px) { .rz-article-page .rz-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .rz-article-page .rz-blog-grid { grid-template-columns: 1fr; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .rz-article-page .rz-related-card, .rz-article-page .rz-article-gallery-item img { transition: none; } .rz-article-page .rz-related-card:hover { transform: none; } .rz-article-page .rz-article-gallery-item:hover img { transform: none; } } /* --------------------------------------------------------------------------- * CTA banner — readability fix (2026-09-02) * * COLOURS ONLY. No structural, spacing or typography change: the section, its * padding, its heading size and the button geometry are all exactly as before. * * What was wrong: * - supporting text sat at #c6d0d8 on the dark navy panel, which is a weak * contrast ratio and read as disabled rather than as copy; * - both secondary actions were transparent "ghost" buttons with a 45% * white border, so the WhatsApp action did not look clickable at all and * the three buttons carried no hierarchy. * * What changed: * - the supporting text is lifted to a high-contrast tone; * - the three actions now form a clear ladder — call (brand green, solid), * WhatsApp (solid, high contrast, obviously actionable), service page * (outlined but with a solid readable border); * - brand colours only: #019444 green, #f36523 accent, #152332 navy. * ------------------------------------------------------------------------- */ .rz-article-page .rz-article-cta h3 { color: #ffffff; } .rz-article-page .rz-article-cta p { color: #e9eff4; } /* 1 — primary action: call. Strongest weight on the page's main conversion. */ .rz-article-page .rz-article-cta .rz-article-btn-primary { background: var(--rza-primary); color: #fff; border-color: var(--rza-primary); } .rz-article-page .rz-article-cta .rz-article-btn-primary:hover { background: var(--rza-secondry); border-color: var(--rza-secondry); color: #fff; } /* 2 — WhatsApp: solid, so it reads as a button rather than an outline. */ .rz-article-page .rz-article-cta .rz-article-btn-wa { background: #ffffff; color: var(--rza-dark); border-color: #ffffff; } .rz-article-page .rz-article-cta .rz-article-btn-wa i { color: var(--rza-primary); } .rz-article-page .rz-article-cta .rz-article-btn-wa:hover { background: var(--rza-primary); border-color: var(--rza-primary); color: #fff; } .rz-article-page .rz-article-cta .rz-article-btn-wa:hover i { color: #fff; } /* 3 — service page: outlined, but with a border solid enough to be seen. */ .rz-article-page .rz-article-cta .rz-article-btn-svc { background: transparent; color: #ffffff; border-color: rgba(255,255,255,.85); } .rz-article-page .rz-article-cta .rz-article-btn-svc:hover { background: #ffffff; color: var(--rza-dark); border-color: #ffffff; } /* The legacy skin's link rules outrank the base `.rz-article-btn` declaration, which re-introduced an underline on the CTA buttons. Restored at the same scoped specificity as the colours above — this is the originally intended styling, not a new one. */ .rz-article-page .rz-article-cta .rz-article-btn, .rz-article-page .rz-article-cta .rz-article-btn:hover, .rz-article-page .rz-article-cta .rz-article-btn:focus { text-decoration: none; } /* Portrait clips: `width:100%` above makes a 9:16 video ~1460px tall inside the 820px article column, which swamps the section it illustrates. Cap the height and let the width follow the aspect ratio instead, centred in the column. Landscape clips are unaffected — they hit max-width first. */ .rz-article-page .rz-article-video video { width: auto; max-width: 100%; max-height: 620px; margin-inline: auto; } @media (max-width: 767px) { .rz-article-page .rz-article-video video { max-height: 460px; } } /* ========================================================================== Executed-project blocks (added 2026-09-09) A restrained card that marks a real project inside an article, plus a compact variant of the approved CTA to sit under it. Both are additive: nothing above this point changes, and `rzaz/contact-cta` without the new `compact` attribute renders exactly as it always has. ========================================================================== */ .rz-article-page .rz-project-block { margin: 34px 0; padding: 22px 22px 6px; border: 1px solid var(--rza-line, #e3e9ee); border-top: 3px solid var(--rza-primary); border-radius: var(--rza-radius); background: #fbfdfc; } .rz-article-page .rz-project-block > *:first-child { margin-top: 0; } /* Eyebrow — "من مشاريعنا المنفذة" */ .rz-article-page .rz-project-block .rz-project-eyebrow { display: inline-block; margin: 0 0 10px; padding: 5px 13px; border-radius: 20px; background: var(--rza-primary); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.6; } /* The project name reads as a title without competing with the article's h2/h3 */ .rz-article-page .rz-project-block .rz-project-title { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--rza-dark); margin: 0 0 10px; } .rz-article-page .rz-project-block figure { margin-bottom: 16px; } /* Compact CTA: same colours and buttons as the approved banner, tighter box. */ .rz-article-page .rz-article-cta--compact { margin: 0 0 18px; padding: 18px 20px; text-align: right; } .rz-article-page .rz-article-cta--compact h3 { font-size: 19px; line-height: 28px; margin: 0 0 6px; } .rz-article-page .rz-article-cta--compact p { margin: 0 0 14px; font-size: 15px; } .rz-article-page .rz-article-cta--compact .rz-article-cta-btns { justify-content: flex-start; gap: 10px; } .rz-article-page .rz-article-cta--compact .rz-article-btn { padding: 10px 20px; font-size: 15px; } @media (max-width: 600px) { .rz-article-page .rz-project-block { padding: 18px 16px 4px; } .rz-article-page .rz-project-block .rz-project-title { font-size: 18px; } .rz-article-page .rz-article-cta--compact { padding: 16px; text-align: center; } .rz-article-page .rz-article-cta--compact .rz-article-cta-btns { justify-content: center; } /* Full-width taps on phones so both actions are easy to hit. */ .rz-article-page .rz-article-cta--compact .rz-article-btn { flex: 1 1 100%; justify-content: center; } }