@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2') format('woff2'); } /* * Exchange Announcements - front-end styling, matching the Tadawul pages. * Real Avenir fonts are bundled in assets/fonts/ and served via @font-face * ('Avenir-Heavy', 'Avenir-Roman'). Each face declares `font-weight: 100 900` * so the single-weight files render at any weight WITHOUT faux-bolding; the * system-font stack is only a fallback during the brief font-load swap. */ @font-face { font-family: 'Avenir-Heavy'; src: url('fonts/avenir-heavy.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir-Roman'; src: url('fonts/Avenir-Roman.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --sa-heavy: 'Avenir-Heavy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sa-roman: 'Avenir-Roman', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Base font: our content always uses Avenir, never the site theme's body font (e.g. an Arabic face whose unicode-range excludes Latin). Everything inside the scope inherits this unless it sets its own family. */ .sa-app { font-family: var(--sa-roman) !important; } /* Scoped reset — neutralise theme/Elementor element styles inside our app. */ .sa-app * { box-sizing: border-box; } .sa-app a { text-decoration: none; background: transparent; box-shadow: none; } .sa-app table, .sa-app thead, .sa-app tbody, .sa-app tfoot, .sa-app tr, .sa-app th, .sa-app td { margin: 0; padding: 0; border: 0; background: none; font: inherit; vertical-align: baseline; text-align: left; } .sa-app h1, .sa-app h2, .sa-app h3, .sa-app h4, .sa-app h5, .sa-app h6, .sa-app p { margin: 0; padding: 0; font: inherit; color: inherit; } .sa-app ul, .sa-app ol, .sa-app li { margin: 0; padding: 0; list-style: none; } .sa-app img, .sa-app svg { max-width: 100%; height: auto; vertical-align: middle; border: 0; } /* Form controls: pin our own font explicitly (browsers give inputs/buttons their own font, and "font: inherit" would pull the theme's body font). */ .sa-app input, .sa-app select, .sa-app textarea { font: inherit; font-family: var(--sa-roman) !important; color: inherit; margin: 0; } .sa-app button { font: inherit; font-family: var(--sa-heavy) !important; color: inherit; margin: 0; } /* Neutralise the theme's `.hfeed article + article { margin-top: 60px }` — the carries .hfeed, so that rule adds 60px between our archive listing rows (
). Scoped to .sa-app so other theme pages (blog posts, etc.) keep their normal spacing. Explicit 0, not unset. */ .sa-app article + article { margin-top: 0 !important; } /* Force LTR on the plugin's own containers so an RTL site theme (dir="rtl") can't mirror our English layout. Scoped strictly to these wrappers — the rest of the site keeps its own direction. */ .sa-app .sa-arch-wrap, .sa-app .sa-single-wrap, .sa-app .sa-arch, .sa-app .sa-single { direction: ltr; text-align: left; } .sa-app .sa-arch-wrap, .sa-app .sa-single-wrap { max-width: 1350px; margin: 0 auto; padding: 24px 20px 48px; color: #22303f; font-size: 15px; line-height: 1.6; } /* Breadcrumb — all items #001F33, 16px. Earlier/linked items Avenir-Roman (400); the current/last item Avenir-Heavy (900). */ .sa-app .sa-breadcrumb { font-size: 16px; color: #001F33; font-weight: 400; font-family: var(--sa-roman) !important; margin-bottom: 22px; } .sa-app .sa-breadcrumb a, .sa-app .sa-breadcrumb span { color: #001F33; font-weight: 400; } .sa-app .sa-breadcrumb a { text-decoration: none; } .sa-app .sa-breadcrumb a:hover { text-decoration: underline; } .sa-app .sa-breadcrumb .sep { margin: 0 8px; color: #7d94a3; font-weight: 400; } .sa-app .sa-breadcrumb .current { color: #001F33; font-weight: 900; font-family: var(--sa-heavy); } /* Headings with the teal accent bar */ .sa-app .sa-arch-title, .sa-app .sa-single-title { line-height: 1.25; font-weight: 400; font-family: var(--sa-roman) !important; color: #33475b; margin: 0 0 14px; padding-bottom: 12px; position: relative; } .sa-app .sa-arch-title::after, .sa-app .sa-single-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 88px; height: 3px; background: #3EC6A1; } .sa-app .sa-single-title { font-size: 24px; } /* Archive page H1 — #2D4555, 34px, Avenir-Book, margin 0 0 20px, padding 0 0 10px */ .sa-app .sa-arch-title { color: #2D4555; font-weight: 400; font-size: 34px; margin: 0 0 20px; padding: 0 0 10px; } .sa-app .sa-arch-subtitle { color: #2D4555; font-weight: 400; font-family: var(--sa-roman) !important; font-size: 16px; margin: 0 0 26px; } /* Symbol badge / ticker / change chips. Badge #98B4F4 is deliberately a DIFFERENT blue from the table header (#B5C6ED) — do not merge them. */ .sa-app .sa-badge { display: inline-block; background: #98B4F4; color: #FFFFFF; font-size: 16px; font-weight: 900; font-family: var(--sa-heavy); padding: 5px 10px; border-radius: 3px; letter-spacing: .3px; line-height: 1.1; } .sa-app .sa-ticker { color: #2D4555; font-weight: 900; font-size: 16px; font-family: var(--sa-heavy); } .sa-app .sa-change { font-size: 16px; font-weight: 400; font-family: var(--sa-roman); } .sa-app .sa-change.sa-down { color: #FF4B61; } .sa-app .sa-change.sa-up { color: #159a5b; } .sa-app .sa-change.sa-flat { color: #64748b; } .sa-app .sa-hijri, .sa-app .sa-greg { color: #5a6b7b; font-size: 13px; font-family: var(--sa-roman) !important; } /* Date line under the single-announcement title (Hijri + Gregorian) */ .sa-app .sa-single-meta .sa-hijri, .sa-app .sa-single-meta .sa-greg { color: #2D4555; font-size: 16px; font-weight: 900; font-family: var(--sa-heavy); } /* Archive / shortcode listing */ /* Search + period bar */ .sa-app .sa-searchbar { background: #f4f6f8; border: 1px solid #e6eaef; padding: 20px 22px; margin-bottom: 26px; display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; } /* "Keyword Search" / "Select A Period" labels: #2D4555, 16px, Avenir-Medium */ .sa-app .sa-search-field label, .sa-app .sa-period > label { display: block; font-size: 16px; font-weight: 500; color: #2D4555; font-family: var(--sa-roman) !important; margin-bottom: 8px; } .sa-app .sa-search-field input[type="text"] { width: 240px; max-width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; font-size: 14px; } .sa-app .sa-period-btns { display: flex; gap: 20px; align-items: center; } /* Period links (1D/1W/1M/1Y/5Y): #2D4555, 16px, Avenir-Medium */ .sa-app .sa-period-btns a { color: #2D4555; font-family: var(--sa-roman); font-weight: 500; text-decoration: none; font-size: 16px; padding-bottom: 2px; border-bottom: 2px solid transparent; } .sa-app .sa-period-btns a:hover { color: #003DDA; } .sa-app .sa-period-btns a.active { color: #003DDA; border-bottom-color: #003DDA; } /* Reset button (a.btn.resetBtnNew): #003DDA, 16px, Avenir-Heavy, padding 7px 25px */ .sa-app .sa-reset { margin-left: auto; align-self: center; color: #003DDA; font-family: var(--sa-heavy); font-weight: 900; text-decoration: none; font-size: 16px; border: 1px solid #003DDA; border-radius: 3px; padding: 7px 25px; } .sa-app .sa-reset:hover { background: #003DDA; color: #fff; } /* Body: sidebar + results */ .sa-app .sa-arch-body { display: flex; gap: 30px; align-items: flex-start; } .sa-app .sa-arch-sidebar { flex: 0 0 260px; background: #f7f8fa; border: 1px solid #e6eaef; padding: 22px 20px; } .sa-app .sa-arch-sidebar h3 { margin: 0; font-size: 18px; font-weight: 900; color: #2D4555; font-family: var(--sa-heavy) !important; } .sa-app .sa-arch-sidebar hr { border: 0; border-top: 1px solid #dfe5ec; margin: 14px 0 18px; } .sa-app .sa-symbol-locked { width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #2D4555; font-family: var(--sa-roman); font-size: 14px; margin-bottom: 20px; box-sizing: border-box; } .sa-app .sa-timefilter label { display: block; font-size: 16px; font-weight: 500; color: #2D4555; font-family: var(--sa-roman) !important; margin-bottom: 8px; } .sa-app .sa-timefilter input[type="date"] { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; font-size: 13px; margin-bottom: 10px; box-sizing: border-box; } .sa-app .sa-side-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .sa-app .sa-apply { background: #003DDA; color: #fff !important; border: 0 !important; border-radius: 3px !important; padding: 7px 18px !important; font-size: 14px !important; cursor: pointer !important; } .sa-app .sa-apply:hover { background: #0030ad; } .sa-app .sa-arch-sidebar .sa-reset { margin: 0; border: 1px solid #003DDA; padding: 7px 16px; } .sa-app .sa-arch-results { flex: 1 1 auto; min-width: 0; } /* "Results: N" (div#resultsId.result-hdng): #001F33, 16px, Avenir-Black */ .sa-app .sa-results-count { font-size: 16px; font-weight: 900; color: #001F33; font-family: var(--sa-heavy) !important; margin: 0 0 8px; } /* List rows */ .sa-app .sa-list { } .sa-app .sa-row { padding: 20px 0 16px; border-bottom: 1px solid #e2e8f0; } /* Row ticker label (h2, "ASG"): #2D4555, 16px, Avenir-Heavy */ .sa-app .sa-row-ticker { font-size: 16px; font-weight: 900; color: #2D4555; font-family: var(--sa-heavy); margin-bottom: 6px; } /* Row announcement title (p): #2D4555, 16px, Avenir-Roman (NOT link-blue) */ .sa-app .sa-row-title { display: block; color: #2D4555; font-weight: 400; font-family: var(--sa-roman) !important; text-decoration: none; font-size: 16px; line-height: 1.5; margin-bottom: 14px; } .sa-app .sa-row-title:hover { color: #375366 !important; text-decoration: underline; } .sa-app .sa-row-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .sa-app .sa-row-left { display: flex; align-items: center; gap: 12px; } .sa-app .sa-row-right { display: flex; align-items: center; gap: 26px; white-space: nowrap; } /* Row date (div.date): #2D4555, 16px, Avenir-Heavy. (Tadawul's fixed margin/padding offsets are layout-specific; we right-align via flex instead.) */ .sa-app .sa-row-right .sa-hijri, .sa-app .sa-row-right .sa-greg { color: #2D4555; font-size: 16px; font-weight: 900; font-family: var(--sa-heavy); } /* Pagination */ .sa-app .sa-pagination { margin-top: 28px; display: flex; justify-content: center; gap: 4px; background: #f4f6f8; padding: 10px; border-radius: 4px; } .sa-app .sa-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; text-decoration: none; color: #2D4555; font-family: var(--sa-roman); border-radius: 4px; font-size: 14px; } .sa-app .sa-pagination .page-numbers:hover { background: #e2e8f0; } .sa-app .sa-pagination .page-numbers.current { background: #3EC6A1; color: #fff; } .sa-app .sa-pagination .page-numbers.dots { background: none; } .sa-app .sa-empty { color: #64748b; font-style: italic; padding: 20px 0; font-family: var(--sa-roman); } /* Single announcement */ .sa-app .sa-single-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 26px; } /* Element List / Explanation table. Colour rules use !important so the exact spec wins over the active theme, which was leaking its link colour into plain cell text via inheritance. */ .sa-app .sa-single-content { margin-bottom: 28px; } .sa-app .sa-single-content table { width: 100% !important; border-collapse: collapse; table-layout: fixed; direction: ltr; margin: 0 0 18px; } .sa-app .sa-single-content col:first-child { width: 24%; } /* Header row: "Element List" / "Explanation" — #001F33 on #B5C6ED, 18px, Heavy */ .sa-app .sa-single-content thead th, .sa-app .sa-single-content th { background: #B5C6ED !important; color: #001F33 !important; text-align: left; padding: 12px 14px; font-size: 18px; font-weight: 900 !important; font-family:Manrope; border: 1px solid #a9bce6; } /* Body cells: default text colour must be body-grey, NOT the link colour */ .sa-app .sa-single-content tbody td, .sa-app .sa-single-content td { color: #212529 !important; font-size: 16px; font-weight: 500; font-family: Manrope !important; border: 1px solid #e1e7ee; padding: 12px 14px; vertical-align: top; word-break: break-word; overflow-wrap: break-word; } .sa-app .sa-single-content tbody td:first-child { background: #eef2fb; width: 24%; } .sa-app .sa-single-content tbody td p { margin: 0 0 10px; } .sa-app .sa-single-content tbody td p:last-child { margin-bottom: 0; } /* Cell paragraphs: the theme's p:last-child { Tajawal !important } hits the last

in each cell, so pin our font here too. */ .sa-app .sa-single-content td p { font-family: Manrope !important; } /* Genuine links only (e.g. "Click Here") get the link blue */ .sa-app .sa-single-content a, .sa-app .sa-single-content td a { color: #007BFF !important; font-size: 16px; font-family: Manrope; } /* Inline attachment link (in the "Attached Documents" row) */ .sa-app .sa-single-content a.sa-attachment, .sa-app a.sa-attachment { display: inline-block; margin: 3px 10px 3px 0; padding: 6px 12px 6px 30px; background: #eef4fb url("data:image/svg+xml;utf8,") no-repeat 10px center; border: 1px solid #cfe0f0; border-radius: 4px; color: #007BFF; text-decoration: none; font-size: 13px; font-weight: 900; font-family: var(--sa-heavy); } .sa-app .sa-single-content a.sa-attachment:hover, .sa-app a.sa-attachment:hover { background-color: #e2edf9; text-decoration: none; } /* Disclaimer: #2D4555, 16px, Avenir-Roman, padding 20px 0 */ .sa-app .sa-disclaimer { font-size: 16px; color: #2D4555; font-weight: 600; font-family: Manrope !important; line-height: 1.7; margin: 0; padding: 20px 0; } /* Share */ .sa-app .sa-share { display: flex; align-items: center; gap: 10px; margin: 20px 0 34px; } .sa-app .sa-share span { color: #2D4555; font-size: 16px; font-weight: 900; font-family: var(--sa-heavy); } .sa-app .sa-share a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #33475b; color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; font-family: var(--sa-roman) !important; } .sa-app .sa-share a:hover { background: #007BFF; } /* Previous announcements */ .sa-app .sa-prev { border-top: 1px solid #e2e8f0; padding-top: 26px; } /* "Previous Announcements" heading: #2D4555, 24px, Avenir-Book; accent 130x5 */ .sa-app .sa-prev-title { font-size: 24px; font-weight: 400; color: #2D4555; font-family: var(--sa-roman) !important; margin: 0 0 20px; padding-bottom: 12px; position: relative; } .sa-app .sa-prev-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 130px; height: 5px; background: #3EC6A1; } .sa-app .sa-prev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sa-app .sa-prev-card { display: block; border: 1px solid #e2e8f0; border-radius: 4px; padding: 16px; text-decoration: none; color: inherit; transition: box-shadow .15s; } .sa-app .sa-prev-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); } .sa-app .sa-prev-card-title { color: #2D4555; font-size: 16px; font-weight: 900; font-family: var(--sa-heavy); line-height: 1.5; margin-bottom: 12px; } .sa-app .sa-prev-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sa-app .sa-prev-card-dates { color: #5a6b7b; font-size: 12px; display: flex; gap: 12px; font-family: var(--sa-roman) !important; } /* "View all announcements" link: #007BFF, 16px, Avenir-Book */ .sa-app .sa-prev-all { display: inline-block; margin-top: 18px; color: #007BFF; text-decoration: none; font-weight: 400; font-family: var(--sa-roman); font-size: 16px; } .sa-app .sa-prev-all:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 860px) { .sa-app .sa-arch-body { flex-direction: column; } .sa-app .sa-arch-sidebar { flex-basis: auto; width: 100%; box-sizing: border-box; } .sa-app .sa-searchbar { gap: 20px; } .sa-app .sa-reset { margin-left: 0; } .sa-app .sa-prev-cards { grid-template-columns: 1fr; } .sa-app .sa-row-meta { align-items: flex-start; } .sa-app .sa-row-right { gap: 14px; } }