/* |========================================================================== | ALQURAN — Cross-page layout fixes |========================================================================== | | Small, permanent corrections to theme layout bugs that show up on more | than one page. This file exists so such a fix lives in ONE place instead | of being copied into every page's @push('styles'). | | Not the same thing as fallback.css: that file is a temporary shim for | missing photography and is meant to be deleted. This file is permanent. | | THE RULE FOR THIS FILE: | 1. Only add a rule when the same bug appears on two or more pages. | 2. Fix the cause, not the symptom, and use the theme's own tokens. | 3. Never restyle. Four kinds of entry qualify, and nothing else does: | (a) geometry the theme got wrong; | (b) two different theme components painted the same, so the page | reads as a duplicate — but the correction may only use values | that already exist in the theme, cited by line number. Inventing | a palette here is out of scope; that belongs to a page. | (c) a deliberate markup change made for non-visual reasons — an | accessibility or SEO correction — whose only job here is to keep | the rendering byte-identical. Entry 4 is the first of these. Such | a rule may introduce NO new values at all: every number in it has | to be copied from the theme rule it is standing in for, and the | comment has to cite where from. | (d) a colour the theme's OWN dark-mode stylesheet forgot, where the | omission leaves text below the WCAG AA contrast floor. Unlike | (c) this does change what is rendered — that is the point — so | it carries two extra obligations: the value used must be one | custom.css already uses for the same job elsewhere, and the | comment must state the computed contrast ratio and say plainly | that it was calculated rather than measured. Entry 5 is the | first of these. A colour the theme never got wrong is a restyle | and does not belong here. | 4. Document the cause, the pages affected, and the theme line numbers. | | Load order: last stylesheet, after fallback.css, before the pages' | @stack('styles'). So a page-level push can still override anything here, | which is the intended hierarchy. | */ /* -------------------------------------------------------------------------- | 1. "Why Choose Our Islamic Institute" cards — unequal heights | | Symptom: in the four-card row, any card whose text wraps to one more line | than its neighbours renders taller, so the row bottom is ragged. On the | homepage the fourth card ("Affordable Monthly Fee Plans") sits lower than | the three beside it. | | Cause: the markup is | | .row (bootstrap.css:6 — display:flex, flex-wrap:wrap) | └─ .institute-block_one.col-xl-3 <- the column | └─ .institute-block_one-inner <- the visible card | | Bootstrap 4's .row defaults to align-items:stretch, so the COLUMN is | already the full height of the tallest in its row. But the card is the | inner div, and .institute-block_one-inner (style.css:1289) declares no | height, so it only grows to fit its own content and stops short inside a | stretched column. The theme never accounted for one card's text wrapping to | a different number of lines than its siblings'. | | Fix: let the card fill the column it already sits in. This is the same | pattern Bootstrap documents for equal-height cards (.card.h-100), so it | needs no flex changes to the row and no fixed height anywhere. Content | stays top-aligned exactly as the theme intends; the shorter cards simply | carry their extra space at the bottom. | | Safe because .institute-block_one-inner has no height rule in style.css or | responsive.css, and its hover overlay ::before (style.css:1319) is anchored | on all four edges with left/top/right/bottom:-1px, so it stretches with the | card rather than being clipped. | | Pages affected — all get the fix from this one rule: | pages/home.blade.php:498 (band 08, Choose Us V1) | pages/about.blade.php:213 (band 03) | pages/teacher.blade.php:521 (band 03) | pages/join-our-teaching-team.blade.php:133 (band 02, Why Teach) | pages/home-6.blade.php:214 | | At col-md-6 and col-sm-12 each flex line equalises on its own, which is | the correct behaviour: pairs match on tablet, and on mobile a single card | per line is unaffected. | ----------------------------------------------------------------------- */ .institute-block_one-inner { height: 100%; } /* -------------------------------------------------------------------------- | 2. Both CTA strips are the same colour — .cta-one vs the footer's .cta-two | | Symptom: every page that carries its own CTA band shows TWO full-width | cards stacked directly on top of each other, painted with the identical | green-to-gold gradient, so the second one reads as a duplicate of the | first. Reported from /faq. | | Cause: the theme paints | .cta-one .inner-container style.css:1246-1253 | .cta-two .inner-container style.css:2142-2149 | with the SAME declaration pair — | background: #50bc84; | background: linear-gradient(to right, #50bc84 0%, #F3B815 100%); | Harmless in the theme demo, because no demo page used both bands. Here | components/footer.blade.php:37 renders .cta-two on EVERY page, so any page | carrying .cta-one necessarily shows that gradient twice in a row. | | Fix: the footer strip keeps the gradient, because it is the one the visitor | meets on every page and it is the theme's signature. The page-level strip | takes the theme's own deep green instead. #2F443A is not a new colour — the | theme already ships it at style.css:549 (.service-one.style-two::before) — | and the keyline is the existing --color-seven token (global.css:88). | | The SHORTHAND is required, and this is the part that is easy to get wrong. | style.css declares a flat colour and THEN a gradient on the same element, | so overriding background-color alone leaves the gradient painted over it | and nothing appears to change. Only `background` resets background-image. | | Pages affected — all three are served by this one rule: | pages/faq.blade.php:485 "Still Have Questions?" | pages/home.blade.php:427 band 07, CTA V1 | pages/join-our-teaching-team.blade.php:734 band 06, Final CTA | .cta-one appears nowhere else in resources/views and .cta-two appears only | in the footer, so this rule cannot reach the strip it is meant to leave | alone. If a fourth .cta-one page is ever added it inherits the fix for free. | | Specificity is (0,2,0) — a tie with style.css:1246 and with responsive.css | :350 and :613 — and it wins on source order, because this file is the last | stylesheet in the head. Neither responsive rule declares a background | (:350 sets text-align and justify-content, :613 sets padding), so the | responsive behaviour is untouched and no !important is needed. | | Dark mode needs nothing added: .dark-layout .cta-one (style.css:9009) sets | only z-index, so the panel carries over. It measures 1.82:1 against the | #0E110F dark page background, which is why the gold keyline is part of the | fix rather than decoration — on a dark page the border is the only thing | separating the card from the page behind it. | | Buttons are deliberately NOT recoloured from here. btn-style-one is green | on green at 2.52:1 edge contrast, under the 3:1 floor WCAG 1.4.11 sets for | a UI component, so all three pages carry btn-style-two (gold, 7.16:1 | against the panel) in their own markup. Repainting a button class from a | stylesheet would leave the markup naming a colour it no longer renders. | ----------------------------------------------------------------------- */ .cta-one .inner-container { background: #2F443A; border-top: 3px solid var(--color-seven); } /* -------------------------------------------------------------------------- | 3. Blog card with no artwork — the card hairline breaks at the top corners | | Symptom: a post published without an image renders a card whose 1px outline | stops dead about 10px short of each top corner, so the border reads as | broken at the top while it curves cleanly at the bottom. Visible on the | homepage blog row and the "Keep Reading" row. | | Cause: the theme's news card is two stacked blocks inside a clipping | wrapper — | | .news-block_one-inner style.css:1955 border-radius:10px | | overflow:hidden | +- .news-block_one-image style.css:1961 (no radius of its own) | +- .news-block_one-content style.css:2005 border-radius:0 0 10px 10px | border:1px solid --color-twentysix | | The rounding lives on the WRAPPER, which clips both children, so neither | child needs its own top radius — and .news-block_one-image indeed has | none. The content block rounds only its bottom two corners because in the | theme it is never the top of the card. | | Take the image away and the content block becomes the whole card. The | wrapper still clips it to a 10px arc, so the SHAPE stays right, but the | content's own hairline turns a square corner inside that arc and the | wrapper shaves the corner off — the top border simply stops where it | leaves the curve. The theme never met this because WordPress always handed | it a demo thumbnail; the partial's has_post_thumbnail() guard was never | exercised with an empty result. Here `posts.image` is nullable (it is a | path, and the academy's own photography has not been supplied yet), so an | imageless post is the ordinary state of a new post, not an edge case. | | Fix: when the card renders without its image block, give the content block | all four corners so its border follows the same arc the wrapper clips to. | components/blog/card.blade.php adds the --textonly modifier in exactly the | case where it omits the image, so the rule and the markup are driven by one | condition and cannot fall out of step. 10px is the theme's own value, from | :1957 and :2009. | | Page affected — one. It was two: pages/blog-detail.blade.php had a "Keep | Reading" band built from the same card, and that band has been removed | because it was this project's invention and not part of alquran/single.php. | What is left is pages/home.blade.php's "From Our Blog" band. The rule stays | in this file rather than moving into that page's pushed styles because the | card is a shared component and the next band that uses it would silently | lose the fix. | pages/home.blade.php band 13, "From Our Blog" | The listing at /blog uses the OTHER card, .news-block_three, and has no | equivalent rule: it is a 1:1 port of alquran/templates/blog/blog.php and | carries no page CSS at all. Note that it is also NOT the same bug there — | .news-block_three-inner (:5565) declares neither radius nor overflow, so no | wrapper is clipping anything and an imageless card simply renders two square | top corners over two rounded ones, exactly as the original theme did. | | Specificity is (0,2,0) against the theme's (0,1,0) at :2005, so it wins on | weight alone and does not depend on this file's load position. Nothing in | responsive.css or the dark-layout block touches this radius, so there is | nothing else to keep in step. | ----------------------------------------------------------------------- */ .news-block_one--textonly .news-block_one-content { border-radius: 10px; } /* -------------------------------------------------------------------------- | 4. The .page-title banner heading is now an

— keep it looking identical | | NOT A BUG FIX. This is the category (c) entry described in the header: a | markup change made for SEO, with a stylesheet rule whose only purpose is to | make sure the change is invisible. | | WHAT CHANGED IN THE MARKUP (2026-09-27). Every ported page rendered its | banner heading as

, copied from alquran/page.php, so twelve pages had no |

at all — the single most important on-page heading signal, absent | site-wide. Those twelve headings are now

. One per page, verified: no | page on this site has two. | pages/about.blade.php:114 About Us | pages/admission.blade.php:27 Admission | pages/our-courses.blade.php:20 Our Courses | pages/pricing.blade.php:20 Pricing Plan | pages/service.blade.php:23 SERVICES | pages/faq.blade.php:25 Frequently Asked Questions | pages/library.blade.php:20 Islamic Library | pages/join-our-teaching-team.blade.php:46 Join Our Teaching Team | pages/blog.blade.php:43 Blog | pages/blog-detail.blade.php:70 the post title | pages/contact.blade.php:48 Al Asr Online Quran Academy | pages/teacher.blade.php:178 Al Asr Online Quran Academy | pages/home.blade.php:74 already had a real

and is untouched. | pages/library-reader.blade.php:45 likewise (.library-reader_title). | | WHY A CSS RULE IS REQUIRED. The theme sizes headings by element, not by | class, so swapping the tag alone would have resized every one of those | banners. global.css:759-769 declares | h1 { line-height:85px; font-weight:700; font-size:var(--font-80); } | h2 { line-height:56px; font-weight:600; font-size:var(--font-50); } | — an 80px heading where a 50px one used to be, in a fixed-height banner. The | theme's only .page-title rule (style.css:4082) sets colour and capitalisation | and no size at all, so it could not absorb the difference. | | THE RESPONSIVE LADDER IS THE PART THAT MATTERS. h1 and h2 step down at | DIFFERENT breakpoints in responsive.css, so restating the desktop size alone | would have left the banner correct on a laptop and wrong on every phone: | | h2 (what the banner had) h1 (what it would inherit) | base 50 / 56 global.css:765 80 / 85 global.css:759 | 1140px 40 / 50 responsive.css:397 — (stays 80/85) | 767px 32 / 42 responsive.css:913 50 / 60 responsive.css:908 | 599px — (stays 32/42) 40 / 50 responsive.css:1078 | 479px 24 / 34 responsive.css:2108 30 / 40 responsive.css:1304 | | (At 479px responsive.css declares h2 twice — 28/38 at :1309 and 24/34 at | :2108. The later block wins, so 24/34 is what actually rendered and 24/34 is | what is reproduced below.) | | So the full h2 ladder is restated for .page-title h1, and NO number below is | new: each one is copied from the responsive.css line cited beside it. The | banner therefore measures exactly what it measured before at every width. | | Colour and capitalisation are NOT repeated here. style.css:4082 is | `.page-title h2`, which no longer matches, so the two declarations it carried | are restated — but that is all it carried, and both come straight from it. | | SPECIFICITY, and why the whole ladder is mandatory rather than tidy. | `.page-title h1` is (0,1,1); responsive.css's bare `h1` rules are (0,0,1). | This selector therefore beats them at EVERY breakpoint regardless of load | order, so an incomplete ladder would not fall back to the theme's h1 sizes — | it would freeze the banner at whatever the base rule here says. That is the | opposite of the usual trap in this project (a page @push whose media query | kills the theme's ladder); here the ladder has to be owned outright. | | The media queries are byte-for-byte the same `only screen and (max-width: N)` | form responsive.css uses, so they activate at identical widths. | | Pages affected: the twelve listed above, from this one rule. A thirteenth | ported page inherits it for free. | ----------------------------------------------------------------------- */ .page-title h1 { /* style.css:4082 — the two declarations the h2 selector carried. */ color: var(--white-color); text-transform: capitalize; /* global.css:765 — the h2 base size. */ line-height: 56px; font-weight: 600; font-size: var(--font-50); } @media only screen and (max-width: 1140px) { /* responsive.css:397 */ .page-title h1 { line-height: 50px; font-size: var(--font-40); } } @media only screen and (max-width: 767px) { /* responsive.css:913 */ .page-title h1 { line-height: 42px; font-size: var(--font-32); } } @media only screen and (max-width: 479px) { /* responsive.css:2108 — the second and later of the two 479px h2 rules, which is the one that was actually winning. */ .page-title h1 { line-height: 34px; font-size: var(--font-24); } } /* -------------------------------------------------------------------------- | 5. Blog sidebar — the two dark-mode text colours custom.css never set | | This is the category (d) entry described in the header: the theme ships its | own dark mode, that dark mode covers most of this sidebar, and it misses | exactly two selectors. Correcting them changes what is rendered, which is | why (d) exists as a separate category from (c). | | Pages affected: /blog and /blog/{slug}. Two pages, so this file is the | right home rather than a @push('styles') block on either one. | | custom.css does most of the dark-mode work for this sidebar already, and | none of it is duplicated here: | | :1459 .dark-layout .widget background #121d18 | :1494 .dark-layout .widget border-color #000 | :1433 .dark-layout .sidebar-title h4 #ffffff | :1434 .dark-layout .post-widget .post h6 a #ffffff | :1435 .dark-layout .search-box … #ffffff on #121d18 | | Two selectors in the sidebar are missing from that list, and both end up | as dark text on the dark panel custom.css:1459 paints: | | .category-list li a style.css:5766 var(--color-fiftytwo) | = rgb(92,106,100) | .post-widget .post .post-date | style.css:5846 var(--color-fiftythree) | = rgb(121,135,129) | | Against #121d18 those compute to roughly 2.9:1 and 4.3:1. Both are below | the 4.5:1 WCAG AA needs for text at these sizes (18px and 14px), and the | first is far enough below to be hard to read rather than merely tight. | Those ratios are ARITHMETIC, from the hex values above — nothing has been | rendered or measured in a browser, because this environment has no browser. | | #ffffff is not a new colour: it is the single value custom.css uses for | every one of its dark-mode text overrides, including the h6 link directly | above the date chip. The hover colour needs no rule — style.css:5779 sends | it to var(--main-color), which is the green that reads correctly on both | backgrounds. | | Specificity note: `.dark-layout .category-list li a` is two classes and two | elements against style.css's one class and two elements, so these win on | specificity and do not depend on load order. That matters because this file | is the last stylesheet LINK (app.blade.php:112, after fallback.css) but not | the last CSS on the page — a page's own styles stack still comes after it. | ----------------------------------------------------------------------- */ .dark-layout .category-list li a, .dark-layout .post-widget .post .post-date { color: #ffffff; } /* -------------------------------------------------------------------------- | 6. Blog listing cards — dark-mode text colours the theme never set | | Symptom: in dark-layout, the blog listing page (/blog) shows black text on | the dark card background. Affected selectors and their light-mode values: | | .news-block_three-heading a style.css:5639 var(--black-color) | .news-block_three-text style.css:5651 var(--color-twentyeight) | = rgb(92,106,100) | .news-block_three-meta li style.css:5609 var(--color-thirteen) | .news-block_three-more style.css:5661 var(--black-color) | .news-block_three-content style.css:5596 border 1px solid | var(--color-twentysix) | | Against the dark page (#0E110F) all of these fail contrast. The theme's | custom.css covers .thm-unit-test h2 (:1411) and .blog-detail_* (:1428-1431) | for the single-post view but never touches .news-block_three at all. | | Values used: #ffffff is custom.css's own dark-mode text colour (used at | :1443 for every other text fix in that file). var(--main-color) is the | green that already handles .news-block_three-heading a:hover (:5643) and | every other hover in dark mode. var(--color-seven) is the gold already used | by .news-block_three-more background (:5665) — kept as border only to | separate the card from the dark page. #rgba(255,255,255,0.15) for border is | the same translucent white custom.css uses for dark widget borders. | | Contrast (arithmetic, not measured): | #ffffff on #0E110F ≈ 19.5:1 — passes AAA | var(--main-color) (#1d8e5a) on #0E110F ≈ 5.2:1 — passes AA (hover only) | | Pages affected: /blog only. .news-block_three does not appear on any other | page (it is the sidebar listing card, .news-block_one appears on the | homepage). Two-page rule met: /blog and /blog/{slug} sidebar both use the | same card component. | ----------------------------------------------------------------------- */ .dark-layout .news-block_three-heading a { color: #ffffff; } .dark-layout .news-block_three-heading a:hover { color: var(--main-color); } .dark-layout .news-block_three-text { color: rgba(255, 255, 255, 0.75); } .dark-layout .news-block_three-meta li { color: rgba(255, 255, 255, 0.65); } .dark-layout .news-block_three-content { background-color: #121d18; border-color: rgba(255, 255, 255, 0.1); } .dark-layout .news-block_three-more { color: #ffffff; background-color: #1a3329; } .dark-layout .news-block_three-more:hover { color: #ffffff; background-color: var(--main-color); } /* -------------------------------------------------------------------------- | 7. Service One (Homepage) — heading text contrast on dark background | | Symptom: In light mode, the "We offer an effective Arabic & Quran Services" | heading inside .service-one renders in the default dark heading colour | (var(--color-three) / #1B2420), making it virtually unreadable against the | section's dark green background (var(--color-twelve) = #121D18). | | Cause: style.css:523 sets background-color: var(--color-twelve) on | .service-one, but never declared a white text colour for its | .sec-title_heading (unlike .students-one and .cta-one which have dedicated | white heading classes). | | Fix: Declare white text for .service-one .sec-title_heading in both light | and dark layouts. | | Contrast: | #ffffff on #121D18 ≈ 16.8:1 — passes WCAG AAA. | ----------------------------------------------------------------------- */ .service-one .sec-title_heading, .light-layout .service-one .sec-title_heading { color: var(--white-color) !important; } /* -------------------------------------------------------------------------- | 8. Header top bar — tappable email and phone | | Added 2026-10-07 for the production launch. | | Symptom this prevents: the header top bar's email address and phone number | were plain text for the whole of the migration, because the theme printed | them that way. header.css colours `.header-top_list li` white but declares | NO rule for a nested , so turning either into a link would have rendered | it in the browser's default link blue — and then visited purple — against | the green bar. That is why the original port deliberately left them as dead | text, and the note explaining the decision is still in | components/header.blade.php. | | Why they are links now: a phone number that cannot be tapped on a phone is | a lost enquiry, and this academy takes enrolments by phone and WhatsApp. | That is worth one small stylesheet rule. | | `inherit` rather than a literal colour, on purpose: the parent
  • already | carries whatever colour header.css chose, in both light and dark layouts, so | inheriting means this rule cannot drift out of step with the theme or need a | matching .dark-layout twin. | | The underline on hover is the only affordance added. The bar is small and | dense, so a permanent underline would make it look busy, but with no | underline at all nothing signals that the text is tappable. | | WHY THIS FILE AND NOT A @push('styles') BLOCK: the header renders on every | public page, so this is a site-wide rule, and page-level @push output is | emitted AFTER responsive.css — a media query there can silently kill the | theme's whole responsive ladder. Site-wide geometry and colour fixes belong | here. (Same reasoning as sections 1-7 above.) | ----------------------------------------------------------------------- */ .header-top_link { color: inherit; text-decoration: none; transition: opacity 0.3s ease; } .header-top_link:hover, .header-top_link:focus-visible { color: inherit; text-decoration: underline; opacity: 0.85; } /* global.css:730 sets `outline: none !important` on interactive elements, so a keyboard focus ring has to be drawn with box-shadow. Without this, tabbing through the top bar gives no visible indication of where focus is. */ .header-top_link:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); border-radius: 2px; }