/* ##################################################################### DUAL STUDIES - AL-QUDS UNIVERSITY Complete site stylesheet for Helix Ultimate (v4) English (LTR) + Arabic (RTL) HOW TO INSTALL (use ONE method only): A) Recommended: upload this file to the server as /templates/shaper_helix_ultimate/css/custom.css then EMPTY the "Custom CSS" box in EVERY Helix template style (System > Site Template Styles > each shaper_helix_ultimate style). B) Or paste the whole file into Template Options > Custom Code > Custom CSS of EVERY Helix template style (English AND Arabic). Then: System > Clear Cache, and Ctrl+F5 in the browser. This file is 100% ASCII. Arabic text is written as CSS escape codes, so it can never turn into "????". Check it is loaded: View Page Source and search for dual-studies-v5 ##################################################################### */ /* ===================================================================== Dual Studies - SECTION 1: HEADER (top bar, menu, language, search) Top bar + main header + language switcher + search popup English (LTR) and Arabic (RTL). This file is pure ASCII on purpose: Arabic text is written as CSS escape codes so it never turns into "????". Paste into: Template Options > Custom Code > Custom CSS (delete ALL previous header CSS first) ===================================================================== */ :root{ --ds-p:#8a1c2b; --ds-pd:#5e1220; --ds-pdd:#45101a; --ds-g:#c9a227; --ds-ink:#1f2430; --ds-mut:#5b6272; --ds-line:#e8eaef; --ds-soft:#f6f7fa; --ds-h:84px; } /* =========================== TOP BAR =========================== */ #sp-top-bar{ background:linear-gradient(90deg,var(--ds-pdd),var(--ds-pd) 55%,var(--ds-p))!important; color:rgba(255,255,255,.82)!important;font-size:13.5px;padding:0!important;border:0!important} #sp-top-bar .container-inner>.row{min-height:42px;align-items:center} #sp-top-bar .sp-column{display:flex;align-items:center;gap:18px;flex-wrap:wrap} #sp-top1 .sp-column{justify-content:flex-start} #sp-top2 .sp-column{justify-content:flex-end} #sp-top-bar a{color:rgba(255,255,255,.9)!important;text-decoration:none;transition:color .2s} #sp-top-bar a:hover{color:#fff!important} /* social icons */ #sp-top-bar .social-icons{display:flex;gap:6px;margin:0;padding:0;list-style:none} #sp-top-bar .social-icons li{margin:0!important} #sp-top-bar .social-icons a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);font-size:13px;transition:background .2s,color .2s} #sp-top-bar .social-icons a:hover{background:var(--ds-g);color:#2a2205!important} /* contact info (phone / email / hours) */ #sp-top-bar .sp-contact-info{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none} #sp-top-bar .sp-contact-info li{display:inline-flex;align-items:center;gap:7px;margin:0!important;padding:0 14px;border-inline-start:1px solid rgba(255,255,255,.18);white-space:nowrap} #sp-top-bar .sp-contact-info li:first-child{border-inline-start:0;padding-inline-start:0} #sp-top-bar .sp-contact-info [class*="fa"]{color:var(--ds-g);font-size:12px} #sp-top-bar .sp-contact-info a[href^="tel:"]{direction:ltr;unicode-bidi:embed} @media (max-width:991px){#sp-top-bar .sp-contact-time,#sp-top-bar .sp-contact-email{display:none}#sp-top-bar .sp-column{justify-content:center!important}} /* ========================= MAIN HEADER ========================= */ #sp-header{ height:var(--ds-h)!important;background:#fff!important;border-top:0!important; box-shadow:0 1px 0 var(--ds-line),0 8px 24px rgba(31,36,48,.04)!important;transition:box-shadow .25s,height .25s;z-index:999} #sp-header.header-sticky{--ds-h:72px;box-shadow:0 10px 30px rgba(31,36,48,.10)!important} #sp-header .container-inner,#sp-header .row{height:100%} #sp-header .row{flex-wrap:nowrap} /* logo */ #sp-header #sp-logo{padding-inline-end:28px} #sp-header .logo{height:var(--ds-h);display:flex;align-items:center;margin:0} #sp-header .logo a{display:flex;align-items:center} #sp-header .logo-image{display:block;height:auto!important;max-height:62px;width:auto;max-width:300px;object-fit:contain;transition:max-height .25s} #sp-header.header-sticky .logo-image{max-height:52px} /* menu area: navigation in the middle, tools at the end */ #sp-header #sp-menu{min-width:0} #sp-header #sp-menu>.sp-column{justify-content:flex-end!important;gap:6px} #sp-header #sp-menu .sp-column>nav{order:1;margin-inline-end:auto;margin-inline-start:auto} #sp-header #sp-menu .sp-column>.header-modules{order:3} #sp-header #sp-menu .sp-column>.sp-module{order:4;margin:0!important;padding:0!important} #sp-header .sp-megamenu-parent{margin:0!important;display:flex!important;align-items:center;gap:2px} #sp-header .sp-megamenu-parent>li{padding:0!important;float:none!important} #sp-header .sp-megamenu-parent>li>a{ position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; height:42px;line-height:42px!important;padding:0 10px!important;border-radius:10px; font-size:15px!important;font-weight:600!important;color:var(--ds-ink)!important;text-decoration:none; transition:color .2s,background .2s} #sp-header .sp-megamenu-parent>li:hover>a{background:var(--ds-soft);color:var(--ds-p)!important} #sp-header .sp-megamenu-parent>li.active>a,#sp-header .sp-megamenu-parent>li.current-item>a{color:var(--ds-p)!important;background:rgba(138,28,43,.07)} #sp-header .sp-megamenu-parent>li>a::after{display:none!important} /* chevron for Programs */ #sp-header .sp-megamenu-parent>li.sp-has-child>a::before{ content:"";order:2;width:6px;height:6px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);opacity:.6;transition:transform .2s,margin .2s} #sp-header .sp-megamenu-parent>li.sp-has-child:hover>a::before{transform:rotate(225deg);margin-top:3px} #sp-header .sp-megamenu-parent .menu-toggler{display:none} /* last item (Contact us) = call-to-action button */ #sp-header .sp-megamenu-parent>li:last-child{margin-inline-start:10px!important} #sp-header .sp-megamenu-parent>li:last-child>a{ height:44px;line-height:44px!important;padding:0 22px!important;background:var(--ds-p)!important;color:#fff!important; box-shadow:0 8px 18px rgba(138,28,43,.22);transition:background .2s,transform .15s} #sp-header .sp-megamenu-parent>li:last-child>a:hover,#sp-header .sp-megamenu-parent>li:last-child.active>a{background:var(--ds-pd)!important;transform:translateY(-1px)} /* dropdown */ #sp-header .sp-dropdown{width:290px!important;padding-top:14px!important;margin-top:0} #sp-header .sp-dropdown .sp-dropdown-inner{ background:#fff!important;border:1px solid var(--ds-line);border-radius:14px!important;padding:8px!important; box-shadow:0 24px 50px rgba(31,36,48,.16)!important;position:relative} #sp-header .sp-dropdown .sp-dropdown-inner::before{content:"";position:absolute;top:-1px;inset-inline:24px;height:3px;border-radius:0 0 3px 3px;background:var(--ds-p)} #sp-header .sp-dropdown .sp-dropdown-items{margin:0;padding:0} #sp-header .sp-dropdown li.sp-menu-item{padding:0!important} #sp-header .sp-dropdown li.sp-menu-item>a{ display:flex;align-items:center;gap:10px;padding:11px 14px!important;border-radius:9px;font-size:14.5px!important;font-weight:600; line-height:1.4!important;color:var(--ds-ink)!important;text-decoration:none;transition:background .15s,color .15s} #sp-header .sp-dropdown li.sp-menu-item>a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#d5d8e0;transition:background .15s} #sp-header .sp-dropdown li.sp-menu-item>a:hover,#sp-header .sp-dropdown li.sp-menu-item.active>a{background:var(--ds-soft);color:var(--ds-p)!important} #sp-header .sp-dropdown li.sp-menu-item>a:hover::before,#sp-header .sp-dropdown li.sp-menu-item.active>a::before{background:var(--ds-g)} /* tools (search) */ #sp-header .header-modules{gap:8px;margin:0 0 0 0;padding-inline-start:14px;margin-inline-start:6px;border-inline-start:1px solid var(--ds-line);height:36px} #sp-header .header-modules .sp-module{margin:0!important;padding:0!important} /* ===================== LANGUAGE SWITCHER ===================== Works in the main header (position "menu") and in the top bar (position "top2"). Shows the other language with a globe icon. */ .mod-languages .visually-hidden{position:absolute!important} .mod-languages ul{display:flex!important;align-items:center;gap:6px;margin:0!important;padding:0!important;list-style:none!important;background:none!important;border:0!important} .mod-languages li{margin:0!important;padding:0!important;display:block!important;border:0!important;background:none!important} .mod-languages li::before,.mod-languages li::after{display:none!important} .mod-languages img{display:none!important} .mod-languages a{ display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px!important;border-radius:999px!important; border:1.5px solid var(--ds-line)!important;background:#fff!important;color:var(--ds-ink)!important;box-shadow:none!important; font-size:14.5px!important;font-weight:700!important;line-height:1!important;white-space:nowrap;text-decoration:none!important; transition:border-color .2s,color .2s,background .2s,box-shadow .2s} html[dir="rtl"] .mod-languages a{padding:0 12px 0 16px!important} .mod-languages a::before{ content:"";flex:none;width:18px;height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1c2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center/18px no-repeat} .mod-languages a:hover{border-color:var(--ds-p)!important;color:var(--ds-p)!important;background:#fff!important;box-shadow:0 6px 16px rgba(138,28,43,.12)!important} .mod-languages a[href*="/ar"]{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif!important;font-size:15.5px!important} .mod-languages a[href*="/en"]{font-family:inherit} html[dir="rtl"] .mod-languages a[href*="/en"]{font-family:"Inter","Segoe UI",system-ui,sans-serif!important} #sp-header .mod-languages{margin-inline-start:10px} /* active language shown too? -> segmented toggle */ .mod-languages li.lang-active a{background:var(--ds-p)!important;border-color:var(--ds-p)!important;color:#fff!important} .mod-languages li.lang-active a::before{filter:brightness(0) invert(1)} /* language switcher inside the dark top bar */ #sp-top-bar .mod-languages a{height:30px;padding:0 12px 0 9px!important;border:1px solid rgba(255,255,255,.28)!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:13.5px!important} html[dir="rtl"] #sp-top-bar .mod-languages a{padding:0 9px 0 12px!important} #sp-top-bar .mod-languages a::before{width:15px;height:15px;background-size:15px;filter:brightness(0) invert(1)} #sp-top-bar .mod-languages a:hover{background:var(--ds-g)!important;border-color:var(--ds-g)!important;color:#2a2205!important;box-shadow:none!important} #sp-top-bar .mod-languages a:hover::before{filter:none} #sp-top-bar .sp-module{margin:0!important} /* ===================== SEARCH POPUP (pure CSS) ===================== */ #sp-header .mod-finder{position:static;margin:0;width:42px;height:42px} #sp-header .mod-finder .awesomplete{position:relative;display:block;width:42px;height:42px} #sp-header .mod-finder input.js-finder-search-query{ width:42px!important;height:42px!important;min-height:0;padding:0!important;margin:0;cursor:pointer; border:1.5px solid var(--ds-line)!important;border-radius:50%!important; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2430' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/18px no-repeat!important; color:transparent!important;caret-color:transparent;box-shadow:none!important;outline:none!important;transition:border-color .2s,background-color .2s} #sp-header .mod-finder input.js-finder-search-query::placeholder{color:transparent} #sp-header .mod-finder input.js-finder-search-query:hover{border-color:var(--ds-p)!important;background-color:var(--ds-soft)!important} #sp-header .mod-finder::before{content:"";position:fixed;inset:0;background:rgba(15,17,23,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:10000} #sp-header .mod-finder:focus-within::before{opacity:1;visibility:visible} #sp-header .mod-finder:focus-within .awesomplete{ position:fixed;left:50%;top:120px;transform:translateX(-50%);width:min(680px,calc(100vw - 32px));height:auto;z-index:10001; background:#fff;border-radius:18px;padding:28px 28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:dsSearchIn .22s ease-out} #sp-header .mod-finder:focus-within .awesomplete::before{content:"Search the Dual Studies website";display:block;margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-p)} #sp-header .mod-finder:focus-within .awesomplete::after{content:"Press Enter to search \00B7 Click outside to close";display:block;margin-top:12px;font-size:13px;color:var(--ds-mut)} #sp-header .mod-finder:focus-within input.js-finder-search-query{ width:100%!important;height:60px!important;cursor:text;border-radius:12px!important;border:1.5px solid var(--ds-p)!important; padding-block:0!important;padding-inline:54px 20px!important;font-size:18px!important;color:var(--ds-ink)!important;caret-color:var(--ds-p); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1c2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 18px center/22px no-repeat!important; box-shadow:0 0 0 4px rgba(138,28,43,.10)!important} #sp-header .mod-finder:focus-within input.js-finder-search-query::placeholder{color:#8d93a1} #sp-header .mod-finder .awesomplete>ul{position:static!important;margin:12px 0 0!important;padding:6px!important;list-style:none;background:#fff!important;border:1px solid var(--ds-line)!important;border-radius:12px!important;box-shadow:none!important;max-height:300px;overflow:auto} #sp-header .mod-finder .awesomplete>ul::before{display:none} #sp-header .mod-finder .awesomplete>ul>li{padding:10px 14px!important;border-radius:8px;font-size:15px;color:var(--ds-ink);cursor:pointer} #sp-header .mod-finder .awesomplete>ul>li:hover,#sp-header .mod-finder .awesomplete>ul>li[aria-selected="true"]{background:var(--ds-soft)!important;color:var(--ds-p)!important} @keyframes dsSearchIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}} /* ===================== RESPONSIVE ===================== */ @media (max-width:1440px){ #sp-header .sp-megamenu-parent>li>a{padding:0 0px!important;font-size:14.5px!important} #sp-header .sp-megamenu-parent>li:last-child>a{padding:0 18px!important} #sp-header .logo-image{max-width:250px} #sp-header #sp-logo{padding-inline-end:18px} } @media (max-width:1280px){ #sp-header .sp-megamenu-parent{gap:0} #sp-header .sp-megamenu-parent>li>a{padding:0 8px!important;font-size:14px!important} #sp-header .logo-image{max-width:210px;max-height:54px} #sp-header .mod-languages a{padding:0 12px 0 10px!important} } @media (max-width:991px){ :root{--ds-h:70px} #sp-header .logo-image{max-height:46px;max-width:200px} #sp-header #sp-logo{padding-inline-end:0} #sp-header .mod-languages a{height:38px;font-size:14px!important} } @media (max-width:420px){ #sp-header .mod-languages a{font-size:0!important;gap:0;width:38px;padding:0!important;justify-content:center} } #offcanvas-toggler{width:44px;height:44px;border:1.5px solid var(--ds-line);border-radius:10px;justify-content:center} #offcanvas-toggler .burger-icon>span{background:var(--ds-ink)!important;height:2px;border-radius:2px} #offcanvas-toggler:hover{border-color:var(--ds-p)} .offcanvas-menu .menu>li>a{font-size:16px;font-weight:600;color:var(--ds-ink)!important;padding:14px 0!important;border-bottom:1px solid var(--ds-line)} .offcanvas-menu .menu>li.active>a,.offcanvas-menu .menu>li>a:hover{color:var(--ds-p)!important} /* ===================== ARABIC (RTL) ===================== */ html[dir="rtl"] #sp-header,html[dir="rtl"] #sp-top-bar,html[dir="rtl"] .offcanvas-menu{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif} html[dir="rtl"] #sp-header *,html[dir="rtl"] #sp-top-bar *{letter-spacing:0!important} html[dir="rtl"] #sp-header .sp-megamenu-parent>li>a{font-size:14px!important;font-weight:700!important} html[dir="rtl"] #sp-header .sp-dropdown{left:auto!important;right:0!important} html[dir="rtl"] #sp-header .sp-dropdown li.sp-menu-item>a{font-size:15px!important} html[dir="rtl"] #sp-header .mod-finder:focus-within .awesomplete::before{content:"\627 \628 \62D \62B \641 \64A \645 \648 \642 \639 \627 \644 \62F \631 \627 \633 \627 \62A \627 \644 \62B \646 \627 \626 \64A \629 ";font-size:15px;text-transform:none} html[dir="rtl"] #sp-header .mod-finder:focus-within .awesomplete::after{content:"\627 \636 \63A \637 Enter \644 \644 \628 \62D \62B \00B7 \627 \646 \642 \631 \62E \627 \631 \62C \627 \644 \646 \627 \641 \630 \629 \644 \644 \625 \63A \644 \627 \642 ";font-size:14px} html[dir="rtl"] #sp-header .mod-finder:focus-within input.js-finder-search-query{background-position:right 18px center!important;text-align:right} @media (max-width:1440px){html[dir="rtl"] #sp-header .sp-megamenu-parent>li>a{font-size:15px!important}} @media (max-width:1280px){html[dir="rtl"] #sp-header .sp-megamenu-parent>li>a{font-size:14.5px!important}} /* ===================================================================== GLOBAL - typography, links, buttons, page title, footer ===================================================================== */ :root{--ds-version:"dual-studies-v4"} html{scroll-behavior:smooth} body{color:var(--ds-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} ::selection{background:rgba(138,28,43,.15);color:var(--ds-ink)} a{transition:color .2s} :focus-visible{outline:3px solid rgba(138,28,43,.35);outline-offset:2px} img{max-width:100%;height:auto} .btn-primary,.sppb-btn-primary{background:var(--ds-p)!important;border-color:var(--ds-p)!important;border-radius:10px!important;font-weight:700} .btn-primary:hover,.sppb-btn-primary:hover{background:var(--ds-pd)!important;border-color:var(--ds-pd)!important} /* ---------- Page title bar (Helix "Page Title") ---------- */ #sp-page-title .sp-page-title{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ds-pd),var(--ds-p))!important;padding:64px 0 56px!important;text-align:start} #sp-page-title .sp-page-title::after{content:"";position:absolute;inset-inline-end:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:56px solid rgba(255,255,255,.06);pointer-events:none} #sp-page-title .sp-page-title .container{position:relative;z-index:1} #sp-page-title .sp-page-title-heading,#sp-page-title h1,#sp-page-title h2{color:#fff!important;background:none!important;font-size:clamp(30px,4.4vw,46px);line-height:1.15;font-weight:800;margin:0 0 12px} #sp-page-title .sp-page-title-sub-heading,#sp-page-title h3{color:rgba(255,255,255,.85);font-size:18px;font-weight:400;margin:0} #sp-page-title .breadcrumb{background:transparent!important;padding:0!important;margin:0!important;font-size:14px;flex-wrap:nowrap;overflow:hidden} #sp-page-title .breadcrumb .mod-breadcrumbs__here,#sp-page-title .breadcrumb>li:not(.breadcrumb-item),#sp-page-title .breadcrumb .float-start{display:none!important} #sp-page-title .breadcrumb-item{color:rgba(255,255,255,.8);white-space:nowrap} #sp-page-title .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5)} #sp-page-title .breadcrumb a{color:rgba(255,255,255,.88);text-decoration:none} #sp-page-title .breadcrumb a:hover{color:#fff;text-decoration:underline} #sp-page-title .breadcrumb .active{color:var(--ds-g);overflow:hidden;text-overflow:ellipsis;max-width:46ch} /* ---------- Footer area (#sp-bottom = funding note + logos, #sp-footer = copyright) ---------- */ #sp-bottom{background:#fff!important;border-top:1px solid var(--ds-line);padding:56px 0 40px!important;color:var(--ds-mut)} #sp-bottom p{font-size:14px;line-height:1.75;color:var(--ds-mut);max-width:980px;margin-inline:auto} #sp-bottom img{filter:grayscale(15%);transition:filter .2s} #sp-bottom img:hover{filter:none} #sp-bottom .sp-module{margin-bottom:0} #sp-footer{background:var(--ds-ink)!important;color:rgba(255,255,255,.72)!important;padding:22px 0!important;font-size:14px;border:0!important} #sp-footer .container-inner{border:0!important;padding:0!important} #sp-footer a{color:#fff!important} #sp-footer a:hover{color:var(--ds-g)!important} #sp-footer .sp-copyright{color:rgba(255,255,255,.72)} /* back to top */ .sp-scroll-up,#sp-scroll-up,.scrollup{background:var(--ds-p)!important;color:#fff!important;border-radius:12px!important;box-shadow:0 10px 24px rgba(138,28,43,.3)} .sp-scroll-up:hover,.scrollup:hover{background:var(--ds-pd)!important} /* ---------- Arabic (RTL) global ---------- */ html[dir="rtl"] body{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif} html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;letter-spacing:0!important} html[dir="rtl"] #sp-page-title *,html[dir="rtl"] #sp-bottom *,html[dir="rtl"] #sp-footer *{letter-spacing:0!important} html[dir="rtl"] #sp-page-title .sp-page-title-heading,html[dir="rtl"] #sp-page-title h1,html[dir="rtl"] #sp-page-title h2{line-height:1.35} html[dir="rtl"] p,html[dir="rtl"] li{line-height:1.85} /* ---------- Arabic (RTL) blog + article ---------- */ html[dir="rtl"] .blog .article-info,html[dir="rtl"] .related-article-list .article-info,html[dir="rtl"] .view-article .article-details .article-info{text-transform:none} html[dir="rtl"] .blog .article .readmore a::after{content:"\2190"} html[dir="rtl"] .blog .article .readmore a:hover::after{transform:translateX(-4px)} html[dir="rtl"] .view-article [itemprop="articleBody"] ul,html[dir="rtl"] .view-article [itemprop="articleBody"] ol{padding-left:0;padding-right:22px} html[dir="rtl"] .view-article .article-details [itemprop="articleBody"] blockquote, html[dir="rtl"] .view-article .article-details .com-content-article__body blockquote{border-left:0;border-right:4px solid var(--ds-g);border-radius:12px 0 0 12px} html[dir="rtl"] .view-article .pagenavigation .pagination .next{margin-left:0;margin-right:auto} html[dir="rtl"] .view-article .pagenavigation .pagination .previous{margin-left:auto} html[dir="rtl"] .view-article [itemprop="articleBody"] th,html[dir="rtl"] .view-article [itemprop="articleBody"] td{text-align:right} /* ===================================================================== SECTION 3: BLOG LIST + SINGLE ARTICLE ===================================================================== */ /* ===================================================================== Dual Studies - Joomla blog styles for Helix Ultimate (v2) Paste into: Template Options > Custom Code > Custom CSS (replace the previous version completely) ===================================================================== */ /* ================= CONTENT AREA ================= */ .view-category #sp-main-body,.view-article #sp-main-body{padding:64px 0 80px} .view-category.layout-blog #sp-main-body{background:var(--ds-soft)} .view-category .category-desc{font-size:18px;line-height:1.65;color:var(--ds-mut);max-width:760px;margin:0 0 36px} /* ================= SHARED: article meta line ================= Helix prints "/" separators and author/hits - clean them up */ .blog .article-info,.related-article-list .article-info,.view-article .article-details .article-info{ display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 0;padding:0;border:0; font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-p);line-height:1.5} .blog .article-info>span,.related-article-list .article-info>span,.view-article .article-details .article-info>span{margin:0!important;padding:0!important;color:inherit} .blog .article-info>span::before,.blog .article-info>span::after, .related-article-list .article-info>span::before,.related-article-list .article-info>span::after, .view-article .article-details .article-info>span::before,.view-article .article-details .article-info>span::after{content:none!important;display:none!important} .blog .article-info>span:not(.createdby):not(.hits)~span:not(.createdby):not(.hits)::before, .related-article-list .article-info>span:not(.createdby):not(.hits)~span:not(.createdby):not(.hits)::before, .view-article .article-details .article-info>span:not(.createdby):not(.hits)~span:not(.createdby):not(.hits)::before{ content:"\00B7"!important;display:inline-block!important;margin:0 10px;color:#c4c8d2;font-weight:900} .blog .article-info a,.related-article-list .article-info a,.view-article .article-details .article-info a{color:inherit!important;text-decoration:none} /* hide author + hits (also switch them off in Options) */ .blog .article-info .createdby,.blog .article-info .hits, .related-article-list .article-info .createdby,.related-article-list .article-info .hits, .view-article .article-details .article-info .createdby,.view-article .article-details .article-info .hits{display:none!important} .blog .article-info .fa,.blog .article-info .fas,.blog .article-info .far, .view-article .article-details .article-info .fa,.view-article .article-details .article-info .fas,.view-article .article-details .article-info .far{display:none} /* ================= BLOG LIST: CARDS ================= */ .blog .article-list .row{row-gap:24px} .blog .article-list .row>[class*="col"]{display:flex} .blog .article-list .article{ display:flex;flex-direction:column;width:100%;height:100%;margin:0!important;padding:0!important; background:#fff;border:1px solid var(--ds-line);border-radius:16px;overflow:hidden;box-shadow:none; transition:transform .2s ease,box-shadow .2s ease} .blog .article-list .article:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(31,36,48,.10)} /* image - fixed 3:2 crop for every card */ .blog .article .article-intro-image,.blog .article .article-featured-video{margin:0!important;border-radius:0;overflow:hidden;background:var(--ds-soft)} .blog .article .article-intro-image img{ display:block;width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:0!important;margin:0!important; transition:transform .35s ease} .blog .article:hover .article-intro-image img{transform:scale(1.04)} /* body */ .blog .article .article-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px!important} .blog .article .article-header{margin:0!important;padding:0!important;border:0!important;order:1} .blog .article .article-info{order:0;margin:0 0 8px!important} .blog .article .article-introtext{order:2} .blog .article .readmore{order:3} .blog .article .article-header h2{font-size:19px!important;line-height:1.35!important;font-weight:800;margin:0 0 10px!important; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog .article .article-header h2 a{color:var(--ds-ink)!important;text-decoration:none} .blog .article .article-header h2 a:hover{color:var(--ds-p)!important} /* intro text: max 4 lines so all cards stay even */ .blog .article .article-introtext{font-size:15px;line-height:1.65;color:var(--ds-mut);margin:0 0 18px} .blog .article .article-introtext,.blog .article .article-introtext p{ display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .blog .article .article-introtext p{margin:0;font-size:15px!important;line-height:1.65!important;color:var(--ds-mut)!important} .blog .article .article-introtext p+p,.blog .article .article-introtext img, .blog .article .article-introtext figure,.blog .article .article-introtext table{display:none!important} /* read more */ .blog .article .readmore{margin-top:auto!important;padding:0!important} .blog .article .readmore a,.blog .article .readmore .btn{ display:inline-flex!important;align-items:center;gap:8px;background:none!important;border:0!important;box-shadow:none!important; padding:0!important;font-size:15px!important;font-weight:700;color:var(--ds-p)!important;text-decoration:none} .blog .article .readmore a::after{content:"\2192";font-weight:700;transition:transform .2s} .blog .article .readmore a:hover::after{transform:translateX(4px)} .blog .article .readmore .fa,.blog .article .readmore .fas,.blog .article .readmore span[class*="icon"]{display:none} /* leading (featured) article: image left, text right */ @media (min-width:992px){ .blog .articles-leading .article{ display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:380px} .blog .articles-leading .article .article-intro-image{height:100%} .blog .articles-leading .article .article-intro-image a{display:block;height:100%} .blog .articles-leading .article .article-intro-image img{height:100%!important;aspect-ratio:auto;min-height:380px} .blog .articles-leading .article .article-body{padding:44px!important;justify-content:center} .blog .articles-leading .article .article-header h2{font-size:28px!important;line-height:1.25!important;-webkit-line-clamp:4} .blog .articles-leading .article .article-introtext, .blog .articles-leading .article .article-introtext p{-webkit-line-clamp:5;font-size:16px!important} } .blog .articles-leading{margin-bottom:24px} /* ================= PAGINATION ================= */ .view-category .pagination-wrapper,.view-category .com-content-category-blog__navigation{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:40px} .view-category .pagination{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .view-category .pagination .page-item{list-style:none} .view-category .pagination .page-link{ min-width:42px;height:42px;display:grid;place-items:center;padding:0 14px;border-radius:10px!important; border:1px solid var(--ds-line);background:#fff;color:var(--ds-ink);font-weight:700;font-size:14.5px;box-shadow:none} .view-category .pagination .page-link:hover{border-color:var(--ds-p);color:var(--ds-p)} .view-category .pagination .page-item.active .page-link{background:var(--ds-p);border-color:var(--ds-p);color:#fff} .view-category .pagination .page-item.disabled .page-link{opacity:.45} .view-category .pagination-counter,.view-category .counter{font-size:14px;color:var(--ds-mut);margin:0} /* ================= SINGLE ARTICLE ================= */ .view-article .article-details{max-width:860px;margin:0 auto} .view-article .article-details .article-full-image{margin:0 0 32px!important;border-radius:18px;overflow:hidden;background:var(--ds-soft)} .view-article .article-details .article-full-image img{width:100%;height:auto;display:block;border-radius:0} .view-article .article-details .article-header{margin:0 0 14px!important;padding:0;border:0} .view-article .article-details .article-header h1, .view-article .article-details .article-header h2{font-size:clamp(28px,3.8vw,40px)!important;line-height:1.2!important;font-weight:800;color:var(--ds-ink);margin:0} .view-article .article-details .article-info{margin:0 0 26px!important;padding:0 0 22px!important;border-bottom:1px solid var(--ds-line)!important} /* ratings + share bar */ .view-article .article-ratings-social-share{margin:0 0 28px!important;padding:0!important;border:0!important;align-items:center} .view-article .article-ratings-social-share .article-ratings, .view-article .article-ratings-social-share .content_rating, .view-article .article-ratings-social-share .content_vote{display:none!important} .view-article .article-social-share ul{display:flex;gap:8px;margin:0;padding:0;list-style:none} .view-article .article-social-share a{display:grid!important;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--ds-line);color:var(--ds-ink)!important;background:#fff} .view-article .article-social-share a:hover{border-color:var(--ds-p);color:var(--ds-p)!important} /* body typography (Joomla 4/5 + Helix markup) */ .view-article .article-details [itemprop="articleBody"], .view-article .article-details .com-content-article__body, .view-article .article-details .article-body{font-size:17px;line-height:1.8;color:var(--ds-ink)} .view-article .article-details [itemprop="articleBody"] p, .view-article .article-details .com-content-article__body p, .view-article .article-details .article-body p, .view-article .article-details>p{font-size:17px!important;line-height:1.8!important;color:var(--ds-ink)!important;margin:0 0 22px} .view-article .article-details [itemprop="articleBody"] h2,.view-article .article-details .com-content-article__body h2{font-size:26px;font-weight:800;margin:40px 0 14px;line-height:1.25} .view-article .article-details [itemprop="articleBody"] h3,.view-article .article-details .com-content-article__body h3{font-size:21px;font-weight:700;margin:32px 0 12px;line-height:1.3} .view-article .article-details [itemprop="articleBody"] a,.view-article .article-details .com-content-article__body a{color:var(--ds-p);font-weight:600;text-decoration:underline;text-underline-offset:3px} .view-article .article-details [itemprop="articleBody"] img,.view-article .article-details .com-content-article__body img{max-width:100%;height:auto;border-radius:14px;margin:8px 0 22px} .view-article .article-details [itemprop="articleBody"] ul,.view-article .article-details [itemprop="articleBody"] ol{margin:0 0 22px;padding-left:22px;font-size:17px;line-height:1.8} .view-article .article-details [itemprop="articleBody"] blockquote,.view-article .article-details .com-content-article__body blockquote{ margin:28px 0;padding:22px 26px;background:var(--ds-soft);border-left:4px solid var(--ds-g);border-radius:0 12px 12px 0;font-size:19px;font-weight:600} .view-article .article-details [itemprop="articleBody"] blockquote p{margin:0!important;font-size:19px!important} /* tags */ .view-article .article-details .tags,.view-article .article-details .article-tags{margin:32px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} .view-article .article-details .tags a,.view-article .article-details .article-tags a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--ds-soft);border:1px solid var(--ds-line);color:var(--ds-ink);font-size:13px;font-weight:600;text-decoration:none} /* previous / next */ .view-article .pagenavigation{margin:40px 0 0!important;padding:28px 0 0;border-top:1px solid var(--ds-line)} .view-article .pagenavigation .pagination{display:flex!important;justify-content:space-between!important;gap:12px;margin:0!important;padding:0;list-style:none;width:100%} .view-article .pagenavigation .pagination .next{margin-left:auto} .view-article .pagenavigation a{ display:inline-flex!important;align-items:center;gap:8px;padding:12px 22px!important;border-radius:10px!important;border:1px solid var(--ds-line)!important; background:#fff!important;color:var(--ds-ink)!important;font-weight:700;font-size:14.5px!important;text-decoration:none;box-shadow:none!important} .view-article .pagenavigation a:hover{border-color:var(--ds-p)!important;color:var(--ds-p)!important} /* ================= RELATED ARTICLES ================= */ .related-article-list-container{margin-top:72px!important;padding-top:56px;border-top:1px solid var(--ds-line)} .related-article-list-container .related-article-title{ font-size:clamp(24px,3vw,30px)!important;font-weight:800;color:var(--ds-ink);margin:0 0 28px!important;text-transform:none} .related-article-list .row{row-gap:24px} .related-article-list .row>[class*="col"]{display:flex} .related-article-list .article{ display:flex;flex-direction:column;width:100%;height:100%;margin:0!important;padding:0!important; background:#fff;border:1px solid var(--ds-line)!important;border-radius:16px!important;overflow:hidden;box-shadow:none!important;transition:transform .2s,box-shadow .2s} .related-article-list .article:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(31,36,48,.10)!important} .related-article-list .article-intro-image{margin:0!important;overflow:hidden} .related-article-list .article-intro-image img{display:block;width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:0!important} .related-article-list .article-body,.related-article-list .article>div:not(.article-intro-image){padding:20px 22px 22px!important;display:flex;flex-direction:column} .related-article-list .article-header{order:1;margin:0!important;padding:0!important} .related-article-list .article-info{order:0;margin:0 0 8px!important} .related-article-list .article-header h2,.related-article-list h2,.related-article-list h3{ font-size:17px!important;line-height:1.4!important;font-weight:800!important;margin:0!important; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .related-article-list h2 a,.related-article-list h3 a{color:var(--ds-ink)!important;text-decoration:none} .related-article-list h2 a:hover,.related-article-list h3 a:hover{color:var(--ds-p)!important} /* ================= RESPONSIVE ================= */ @media (max-width:991px){ .view-category #sp-main-body,.view-article #sp-main-body{padding:48px 0 64px} #sp-page-title .sp-page-title{padding:48px 0 40px!important} #sp-page-title .breadcrumb .active{max-width:24ch} } @media (max-width:575px){ .blog .article .article-body{padding:18px 18px 20px!important} .view-article .article-details [itemprop="articleBody"] p, .view-article .article-details .com-content-article__body p{font-size:16px!important} .view-article .pagenavigation .pagination{flex-direction:column} } /* ===================================================================== v5 BLOG FIXES - row spacing, full width grid, Arabic "Related Articles" ===================================================================== */ :root{--ds-version:"dual-studies-v5"} /* 1+3) Full-width news grid with real spacing between rows */ .view-category #sp-component,.view-featured #sp-component{flex:0 0 100%;max-width:100%} .blog,.blog .article-list,.blog .articles-leading,.blog .items-row{width:100%!important;max-width:none!important} .blog .article-list .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px!important;margin:0!important;width:100%!important} .blog .article-list .row>[class*="col"]{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important;display:flex} .blog .article-list .article{width:100%;height:100%;margin:0!important} .blog .articles-leading{margin-bottom:40px!important} .blog .articles-leading .article{margin:0!important} .blog .article-list+.article-list{margin-top:36px!important} @media (max-width:991px){.blog .article-list .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px!important}} @media (max-width:575px){.blog .article-list .row{grid-template-columns:1fr;gap:24px!important}} .blog .pagination-wrapper,.blog .com-content-category-blog__navigation{margin-top:48px} /* 2) Arabic "Related Articles" heading (CSS fallback - Language Override is preferred) */ html[dir="rtl"] .related-article-list-container .related-article-title{font-size:0!important;line-height:0} html[dir="rtl"] .related-article-list-container .related-article-title::before{content:"\645 \642 \627 \644 \627 \62A \630 \627 \62A \635 \644 \629 ";display:block;font-size:clamp(24px,3vw,30px);line-height:1.4;font-weight:800;color:var(--ds-ink)} /* ##################################################################### DUAL STUDIES - AL-QUDS UNIVERSITY Complete site stylesheet for Helix Ultimate (v4) English (LTR) + Arabic (RTL) HOW TO INSTALL (use ONE method only): A) Recommended: upload this file to the server as /templates/shaper_helix_ultimate/css/custom.css then EMPTY the "Custom CSS" box in EVERY Helix template style (System > Site Template Styles > each shaper_helix_ultimate style). B) Or paste the whole file into Template Options > Custom Code > Custom CSS of EVERY Helix template style (English AND Arabic). Then: System > Clear Cache, and Ctrl+F5 in the browser. This file is 100% ASCII. Arabic text is written as CSS escape codes, so it can never turn into "????". Check it is loaded: View Page Source and search for dual-studies-v4 ##################################################################### */ /* ===================================================================== Dual Studies - SECTION 1: HEADER (top bar, menu, language, search) Top bar + main header + language switcher + search popup English (LTR) and Arabic (RTL). This file is pure ASCII on purpose: Arabic text is written as CSS escape codes so it never turns into "????". Paste into: Template Options > Custom Code > Custom CSS (delete ALL previous header CSS first) ===================================================================== */ :root{ --ds-p:#8a1c2b; --ds-pd:#5e1220; --ds-pdd:#45101a; --ds-g:#c9a227; --ds-ink:#1f2430; --ds-mut:#5b6272; --ds-line:#e8eaef; --ds-soft:#f6f7fa; --ds-h:84px; } /* =========================== TOP BAR =========================== */ #sp-top-bar{ background:linear-gradient(90deg,var(--ds-pdd),var(--ds-pd) 55%,var(--ds-p))!important; color:rgba(255,255,255,.82)!important;font-size:13.5px;padding:0!important;border:0!important} #sp-top-bar .container-inner>.row{min-height:42px;align-items:center} #sp-top-bar .sp-column{display:flex;align-items:center;gap:18px;flex-wrap:wrap} #sp-top1 .sp-column{justify-content:flex-start} #sp-top2 .sp-column{justify-content:flex-end} #sp-top-bar a{color:rgba(255,255,255,.9)!important;text-decoration:none;transition:color .2s} #sp-top-bar a:hover{color:#fff!important} /* social icons */ #sp-top-bar .social-icons{display:flex;gap:6px;margin:0;padding:0;list-style:none} #sp-top-bar .social-icons li{margin:0!important} #sp-top-bar .social-icons a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);font-size:13px;transition:background .2s,color .2s} #sp-top-bar .social-icons a:hover{background:var(--ds-g);color:#2a2205!important} /* contact info (phone / email / hours) */ #sp-top-bar .sp-contact-info{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none} #sp-top-bar .sp-contact-info li{display:inline-flex;align-items:center;gap:7px;margin:0!important;padding:0 14px;border-inline-start:1px solid rgba(255,255,255,.18);white-space:nowrap} #sp-top-bar .sp-contact-info li:first-child{border-inline-start:0;padding-inline-start:0} #sp-top-bar .sp-contact-info [class*="fa"]{color:var(--ds-g);font-size:12px} #sp-top-bar .sp-contact-info a[href^="tel:"]{direction:ltr;unicode-bidi:embed} @media (max-width:991px){#sp-top-bar .sp-contact-time,#sp-top-bar .sp-contact-email{display:none}#sp-top-bar .sp-column{justify-content:center!important}} /* ========================= MAIN HEADER ========================= */ #sp-header{ height:var(--ds-h)!important;background:#fff!important;border-top:0!important; box-shadow:0 1px 0 var(--ds-line),0 8px 24px rgba(31,36,48,.04)!important;transition:box-shadow .25s,height .25s;z-index:999} #sp-header.header-sticky{--ds-h:72px;box-shadow:0 10px 30px rgba(31,36,48,.10)!important} #sp-header .container-inner,#sp-header .row{height:100%} #sp-header .row{flex-wrap:nowrap} /* logo */ #sp-header #sp-logo{padding-inline-end:28px} #sp-header .logo{height:var(--ds-h);display:flex;align-items:center;margin:0} #sp-header .logo a{display:flex;align-items:center} #sp-header .logo-image{display:block;height:auto!important;max-height:62px;width:auto;max-width:300px;object-fit:contain;transition:max-height .25s} #sp-header.header-sticky .logo-image{max-height:52px} /* menu area: navigation in the middle, tools at the end */ #sp-header #sp-menu{min-width:0} #sp-header #sp-menu>.sp-column{justify-content:flex-end!important;gap:6px} #sp-header #sp-menu .sp-column>nav{order:1;margin-inline-end:auto;margin-inline-start:auto} #sp-header #sp-menu .sp-column>.header-modules{order:3} #sp-header #sp-menu .sp-column>.sp-module{order:4;margin:0!important;padding:0!important} #sp-header .sp-megamenu-parent{margin:0!important;display:flex!important;align-items:center;gap:2px} #sp-header .sp-megamenu-parent>li{padding:0!important;float:none!important} #sp-header .sp-megamenu-parent>li>a{ position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; height:42px;line-height:42px!important;padding:0 14px!important;border-radius:10px; font-size:15px!important;font-weight:600!important;color:var(--ds-ink)!important;text-decoration:none; transition:color .2s,background .2s} #sp-header .sp-megamenu-parent>li:hover>a{background:var(--ds-soft);color:var(--ds-p)!important} #sp-header .sp-megamenu-parent>li.active>a,#sp-header .sp-megamenu-parent>li.current-item>a{color:var(--ds-p)!important;background:rgba(138, 138, 138, 0.07)} #sp-header .sp-megamenu-parent>li>a::after{display:none!important} /* chevron for Programs */ #sp-header .sp-megamenu-parent>li.sp-has-child>a::before{ content:"";order:2;width:6px;height:6px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);opacity:.6;transition:transform .2s,margin .2s} #sp-header .sp-megamenu-parent>li.sp-has-child:hover>a::before{transform:rotate(225deg);margin-top:3px} #sp-header .sp-megamenu-parent .menu-toggler{display:none} /* last item (Contact us) = call-to-action button */ #sp-header .sp-megamenu-parent>li:last-child{margin-inline-start:10px!important} #sp-header .sp-megamenu-parent>li:last-child>a{ height:44px;line-height:44px!important;padding:0 22px!important;background:var(--ds-p)!important;color:#fff!important; box-shadow:0 8px 18px rgba(138,28,43,.22);transition:background .2s,transform .15s} #sp-header .sp-megamenu-parent>li:last-child>a:hover,#sp-header .sp-megamenu-parent>li:last-child.active>a{background:var(--ds-pd)!important;transform:translateY(-1px)} /* dropdown */ #sp-header .sp-dropdown{width:290px!important;padding-top:14px!important;margin-top:0} #sp-header .sp-dropdown .sp-dropdown-inner{ background:#fff!important;border:1px solid var(--ds-line);border-radius:14px!important;padding:8px!important; box-shadow:0 24px 50px rgba(31,36,48,.16)!important;position:relative} #sp-header .sp-dropdown .sp-dropdown-inner::before{content:"";position:absolute;top:-1px;inset-inline:24px;height:3px;border-radius:0 0 3px 3px;background:var(--ds-p)} #sp-header .sp-dropdown .sp-dropdown-items{margin:0;padding:0} #sp-header .sp-dropdown li.sp-menu-item{padding:0!important} #sp-header .sp-dropdown li.sp-menu-item>a{ display:flex;align-items:center;gap:10px;padding:11px 14px!important;border-radius:9px;font-size:14.5px!important;font-weight:600; line-height:1.4!important;color:var(--ds-ink)!important;text-decoration:none;transition:background .15s,color .15s} #sp-header .sp-dropdown li.sp-menu-item>a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#d5d8e0;transition:background .15s} #sp-header .sp-dropdown li.sp-menu-item>a:hover,#sp-header .sp-dropdown li.sp-menu-item.active>a{background:var(--ds-soft);color:var(--ds-p)!important} #sp-header .sp-dropdown li.sp-menu-item>a:hover::before,#sp-header .sp-dropdown li.sp-menu-item.active>a::before{background:var(--ds-g)} /* tools (search) */ #sp-header .header-modules{gap:8px;margin:0 0 0 0;padding-inline-start:14px;margin-inline-start:6px;border-inline-start:1px solid var(--ds-line);height:36px} #sp-header .header-modules .sp-module{margin:0!important;padding:0!important} /* ===================== LANGUAGE SWITCHER ===================== No border, small bold text, globe icon, interactive. Works in the main header (position "menu") and the top bar (position "top2"). */ .mod-languages .visually-hidden{position:absolute!important} .mod-languages ul{display:flex!important;align-items:center;gap:14px;margin:0!important;padding:0!important;list-style:none!important;background:none!important;border:0!important} .mod-languages li{margin:0!important;padding:0!important;display:block!important;border:0!important;background:none!important} .mod-languages li::before,.mod-languages li::after{display:none!important} .mod-languages img{display:none!important} /* link */ .mod-languages a{ position:relative;display:inline-flex!important;align-items:center;gap:6px; height:auto!important;padding:6px 2px!important; border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important; color:var(--ds-ink)!important;font-size:13px!important;font-weight:800!important;line-height:1!important; letter-spacing:.02em;white-space:nowrap;text-decoration:none!important; transition:color .2s ease,transform .15s ease} #sp-header .mod-languages{margin-inline-start:12px} /* globe icon (spins on hover) */ .mod-languages a::before{ content:"";flex:none;width:15px;height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1c2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center/15px no-repeat; transition:transform .5s ease} /* gold underline that grows on hover */ .mod-languages a::after{ content:"";position:absolute;bottom:0;inset-inline:2px;height:2px;border-radius:2px; background:var(--ds-g);transform:scaleX(0);transition:transform .25s ease} /* interaction */ .mod-languages a:hover{color:var(--ds-p)!important;background:transparent!important;border:0!important;box-shadow:none!important;text-decoration:none!important} .mod-languages a:hover::before{transform:rotate(180deg)} .mod-languages a:hover::after,.mod-languages a:focus-visible::after{transform:scaleX(1)} .mod-languages a:active{transform:scale(.94)} .mod-languages a:focus-visible{outline:none!important} /* fonts: Arabic label in Arabic font, English label in Latin font */ .mod-languages a[href*="/ar"]{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif!important;font-size:14px!important;letter-spacing:0} html[dir="rtl"] .mod-languages a[href*="/en"]{font-family:"Inter","Segoe UI",system-ui,sans-serif!important} /* if the active language is also shown: active = burgundy text with underline */ .mod-languages li.lang-active a{color:var(--ds-p)!important} .mod-languages li.lang-active a::after{transform:scaleX(1);background:var(--ds-p)} /* inside the dark top bar: white text, gold on hover */ #sp-top-bar .sp-module{margin:0!important} #sp-top-bar .mod-languages a{color:#fff!important} #sp-top-bar .mod-languages a::before{filter:brightness(0) invert(1)} #sp-top-bar .mod-languages a:hover{color:var(--ds-g)!important} #sp-top-bar .mod-languages a:hover::before{filter:none} #sp-top-bar .mod-languages li.lang-active a{color:var(--ds-g)!important} /* ===================== SEARCH POPUP (pure CSS) ===================== */ #sp-header .mod-finder{position:static;margin:0;width:42px;height:42px} #sp-header .mod-finder .awesomplete{position:relative;display:block;width:42px;height:42px} #sp-header .mod-finder input.js-finder-search-query{ width:42px!important;height:42px!important;min-height:0;padding:0!important;margin:0;cursor:pointer; border:1.5px solid var(--ds-line)!important;border-radius:50%!important; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2430' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/18px no-repeat!important; color:transparent!important;caret-color:transparent;box-shadow:none!important;outline:none!important;transition:border-color .2s,background-color .2s} #sp-header .mod-finder input.js-finder-search-query::placeholder{color:transparent} #sp-header .mod-finder input.js-finder-search-query:hover{border-color:var(--ds-p)!important;background-color:var(--ds-soft)!important} #sp-header .mod-finder::before{content:"";position:fixed;inset:0;background:rgba(15,17,23,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:10000} #sp-header .mod-finder:focus-within::before{opacity:1;visibility:visible} #sp-header .mod-finder:focus-within .awesomplete{ position:fixed;left:50%;top:120px;transform:translateX(-50%);width:min(680px,calc(100vw - 32px));height:auto;z-index:10001; background:#fff;border-radius:18px;padding:28px 28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:dsSearchIn .22s ease-out} #sp-header .mod-finder:focus-within .awesomplete::before{content:"Search the Dual Studies website";display:block;margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-p)} #sp-header .mod-finder:focus-within .awesomplete::after{content:"Press Enter to search \00B7 Click outside to close";display:block;margin-top:12px;font-size:13px;color:var(--ds-mut)} #sp-header .mod-finder:focus-within input.js-finder-search-query{ width:100%!important;height:60px!important;cursor:text;border-radius:12px!important;border:1.5px solid var(--ds-p)!important; padding-block:0!important;padding-inline:54px 20px!important;font-size:18px!important;color:var(--ds-ink)!important;caret-color:var(--ds-p); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1c2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 18px center/22px no-repeat!important; box-shadow:0 0 0 4px rgba(138,28,43,.10)!important} #sp-header .mod-finder:focus-within input.js-finder-search-query::placeholder{color:#8d93a1} #sp-header .mod-finder .awesomplete>ul{position:static!important;margin:12px 0 0!important;padding:6px!important;list-style:none;background:#fff!important;border:1px solid var(--ds-line)!important;border-radius:12px!important;box-shadow:none!important;max-height:300px;overflow:auto} #sp-header .mod-finder .awesomplete>ul::before{display:none} #sp-header .mod-finder .awesomplete>ul>li{padding:10px 14px!important;border-radius:8px;font-size:15px;color:var(--ds-ink);cursor:pointer} #sp-header .mod-finder .awesomplete>ul>li:hover,#sp-header .mod-finder .awesomplete>ul>li[aria-selected="true"]{background:var(--ds-soft)!important;color:var(--ds-p)!important} @keyframes dsSearchIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}} /* ===================== RESPONSIVE ===================== */ @media (max-width:1440px){ #sp-header .sp-megamenu-parent>li>a{padding:0 11px!important;font-size:14.5px!important} #sp-header .sp-megamenu-parent>li:last-child>a{padding:0 18px!important} #sp-header .logo-image{max-width:250px} #sp-header #sp-logo{padding-inline-end:18px} } @media (max-width:1280px){ #sp-header .sp-megamenu-parent{gap:0} #sp-header .sp-megamenu-parent>li>a{padding:0 8px!important;font-size:14px!important} #sp-header .logo-image{max-width:210px;max-height:54px} #sp-header .mod-languages a{padding:0 12px 0 10px!important} } @media (max-width:991px){ :root{--ds-h:70px} #sp-header .logo-image{max-height:46px;max-width:200px} #sp-header #sp-logo{padding-inline-end:0} #sp-header .mod-languages a{height:38px;font-size:14px!important} } @media (max-width:420px){ #sp-header .mod-languages a{font-size:0!important;gap:0;width:38px;padding:0!important;justify-content:center} } #offcanvas-toggler{width:44px;height:44px;border:1.5px solid var(--ds-line);border-radius:10px;justify-content:center} #offcanvas-toggler .burger-icon>span{background:var(--ds-ink)!important;height:2px;border-radius:2px} #offcanvas-toggler:hover{border-color:var(--ds-p)} .offcanvas-menu .menu>li>a{font-size:16px;font-weight:600;color:var(--ds-ink)!important;padding:14px 0!important;border-bottom:1px solid var(--ds-line)} .offcanvas-menu .menu>li.active>a,.offcanvas-menu .menu>li>a:hover{color:var(--ds-p)!important} /* ===================== ARABIC (RTL) ===================== */ html[dir="rtl"] #sp-header,html[dir="rtl"] #sp-top-bar,html[dir="rtl"] .offcanvas-menu{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif} html[dir="rtl"] #sp-header *,html[dir="rtl"] #sp-top-bar *{letter-spacing:0!important} html[dir="rtl"] #sp-header .sp-megamenu-parent>li>a{font-size:15.5px!important;font-weight:700!important} html[dir="rtl"] #sp-header .sp-dropdown{left:auto!important;right:0!important} html[dir="rtl"] #sp-header .sp-dropdown li.sp-menu-item>a{font-size:15px!important} html[dir="rtl"] #sp-header .mod-finder:focus-within .awesomplete::before{content:"\627 \628 \62D \62B \641 \64A \645 \648 \642 \639 \627 \644 \62F \631 \627 \633 \627 \62A \627 \644 \62B \646 \627 \626 \64A \629 ";font-size:15px;text-transform:none} html[dir="rtl"] #sp-header .mod-finder:focus-within .awesomplete::after{content:"\627 \636 \63A \637 Enter \644 \644 \628 \62D \62B \00B7 \627 \646 \642 \631 \62E \627 \631 \62C \627 \644 \646 \627 \641 \630 \629 \644 \644 \625 \63A \644 \627 \642 ";font-size:14px} html[dir="rtl"] #sp-header .mod-finder:focus-within input.js-finder-search-query{background-position:right 18px center!important;text-align:right} @media (max-width:1440px){html[dir="rtl"] #sp-header .sp-megamenu-parent>li>a{font-size:15px!important}} @media (max-width:1280px){html[dir="rtl"] #sp-header .sp-megamenu-parent>li>a{font-size:14.5px!important}} /* ===================================================================== GLOBAL - typography, links, buttons, page title, footer ===================================================================== */ :root{--ds-version:"dual-studies-v4"} html{scroll-behavior:smooth} body{color:var(--ds-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} ::selection{background:rgba(138,28,43,.15);color:var(--ds-ink)} a{transition:color .2s} :focus-visible{outline:3px solid rgba(138,28,43,.35);outline-offset:2px} img{max-width:100%;height:auto} .btn-primary,.sppb-btn-primary{background:var(--ds-p)!important;border-color:var(--ds-p)!important;border-radius:10px!important;font-weight:700} .btn-primary:hover,.sppb-btn-primary:hover{background:var(--ds-pd)!important;border-color:var(--ds-pd)!important} /* ---------- Page title bar (Helix "Page Title") ---------- */ #sp-page-title .sp-page-title{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ds-pd),var(--ds-p))!important;padding:64px 0 56px!important;text-align:start} #sp-page-title .sp-page-title::after{content:"";position:absolute;inset-inline-end:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:56px solid rgba(255,255,255,.06);pointer-events:none} #sp-page-title .sp-page-title .container{position:relative;z-index:1} #sp-page-title .sp-page-title-heading,#sp-page-title h1,#sp-page-title h2{color:#fff!important;background:none!important;font-size:clamp(30px,4.4vw,46px);line-height:1.15;font-weight:800;margin:0 0 12px} #sp-page-title .sp-page-title-sub-heading,#sp-page-title h3{color:rgba(255,255,255,.85);font-size:18px;font-weight:400;margin:0} #sp-page-title .breadcrumb{background:transparent!important;padding:0!important;margin:0!important;font-size:14px;flex-wrap:nowrap;overflow:hidden} #sp-page-title .breadcrumb .mod-breadcrumbs__here,#sp-page-title .breadcrumb>li:not(.breadcrumb-item),#sp-page-title .breadcrumb .float-start{display:none!important} #sp-page-title .breadcrumb-item{color:rgba(255,255,255,.8);white-space:nowrap} #sp-page-title .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5)} #sp-page-title .breadcrumb a{color:rgba(255,255,255,.88);text-decoration:none} #sp-page-title .breadcrumb a:hover{color:#fff;text-decoration:underline} #sp-page-title .breadcrumb .active{color:var(--ds-g);overflow:hidden;text-overflow:ellipsis;max-width:46ch} /* ---------- Footer area (#sp-bottom = funding note + logos, #sp-footer = copyright) ---------- */ #sp-bottom{background:#fff!important;border-top:1px solid var(--ds-line);padding:56px 0 40px!important;color:var(--ds-mut)} #sp-bottom p{font-size:14px;line-height:1.75;color:var(--ds-mut);max-width:980px;margin-inline:auto} #sp-bottom img{filter:grayscale(15%);transition:filter .2s} #sp-bottom img:hover{filter:none} #sp-bottom .sp-module{margin-bottom:0} #sp-footer{background:var(--ds-ink)!important;color:rgba(255,255,255,.72)!important;padding:22px 0!important;font-size:14px;border:0!important} #sp-footer .container-inner{border:0!important;padding:0!important} #sp-footer a{color:#fff!important} #sp-footer a:hover{color:var(--ds-g)!important} #sp-footer .sp-copyright{color:rgba(255,255,255,.72)} /* back to top */ .sp-scroll-up,#sp-scroll-up,.scrollup{background:var(--ds-p)!important;color:#fff!important;border-radius:12px!important;box-shadow:0 10px 24px rgba(138,28,43,.3)} .sp-scroll-up:hover,.scrollup:hover{background:var(--ds-pd)!important} /* ---------- Arabic (RTL) global ---------- */ html[dir="rtl"] body{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif} html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6{font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;letter-spacing:0!important} html[dir="rtl"] #sp-page-title *,html[dir="rtl"] #sp-bottom *,html[dir="rtl"] #sp-footer *{letter-spacing:0!important} html[dir="rtl"] #sp-page-title .sp-page-title-heading,html[dir="rtl"] #sp-page-title h1,html[dir="rtl"] #sp-page-title h2{line-height:1.35} html[dir="rtl"] p,html[dir="rtl"] li{line-height:1.85} /* ---------- Arabic (RTL) blog + article ---------- */ html[dir="rtl"] .blog .article-info,html[dir="rtl"] .related-article-list .article-info,html[dir="rtl"] .view-article .article-details .article-info{text-transform:none} html[dir="rtl"] .blog .article .readmore a::after{content:"\2190"} html[dir="rtl"] .blog .article .readmore a:hover::after{transform:translateX(-4px)} html[dir="rtl"] .view-article [itemprop="articleBody"] ul,html[dir="rtl"] .view-article [itemprop="articleBody"] ol{padding-left:0;padding-right:22px} html[dir="rtl"] .view-article .article-details [itemprop="articleBody"] blockquote, html[dir="rtl"] .view-article .article-details .com-content-article__body blockquote{border-left:0;border-right:4px solid var(--ds-g);border-radius:12px 0 0 12px} html[dir="rtl"] .view-article .pagenavigation .pagination .next{margin-left:0;margin-right:auto} html[dir="rtl"] .view-article .pagenavigation .pagination .previous{margin-left:auto} html[dir="rtl"] .view-article [itemprop="articleBody"] th,html[dir="rtl"] .view-article [itemprop="articleBody"] td{text-align:right} /* ===================================================================== SECTION 3: BLOG LIST + SINGLE ARTICLE ===================================================================== */ /* ===================================================================== Dual Studies - Joomla blog styles for Helix Ultimate (v2) Paste into: Template Options > Custom Code > Custom CSS (replace the previous version completely) ===================================================================== */ /* ================= CONTENT AREA ================= */ .view-category #sp-main-body,.view-article #sp-main-body{padding:64px 0 80px} .view-category.layout-blog #sp-main-body{background:var(--ds-soft)} .view-category .category-desc{font-size:18px;line-height:1.65;color:var(--ds-mut);max-width:760px;margin:0 0 36px} /* ================= SHARED: article meta line ================= Helix prints "/" separators and author/hits - clean them up */ .blog .article-info,.related-article-list .article-info,.view-article .article-details .article-info{ display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 0;padding:0;border:0; font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-p);line-height:1.5} .blog .article-info>span,.related-article-list .article-info>span,.view-article .article-details .article-info>span{margin:0!important;padding:0!important;color:inherit} .blog .article-info>span::before,.blog .article-info>span::after, .related-article-list .article-info>span::before,.related-article-list .article-info>span::after, .view-article .article-details .article-info>span::before,.view-article .article-details .article-info>span::after{content:none!important;display:none!important} .blog .article-info>span:not(.createdby):not(.hits)~span:not(.createdby):not(.hits)::before, .related-article-list .article-info>span:not(.createdby):not(.hits)~span:not(.createdby):not(.hits)::before, .view-article .article-details .article-info>span:not(.createdby):not(.hits)~span:not(.createdby):not(.hits)::before{ content:"\00B7"!important;display:inline-block!important;margin:0 10px;color:#c4c8d2;font-weight:900} .blog .article-info a,.related-article-list .article-info a,.view-article .article-details .article-info a{color:inherit!important;text-decoration:none} /* hide author + hits (also switch them off in Options) */ .blog .article-info .createdby,.blog .article-info .hits, .related-article-list .article-info .createdby,.related-article-list .article-info .hits, .view-article .article-details .article-info .createdby,.view-article .article-details .article-info .hits{display:none!important} .blog .article-info .fa,.blog .article-info .fas,.blog .article-info .far, .view-article .article-details .article-info .fa,.view-article .article-details .article-info .fas,.view-article .article-details .article-info .far{display:none} /* ================= BLOG LIST: CARDS ================= */ .blog .article-list .row{row-gap:24px} .blog .article-list .row>[class*="col"]{display:flex} .blog .article-list .article{ display:flex;flex-direction:column;width:100%;height:100%;margin:0!important;padding:0!important; background:#fff;border:1px solid var(--ds-line);border-radius:16px;overflow:hidden;box-shadow:none; transition:transform .2s ease,box-shadow .2s ease} .blog .article-list .article:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(31,36,48,.10)} /* image - fixed 3:2 crop for every card */ .blog .article .article-intro-image,.blog .article .article-featured-video{margin:0!important;border-radius:0;overflow:hidden;background:var(--ds-soft)} .blog .article .article-intro-image img{ display:block;width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:0!important;margin:0!important; transition:transform .35s ease} .blog .article:hover .article-intro-image img{transform:scale(1.04)} /* body */ .blog .article .article-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px!important} .blog .article .article-header{margin:0!important;padding:0!important;border:0!important;order:1} .blog .article .article-info{order:0;margin:0 0 8px!important} .blog .article .article-introtext{order:2} .blog .article .readmore{order:3} .blog .article .article-header h2{font-size:19px!important;line-height:1.35!important;font-weight:800;margin:0 0 10px!important; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog .article .article-header h2 a{color:var(--ds-ink)!important;text-decoration:none} .blog .article .article-header h2 a:hover{color:var(--ds-p)!important} /* intro text: max 4 lines so all cards stay even */ .blog .article .article-introtext{font-size:15px;line-height:1.65;color:var(--ds-mut);margin:0 0 18px} .blog .article .article-introtext,.blog .article .article-introtext p{ display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .blog .article .article-introtext p{margin:0;font-size:15px!important;line-height:1.65!important;color:var(--ds-mut)!important} .blog .article .article-introtext p+p,.blog .article .article-introtext img, .blog .article .article-introtext figure,.blog .article .article-introtext table{display:none!important} /* read more */ .blog .article .readmore{margin-top:auto!important;padding:0!important} .blog .article .readmore a,.blog .article .readmore .btn{ display:inline-flex!important;align-items:center;gap:8px;background:none!important;border:0!important;box-shadow:none!important; padding:0!important;font-size:15px!important;font-weight:700;color:var(--ds-p)!important;text-decoration:none} .blog .article .readmore a::after{content:"\2192";font-weight:700;transition:transform .2s} .blog .article .readmore a:hover::after{transform:translateX(4px)} .blog .article .readmore .fa,.blog .article .readmore .fas,.blog .article .readmore span[class*="icon"]{display:none} /* leading (featured) article: image left, text right */ @media (min-width:992px){ .blog .articles-leading .article{ display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:380px} .blog .articles-leading .article .article-intro-image{height:100%} .blog .articles-leading .article .article-intro-image a{display:block;height:100%} .blog .articles-leading .article .article-intro-image img{height:100%!important;aspect-ratio:auto;min-height:380px} .blog .articles-leading .article .article-body{padding:44px!important;justify-content:center} .blog .articles-leading .article .article-header h2{font-size:28px!important;line-height:1.25!important;-webkit-line-clamp:4} .blog .articles-leading .article .article-introtext, .blog .articles-leading .article .article-introtext p{-webkit-line-clamp:5;font-size:16px!important} } .blog .articles-leading{margin-bottom:24px} /* ================= PAGINATION ================= */ .view-category .pagination-wrapper,.view-category .com-content-category-blog__navigation{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:40px} .view-category .pagination{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .view-category .pagination .page-item{list-style:none} .view-category .pagination .page-link{ min-width:42px;height:42px;display:grid;place-items:center;padding:0 14px;border-radius:10px!important; border:1px solid var(--ds-line);background:#fff;color:var(--ds-ink);font-weight:700;font-size:14.5px;box-shadow:none} .view-category .pagination .page-link:hover{border-color:var(--ds-p);color:var(--ds-p)} .view-category .pagination .page-item.active .page-link{background:var(--ds-p);border-color:var(--ds-p);color:#fff} .view-category .pagination .page-item.disabled .page-link{opacity:.45} .view-category .pagination-counter,.view-category .counter{font-size:14px;color:var(--ds-mut);margin:0} /* ================= SINGLE ARTICLE ================= */ .view-article .article-details{max-width:860px;margin:0 auto} .view-article .article-details .article-full-image{margin:0 0 32px!important;border-radius:18px;overflow:hidden;background:var(--ds-soft)} .view-article .article-details .article-full-image img{width:100%;height:auto;display:block;border-radius:0} .view-article .article-details .article-header{margin:0 0 14px!important;padding:0;border:0} .view-article .article-details .article-header h1, .view-article .article-details .article-header h2{font-size:clamp(28px,3.8vw,40px)!important;line-height:1.2!important;font-weight:800;color:var(--ds-ink);margin:0} .view-article .article-details .article-info{margin:0 0 26px!important;padding:0 0 22px!important;border-bottom:1px solid var(--ds-line)!important} /* ratings + share bar */ .view-article .article-ratings-social-share{margin:0 0 28px!important;padding:0!important;border:0!important;align-items:center} .view-article .article-ratings-social-share .article-ratings, .view-article .article-ratings-social-share .content_rating, .view-article .article-ratings-social-share .content_vote{display:none!important} .view-article .article-social-share ul{display:flex;gap:8px;margin:0;padding:0;list-style:none} .view-article .article-social-share a{display:grid!important;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--ds-line);color:var(--ds-ink)!important;background:#fff} .view-article .article-social-share a:hover{border-color:var(--ds-p);color:var(--ds-p)!important} /* body typography (Joomla 4/5 + Helix markup) */ .view-article .article-details [itemprop="articleBody"], .view-article .article-details .com-content-article__body, .view-article .article-details .article-body{font-size:17px;line-height:1.8;color:var(--ds-ink)} .view-article .article-details [itemprop="articleBody"] p, .view-article .article-details .com-content-article__body p, .view-article .article-details .article-body p, .view-article .article-details>p{font-size:17px!important;line-height:1.8!important;color:var(--ds-ink)!important;margin:0 0 22px} .view-article .article-details [itemprop="articleBody"] h2,.view-article .article-details .com-content-article__body h2{font-size:26px;font-weight:800;margin:40px 0 14px;line-height:1.25} .view-article .article-details [itemprop="articleBody"] h3,.view-article .article-details .com-content-article__body h3{font-size:21px;font-weight:700;margin:32px 0 12px;line-height:1.3} .view-article .article-details [itemprop="articleBody"] a,.view-article .article-details .com-content-article__body a{color:var(--ds-p);font-weight:600;text-decoration:underline;text-underline-offset:3px} .view-article .article-details [itemprop="articleBody"] img,.view-article .article-details .com-content-article__body img{max-width:100%;height:auto;border-radius:14px;margin:8px 0 22px} .view-article .article-details [itemprop="articleBody"] ul,.view-article .article-details [itemprop="articleBody"] ol{margin:0 0 22px;padding-left:22px;font-size:17px;line-height:1.8} .view-article .article-details [itemprop="articleBody"] blockquote,.view-article .article-details .com-content-article__body blockquote{ margin:28px 0;padding:22px 26px;background:var(--ds-soft);border-left:4px solid var(--ds-g);border-radius:0 12px 12px 0;font-size:19px;font-weight:600} .view-article .article-details [itemprop="articleBody"] blockquote p{margin:0!important;font-size:19px!important} /* tags */ .view-article .article-details .tags,.view-article .article-details .article-tags{margin:32px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} .view-article .article-details .tags a,.view-article .article-details .article-tags a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--ds-soft);border:1px solid var(--ds-line);color:var(--ds-ink);font-size:13px;font-weight:600;text-decoration:none} /* previous / next */ .view-article .pagenavigation{margin:40px 0 0!important;padding:28px 0 0;border-top:1px solid var(--ds-line)} .view-article .pagenavigation .pagination{display:flex!important;justify-content:space-between!important;gap:12px;margin:0!important;padding:0;list-style:none;width:100%} .view-article .pagenavigation .pagination .next{margin-left:auto} .view-article .pagenavigation a{ display:inline-flex!important;align-items:center;gap:8px;padding:12px 22px!important;border-radius:10px!important;border:1px solid var(--ds-line)!important; background:#fff!important;color:var(--ds-ink)!important;font-weight:700;font-size:14.5px!important;text-decoration:none;box-shadow:none!important} .view-article .pagenavigation a:hover{border-color:var(--ds-p)!important;color:var(--ds-p)!important} /* ================= RELATED ARTICLES ================= */ .related-article-list-container{margin-top:72px!important;padding-top:56px;border-top:1px solid var(--ds-line)} .related-article-list-container .related-article-title{ font-size:clamp(24px,3vw,30px)!important;font-weight:800;color:var(--ds-ink);margin:0 0 28px!important;text-transform:none} .related-article-list .row{row-gap:24px} .related-article-list .row>[class*="col"]{display:flex} .related-article-list .article{ display:flex;flex-direction:column;width:100%;height:100%;margin:0!important;padding:0!important; background:#fff;border:1px solid var(--ds-line)!important;border-radius:16px!important;overflow:hidden;box-shadow:none!important;transition:transform .2s,box-shadow .2s} .related-article-list .article:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(31,36,48,.10)!important} .related-article-list .article-intro-image{margin:0!important;overflow:hidden} .related-article-list .article-intro-image img{display:block;width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:0!important} .related-article-list .article-body,.related-article-list .article>div:not(.article-intro-image){padding:20px 22px 22px!important;display:flex;flex-direction:column} .related-article-list .article-header{order:1;margin:0!important;padding:0!important} .related-article-list .article-info{order:0;margin:0 0 8px!important} .related-article-list .article-header h2,.related-article-list h2,.related-article-list h3{ font-size:17px!important;line-height:1.4!important;font-weight:800!important;margin:0!important; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .related-article-list h2 a,.related-article-list h3 a{color:var(--ds-ink)!important;text-decoration:none} .related-article-list h2 a:hover,.related-article-list h3 a:hover{color:var(--ds-p)!important} /* ================= RESPONSIVE ================= */ @media (max-width:991px){ .view-category #sp-main-body,.view-article #sp-main-body{padding:48px 0 64px} #sp-page-title .sp-page-title{padding:48px 0 40px!important} #sp-page-title .breadcrumb .active{max-width:24ch} } @media (max-width:575px){ .blog .article .article-body{padding:18px 18px 20px!important} .view-article .article-details [itemprop="articleBody"] p, .view-article .article-details .com-content-article__body p{font-size:16px!important} .view-article .pagenavigation .pagination{flex-direction:column} } /* Top bar: make the last item (time) touch the end edge, aligned with the header */ #sp-top2 .sp-column{justify-content:flex-end!important;padding-inline-end:0!important} #sp-top-bar .sp-contact-info{margin:0!important;padding:0!important} #sp-top-bar .sp-contact-info li:last-child{padding-inline-end:0!important;margin-inline-end:0!important} #sp-top-bar .sp-contact-info li:first-child{padding-inline-start:0!important} #sp-top2 .sp-column>*:last-child{margin-inline-end:0!important;padding-inline-end:0!important} #sp-top-bar .sp-module:last-child{margin-inline-end:0!important}