/* ========================================================================== Global typography for the standalone Saudi Arabia (Arabic) Enago site. Body family is IBM Plex Sans Arabic (loaded from Google Fonts in each page's ), falling back to Segoe UI / Tahoma for offline + legacy Windows -- all three carry full Arabic glyph coverage. 16px base with a 1.7 line-height (Arabic needs more leading than the Latin 1.5) and the .lv* type scale. css/fonts.css (imported below) still supplies the Latin OpenSans faces. Link this LAST in every page's , before css/arabic-rtl.css. ========================================================================== */ @import url('fonts.css'); /* ---- base: IBM Plex Sans Arabic at 16px / 1.7 ---- */ body { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif !important; font-size: 16px !important; /* Arabic needs more leading than Latin: ascenders/descenders and the diacritic zone collide at the 1.5 used for the Latin original. */ line-height: 1.7 !important; font-weight: 400; color: #000; } /* every element inherits IBM Plex Sans Arabic (overrides the Korean font declarations). The universal selector does NOT match ::before/::after, so pseudo-element icon glyphs (e.g. the "moon" font) are unaffected. */ body * { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif !important; } /* tighten the loose Korean paragraph leading so copy reads compact & clean */ p, li { line-height: 1.6; } /* ---- global-site clean type scale (.lv*) — available for headings/text ---- */ .lv1 { font-size: 36px !important; /* 1.4 not the Latin 1.2 -- Arabic headings need the extra leading */ line-height: 50px !important; font-weight: 700 !important; color: #000 !important; margin-top: 0 !important; margin-bottom: 30px !important; text-align: center !important; } .lv1-text, .lv1-text p { font-size: 20px !important; line-height: 31px !important; font-weight: 400 !important; } .lv2 { font-size: 30px !important; line-height: 42px !important; font-weight: 400 !important; } .lv2-text, .lv2-text p, .lv2-text li { font-size: 18px !important; line-height: 28px !important; font-weight: 400 !important; } .lv3 { font-size: 20px !important; line-height: 28px !important; font-weight: 400 !important; } .lv3-text, .lv3-text p, .lv3-text li { font-size: 14px !important; line-height: 23.8px !important; font-weight: 400 !important; } /* ========================================================================== HEADINGS: use the .lv* classes directly in markup (the global-site convention). index.htm now tags every section title with `lv1` (e.g.

). For a smaller/secondary title use `lv2`; for intro copy use `lv1-text`/`lv2-text`. The `.home-page-new ... .sub-heading` rules below are a COMPATIBILITY SHIM that keeps any not-yet-migrated heading (and the Korean publication-support page) at the same size — they resolve to the identical 36px/43.2px values as .lv1, so adding `lv1` to markup never changes the rendering. Prefer `lv1`/`lv2` on new pages. ========================================================================== */ /* ---- heading width + scale to match the global site (.wd65 + .lv1/.lv2) ---- */ /* global site constrains headings/intro to ~69% width and centers them */ .wd65 { max-width: 69%; margin-left: auto; margin-right: auto; } /* utility: 69% width + centered block/text — add alongside .lv1 wherever a heading should be width-constrained (e.g.

) */ .wd-69 { max-width: 69% !important; margin-left: auto !important; margin-right: auto !important; text-align: center; } /* full width on tablet/mobile, same as the other constrained headings */ @media (max-width: 991px) { .wd-69 { max-width: 100% !important; } } /* pricing page: enago-kr.css's `.fees h1` forces uppercase; .lv1's !importants already restore size/color/weight, this restores the case so the heading renders like every other lv1 heading (home page etc.) */ .fees h1.lv1 { text-transform: none; } /* main hero/service heading -> global .lv1 size, width-constrained & centered */ .home-page-new h1.sub-heading { font-size: 36px !important; line-height: 50px !important; font-weight: 700 !important; max-width: 69%; margin-left: auto !important; margin-right: auto !important; } /* all section titles (h2 / h3 / div.sub-heading) -> same 36px size as the main heading + constrained width */ .home-page-new section .sub-heading { font-size: 36px !important; line-height: 50px !important; font-weight: 700 !important; max-width: 69%; margin-left: auto !important; margin-right: auto !important; } /* half-column headings (accepted papers / testimonials) use full column width so they don't wrap at 36px within the 69% cap */ .home-page-new .accepted-testimonials .sub-heading { max-width: 100% !important; } /* The "Makalah yang Diterima" / "Testimoni Pelanggan" headings must render identically on EVERY page that shows this section (via the shared inc_testimonial_acceptedpaper.htm include), regardless of the class. On the home page (.home-page-new) they get 36px / 700 / centered from the rules above + new_home_page.css; on pages with a different body class (e.g. compare-editing-services.htm is .services-page-new) those rules don't apply and the heading falls back to plain .lv1 (left-aligned, weight 400). This unscoped rule pins the home-page computed values so both match. Specificity 0,2,0 !important beats .lv1 (0,1,0); on the home page it resolves to the same values, so nothing changes there. */ .accepted-testimonials .sub-heading { font-size: 36px !important; line-height: 50px !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 25px !important; max-width: 100% !important; } /* Accepted-papers "Paper Title" value (span.text-col.title). services.css (loaded on the services/compare pages, not on home) has a broad `.title { text-align:center; font-weight:700 }` + `#accepted-papers .title { margin-bottom:25px !important }` that hijack this shared cell — centering the title, bolding it, and adding an extra gap before "Author". Pin it back to the home-page rendering (left-aligned, normal weight, no extra margin). Specificity 1,5,1 + !important beats both services.css rules; on the home page (where services.css isn't loaded) it just re-affirms the same values. */ #accepted-papers .accepted-box .cont-box .box-row span.text-col.title { font-weight: 400 !important; margin-bottom: 0 !important; } /* Force both carousels' arrows to align horizontally, regardless of box content height */ #accepted-papers .owl-nav, #client-testimonials .owl-nav { top: 180px !important; } /* on tablet/mobile let headings use full width */ @media (max-width: 991px) { .wd65, .home-page-new h1.sub-heading, .home-page-new section .sub-heading { max-width: 100% !important; } } /* ---- FAQ accordion: FONT ONLY (global 16px type). Box/layout untouched. ---- */ #qna-accordion .panel-heading a, #qna-accordion .panel-heading a.collapsed { font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; } /* open question (Bootstrap drops .collapsed while expanded) -> bold */ #qna-accordion .panel-heading a:not(.collapsed) { font-weight: 700 !important; } /* remove the "Q" marker before each question (CSS-generated, not in markup) */ #qna-accordion .panel-heading a:before { content: none !important; } #qna-accordion .panel-heading { padding-bottom: 5px !important; } #qna-accordion .panel-body { font-size: 16px !important; line-height: 26px !important; padding-top: 5px !important; } /* ---- FAQ accordion, mobile (enago.com style): the FontAwesome chevron sat at the text baseline with no top offset, overlapping multi-line questions. Replace it with a small +/− pinned to the top-right (like enago.com's mobile FAQ) and reserve right padding so the question never runs under it. ---- */ @media (max-width: 991px) { #qna-accordion .panel-heading a { padding-inline-end: 30px; } #qna-accordion .panel-heading a:after, #qna-accordion .panel-heading a.collapsed:after { font-family: 'OpenSans-Regular', sans-serif !important; font-size: 24px; font-weight: 400; top: 15px; /* the +/- marker sits at the end of the line: left in RTL */ inset-inline-end: 15px; line-height: 27px; } #qna-accordion .panel-heading a:after { content: "\2212"; /* − open */ } #qna-accordion .panel-heading a.collapsed:after { content: "+"; /* + collapsed */ } } /* ---- security section: 20px of padding on the last box (payment_card), which otherwise loses it to a :last-child / media-query rule and runs text to the card edge. Logical, so it lands on the reading-end side in RTL. ---- */ .security_section .security_section_inner.payment_card { padding-inline-end: 20px !important; } /* ---- gap between the hero intro copy and the "Layanan Penyuntingan Bahasa Inggris Enago" heading. lv1 zeroes margin-top, so restore it here. (font-32 is unique to this one heading.) ---- */ .home-page-new h2.sub-heading.font-32.lv1 { margin-top: 25px !important; } /* ---- "Testimoni Pelanggan" section: testimonial body at 16px, and drop the 35px top padding + external quote-mark background (matches the clean layout) ---- */ #client-testimonials .text-cont { font-size: 15px !important; line-height: 26px !important; padding-top: 0 !important; background: none !important; } /* ---- preserve icon fonts set on the element itself ---- */ .fa, .fa::before, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"], [class^="fa-"]::before, [class*=" fa-"]::before { font-family: 'FontAwesome' !important; } .glyphicon, .glyphicon::before { font-family: 'Glyphicons Halflings' !important; } /* ============================================================ Figma card redesign: "Makalah yang Diterima" (#accepted-papers) + "Testimoni Pelanggan" (#client-testimonials). Markup and owl-carousel behavior unchanged — visual restyle only. ============================================================ */ /* the cards now carry the warm tint, so the section behind them is white */ .accepted-testimonials:has(#accepted-papers) { background-color: #fff; } /* ---- shared card chrome ---- */ #accepted-papers .accepted-box, #client-testimonials .testim-box { /* side slack so the SINTA ribbon's 7px overhang isn't clipped by the carousel viewport */ width: calc(100% - 30px); max-width: 540px; margin: 0 auto; min-height: 368px; padding: 24px; background: #FAF8F5; border: 1px solid #E9EAEB; border-radius: 14px; box-shadow: none; } /* ---- accepted-papers card: cover + badge left, stacked rows right ---- */ #accepted-papers .accepted-box { position: relative; display: flex; flex-wrap: nowrap; gap: 24px; } #accepted-papers .accepted-box .img-box { flex: 0 0 120px; width: 120px; justify-content: flex-start; } #accepted-papers .accepted-box .img-box img { width: 120px !important; height: 160px; object-fit: cover; border: 1.5px solid #fff; border-radius: 6px; box-shadow: 0 4px 24px rgba(0, 0, 0, .25); } #accepted-papers .accepted-box>.logo-box { display: none; } #accepted-papers .accepted-box .cont-box { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; width: auto; margin-inline: 0; } /* label and value share one line (as on enago.com). The row flows as normal inline text rather than flex, so a long paper title wraps back to the row's left edge instead of staying indented under the value. */ #accepted-papers .accepted-box .cont-box .box-row { display: block; margin: 0 0 10px; padding: 0; } #accepted-papers .accepted-box .cont-box .box-row strong { display: inline; /* gap after the inline label -- must follow the label, i.e. on its left in RTL */ margin-inline-end: 6px; } /* type scale matched to enago.com's accepted-paper card: enago renders its labels/values at 16px in a ~460px-wide text column; our card is capped at 540px so the same text sits in a ~316px column and reads a size smaller. 18px/26px restores the comparable optical size. */ #accepted-papers .accepted-box .cont-box strong { width: auto; font-size: 16px; line-height: 26px; /* font-weight: 400; */ color: #283342; } #accepted-papers .accepted-box .cont-box .box-row span.text-col { display: inline; margin-inline: 0; width: auto; max-width: none; font-size: 16px; line-height: 26px; /* font-weight: 600; */ color: #283342; } #accepted-papers .accepted-box .cont-box .box-row span.text-col.title { /* font-weight: 600 !important; */ min-height: 0; } /* author: flows right after the paper title in the content column */ #accepted-papers .accepted-box .cont-box .box-row:last-of-type { margin: 0; } #accepted-papers .accepted-box .cont-box .box-row:last-of-type strong { /* font-weight: 400; */ color: #283342; } #accepted-papers .accepted-box .cont-box .box-row:last-of-type span.text-col { /* font-weight: 700; */ color: #283342; } /* impact factor: relocated under the journal cover as a dark badge */ #accepted-papers .accepted-box .cont-box .box-row:has(.impact-num) { position: absolute; /* sits under the journal cover, which flex puts on the reading-start side */ inset-inline-start: 24px; top: 196px; /* 24 card padding + 160 cover + 12 gap */ width: 120px; margin: 0; /* stays flex (the other rows are inline) so the label sits above the badge */ display: flex; flex-direction: column; align-items: center; gap: 6px; } #accepted-papers .accepted-box .cont-box .box-row:has(.impact-num) strong { font-size: 12px; line-height: 16px; font-weight: 500; color: #283342; /* the 6px inline gap would offset it from the badge's centre */ margin-inline-end: 0; } #accepted-papers .accepted-box .cont-box .box-row span.impact-num { min-width: 71px; padding: 4px 14px; background-color: #283342; border-radius: 4px; font-size: 15px; line-height: 22px; font-weight: 700; color: #fff; text-align: center; } /* ---- testimonial card: original layout (photo top-left, quote to the right, name below the quote) inside the new tinted card chrome; full quote shown, no truncation ---- */ #client-testimonials .testim-box { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 20px; } #client-testimonials .clin-img-name { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; } #client-testimonials .clin-img-name .img-box { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; } #client-testimonials .clin-img-name .img-box img { width: 100% !important; height: 100%; object-fit: cover; margin-inline: 0 !important; } #client-testimonials .clin-img-name .logo-box { display: none; } #client-testimonials .clin-rght-col { flex: 1 1 auto; min-width: 0; } #client-testimonials .text-cont { margin-top: 0 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 500; color: #3A4250; } #client-testimonials .name-box { margin-top: 16px; font-size: 16px; line-height: 24px; font-weight: 700; color: #283341; } #client-testimonials .name-box span { display: block; margin-top: 2px; font-size: 13px; line-height: 20px; font-weight: 400; color: #283341; } /* ---- nav arrows: white circles centered below the card ---- */ #accepted-papers .owl-nav, #client-testimonials .owl-nav { position: static !important; top: auto !important; width: auto; margin-top: 20px; display: flex; justify-content: center; gap: 10px; } #accepted-papers .owl-nav [class*=owl-], #client-testimonials .owl-nav [class*=owl-] { position: static !important; width: 40px; height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff !important; border: 1.5px solid #E9EAEB; border-radius: 50% !important; color: #283341 !important; font-size: 14px; line-height: 1; box-shadow: none; cursor: pointer; } #accepted-papers .owl-nav [class*=owl-]:hover, #client-testimonials .owl-nav [class*=owl-]:hover { background: #fff !important; border-color: #C9CDD3; color: #283341 !important; } /* center the chevron glyph geometrically inside the circle */ #accepted-papers .owl-nav [class*=owl-] i, #client-testimonials .owl-nav [class*=owl-] i { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: 1; } /* ---- mobile: stack cover/photo above the text ---- */ @media (max-width: 575px) { #accepted-papers .accepted-box { flex-direction: column; align-items: center; } #accepted-papers .accepted-box .cont-box { width: 100%; } #accepted-papers .accepted-box .cont-box .box-row:has(.impact-num) { position: static; width: auto; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 10px; } #client-testimonials .testim-box { flex-direction: column; align-items: flex-start; } } /* 80px of air ABOVE "Kemitraan Strategis & Institusi Tepercaya": the preceding testimonials section's bottom_padding_space already gives 50px, so this section adds 30px instead of the 50px it gets from new_home_page.css (which totalled 100px). Its 50px padding-BOTTOM is deliberately left alone — the .payment-terms rule below counts on it. */ .clientdata-section { padding-top: 30px; } /* "Bayar Saat Naskah Selesai" (.payment-terms) sits directly after the logos — 80px below them: the logo