/* * sections.css — layout styles for the CMS section templates * (resources/views/sections/templates/*). Loaded globally because sections * render on multiple pages (home, article, category, saved, writer). */ /* ── Direction-aware alignment ───────────────────────────────────────── * Article cards must follow (set from the locale in * layouts/partials/main.blade.php): right-aligned in Arabic, left-aligned * in English. Bootstrap 4 only ships the physical .text-right/.text-left, * so the card text side uses the logical `start` keyword instead. */ .text-align-start { text-align: start !important; } /* Bootstrap 4 only ships physical spacing utilities (ml- and mr-), which put the * gap on the wrong side once the document flips. `inline-end` always means * "after this element in reading order" — left in RTL, right in LTR. */ .margin-inline-end-1 { margin-inline-end: 0.25rem !important; } /* ── Text banners ────────────────────────────────────────────────────── * Banner copy is short, free-form and often several lines (it comes from the * CMS via nl2br), so it reads as a centred block rather than hugging the * start edge. Centring is direction-neutral, so it holds in ar and en alike. */ .banner-text { text-align: center; } /* ── Article details hero (sections/article-hero.blade.php) ──────────── * Cover sits small beside the text instead of spanning the full width above * it, with the byline stacked under the title. Column order flips with the * document direction on its own — .row is flexbox and follows . */ .article-hero { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .article-hero__category { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; } .article-hero__dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; } .article-hero__title { font-size: 2.25rem; line-height: 1.35; margin-bottom: 1rem; } /* Holds the writer's introduction, so it carries rich markup (paragraphs, lists, links) rather than a single line of text. */ .article-hero__excerpt { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem; } .article-hero__excerpt > :last-child { margin-bottom: 0; } /* Byline: author, then publish date, then reading time — one per line. */ .article-hero__meta { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; } .article-hero__author { font-weight: 700; } .article-hero__figure { margin: 0; } .article-hero__image { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 0.75rem; } .article-hero__caption { margin-top: 0.5rem; font-size: 0.8rem; } /* Below the lg breakpoint the columns stack. Pull the cover above the text so the page still opens on the image rather than burying it under the byline. */ @media (max-width: 991.98px) { .article-hero__media { order: -1; margin-bottom: 1.25rem; } .article-hero__image { max-height: 320px; } } @media (max-width: 768px) { .article-hero__title { font-size: 1.6rem; } .article-hero__excerpt { font-size: 1rem; } .article-hero__image { max-height: 240px; } } /* ── Gap BETWEEN CMS sections on mobile ──────────────────────────────── * Scope: the space separating one section (the blocks configured in * /cp/sections) from the next — NOT the spacing between article cards * inside a section, which stays at the template's own mb-4 / mb-5. * * Each section template carries Bootstrap's my-4 / my-5, so every boundary * pays this section's bottom margin (3rem) plus the next one's top margin * (3rem). On desktop that reads as deliberate; on mobile, where the whole * page is one stacked column, it left a large dead band before each heading. * * .section-block is a marker on the stacking section templates rather than a * bare `section.container-xl` selector, which would also catch the article, * contact, about, terms and writer page wrappers. */ @media (max-width: 767.98px) { .section-block { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } /* The LAST card in a section carries the same mb-4 as the others, but with nothing after it that margin is not spacing between articles — it is trailing space that lands on the section boundary. Drop it there only; every gap between two cards keeps the template's own margin. */ .section-block .row > [class*="col-"]:last-child { margin-bottom: 0 !important; } } /* ── List template (قائمة عمودية) ────────────────────────────────────── * Fixed, aspect-safe thumbnail so any cover — or the default placeholder — * renders consistently regardless of its intrinsic dimensions. */ .list-thumb-wrap { display: block; width: 220px; max-width: 100%; } .list-thumb { width: 100%; height: 150px; object-fit: cover; display: block; } @media (max-width: 575.98px) { .list-thumb-wrap { width: 100%; } .list-thumb { height: 200px; } } /* ── Featured + Top posts template (مميز + الأكثر قراءة) ──────────────── * A large "Today's featured" card beside a compact ranked list. * * The site ships Bootstrap 4.6 with no RTL build, so its directional * utilities (text-right, ml-*, mr-*) are physical and would be wrong on /en. * Every direction-sensitive value here uses logical properties instead * (text-align: start, inset-inline, margin-inline-*) plus flex `gap`, which * flip automatically off — correct in Arabic and English from one * rule set. Colors come from the --site-* theme registry that the admin * controls in Site Settings → Appearance, never hardcoded hex. */ .featured-top-heading { text-align: start; font-weight: 700; color: var(--site-text, #212529); margin-bottom: 0.25rem; } .featured-top-subheading { text-align: start; color: var(--site-text-secondary, #afafaf); margin-bottom: 1.25rem; } /* flex-wrap + flex-basis collapses to a single column on its own below * ~880px; the media queries below only tune spacing and image height. */ .featured-top-layout { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; } .featured-top-hero { flex: 1 1 480px; min-width: 0; position: relative; } .featured-top-list { flex: 1 1 360px; min-width: 0; } .featured-top-hero-link { display: block; position: relative; border-radius: 1rem; overflow: hidden; } .featured-top-hero-img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; } .featured-top-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%); } .featured-top-hero-body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem 1.5rem; text-align: start; } .featured-top-eyebrow { display: inline-block; padding: 0.15rem 0.6rem; margin-bottom: 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background-color: var(--site-primary, #ffaa4c); color: #fff; } .featured-top-hero-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.35; color: #fff; } .featured-top-list-heading { text-align: start; font-size: 1.1rem; font-weight: 700; color: var(--site-text, #212529); margin-bottom: 0.5rem; } .featured-top-rows { list-style: none; margin: 0; padding: 0; } .featured-top-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 0; } .featured-top-row + .featured-top-row { border-top: 1px solid rgba(0, 0, 0, 0.08); } .featured-top-rank { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; line-height: 1; background-color: var(--site-primary, #ffaa4c); color: #fff; } .featured-top-row-body { flex: 1 1 auto; min-width: 0; text-align: start; } .featured-top-row-title { display: block; font-weight: 700; line-height: 1.45; color: var(--site-text, #212529); } .featured-top-row-title:hover { color: var(--site-link-hover, #ff8600); } .featured-top-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--site-text-secondary, #afafaf); } .featured-top-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .featured-top-author { color: var(--site-text-secondary, #afafaf); } .featured-top-author:hover { color: var(--site-link-hover, #ff8600); } .featured-top-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; } .featured-top-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; line-height: 1.6; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.03); color: var(--site-text, #212529); } .featured-top-pill:hover { text-decoration: none; color: var(--site-link-hover, #ff8600); } /* Accent comes from the article's category colour, passed inline by the view. */ .featured-top-pill-category { border-color: var(--pill-accent, #6c757d); } @media (max-width: 900px) { .featured-top-layout { gap: 1.5rem; } .featured-top-hero, .featured-top-list { flex: 1 1 100%; } .featured-top-hero-img { min-height: 300px; } } @media (max-width: 768px) { .featured-top-hero-img { min-height: 220px; } .featured-top-hero-body { padding: 1rem; } .featured-top-hero-title { font-size: 1.15rem; } .featured-top-row { padding: 0.875rem 0; } .featured-top-rank { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; } } /* ── Article share buttons ───────────────────────────────────────────── * The icon-only links under an article (sections/social-share.blade.php). * Each button wears its platform's own brand colour instead of the flat * grey the icons used to carry inline, so the row reads at a glance. * * The colour is passed through --share-brand, which the hover, the focus * ring and the dark-mode edge all reuse — a new network only needs one * modifier class with its brand value. * * Spacing lives here rather than on Bootstrap's `gap-*` utilities: this * project ships Bootstrap 4, which has none. */ .article-share-links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .article-share-link { --share-brand: #6c757d; /* neutral fallback for a network with no modifier */ display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--share-brand); color: #fff; font-size: 1.125rem; line-height: 1; text-decoration: none; transition: filter 0.15s ease-in-out, transform 0.15s ease-in-out; } .article-share-link:hover, .article-share-link:focus { color: #fff; text-decoration: none; filter: brightness(1.1); transform: translateY(-1px); } .article-share-link:focus-visible { outline: 2px solid var(--share-brand); outline-offset: 2px; } .article-share-link--telegram { --share-brand: #229ED9; } .article-share-link--whatsapp { --share-brand: #25D366; } .article-share-link--facebook { --share-brand: #1877F2; } @media (max-width: 768px) { .article-share-links { gap: 0.5rem; } .article-share-link { width: 2.25rem; height: 2.25rem; font-size: 1rem; } }