/* --------------------------------------------------------------------------- Accessibility correction: text colour on brand-gold surfaces. The brand primary is gold #C59848. Measured against WCAG 2.1: gold #C59848 on white #ffffff -> 2.18:1 FAILS AA (needs 4.5:1) white #ffffff on gold #C59848 -> 2.18:1 FAILS AA navy #021930 on gold #C59848 -> 8.57:1 passes AA and AAA The theme hardcodes `color:#fff` on primary-coloured buttons, e.g. .theme_line_btn:hover { color:#fff; background:var(--system_primery_color) } .theme_btn_lite:hover { ... } .white_btn:hover { ... } That was legible with the stock purple (#660AFB) but fails badly with gold. The design reference specifies gold on a DARK navy canvas, where it passes comfortably. infixlmstheme is light-first, so the pairing has to be corrected here instead. This file is the vendor's own Custom CSS hook (admin: Frontend > Custom CSS/JS) and is loaded LAST in _header.blade.php, so it wins without touching the minified stylesheets -- which cannot be rebuilt anyway, since resources/sass and node_modules are not shipped. --------------------------------------------------------------------------- */ .theme_btn, .theme_btn1, .theme_btn_lite:hover, .theme_line_btn:hover, .white_btn:hover, .primary_btn, .btn_primary { color: #021930; } /* Keep icons inside those buttons in step with the label. */ .theme_btn svg, .theme_btn1 svg, .theme_btn_lite:hover svg, .theme_line_btn:hover svg, .white_btn:hover svg { color: #021930; stroke: currentColor; } /* Gold as TEXT on a light background is 2.18:1 and unreadable. Where the theme uses the primary colour for standalone text or links, darken to a gold that still reads as brand but clears AA on white (#72582A -> 5.1:1). */ a.text-primary, .text_primary, .section_title span.primary_color { color: #72582A; } /* Visible keyboard focus (WCAG 2.4.7). CORRECTION: a previous version of this rule used `outline: 3px solid #C59848`. Gold on white is 2.18:1 and on the testimonial surface #f8f8fe it is 2.06:1, but SC 1.4.11 Non-text Contrast requires 3:1 for a focus indicator -- so the fix for 2.4.7 was itself a 1.4.11 failure. Two-tone ring instead: navy is 18.71:1 on white and 8.57:1 on gold, so it is visible on every surface here. */ .theme_btn:focus-visible, .theme_btn1:focus-visible, .primary_btn:focus-visible, .primary-btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #021930; outline-offset: 2px; box-shadow: 0 0 0 6px #D5B57B; } /* --------------------------------------------------------------------------- LOAD-ORDER CORRECTION. This file is NOT last. It is emitted in , but sections/homepage_v7.css, homepageV7/header-v7.css and homepageV7/footer-v7.css all load AFTER it, so an equal-specificity rule here loses to them. The rules below are written with extra specificity (or !important where the source rule could not be located) specifically to survive that. --------------------------------------------------------------------------- */ /* Header register button. My earlier rule targeted `.primary_btn` (underscore); the real class is `.primary-btn` (hyphen), so white-on-gold at 2.18:1 was never actually fixed. Hover removes the gold overlay and exposes #1F2B40, which is 14.21:1 against white -- so hover must STAY white. */ .heading .primary-btn, .heading-end .primary-btn { color: #021930; } .heading .primary-btn:hover, .heading-end .primary-btn:hover { color: #fff; } /* REMOVED: a rule targeting `.theme_according .card-header.pink_bg .btn.btn-link`. It was written from the Blade source and never matched anything, so the FAQ headers kept shipping #fff on the gold gradient -- a live 2.18:1 AA failure that looked fixed. The theme's JS rewrites the accordion after load: .card -> .accordion-item .card-header.pink_bg -> .accordion-header .btn.btn-link -> .accordion-button Confirmed by dumping the post-JS DOM: 0 occurrences of `card-header pink_bg`, 4 each of accordion-item/header/button. The working rules are in the accordion block further down. Lesson: for JS-rewritten components, read the RUNTIME DOM, not the template. */ /* "Browse all other categories" tile: white on gold, measured 2.03:1. */ .category_area .brouse_cat_btn { color: #021930; /* The RTL build mechanically flipped text-align to `left`, which gives Arabic a ragged RIGHT edge -- the wrong ragged edge for RTL. */ text-align: right; } /* Footer contact bar: white on gold, measured 1.82:1. */ .footer .footer-wraper, .footer .footer-wraper a, .footer .footer-wraper h4, .footer .footer-wraper span { color: #021930 !important; } /* Phone numbers render reversed in RTL: a stored "+968 ..." displayed as "2784 9700 968+". Users would dial it wrong. Force the LTR run. */ .footer a[href^="tel:"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Category tiles have NULL thumbnails, so `asset(null)` emits url('http://127.0.0.1/upload/') -- the browser fetches the homepage HTML as an image, fails, and leaves a 330-360px transparent block with an invisible white pill on it. Give the tiles a surface so they read as cards until real artwork is uploaded. */ .category_area .category_wiz .thumb { background-color: #0d2138; background-size: cover; background-position: center; } .category_area .category_wiz .thumb .cat_btn { box-shadow: 0 2px 12px rgba(0, 0, 0, .15); } /* Interim bidi guard. Any English left in an RTL block throws its trailing punctuation to the wrong end (".career", "Real .results"). Translation is the real fix and is under way; this stops the visible damage meanwhile. It does NOT satisfy SC 3.1.2 Language of Parts -- only lang="en" on the run does. */ .banner_text h3, .banner_text p, .section__title h3, .section__title p, .cta_service_info h4, .cta_service_info p { unicode-bidi: plaintext; } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE VISUAL SYSTEM --------------------------------------------------------------------------- The theme ships each homepage block with its own unrelated padding figure (.category_area 120 bottom, .testmonial_area 140/240, .blog_area 120, .service_cta_area 120 + a .border_top_1px spacer carrying another 150). Nothing shares a scale, so the page reads as disconnected islands. The rules below re-time the page on one scale, then give the two content-bearing sections -- categories and courses -- an actual designed treatment. Load order: this file is followed by sections/homepage_v7.css and homepageV7/{header,footer}-v7.css. Those carry element resets (body, p, a, h1-h6) and v7 header/footer classes only, so the scoped selectors here win on specificity. frontend_style_rtl.css loads BEFORE this file, so a rule of equal specificity already beats it; !important is used only where the source declaration sits on a longer selector. RTL: logical properties throughout (margin-inline, inset-inline, padding- block). The one place a physical value is unavoidable is the chevron rotation, which is branched on html[dir]. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Brand */ --hx-gold: #C59848; --hx-gold-bright: #D5B57B; --hx-gold-deep: #72582A; --hx-navy-deep: #021930; --hx-navy: #032D58; --hx-navy-surface: #21466C; --hx-ink: #f4f7fb; --hx-ink-2: #b8c5d4; /* Neutrals pulled toward the navy so the greys read warm-navy, not grey */ --hx-line: #e2e8f0; --hx-line-soft: #eef2f7; --hx-tint: #f5f8fc; --hx-body: #4a5a6b; /* Vertical rhythm. One scale, used by every section. */ --hx-sec: 96px; --hx-gap: 30px; /* Radii + elevation */ --hx-r-lg: 18px; --hx-r-md: 14px; --hx-r-sm: 10px; --hx-e1: 0 1px 2px rgba(4, 19, 35, .04), 0 10px 30px -18px rgba(4, 19, 35, .28); --hx-e2: 0 2px 6px rgba(4, 19, 35, .06), 0 26px 50px -24px rgba(4, 19, 35, .38); --hx-e-gold: 0 18px 40px -20px rgba(217, 168, 62, .55); } @media (max-width: 991.98px) { :root { --hx-sec: 60px; --hx-gap: 20px; } } /* --------------------------------------------------------------------------- 1. VERTICAL RHYTHM Every homepage band re-timed onto --hx-sec. Theme values noted per rule so the change stays auditable. --------------------------------------------------------------------------- */ /* was: padding-bottom:120px */ .category_area { padding-block-end: var(--hx-sec); } /* was: margin-top:-100px; margin-bottom:150px -- the 150 is what stranded the category heading in the middle of an empty screen. */ .category_area .couses_category { margin-block: -90px var(--hx-sec); padding: 44px 48px; border-radius: var(--hx-r-lg); box-shadow: var(--hx-e2); } /* was: padding:150px 0 */ .cta_area { padding-block: 110px; } /* was: padding:139px 0 120px */ .course_area.section_spacing { padding-block: var(--hx-sec); } /* was: padding-top:140px; padding-bottom:240px */ .testmonial_area { padding-block: var(--hx-sec); } /* was: padding-bottom:120px, plus a .border_top_1px spacer holding its own 150px padding-bottom. Two separate 100px+ figures stacked. */ .service_cta_area { padding-block-end: var(--hx-sec); } .service_cta_area .border_top_1px { padding-block-end: var(--hx-sec); } /* was: padding:120px 0 (this block wraps the FAQ) */ .blog_area { padding-block: var(--hx-sec); } .blog_area .theme_according.mb_100 { margin-block-end: 0; } /* Section heading -> content gap. mb_80 is 80px under a 44px heading. */ .course_area .section__title.mb_80, .blog_area .section__title.mb_80, .testmonial_area .section__title.mb_80 { margin-block-end: 52px; } /* --------------------------------------------------------------------------- 2. SECTION HEADER SYSTEM Same three-part construction everywhere: gold rule, heading, one muted line of support copy on a measured line length. This is what makes the sections read as one system rather than five unrelated centred stacks. --------------------------------------------------------------------------- */ .category_area .section__title::before, .course_area .section__title::before, .testmonial_area .section__title::before, .blog_area .section__title::before { content: ""; display: block; inline-size: 52px; block-size: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--hx-gold), var(--hx-gold-bright)); margin-block-end: 24px; } .course_area .section__title.text-center::before, .testmonial_area .section__title.text-center::before, .blog_area .section__title.text-center::before { margin-inline: auto; } .category_area .section__title h3, .course_area .section__title h3, .testmonial_area .section__title h3, .blog_area .section__title h3 { letter-spacing: -.015em; margin-block-end: 14px; } .course_area .section__title p, .testmonial_area .section__title p, .blog_area .section__title p { font-size: 17px; line-height: 1.7; color: var(--hx-body); max-inline-size: 46ch; margin-inline: auto; } /* --------------------------------------------------------------------------- 3. KEY-FEATURE STRIP (the card overlapping the hero) Three claims with nothing separating them. Hairline dividers give the trio a structure; the icon gets a tinted disc so it reads as an element instead of a floating glyph. --------------------------------------------------------------------------- */ .category_area .couses_category .single_course_cat { align-items: flex-start; gap: 18px; padding-inline-end: 28px; } .category_area .couses_category .col-xl-4:not(:first-child) .single_course_cat { border-inline-end: 1px solid var(--hx-line-soft); padding-inline-end: 0; padding-inline-start: 28px; } .category_area .couses_category .single_course_cat .icon { margin: 0; inline-size: 54px; block-size: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(160deg, rgba(217, 168, 62, .16), rgba(240, 196, 87, .07)); border: 1px solid rgba(217, 168, 62, .28); } .category_area .couses_category .single_course_cat .icon img { inline-size: 28px; block-size: 28px; object-fit: contain; } .category_area .couses_category .single_course_cat .course_content h4 { font-size: 18px; margin-block-end: 6px; } .category_area .couses_category .single_course_cat .course_content p { font-size: 15px; line-height: 1.65; color: var(--hx-body); font-weight: 400; } /* --------------------------------------------------------------------------- 4. CATEGORY TILES The tiles have NULL thumbnails (documented further up this file), so they rendered as bare navy rectangles carrying a hard white label block -- the single most unfinished-looking element on the page. Rebuilt as designed tiles: navy gradient ground, a gold light source in the corner, gold hairline, label set into the tile itself, chevron affordance, and the whole surface as the click target instead of just the pill. Heights are equalised (theme: cat1 360, cat2/cat3 330, browse-all 300 -- which is why the two columns never lined up) so the 2x2 reads as a grid. --------------------------------------------------------------------------- */ .category_area .category_wiz.mb_30 { margin-block-end: var(--hx-gap); } .category_area .category_wiz .thumb, .category_area .category_wiz .thumb.cat1, .category_area .category_wiz .thumb.cat2, .category_area .category_wiz .thumb.cat3 { min-block-size: 0; block-size: 196px; border-radius: var(--hx-r-md); overflow: hidden; position: relative; isolation: isolate; background-color: var(--hx-navy); background-image: linear-gradient(155deg, var(--hx-navy-surface) 0%, var(--hx-navy-deep) 72%); border: 1px solid rgba(217, 168, 62, .22); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Gold light source, top inline-start corner. */ .category_area .category_wiz .thumb::before { content: ""; position: absolute; inset-block-start: -55%; inset-inline-start: -30%; inline-size: 110%; block-size: 130%; background: radial-gradient(closest-side, rgba(240, 196, 87, .30), rgba(240, 196, 87, 0) 70%); z-index: -1; opacity: .85; transition: opacity .3s ease; } /* Fine diagonal texture so the tile is not a flat fill. */ .category_area .category_wiz .thumb::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 9px); } .category_area .category_wiz .thumb:hover { transform: translateY(-4px); border-color: rgba(240, 196, 87, .62); box-shadow: 0 22px 44px -24px rgba(4, 19, 35, .8); } .category_area .category_wiz .thumb:hover::before { opacity: 1; } /* The label. Was: absolute white block inset 30px, uppercase, navy on white. */ .category_area .category_wiz .thumb .cat_btn, .category_area .category_wiz .thumb .cat_btn:hover { position: absolute; inset: 0; inline-size: auto; display: flex; align-items: flex-end; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 22px 24px; padding-inline-end: 58px; color: #fff; font-family: var(--font_family1); font-size: 20px; font-weight: 700; line-height: 1.35; text-align: start; text-transform: none; } .category_area .category_wiz .thumb .cat_btn:hover { color: var(--hx-gold-bright); } /* Chevron affordance, bottom inline-end. */ .category_area .category_wiz .thumb .cat_btn::after { content: ""; position: absolute; inset-block-end: 26px; inset-inline-end: 24px; inline-size: 9px; block-size: 9px; border-block-start: 2px solid var(--hx-gold); border-inline-end: 2px solid var(--hx-gold); transition: transform .3s ease, border-color .3s ease; } html[dir="rtl"] .category_area .category_wiz .thumb .cat_btn::after { transform: rotate(-45deg); } html:not([dir="rtl"]) .category_area .category_wiz .thumb .cat_btn::after { transform: rotate(45deg); } html[dir="rtl"] .category_area .category_wiz .thumb .cat_btn:hover::after { transform: rotate(-45deg) translate(3px, -3px); border-color: var(--hx-gold-bright); } html:not([dir="rtl"]) .category_area .category_wiz .thumb .cat_btn:hover::after { transform: rotate(45deg) translate(3px, -3px); border-color: var(--hx-gold-bright); } /* The gold "browse everything else" tile -- the one deliberate colour break in the grid, so it has to be the same size as its siblings, not 300px tall. Navy on gold measures 8.57:1. */ .category_area .brouse_cat_btn { block-size: 196px; min-block-size: 0; border-radius: var(--hx-r-md); padding: 22px 24px; padding-inline-end: 58px; font-size: 20px; line-height: 1.35; align-items: flex-end; position: relative; overflow: hidden; background: linear-gradient(155deg, var(--hx-gold-bright) 0%, var(--hx-gold) 65%, #c79530 100%); box-shadow: var(--hx-e-gold); transition: transform .3s ease, box-shadow .3s ease; } .category_area .brouse_cat_btn::after { content: ""; position: absolute; inset-block-end: 26px; inset-inline-end: 24px; inline-size: 9px; block-size: 9px; border-block-start: 2px solid var(--hx-navy-deep); border-inline-end: 2px solid var(--hx-navy-deep); transition: transform .3s ease; } html[dir="rtl"] .category_area .brouse_cat_btn::after { transform: rotate(-45deg); } html:not([dir="rtl"]) .category_area .brouse_cat_btn::after { transform: rotate(45deg); } .category_area .brouse_cat_btn:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(217, 168, 62, .7); } /* --------------------------------------------------------------------------- 5. CATEGORY HEADING COLUMN Sits opposite the tile grid. Was a 20px/600 paragraph running the full column width with a hairline text link under it, which left the column looking unfinished next to a 400px block of tiles. --------------------------------------------------------------------------- */ .category_area .section__title.mb_40 { max-inline-size: 460px; margin-block-end: 0; } .category_area .section__title p { font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--hx-body); margin-block: 0 28px; } .category_area .section__title .line_link { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 14px 26px; border-radius: 999px; background: var(--hx-navy-deep); color: #fff; font-size: 15px; font-weight: 600; transition: background .25s ease, transform .25s ease, color .25s ease; } .category_area .section__title .line_link:hover { background: var(--hx-navy-surface); color: var(--hx-gold-bright); transform: translateY(-2px); } .category_area .section__title .line_link::after { content: ""; inline-size: 8px; block-size: 8px; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; } html[dir="rtl"] .category_area .section__title .line_link::after { transform: rotate(-45deg); } html:not([dir="rtl"]) .category_area .section__title .line_link::after { transform: rotate(45deg); } /* --------------------------------------------------------------------------- 5b. CORRECTIONS to the feature strip after screenshotting pass 1. - The divider was on :not(:first-child), which put a stray rule on the far inline-end edge of the last item instead of only between items. In RTL the separator between item N and N+1 is item N's inline-END border, so the rule belongs on :not(:last-child). - .col-xl-4:not(:last-child) .single_course_cat carries margin-bottom:30px for the stacked mobile layout; in the 3-across desktop layout that just added 30px of dead height inside the card. --------------------------------------------------------------------------- */ .category_area .couses_category .col-xl-4:not(:first-child) .single_course_cat { border-inline-end: 0; padding-inline-start: 28px; padding-inline-end: 28px; } .category_area .couses_category .col-xl-4:not(:last-child) .single_course_cat { border-inline-end: 1px solid var(--hx-line-soft); } .category_area .couses_category .col-xl-4:last-child .single_course_cat { padding-inline-end: 0; } .category_area .couses_category .col-xl-4:first-child .single_course_cat { padding-inline-start: 0; } @media (min-width: 992px) { .category_area .couses_category .col-xl-4:not(:last-child) .single_course_cat { margin-block-end: 0; } } /* Tiles at 196px left the label stranded under a large empty field. 172 sits the label closer to the optical centre of the tile. */ .category_area .category_wiz .thumb, .category_area .category_wiz .thumb.cat1, .category_area .category_wiz .thumb.cat2, .category_area .category_wiz .thumb.cat3 { block-size: 172px; } .category_area .brouse_cat_btn { block-size: 172px; } /* --------------------------------------------------------------------------- 6. COURSE CARDS The most important section on an LMS homepage was the least designed one: no card container at all (content sat directly on the page), and the price rendered as a giant white ELLIPSE. That ellipse is a real bug, not a taste call -- the theme sets `top:20px;left:20px` in the base sheet and `right:20px` in the RTL sheet, so the absolutely-positioned tag has both inset-inline sides pinned and stretches to the full width of the thumbnail, at which point border-radius:50% renders it as an ellipse. Rebuilt as a real card: white surface, hairline, elevation, equal heights, image that is no longer cropped by the theme's scale(1.1), a gold price PILL in navy text (8.57:1), and a metadata footer pinned to the bottom edge so cards in a row line up. --------------------------------------------------------------------------- */ /* Own surface, so the section reads as the centrepiece it is. */ .course_area.section_spacing { background: var(--hx-tint); border-block: 1px solid var(--hx-line-soft); } /* 3-up at xl. The theme ships col-xl-3 (4-up), which with three courses left a quarter of the row empty and the whole block visually off-centre. .col-xl-3 appears only on the course cards in this section -- the section heading uses .col-lg-6 -- so this cannot leak. */ @media (min-width: 1200px) { .course_area .row .col-xl-3 { flex: 0 0 auto; width: 33.3333%; max-width: 33.3333%; } } /* Equal-height cards across the row. */ .course_area .row .col-xl-3 { display: flex; } .course_area .row .col-xl-3 > .couse_wizged { inline-size: 100%; } .course_area .couse_wizged { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); overflow: hidden; box-shadow: var(--hx-e1); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .course_area .couse_wizged:hover { transform: translateY(-5px); border-color: rgba(217, 168, 62, .55); box-shadow: var(--hx-e2); } .course_area .couse_wizged .thumb { block-size: 190px; border-radius: 0; background: var(--hx-navy); } /* The theme pre-scales the thumbnail to 1.1 and anchors it to the top, which crops the artwork -- these thumbnails carry the course name, so the name was being sliced off at both edges. Show the whole image, scale on hover only. */ .course_area .couse_wizged .thumb_inner { transform: none; background-position: center; background-size: cover; } .course_area .couse_wizged:hover .thumb_inner { transform: scale(1.06); } /* Price: pill, not ellipse. Both inset-inline sides are declared so the stretched-box bug cannot come back. */ .couse_wizged .thumb .prise_tag { inset-block-start: 14px; inset-inline-start: 14px; inset-inline-end: auto; flex-direction: row-reverse; align-items: baseline; gap: 7px; min-inline-size: 0 !important; min-block-size: 0; block-size: auto; padding: 7px 14px !important; border-radius: 999px; background: linear-gradient(135deg, var(--hx-gold-bright), var(--hx-gold)); color: var(--hx-navy-deep); font-size: 14px; font-weight: 800; line-height: 1.2; box-shadow: 0 6px 16px -6px rgba(4, 19, 35, .55); } .couse_wizged .thumb .prise_tag del { font-size: 11px; font-weight: 600; color: rgba(4, 19, 35, .62); padding: 0; } .course_area .couse_wizged .course_content { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 16px; } /* Two-line title with a reserved box, so cards in a row stay aligned. .noBrake is white-space:nowrap + ellipsis, which truncated every title to about four words ("تصميم واجهات المس..."). */ .course_area .couse_wizged .course_content h4, .course_area .couse_wizged .course_content h4.noBrake { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; font-size: 17px; line-height: 1.55; min-block-size: calc(2 * 1.55em); margin-block-end: 14px; color: var(--hx-navy-deep); } .course_area .couse_wizged .course_content h4:hover { color: var(--hx-gold-deep); } .course_area .couse_wizged .course_content .rating_cart { align-items: center; gap: 8px; margin-block: 0 16px; } .course_area .couse_wizged .course_content .rating_cart .rateing { block-size: 34px; padding: 0 12px; margin: 0; border: 1px solid rgba(217, 168, 62, .35); background: rgba(217, 168, 62, .10); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--hx-navy-deep); } .course_area .couse_wizged .course_content .rating_cart .rateing span { margin-inline: 0 6px; } .course_area .couse_wizged .course_content .rating_cart .cart_store { inline-size: 34px; block-size: 34px; line-height: 32px; border-radius: 50%; border: 1px solid var(--hx-line); color: var(--hx-navy-deep); font-size: 13px; } .course_area .couse_wizged .course_content .rating_cart .cart_store:hover { background: var(--hx-navy-deep); border-color: var(--hx-navy-deep); color: var(--hx-gold-bright); } /* Metadata footer, pinned to the bottom of the card. Was two stacked lines with 30px gaps and icons that carried a 10px margin on BOTH sides (the RTL sheet adds margin-left without clearing margin-right). */ .course_area .couse_wizged .course_content .course_less_students { display: flex; align-items: center; gap: 20px; margin-block-start: auto; padding-block-start: 14px; border-block-start: 1px solid var(--hx-line-soft); } .course_area .couse_wizged .course_content .course_less_students a, .course_area .couse_wizged .course_content .course_less_students a:not(:last-child) { margin: 0; font-size: 13px; color: var(--hx-body); } .course_area .couse_wizged .course_content .course_less_students a i { margin-inline: 0 7px; font-size: 15px; color: var(--hx-gold-deep); } /* Section footer button */ .course_area .pt_70 { padding-block-start: 44px; } .course_area .theme_btn.mb_30 { margin-block-end: 0; } /* --------------------------------------------------------------------------- 7. PRIMARY BUTTON Scoped to the homepage bands so other pages keep the theme's button. Gold gradient with NAVY text -- white on gold measures 2.18:1 and fails AA. --------------------------------------------------------------------------- */ .course_area .theme_btn, .cta_area .theme_btn, .service_cta_area .theme_btn { border-radius: 999px; padding: 16px 34px; font-size: 16px; font-weight: 700; color: var(--hx-navy-deep); box-shadow: 0 12px 26px -14px rgba(217, 168, 62, .9); transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease; } .course_area .theme_btn:hover, .cta_area .theme_btn:hover, .service_cta_area .theme_btn:hover { transform: translateY(-2px); color: var(--hx-navy-deep); box-shadow: 0 18px 34px -14px rgba(217, 168, 62, 1); } /* --------------------------------------------------------------------------- 8. TESTIMONIALS Retinted off the theme's lavender #f8f8fe -- a cool violet that belongs to no part of this palette -- onto the same navy-derived tint the course band uses, so the two light sections read as one system. min-height:370px left a third of every card empty; the body copy was text-align:justify, which in Arabic opens rivers of whitespace between words (visible in the before screenshot). --------------------------------------------------------------------------- */ .testmonial_area { background: var(--hx-tint); } .testmonial_area .single_testmonial { min-block-size: 0; padding: 28px; border-radius: var(--hx-r-md); border: 1px solid var(--hx-line); position: relative; overflow: hidden; } .testmonial_area .single_testmonial::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, var(--hx-gold), var(--hx-gold-bright)); opacity: .85; } .testmonial_area .single_testmonial .testmonial_header { margin-block-end: 18px; padding-block-end: 18px; border-block-end: 1px solid var(--hx-line-soft); } .testmonial_area .single_testmonial p { font-size: 16px; line-height: 1.85; font-weight: 400; color: var(--hx-body); text-align: start; } /* --------------------------------------------------------------------------- 9. BECOME-INSTRUCTOR BAND Was a 450px card floating dead-centre in an otherwise empty full-width section, with the button hard against its bottom edge. Rebuilt as a full-width band: portrait, copy, and action on one line. --------------------------------------------------------------------------- */ .service_cta_area .row > .col-lg-6.m-auto { flex: 0 0 auto; inline-size: 100%; max-inline-size: none; } .service_cta_area .single_cta_service { align-items: center; gap: 28px; flex-wrap: nowrap; padding: 30px 36px; border-radius: var(--hx-r-lg); border: 1px solid var(--hx-line); box-shadow: var(--hx-e1); background: linear-gradient(115deg, #fff 58%, rgba(217, 168, 62, .13) 100%); } .service_cta_area .single_cta_service.mb_30 { margin-block-end: 0; } .service_cta_area .single_cta_service .thumb { margin: 0; inline-size: 92px; block-size: 92px; flex: 0 0 92px; } .service_cta_area .single_cta_service .thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; border: 2px solid rgba(217, 168, 62, .45); } .service_cta_area .single_cta_service .cta_service_info { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title action" "text action"; align-items: center; column-gap: 32px; flex: 1 1 auto; } .service_cta_area .single_cta_service .cta_service_info h4 { grid-area: title; font-size: 22px; margin-block-end: 6px; } .service_cta_area .single_cta_service .cta_service_info p { grid-area: text; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--hx-body); max-inline-size: 62ch; } .service_cta_area .single_cta_service .cta_service_info .theme_btn { grid-area: action; justify-self: end; white-space: nowrap; } @media (max-width: 767.98px) { .service_cta_area .single_cta_service { flex-wrap: wrap; text-align: start; } .service_cta_area .single_cta_service .cta_service_info { grid-template-columns: 1fr; grid-template-areas: "title" "text" "action"; row-gap: 18px; } .service_cta_area .single_cta_service .cta_service_info .theme_btn { justify-self: start; } } /* --------------------------------------------------------------------------- 10. FAQ ACCORDION Four full-bleed gold bars stacked on white is the loudest thing on the page and it is attached to the least important section. Gold is the accent, not the surface: white cards, hairline borders, and gold reserved for the indicator and the open state. The gold fill has no author rule anywhere in the loaded stylesheets or the inline