/* Styles for widgets used on single post templates (not the homepage). */ :root{ --acs-teal:#1c7c6e; --acs-teal-dark:#14594e; --acs-text:#20242a; --acs-muted:#6a7178; } /* post authors */ .acs-post-authors{display:flex;flex-direction:column;gap:16px} .acs-post-authors__item{display:flex;align-items:center;gap:12px} .acs-post-authors__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto} .acs-post-authors__body{display:flex;flex-direction:column;gap:2px} .acs-post-authors__name{font-weight:700;color:var(--acs-text);text-decoration:none} .acs-post-authors__name:hover{color:var(--acs-teal)} .acs-post-authors__position{color:var(--acs-muted);font-size:.85rem;line-height:1.6} /* post content (acs-post-content): share + text-resize toolbar, then the body */ .acs-postcontent__bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px} .acs-postcontent__share{display:flex;align-items:center;gap:12px;position:relative} .acs-postcontent__btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;background:none;color:var(--acs-text);cursor:pointer;font:inherit;font-size:1.1rem;line-height:1;border-radius:50%;box-sizing:border-box;transition:color .15s ease,background-color .15s ease} .acs-postcontent__btn:hover{color:var(--acs-teal);background:#eef4f3} .acs-postcontent__btn[disabled]{opacity:.35;cursor:default;background:none} /* --acs-share-icon is set per button by the repeater's icon-size field */ .acs-postcontent__btn svg{width:var(--acs-share-icon,20px);height:var(--acs-share-icon,20px);fill:currentColor;display:block} /* text resizer: a fixed white pill holding − Aa + */ .acs-postcontent__resize{display:flex;align-items:center;justify-content:space-between;position:relative;box-sizing:border-box;width:130px;height:40px;padding:2px 16px;gap:8px;border-radius:14px;background:#FFFFFF} .acs-postcontent__btn--size{width:24px;height:24px;flex:0 0 auto;color:#168E7E} .acs-postcontent__btn--size:hover{color:#168E7E;background:#eef4f3} /* these two glyphs are drawn at their exact Figma sizes, not the 20px default */ .acs-postcontent__btn--size svg{width:14px;height:14px} .acs-postcontent__btn[data-acs-size="down"] svg{height:2px} /* the "Aa" indicator is a static size cue, not a control */ .acs-postcontent__size-label{direction:ltr;display:inline-flex;align-items:center;font-family:"Readex Pro";font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;text-align:right;color:#9C999A} .acs-postcontent__size-label small{font-family:inherit;font-weight:600;font-size:18px;line-height:150%} /* copy-link confirmation, anchored under the share row */ .acs-postcontent__toast{position:absolute;top:calc(100% + 6px);inset-inline-start:0;background:var(--acs-teal-dark);color:#fff;font-size:.75rem;padding:4px 10px;border-radius:var(--acs-radius,4px);white-space:nowrap;z-index:2} .acs-postcontent__body{line-height:1.9;color:var(--acs-text)} /* --acs-fs is set on the widget root by the resizer; descendants stay relative so headings, lists and quotes scale with the paragraphs */ .acs-postcontent__scale{font-size:calc(1em * var(--acs-fs,1))} .acs-postcontent__scale p,.acs-postcontent__scale li,.acs-postcontent__scale blockquote,.acs-postcontent__scale td,.acs-postcontent__scale th,.acs-postcontent__scale figcaption{font-size:1em} .acs-postcontent__scale h2{font-size:1.5em} .acs-postcontent__scale h3{font-size:1.25em} .acs-postcontent__scale h4{font-size:1.1em} /* single-template card lists (author's latest / related posts) */ .acs-scards{margin-block:32px} .acs-scards__grid{display:grid;gap:24px} .acs-scard{background:#fff;border-radius:var(--acs-radius,4px);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(20,30,40,.08);transition:box-shadow .2s ease,transform .2s ease} .acs-scard:hover{box-shadow:0 10px 28px rgba(20,30,40,.15);transform:translateY(-3px)} .acs-scard__media{display:block;overflow:hidden;flex:0 0 auto} .acs-scard__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .acs-scard__body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0} .acs-scard__badges{display:flex;flex-wrap:wrap;gap:6px} .acs-scard__title{font-size:1rem;font-weight:700;color:var(--acs-text);text-decoration:none;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .acs-scard__title:hover{color:var(--acs-teal)} /* footer pinned to the card bottom, so a short title never lifts the author/date block up under it */ .acs-scard__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start} /* author row: meta sizing, not the title's — the byline sets its own weight */ .acs-scard__author{display:flex;align-items:center;font-size:.78rem;color:var(--acs-muted)} .acs-scard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.78rem;color:var(--acs-muted)} .acs-scard__date{white-space:nowrap} /* inline: author at the text start, date pushed to the opposite end */ .acs-scard__meta--inline{width:100%} .acs-scard__meta--inline .acs-scard__date{margin-inline-start:auto} /* stacked: date and badge stay packed together at the text start (the right, in RTL). Explicitly zero the margin so no wider `__date` rule can push them. */ .acs-scard__meta--stacked{justify-content:flex-start} .acs-scard__meta--stacked .acs-scard__date{margin-inline-start:0;margin-inline-end:0} .acs-scard__sep{color:var(--acs-muted);opacity:.5} /* horizontal variant: image beside the text. row-reverse puts the media (the first child) on the left in this RTL layout. */ .acs-scard--h{flex-direction:row-reverse;align-items:stretch} .acs-scard--h .acs-scard__media{flex:0 0 42%} .acs-scard--h .acs-scard__img{height:100%;aspect-ratio:auto;min-height:130px} .acs-scards .acs-empty{color:var(--acs-muted);padding:16px 0} @media(max-width:860px){.acs-scards__grid{grid-template-columns:1fr!important}} @media(max-width:560px){.acs-scard--h{flex-direction:column}.acs-scard--h .acs-scard__media{flex:auto}.acs-scard--h .acs-scard__img{aspect-ratio:16/9;min-height:0}} /* ============================================================ research-topic single (acs-topic) — Figma "Category page" scale. Fonts: most text = "Readex Pro"; author position + pagination = "Bahij TheSansArabic". All sizes in px (page must not look zoomed out). ============================================================ */ .acs-topic{max-width:1200px;margin-inline:auto;padding:24px 16px 56px;font-family:"Readex Pro",sans-serif} .acs-topic__title{font-family:"Readex Pro",sans-serif;font-size:32px;font-weight:600;line-height:1.5;color:var(--acs-text);margin:0 0 12px;text-align:right} .acs-topic__intro{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:16px;line-height:1.5;color:var(--acs-muted);margin:0 0 32px;text-align:right} /* section headings (الباحثون / تصفّح …) — 24 / 600 */ .acs-topic .acs-section__title{font-family:"Readex Pro",sans-serif;font-size:24px;font-weight:600;line-height:1.5} /* publication cards + list items — title 18/500, excerpt 16/300 */ .acs-topic .acs-card__title,.acs-topic .acs-card--big .acs-card__title,.acs-topic .acs-plist__title{font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:500;line-height:1.5} .acs-topic .acs-card__excerpt{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:14px;line-height:1.6;color:var(--acs-muted);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .acs-topic .acs-plist__excerpt{font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:300} /* type badge | date */ .acs-topic .acs-card__date::before,.acs-topic .acs-plist__date::before{content:"|";margin-inline-end:8px;color:var(--acs-border,#c9d1d1);font-weight:400} /* featured (Figma): big card 519 (right) + two stacked h-cards 785 (left), 16px gaps */ .acs-topic__featured{display:grid;grid-template-columns:519fr 785fr;gap:16px;margin-bottom:32px;align-items:stretch} .acs-topic__featured-side{display:flex;flex-direction:column;gap:16px} .acs-topic__featured-side .acs-card{flex:1 1 0;min-height:0} @media (max-width:860px){.acs-topic__featured{grid-template-columns:1fr}.acs-topic__featured-side .acs-card{flex:auto}} /* researchers slider — photo 126, 8px ring, 52px gap */ .acs-topic__researchers{margin-bottom:32px} .acs-topic__researchers .acs-section__head{margin-bottom:16px} .acs-topic__researchers-slider{position:relative} .acs-topic__researchers-track{display:flex;gap:52px;justify-content:safe center;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:10px 4px} .acs-topic__researchers-track::-webkit-scrollbar{display:none} .acs-topic__researchers-slide{flex:0 0 auto;width:126px} .acs-researcher{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px} .acs-researcher__photo{display:block;width:126px;height:126px;border-radius:50%;overflow:hidden;background:#eef1f2;box-shadow:0 0 0 8px #fff,0 0 0 9px #e7ebec} .acs-researcher__photo img{width:100%;height:100%;object-fit:cover;display:block} .acs-researcher__name{font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;line-height:1.5;color:var(--acs-text);text-decoration:none} a.acs-researcher__name:hover{color:var(--acs-teal)} .acs-researcher__pos{font-family:"Bahij TheSansArabic",sans-serif;font-weight:400;font-size:11px;line-height:1.5;color:var(--acs-muted)} /* browse: white heading band (16px pad) + mint filter panel with chips inside */ .acs-topic__browse-head{background:#fff;padding:16px} .acs-topic__browse-head .acs-section__head{margin-bottom:0} .acs-topic__filter{position:relative;z-index:5;margin:0 0 24px;background-color:var(--acs-bg,#E5EFED);border-radius:var(--acs-radius,4px)} .acs-topic__filter-inner{display:flex;align-items:center;gap:16px;padding:24px 24px 16px;position:relative;z-index:2;flex-wrap:wrap} .acs-topic__filter-label{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:24px;line-height:1.5;color:var(--acs-text)} .acs-topic__filter-field{display:inline-flex;align-items:center;gap:8px;color:var(--acs-text);font-family:"Readex Pro",sans-serif;font-weight:500;font-size:14px;border-inline-start:1px solid #231F20;padding-inline-start:16px} .acs-topic__filter-field select{border:0;background:transparent;font:inherit;color:var(--acs-text);cursor:pointer;padding:4px 4px} /* custom dropdown (native