/* ============================================================ Al-Nakib Journal Theme — OJS 3.5 Al-Nakib LTD · Authoritative / institutional Navy + Brass · Scholarly serif · Full RTL (Arabic) Webfonts (Spectral / Source Serif 4 / Amiri / IBM Plex Mono) are loaded via a emitted into by the plugin (parallel fetch), not an @import here (which would chain behind this file's own download). ============================================================ */ :root{ /* Navy scale */ --navy-950:#06152b; --navy-900:#0a1f3c; --navy-800:#102a4c; --navy-700:#163a63; --navy-600:#1f4d7e; --navy-500:#2d6098; --navy-300:#7ea3c4; --navy-100:#d6e2ee; /* Brass / gold accent */ --brass-700:#7d5f2a; --brass-600:#a6812f; --brass-500:#b8973f; --brass-400:#cdae5e; --brass-100:#efe4c8; /* Paper neutrals (warm) */ --paper:#faf8f3; --paper-2:#f3efe6; --paper-3:#ece6da; --card:#ffffff; --line:#ddd6c8; --line-soft:#e7e1d4; /* Ink */ --ink:#1c2330; --ink-2:#3c4150; --ink-3:#5e6373; --ink-mute:#6a6e7c; /* Semantic */ --bg:var(--paper); --primary:var(--navy-700); --primary-deep:var(--navy-900); --accent:var(--brass-600); --link:var(--navy-600); --link-hover:var(--brass-700); --primary-soft:color-mix(in srgb,var(--primary) 6%,transparent); /* Type */ --serif:"Spectral",Georgia,"Times New Roman",serif; --body:"Source Serif 4","Spectral",Georgia,serif; --arabic:"Amiri","Source Serif 4",serif; --mono:"IBM Plex Mono",ui-monospace,monospace; /* Metrics */ --wrap:1200px; --gutter:40px; --radius:3px; --shadow-sm:0 1px 2px rgba(10,31,60,.06),0 1px 3px rgba(10,31,60,.05); --shadow:0 2px 8px rgba(10,31,60,.08),0 8px 24px rgba(10,31,60,.06); --shadow-lg:0 12px 34px rgba(10,31,60,.16),0 5px 12px rgba(10,31,60,.08); --shadow-brass:0 8px 22px rgba(166,129,47,.30); /* Motion tokens — one easing + a 3-step duration scale so transitions/ animations stay coherent across components (all gated by the global prefers-reduced-motion rule further down). */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.14s; --t:.2s; --t-slow:.55s; /* Vertical rhythm between major sections in the main content column. */ --section-gap:2.4rem; /* Space between stacked sidebar widgets (admin-editable). */ --sidebar-gap:26px; /* Native UI follows the active theme: scrollbars, the page canvas, and the default rendering of form controls switch to dark when data-theme=dark (the dark override sets color-scheme:dark). Without this, native widgets and the scrollbar stay light and clash on the dark canvas. */ color-scheme:light; /* Tint native checkboxes/radios/range/progress on OJS forms to the brand. */ accent-color:var(--navy-600); } /* ---------- Reset / base ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Refined brand scrollbar — recolours through palette vars, so it follows light/dark automatically alongside color-scheme. Firefox uses scrollbar-color; WebKit/Blink use the pseudo-elements. */ html{scrollbar-color:var(--line) transparent;} ::-webkit-scrollbar{width:12px;height:12px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--paper-3);border:3px solid var(--bg);border-radius:8px;} ::-webkit-scrollbar-thumb:hover{background:var(--brass-500);} body{ margin:0; font-family:var(--body); font-size:var(--fontsize,17px); line-height:var(--leading,1.65); color:var(--ink); background:var(--bg); font-variant-ligatures:common-ligatures; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } :lang(ar),[dir="rtl"]{font-family:var(--arabic);} [dir="rtl"] body,html[dir="rtl"]{font-family:var(--arabic);} h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;color:var(--primary-deep);line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em;} [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5{font-family:var(--arabic);letter-spacing:0;} p{margin:0 0 1em;text-wrap:pretty;} a{color:var(--link);text-decoration:none;text-underline-offset:2px;} a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:1px;} img{max-width:100%;display:block;} hr{border:0;border-top:1px solid var(--line);margin:2rem 0;} ::selection{background:var(--brass-100);color:var(--navy-900);} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);} .mono{font-family:var(--mono);} .muted{color:var(--ink-3);} /* eyebrow / institutional label */ .eyebrow{ font-family:var(--serif); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:inline-flex;align-items:center;gap:.6em; } [dir="rtl"] .eyebrow{font-family:var(--arabic);letter-spacing:.04em;text-transform:none;font-weight:700;} .eyebrow::after{content:"";flex:0 0 28px;height:1px;background:var(--accent);opacity:.5} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;padding-bottom:.7rem;border-bottom:2px solid var(--navy-800);} .section-head h2{margin:0;font-size:1.5rem;} .section-head .more{font-size:.82rem;font-family:var(--serif);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);} [dir="rtl"] .section-head .more{text-transform:none;font-family:var(--arabic);} /* ============================================================ TOP UTILITY BAR ============================================================ */ .util-bar{background:var(--navy-950);color:var(--navy-100);font-size:.78rem;} .util-bar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:1rem;} .util-bar a{color:var(--navy-100);} .util-bar a:hover{color:#fff;} .util-left{display:flex;align-items:center;gap:1.1rem;font-family:var(--mono);letter-spacing:.02em;color:var(--navy-300);} .util-left .issn{display:flex;gap:.5rem;} .util-right{display:flex;align-items:center;gap:.2rem;} .util-right .u-link{padding:.35rem .7rem;font-family:var(--serif);letter-spacing:.03em;} [dir="rtl"] .util-right .u-link,[dir="rtl"] .lang-toggle{font-family:var(--arabic);} .lang-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:2px;overflow:hidden;margin-inline-start:.4rem;} /* The switcher is rendered as links (see header.tpl + the .lang-toggle a block in the OJS-bridge section below, which also styles .current). */ .lang-toggle a:lang(ar){font-family:var(--arabic);font-size:.95rem;} /* ============================================================ MASTHEAD ============================================================ */ .masthead{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:#fff;position:relative;overflow:hidden;border-bottom:3px solid var(--brass-600);} .masthead::after{content:"";position:absolute;inset-block:0;inset-inline-end:-60px;width:420px;background:var(--alnakib-mark,url('assets/logo-mark-white.png')) no-repeat center/contain;opacity:.05;pointer-events:none;} .masthead .wrap{display:flex;align-items:center;gap:1.6rem;padding-block:var(--masthead-pad,22px);position:relative;z-index:1;} .brand-logo{flex:0 0 auto;height:var(--logo-h,72px);} .brand-logo img{height:100%;width:auto;} .brand-divider{flex:0 0 auto;width:1px;align-self:stretch;background:rgba(255,255,255,.16);} .brand-text{display:flex;flex-direction:column;gap:.2rem;} .brand-text .jtitle{font-family:var(--serif);font-weight:700;font-size:1.62rem;line-height:1.12;color:#fff;letter-spacing:-.01em;} .brand-text .jtitle .abbr{color:var(--brass-400);} .brand-text .jsub{font-size:.86rem;color:var(--navy-100);letter-spacing:.02em;} .brand-text .jmeta{font-family:var(--mono);font-size:.7rem;color:var(--navy-300);letter-spacing:.04em;margin-top:.25rem;} [dir="rtl"] .brand-text .jtitle,[dir="rtl"] .brand-text .jsub{font-family:var(--arabic);} .masthead-spacer{flex:1;} .masthead-cta{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;} [dir="rtl"] .masthead-cta{align-items:flex-start;} /* ============================================================ PRIMARY NAV ============================================================ */ .nav{background:var(--navy-700);position:sticky;top:0;z-index:50;box-shadow:0 2px 0 rgba(0,0,0,.12);} .nav .wrap{display:flex;align-items:stretch;gap:0;padding-inline:calc(var(--gutter) - 14px);} .nav a{ color:#eaf1f8;font-family:var(--serif);font-weight:500; font-size:.92rem;letter-spacing:.04em;text-transform:uppercase; padding:.95rem 1.05rem;display:inline-flex;align-items:center; border-bottom:3px solid transparent;transition:background .12s,border-color .12s; } [dir="rtl"] .nav a{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-weight:700;font-size:1.02rem;} .nav a:hover{background:var(--navy-600);text-decoration:none;color:#fff;} .nav a.active{border-bottom-color:var(--brass-500);color:#fff;background:var(--navy-800);} .nav .nav-spacer{flex:1;} .nav .nav-search{display:flex;align-items:center;padding-inline:1rem;} .nav .nav-search button{background:transparent;border:0;color:#cfe0f0;cursor:pointer;padding:.4rem;font-size:1.05rem;line-height:1;} .nav .nav-search button:hover{color:#fff;} /* ============================================================ LAYOUT: content + sidebar ============================================================ */ .page{padding-block:36px 60px;} .layout{display:grid;grid-template-columns:1fr var(--sidebar-w,312px);gap:var(--content-gap,48px);align-items:start;} .layout.reverse{grid-template-columns:var(--sidebar-w,312px) 1fr;} @media(max-width:960px){.layout,.layout.reverse{grid-template-columns:1fr;}} /* Optional homepage hero band (admin-editable heading + text; off by default). Palette-driven, so it adapts to dark mode and RTL automatically. */ .home-hero{margin:0 0 2.2rem;padding:2.6rem 2rem;text-align:center;background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--line);border-radius:var(--radius);} .home-hero .hero-heading{font-family:var(--serif);font-size:2rem;line-height:1.15;color:var(--primary-deep);margin:0 0 .6rem;} [dir="rtl"] .home-hero .hero-heading{font-family:var(--arabic);} .home-hero .hero-text{font-size:1.08rem;color:var(--ink-2);max-width:760px;margin:0 auto 1.2rem;} .home-hero .hero-text p:last-child{margin-bottom:0;} .home-hero .btn{margin-top:.2rem;} /* Bold "brand" hero variant — deep navy band with light text (vs the soft default). */ .home-hero.hero-brand{background:linear-gradient(135deg,var(--navy-800),var(--navy-950));border-color:var(--navy-900);} .home-hero.hero-brand .hero-heading{color:#fff;} .home-hero.hero-brand .hero-text{color:var(--navy-100);} @media(max-width:640px){.home-hero{padding:1.8rem 1.1rem;}.home-hero .hero-heading{font-size:1.5rem;}} /* breadcrumb */ .crumbs{font-size:.8rem;color:var(--ink-3);margin-bottom:1.4rem;font-family:var(--serif);letter-spacing:.02em;} [dir="rtl"] .crumbs{font-family:var(--arabic);} .crumbs a{color:var(--ink-3);} .crumbs a:hover{color:var(--link-hover);} .crumbs .sep{margin-inline:.5rem;color:var(--line);} /* ============================================================ SIDEBAR ============================================================ */ .sidebar{display:flex;flex-direction:column;gap:var(--sidebar-gap,26px);} .widget{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);} .widget-head{margin:0;font-family:var(--serif);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--navy-800);padding:.7rem 1rem;border-radius:var(--radius) var(--radius) 0 0;} [dir="rtl"] .widget-head{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-size:1rem;} .widget-body{padding:1rem 1.1rem 1.15rem;} /* Sidebar image / banner widget (admin-supplied promo image) */ .sidebar-promo{padding:0;overflow:hidden;} .sidebar-promo a,.sidebar-promo img{display:block;} .sidebar-promo img{width:100%;height:auto;} .widget-body p{font-size:.92rem;color:var(--ink-2);} .widget-list{list-style:none;margin:0;padding:0;} .widget-list li{border-bottom:1px solid var(--line-soft);} .widget-list li:last-child{border-bottom:0;} .widget-list a{display:block;padding:.55rem 0;font-size:.93rem;font-family:var(--serif);} [dir="rtl"] .widget-list a{font-family:var(--arabic);} /* sidebar search */ .search-field{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;} .search-field input{flex:1;border:0;padding:.6rem .8rem;font-family:var(--body);font-size:.92rem;color:var(--ink);background:transparent;outline:none;min-width:0;} [dir="rtl"] .search-field input{font-family:var(--arabic);} .search-field button{background:var(--navy-700);color:#fff;border:0;padding:0 1rem;cursor:pointer;font-size:1rem;} .search-field button:hover{background:var(--brass-600);} /* issue cover widget */ .cover-widget{text-align:center;} .cover-widget .cover{margin:0 auto .9rem;} .cover-widget .issue-label{font-family:var(--serif);font-weight:600;color:var(--navy-800);font-size:1rem;} [dir="rtl"] .cover-widget .issue-label{font-family:var(--arabic);} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--serif);font-weight:600;font-size:.9rem;letter-spacing:.04em;padding:.7rem 1.3rem;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;transition:background .14s,color .14s,border-color .14s;text-transform:uppercase;} [dir="rtl"] .btn{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-weight:700;} .btn-primary{background:var(--brass-600);color:var(--navy-950);border-color:var(--brass-600);} .btn-primary:hover{background:var(--brass-500);color:var(--navy-950);text-decoration:none;} .btn-navy{background:var(--navy-700);color:#fff;} .btn-navy:hover{background:var(--navy-800);color:#fff;text-decoration:none;} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;} .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none;} .btn-outline{background:#fff;border-color:var(--line);color:var(--navy-700);} .btn-outline:hover{border-color:var(--brass-500);color:var(--brass-700);text-decoration:none;} .btn-block{width:100%;justify-content:center;} .btn-sm{padding:.45rem .85rem;font-size:.78rem;} /* ============================================================ PLACEHOLDER MEDIA (striped) ============================================================ */ .ph{ position:relative;background: repeating-linear-gradient(135deg,var(--paper-3) 0 11px,var(--paper-2) 11px 22px); border:1px solid var(--line);color:var(--ink-mute); display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;border-radius:var(--radius); } .ph.on-navy{background:repeating-linear-gradient(135deg,var(--navy-700) 0 11px,var(--navy-800) 11px 22px);border-color:var(--navy-600);color:var(--navy-300);} .ph span{padding:.3rem .5rem;} /* ============================================================ ARTICLE / TOC ITEMS ============================================================ */ .toc-section{margin-bottom:2.2rem;} /* Section labels — used in the issue TOC (section names) AND on the article page (References, Biographies, Data Availability, How to Cite). Unscoped so every use is styled, and margin:0 0 1rem so it looks identical whether rendered as a
or a real heading element (h2/h3 — zeroes the UA default top margin). */ .toc-section-title{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--brass-700);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:.5rem;margin:0 0 1rem;} [dir="rtl"] .toc-section-title{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .article-item{display:grid;grid-template-columns:1fr auto;gap:1rem 1.4rem;padding:1.1rem 0;border-bottom:1px solid var(--line-soft);} .article-item:last-child{border-bottom:0;} .article-item .ai-pages{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);white-space:nowrap;padding-top:.3rem;} .article-item .subtitle{font-size:.95rem;font-style:italic;margin:-.1rem 0 .35rem;} [dir="rtl"] .article-item .subtitle{font-style:normal;} .article-item .ai-date{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);align-self:center;} /* Issue-page identifiers + full-issue galleys (issue_toc, !hideCover) */ .issue-meta-row{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0 0 1.4rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);} .issue-meta-row .mb-k{color:var(--brass-700);letter-spacing:.04em;margin-inline-end:.3rem;} .issue-galleys{margin:0 0 1.8rem;} .issue-galleys .db-fmt{text-align:start;} /* Author biographies (article_details) */ .author-bios .author-bio:last-child{margin-bottom:0;} .author-bio .au{font-family:var(--serif);} .article-item h3{font-size:1.16rem;margin:0 0 .3rem;line-height:1.28;} .article-item h3 a{color:var(--navy-900);} .article-item h3 a:hover{color:var(--brass-700);} .article-item .authors{font-size:.92rem;color:var(--ink-2);font-style:italic;margin-bottom:.45rem;} [dir="rtl"] .article-item .authors{font-style:normal;} .article-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.5rem;} .tag{display:inline-flex;align-items:center;gap:.35em;font-family:var(--serif);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-700);background:var(--navy-100);padding:.18rem .55rem;border-radius:2px;white-space:nowrap;} [dir="rtl"] .tag{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .pill-pdf{color:var(--brass-700);background:var(--brass-100);} .galley{display:inline-flex;align-items:center;gap:.3em;font-family:var(--mono);font-size:.72rem;font-weight:500;color:#fff;background:var(--navy-700);padding:.2rem .5rem;border-radius:2px;letter-spacing:.03em;} .galley:hover{background:var(--brass-600);color:var(--navy-950);text-decoration:none;} /* ============================================================ CARDS (homepage) ============================================================ */ .cardgrid{display:grid;gap:24px;} .cardgrid.cols-3{grid-template-columns:repeat(3,1fr);} .cardgrid.cols-2{grid-template-columns:repeat(2,1fr);} @media(max-width:760px){.cardgrid.cols-3,.cardgrid.cols-2{grid-template-columns:1fr;}} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;} .card:hover{box-shadow:var(--shadow);} .card .card-media{height:150px;} .card .card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1;} .card .card-kicker{font-family:var(--serif);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);} [dir="rtl"] .card .card-kicker{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .card h3{font-size:1.12rem;margin:0;line-height:1.25;} .card .card-meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin-top:auto;} /* ============================================================ ANNOUNCEMENT / NOTICE ============================================================ */ .notice{display:flex;gap:1rem;padding:1rem 1.2rem;background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--brass-500);border-radius:var(--radius);} .notice .n-date{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap;} .notice h2,.notice h4{margin:0 0 .25rem;font-size:1.02rem;} .notice p{margin:0;font-size:.92rem;color:var(--ink-2);} /* ============================================================ ARTICLE DETAIL PAGE ============================================================ */ .art-header{border-bottom:1px solid var(--line);padding-bottom:1.6rem;margin-bottom:1.6rem;} .art-section-label{font-family:var(--serif);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-700);} [dir="rtl"] .art-section-label{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .art-title{font-size:2.05rem;line-height:1.18;margin:.5rem 0 .9rem;color:var(--navy-900);} [dir="rtl"] .art-title{font-size:2.2rem;} .art-authors{font-size:1.05rem;color:var(--ink);margin-bottom:.4rem;} .art-authors .au{font-weight:600;} .art-authors sup{color:var(--brass-700);font-size:.72em;} .art-affil{font-size:.86rem;color:var(--ink-3);font-style:italic;line-height:1.5;} [dir="rtl"] .art-affil{font-style:normal;} .art-authors sup{vertical-align:super;} .art-affiliations{margin:.7rem 0 0;padding-inline-start:1.4rem;font-size:.84rem;color:var(--ink-3);} .art-affiliations li{margin-bottom:.2rem;line-height:1.5;} .orcid-id,.ror-link{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.02em;color:var(--brass-700);border:1px solid var(--brass-400);border-radius:2px;padding:0 .25rem;vertical-align:middle;margin-inline-start:.15rem;} .orcid-id:hover,.ror-link:hover{background:var(--brass-600);color:#fff;border-color:var(--brass-600);text-decoration:none;} [data-theme="dark"] .orcid-id,[data-theme="dark"] .ror-link{color:var(--brass-400);} /* When the ORCID link holds the real ORCID logo (svg/img), drop the badge look */ .orcid-id:has(svg),.orcid-id:has(img){border:0;padding:0;background:transparent;} .orcid-id:has(svg):hover,.orcid-id:has(img):hover{background:transparent;} .orcid-id svg,.orcid-id img{width:14px;height:14px;display:block;vertical-align:middle;} /* Author name → search-by-author link (colour inherits; underline only on hover, mode-safe) */ .au-link{color:inherit;text-decoration:none;} .au-link:hover,.au-link:focus-visible{text-decoration:underline;text-underline-offset:2px;} /* Article classification metadata (subjects / disciplines / funding / coverage) */ .art-classification{margin:1.1rem 0;} .art-classification .kw-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.5rem;} .art-classification .kw-row:last-child{margin-bottom:0;} .kw-static{cursor:default;} /* Article CRediT contributor roles (live; OJS 3.5 core author metadata) */ .credit-roles .credit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;} .credit-author{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:.5rem 1.2rem;align-items:baseline;padding-bottom:.9rem;border-bottom:1px solid var(--line-soft);} .credit-author:last-child{border-bottom:0;padding-bottom:0;} .credit-author .ca-name{font-family:var(--serif);font-weight:600;color:var(--navy-900);} [dir="rtl"] .credit-author .ca-name{font-family:var(--arabic);} .credit-author .ca-roles{display:flex;flex-wrap:wrap;gap:.4rem;} .credit-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--navy-700);background:var(--navy-100);border:1px solid var(--navy-100);border-radius:2px;padding:.18rem .55rem;} .credit-chip .ca-deg{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brass-700);opacity:.95;} [dir="rtl"] .credit-chip .ca-deg{text-transform:none;letter-spacing:0;font-family:var(--arabic);} [data-theme="dark"] .credit-chip{background:var(--paper-3);color:var(--navy-100);border-color:var(--line);} [data-theme="dark"] .credit-chip .ca-deg{color:var(--brass-400);} @media(max-width:560px){.credit-author{grid-template-columns:1fr;gap:.3rem;}} /* Article competing-interests declarations */ .competing-interests .ci-item{margin-bottom:1rem;} .competing-interests .ci-item:last-child{margin-bottom:0;} .competing-interests .ci-name{margin:0 0 .2rem;font-family:var(--serif);color:var(--navy-900);} [dir="rtl"] .competing-interests .ci-name{font-family:var(--arabic);} [data-theme="dark"] .competing-interests .ci-name strong,[data-theme="dark"] .credit-author .ca-name{color:var(--ink);} .competing-interests .prose{font-size:.95rem;color:var(--ink-2);} /* ============================================================ CitationStyleLanguage plugin — "How to Cite" (when the journal enables CSL). Prefixed with .page_article so these win over the plugin's own stylesheet, which loads after theme.css. ============================================================ */ .page_article .item.citation{margin:2rem 0 0;background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--brass-500);border-radius:var(--radius);padding:1.4rem 1.6rem;} .page_article .item.citation .citation_display > .label{display:block;font-family:var(--serif);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-700);margin:0 0 .8rem;} [dir="rtl"] .page_article .item.citation .citation_display > .label{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-size:1.05rem;} [data-theme="dark"] .page_article .item.citation .citation_display > .label{color:var(--brass-400);} .page_article #citationOutput{font-size:.95rem;line-height:1.7;color:var(--ink);} .page_article #citationOutput .csl-entry{margin:0;} .page_article #citationOutput a{color:var(--link);word-break:break-word;} .page_article .citation_formats{position:relative;margin-top:1rem;} .page_article .citation_formats_button{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--serif);font-size:.85rem;font-weight:600;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:.5rem .9rem;cursor:pointer;} .page_article .citation_formats_button:hover,.page_article .citation_formats_button[aria-expanded="true"]{border-color:var(--brass-500);color:var(--brass-700);} [data-theme="dark"] .page_article .citation_formats_button:hover{color:var(--brass-400);} .page_article .citation_formats_list{margin-top:.7rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem;box-shadow:var(--shadow);} .page_article .citation_formats_list[aria-hidden="true"]{display:none;} .page_article .citation_formats_list .label{display:block;font-family:var(--serif);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:.2rem 0 .55rem;} [dir="rtl"] .page_article .citation_formats_list .label{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .page_article .citation_formats_styles{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;} .page_article .citation_formats_styles li{margin:0;} .page_article .citation_formats_styles a{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.32rem .8rem;text-decoration:none;transition:background .15s,color .15s,border-color .15s;} .page_article .citation_formats_styles a:hover{background:var(--navy-700);color:#fff;border-color:var(--navy-700);} .page_article .citation_formats_styles .fa{font-size:.78rem;opacity:.8;} /* CSL block now lives in the sidebar (the Details hook fires there) — render it as a proper widget: navy header bar like Tools/Publication, padded body. */ .page_article .sidebar .item.citation{margin:1.2rem 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-inline-start:1px solid var(--line);border-radius:var(--radius);overflow:hidden;} .page_article .sidebar .item.citation .citation_display{margin:0;} .page_article .sidebar .item.citation .citation_display > .label{display:block;margin:0;background:var(--navy-800);color:#fff;font-family:var(--serif);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1rem;} [dir="rtl"] .page_article .sidebar .item.citation .citation_display > .label{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-size:1rem;} [data-theme="dark"] .page_article .sidebar .item.citation .citation_display > .label{color:#fff;} .page_article .sidebar .item.citation .value{padding:1rem 1.1rem;} .page_article .sidebar #citationOutput{font-size:.85rem;line-height:1.6;} .page_article .sidebar .citation_formats_styles a{font-size:.78rem;padding:.28rem .65rem;} /* ============================================================ recommendBySimilarity / recommendByAuthor — related lists ============================================================ */ .page_article #articlesBySimilarityList,.page_article #articlesBySameAuthorList{margin:2.6rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);} .page_article #articlesBySimilarityList > .label,.page_article #articlesBySameAuthorList > .label{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--primary-deep);margin:0 0 1.2rem;} [dir="rtl"] .page_article #articlesBySimilarityList > .label,[dir="rtl"] .page_article #articlesBySameAuthorList > .label{font-family:var(--arabic);} .page_article #articlesBySimilarityList > ul,.page_article #articlesBySameAuthorList > ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;} .page_article #articlesBySimilarityList > ul > li,.page_article #articlesBySameAuthorList > ul > li{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;font-size:.88rem;line-height:1.5;color:var(--ink-2);transition:transform .2s ease,box-shadow .2s ease;} .page_article #articlesBySimilarityList > ul > li:hover,.page_article #articlesBySameAuthorList > ul > li:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);} .page_article #articlesBySimilarityList > ul > li a,.page_article #articlesBySameAuthorList > ul > li a{text-decoration:none;} .page_article #articlesBySimilarityList > ul > li a:first-of-type,.page_article #articlesBySameAuthorList > ul > li a:first-of-type{display:block;margin:.25rem 0;font-weight:600;color:var(--primary);} .page_article #articlesBySimilarityList > ul > li a:first-of-type:hover{text-decoration:underline;} .page_article #articlesBySimilarityList > ul > li a:last-of-type,.page_article #articlesBySameAuthorList > ul > li a:last-of-type{font-size:.8rem;color:var(--ink-3);} .page_article #articlesBySimilaritySearch,.page_article #articlesBySimilarityPages{font-size:.86rem;color:var(--ink-2);margin-top:1rem;} .page_article #articlesBySimilarityList .cmp_pagination,.page_article #articlesBySameAuthorList .cmp_pagination{margin-top:1.1rem;} /* Article cover image (publication coverImage) in the sidebar */ .art-cover-image{margin-bottom:0;} .art-cover-image img{width:100%;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);} .art-share .share-btn svg{width:16px;height:16px;display:block;} .art-meta-bar{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1.2rem;margin:1.4rem 0;font-size:.84rem;} .art-meta-bar .mb-item{display:flex;flex-direction:column;gap:.1rem;} .art-meta-bar .mb-k{font-family:var(--serif);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);} [dir="rtl"] .art-meta-bar .mb-k{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .art-meta-bar .mb-v{font-family:var(--mono);font-size:.82rem;color:var(--navy-800);} /* Per-article usage metrics (views/downloads) read as figures, not metadata. */ .art-meta-bar .mb-metric .mb-v{color:var(--brass-700);font-weight:600;} [data-theme="dark"] .art-meta-bar .mb-metric .mb-v{color:var(--brass-400);} .abstract-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.7rem;margin-bottom:1.6rem;} .abstract-block h2{letter-spacing:.06em;text-transform:uppercase;color:var(--brass-700);margin-bottom:.7rem;font-size:.95rem;} [dir="rtl"] .abstract-block h2{text-transform:none;letter-spacing:0;font-size:1.15rem;} /* Additional-language abstracts — render each in its own direction/font regardless of page dir */ .abstract-alt{margin-top:1.5rem;padding-top:1.2rem;border-top:1px dashed var(--line);} .abstract-block[dir="rtl"]{font-family:var(--arabic);} .abstract-block[dir="rtl"] h2{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-size:1.15rem;} .abstract-block[dir="ltr"]{font-family:var(--body);} .abstract-block[dir="ltr"] h2{font-family:var(--serif);text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;} .abstract-block p{font-size:1rem;color:var(--ink-2);} .keywords{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center;} .keywords .kw-label{font-family:var(--serif);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:.3rem;} [dir="rtl"] .keywords .kw-label{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .kw{font-size:.84rem;color:var(--navy-700);border:1px solid var(--navy-100);background:#fff;padding:.2rem .6rem;border-radius:2px;} .kw:hover{border-color:var(--brass-400);color:var(--brass-700);text-decoration:none;} .download-box{background:var(--navy-800);color:#fff;border-radius:var(--radius);padding:1.2rem;text-align:center;} .download-box .db-fmt{margin:0 0 .7rem;font-family:var(--mono);font-size:.74rem;color:var(--navy-300);letter-spacing:.06em;} /* Sidebar: publication dates (key/value rows) + article tools (action buttons) */ .sb-dates{margin:0;} .sb-dates > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.32rem 0;border-bottom:1px solid var(--line-soft);} .sb-dates > div:last-child{border-bottom:0;} .sb-dates dt{margin:0;font-family:var(--serif);font-weight:600;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);} [dir="rtl"] .sb-dates dt{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-size:.85rem;} .sb-dates dd{margin:0;font-family:var(--mono);font-size:.8rem;color:var(--ink-2);white-space:nowrap;} .sb-tools{display:flex;flex-wrap:wrap;gap:.5rem;} .sb-tools .btn{flex:1 1 calc(50% - .25rem);justify-content:center;min-width:0;} /* Article "On this page" scroll-spy reading nav (sticky; JS toggles .is-active) */ .reading-nav{position:sticky;top:5rem;z-index:1;overflow:hidden;margin-bottom:0;} .reading-nav-list{list-style:none;margin:0;padding:.35rem 0;} .reading-nav-list li{margin:0;} .reading-nav-list a{display:block;padding:.4rem 1rem;font-size:.86rem;line-height:1.3;color:var(--ink-2);text-decoration:none;border-inline-start:2px solid transparent;transition:color .15s,background .15s,border-color .15s;} .reading-nav-list a:hover{color:var(--primary);background:var(--paper-2);} .reading-nav-list a.is-active{color:var(--primary);font-weight:600;background:var(--primary-soft);border-inline-start-color:var(--brass-500);} @media(max-width:860px){.reading-nav{display:none;}} /* "Recent articles" sidebar widget — small published-date under each title */ .widget-list .rec-date{display:block;font-size:.72rem;color:var(--ink-3);font-family:var(--mono);letter-spacing:.02em;margin-top:.1rem;} .download-box .db-dl{font-size:.78rem;color:var(--navy-100);margin-top:.7rem;font-family:var(--mono);} .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;} .metrics .m{background:#fff;padding:.9rem;text-align:center;} .metrics .m-n{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--navy-800);} .metrics .m-l{font-family:var(--serif);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);} [dir="rtl"] .metrics .m-l{font-family:var(--arabic);text-transform:none;letter-spacing:0;} /* full-text reading view */ .reading{max-width:760px;} .reading h2{font-size:1.4rem;margin:2rem 0 .8rem;padding-top:.4rem;} .reading h3{font-size:1.12rem;margin:1.6rem 0 .6rem;color:var(--navy-800);} .reading p{font-size:1.05rem;line-height:1.78;color:var(--ink-2);margin-bottom:1.1rem;} .reading .lead{font-size:1.12rem;color:var(--ink);} .reading figure{margin:1.8rem 0;} .reading figure .ph{height:260px;} .reading figcaption{font-size:.84rem;color:var(--ink-3);margin-top:.6rem;font-style:italic;text-align:center;} [dir="rtl"] .reading figcaption{font-style:normal;} .reading .eq{font-family:var(--mono);background:var(--paper-2);border:1px solid var(--line);padding:.8rem 1rem;border-radius:var(--radius);text-align:center;color:var(--navy-800);margin:1.2rem 0;font-size:.95rem;} .reading blockquote{border-inline-start:3px solid var(--brass-500);margin:1.4rem 0;padding-inline-start:1.2rem;color:var(--ink-2);font-style:italic;} .data-table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.4rem 0;} .data-table caption{font-size:.84rem;color:var(--ink-3);font-style:italic;margin-bottom:.5rem;text-align:start;} .data-table th,.data-table td{padding:.6rem .8rem;border-bottom:1px solid var(--line);text-align:start;} .data-table thead th{background:var(--navy-800);color:#fff;font-family:var(--serif);font-weight:600;font-size:.84rem;letter-spacing:.03em;} [dir="rtl"] .data-table thead th{font-family:var(--arabic);} .data-table tbody tr:nth-child(even){background:var(--paper-2);} /* references */ .ref-list{list-style:none;counter-reset:ref;margin:0;padding:0;} .ref-list li{counter-increment:ref;position:relative;padding-inline-start:2.4rem;margin-bottom:.9rem;font-size:.9rem;color:var(--ink-2);line-height:1.55;} .ref-list li::before{content:"["counter(ref)"]";position:absolute;inset-inline-start:0;font-family:var(--mono);font-size:.8rem;color:var(--brass-700);} /* Skip rendering off-screen items in long lists (references, archive) until scrolled near — a free render-perf win; `auto` size remembers actual height so the scrollbar doesn't jump. Not applied on the homepage (no reveal clash). */ .ref-list li{content-visibility:auto;contain-intrinsic-size:auto 72px;} /* TOC for reading view (sidebar) */ .reading-toc{position:sticky;top:80px;} .reading-toc a{display:block;padding:.4rem 0;font-size:.88rem;font-family:var(--serif);border-inline-start:2px solid var(--line);padding-inline-start:.9rem;color:var(--ink-2);} [dir="rtl"] .reading-toc a{font-family:var(--arabic);} .reading-toc a:hover,.reading-toc a.active{border-inline-start-color:var(--brass-500);color:var(--navy-800);} /* ============================================================ ISSUE / ABOUT / TEAM ============================================================ */ .issue-banner{display:grid;grid-template-columns:200px 1fr;gap:2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin-bottom:2.4rem;align-items:center;} @media(max-width:620px){.issue-banner{grid-template-columns:1fr;}} .issue-banner .cover{height:264px;} .issue-banner h1,.issue-banner h2{font-size:1.7rem;margin-bottom:.4rem;} .issue-banner .issue-doi{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} @media(max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.team-grid{grid-template-columns:1fr;}} .person{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;display:flex;gap:1rem;align-items:flex-start;} .person .avatar{flex:0 0 64px;height:64px;width:64px;border-radius:50%;overflow:hidden;} .person .p-name{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--navy-900);margin:0;} [dir="rtl"] .person .p-name{font-family:var(--arabic);} .person .p-role{font-size:.82rem;color:var(--brass-700);font-weight:600;} .person .p-affil{font-size:.82rem;color:var(--ink-3);font-style:italic;} [dir="rtl"] .person .p-affil{font-style:normal;} /* Editorial masthead (bespoke editorialMasthead.tpl) */ .masthead-role{font-size:1.1rem;color:var(--brass-700);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:.4rem;margin:1.8rem 0 1rem;} [dir="rtl"] .masthead-role{text-transform:none;letter-spacing:0;font-family:var(--arabic);} .person .p-name{display:flex;align-items:center;gap:.1rem;margin:0;} .person .p-orcid{display:inline-flex;vertical-align:middle;margin-inline-start:.25rem;} .person .p-orcid svg,.person .p-orcid img{width:1em;height:1em;} .person .p-since{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin:.25rem 0 0;} .reviewers-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;} .person.compact{padding:.85rem 1rem;} .person .p-country{font-size:.78rem;color:var(--ink-3);margin:.15rem 0 0;} .person .p-bio{font-size:.82rem;color:var(--ink-2);line-height:1.5;margin:.5rem 0 0;} [data-theme="dark"] .person .p-bio{color:var(--paper);} .masthead-intro{margin:0 0 1.6rem;color:var(--ink-2);} /* Masthead/history "list" layout — one column, each person a compact row. */ .team-grid.layout-list{display:block;} .team-grid.layout-list .person{margin-bottom:.6rem;padding:.7rem 1rem;} .team-grid.layout-list .person .p-bio{display:none;} .masthead-history-link{margin:1.4rem 0;font-size:.95rem;} /* Category browse (catalogCategory.tpl) */ .page_catalog_category .article_count{font-family:var(--mono);font-size:.8rem;margin:0 0 1.2rem;} .page_catalog_category .about_section{display:flex;gap:1.6rem;align-items:flex-start;margin:0 0 1.6rem;} .page_catalog_category .about_section .description{flex:1;} .page_catalog_category .cat-cover{flex:0 0 160px;} .page_catalog_category .cat-cover img{border:1px solid var(--line);border-radius:var(--radius);} .page_catalog_category .subcategories{margin:1.2rem 0;} @media(max-width:600px){.page_catalog_category .about_section{flex-direction:column;}.page_catalog_category .cat-cover{flex-basis:auto;}} /* Multi-journal site index (indexSite.tpl) */ .journals-grid{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem;} .journal-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;} .journal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);} .journal-card .thumb{display:block;border-bottom:1px solid var(--line);} .journal-card .thumb img{width:100%;height:auto;} .journal-card .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1;} .journal-card h3{margin:0;font-size:1.15rem;} .journal-card .description{font-size:.9rem;color:var(--ink-2);max-height:8.5em;overflow:hidden;position:relative;} /* Fade the clamped journal description; "View Journal" leads to the full text */ .journal-card .description::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2.4em;background:linear-gradient(transparent,var(--card));pointer-events:none;} .journal-card .description :first-child{margin-top:0;} .journal-card .journal-links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:auto;} /* Site index "About the platform" — readable measure + proper prose hierarchy */ .page_index_site .about_site{max-width:840px;margin:0 auto 2.4rem;} .page_index_site .about_site h2{font-size:1.4rem;margin-top:1.8rem;} .page_index_site .about_site h3{font-size:1.12rem;} /* Highlights / spotlights (highlights.tpl) — static branded grid */ .highlights{margin:0 0 2.4rem;} .highlights-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));} .highlight-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;} .highlight-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);} .highlight-card .hc-media img{width:100%;height:190px;object-fit:cover;display:block;border-bottom:1px solid var(--line);} .highlight-card .hc-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1;} .highlight-card .hc-title{font-size:1.2rem;margin:0;} .highlight-card .hc-desc{font-size:.92rem;color:var(--ink-2);} .highlight-card .btn{align-self:flex-start;margin-top:auto;} /* ---- Mobile navigation toggle (hamburger) + drawer ---- */ .nav-toggle{display:none;align-items:center;gap:.6rem;background:transparent;border:0;color:#eaf1f8;font-family:var(--serif);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:.9rem 1.05rem;cursor:pointer;} [dir="rtl"] .nav-toggle{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-weight:700;} .nav-toggle-bars{position:relative;} .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s,background .2s;} .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;inset-inline-start:0;} .nav-toggle-bars::before{top:-7px;} .nav-toggle-bars::after{top:7px;} .nav.nav-open .nav-toggle-bars{background:transparent;} .nav.nav-open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg);} .nav.nav-open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg);} /* The mobile-nav media query lives at the END of this file (see "MOBILE PRIMARY NAV (authoritative)"). It MUST come after the OJS-bridge base rules below (.nav .wrap > ul{display:flex} / ul ul{display:none;position:absolute}); media queries add no specificity, so a copy here would lose on source order and the drawer/toggle would silently no-op. */ /* ---- Back-to-top button (wired by js/alnakib.js) ---- */ .to-top{position:fixed;inset-block-end:1.2rem;inset-inline-end:1.2rem;z-index:80;width:44px;height:44px;border-radius:50%;border:1px solid var(--brass-600);background:var(--navy-800);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,background .2s,color .2s;box-shadow:var(--shadow);} .to-top.is-visible{opacity:1;visibility:visible;transform:none;} .to-top:hover{background:var(--brass-600);color:var(--navy-950);} @media print{.to-top{display:none!important;}} /* ---- Dark-mode toggle button (util bar) ---- */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;margin-inline-start:.4rem;padding:0;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:2px;color:var(--navy-100);font-size:.8rem;line-height:1;cursor:pointer;} .theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.4);} .theme-toggle svg,.nav .nav-search a svg,.search-field button svg,.to-top svg{display:block;} .nav .nav-search a,.search-field button,.to-top{display:inline-flex;align-items:center;justify-content:center;} .theme-toggle .tt-moon{display:none;} [data-theme="dark"] .theme-toggle .tt-sun{display:none;} [data-theme="dark"] .theme-toggle .tt-moon{display:block;} /* ---- Article share row + copy-link ---- */ .art-share{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0;} .art-share .share-label{font-family:var(--serif);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:.2rem;} [dir="rtl"] .art-share .share-label{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .share-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 .55rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--navy-700);font-family:var(--serif);font-weight:600;font-size:.82rem;line-height:1;cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .15s;} .share-btn:hover{background:var(--navy-700);color:#fff;border-color:var(--navy-700);text-decoration:none;transform:translateY(-1px);} .share-btn.is-copied{background:var(--brass-600);color:var(--navy-950);border-color:var(--brass-600);} [data-theme="dark"] .share-btn{color:var(--navy-100);} /* ---- Issue cover thumbnail in the article sidebar ---- */ .art-issue-cover{display:block;margin-bottom:.7rem;} .art-issue-cover img{width:100%;max-width:150px;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;} .art-issue-cover:hover img{transform:translateY(-2px);box-shadow:var(--shadow);} /* ---- "How to cite" block (article pages) ---- */ .cite-box{background:var(--paper-2);border:1px solid var(--line);border-inline-start:3px solid var(--brass-500);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:2rem 0;} .cite-box .cite-text{font-size:.92rem;color:var(--ink-2);line-height:1.6;margin:0 0 .8rem;} .cite-box .cite-actions{display:flex;gap:.5rem;flex-wrap:wrap;} /* ---- Reading-progress bar (article pages) ---- */ .reading-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:90;pointer-events:none;background:transparent;} .reading-progress > span{display:block;height:100%;width:0;background:var(--brass-500);transition:width .1s linear;} @media print{.reading-progress{display:none!important;}} /* ---- Keyboard-accessible nav dropdowns ---- */ .nav .wrap > ul li:focus-within > ul{display:block;} /* ============================================================ DARK MODE — remap paper/ink neutrals; navy + brass scales (masthead, nav, footer) are already dark and kept. Applied pre-paint by the inline init script, so no flash. ============================================================ */ :root[data-theme="dark"]{ --paper:#0e1621;--paper-2:#15202e;--paper-3:#1c2838;--card:#161f2c;--bg:#0e1621; --line:#2b3a4f;--line-soft:#243140; --ink:#e7ecf3;--ink-2:#c4ccd9;--ink-3:#9aa4b4;--ink-mute:#8a93a3; --primary-deep:#e9eff6;--link:#8fb6dd;--link-hover:var(--brass-400);--primary-soft:color-mix(in srgb,#fff 5%,transparent); --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 6px 22px rgba(0,0,0,.55);--shadow-lg:0 16px 40px rgba(0,0,0,.62),0 6px 16px rgba(0,0,0,.5);--shadow-brass:0 8px 24px rgba(0,0,0,.55); color-scheme:dark; /* native scrollbars + form controls render dark */ accent-color:var(--brass-500); } [data-theme="dark"] body{color:var(--ink);} /* accent labels → lighter brass for contrast on the dark canvas */ [data-theme="dark"] .toc-section-title,[data-theme="dark"] .eyebrow,[data-theme="dark"] .card .card-kicker, [data-theme="dark"] .art-section-label,[data-theme="dark"] .masthead-role,[data-theme="dark"] .abstract-block h2, [data-theme="dark"] .index-strip .ix-item{color:var(--brass-400);} /* dark-on-light titles → light */ [data-theme="dark"] .art-title,[data-theme="dark"] .obj_article_details .page_title, [data-theme="dark"] .article-item h3 a,[data-theme="dark"] .obj_article_summary .title a, [data-theme="dark"] .obj_issue_summary .title a,[data-theme="dark"] .issue-card .ic-title, [data-theme="dark"] .cover-widget .issue-label,[data-theme="dark"] .person .p-name, [data-theme="dark"] .cmp_pagination .current{color:var(--ink);} [data-theme="dark"] .article-item h3 a:hover,[data-theme="dark"] .obj_article_summary .title a:hover{color:var(--brass-400);} /* white-background widgets → dark surfaces */ [data-theme="dark"] .kw{background:var(--paper-3);color:var(--navy-100);border-color:var(--line);} [data-theme="dark"] .kw:hover{color:var(--brass-400);border-color:var(--brass-600);} [data-theme="dark"] .tag{background:var(--paper-3);color:var(--navy-100);} [data-theme="dark"] .abstract-block,[data-theme="dark"] .art-meta-bar{background:var(--paper-2);} [data-theme="dark"] .search-field{background:var(--paper-2);border-color:var(--line);} [data-theme="dark"] .search-field input{color:var(--ink);} [data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea, [data-theme="dark"] .pkp_structure_main input,[data-theme="dark"] .pkp_structure_main select,[data-theme="dark"] .pkp_structure_main textarea{background:var(--paper-2);color:var(--ink);border-color:var(--line);} [data-theme="dark"] .btn-outline{background:transparent;color:var(--navy-100);border-color:var(--line);} [data-theme="dark"] .btn-outline:hover{color:var(--brass-400);border-color:var(--brass-600);} /* dark audit: remaining dark-on-light text/surfaces */ [data-theme="dark"] .prose h3,[data-theme="dark"] .reading h3,[data-theme="dark"] .reading .eq, [data-theme="dark"] .art-meta-bar .mb-v,[data-theme="dark"] .field label, [data-theme="dark"] .pkp_structure_main .cmp_form .label,[data-theme="dark"] .pkp_structure_main .cmp_form legend,[data-theme="dark"] .pkp_structure_main .cmp_form fieldset > legend,[data-theme="dark"] .page_search .search_advanced legend, [data-theme="dark"] .page_contact .contact .name,[data-theme="dark"] .user_listing .name, [data-theme="dark"] .sections .section > h2,[data-theme="dark"] .metrics .m-n{color:var(--ink);} [data-theme="dark"] .metrics .m,[data-theme="dark"] .form-card{background:var(--card);} [data-theme="dark"] ::selection{background:var(--brass-700);color:#fff;} [data-theme="dark"] .obj_galley_link_supplementary:hover{color:var(--ink);} /* archive list */ .archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;} @media(max-width:900px){.archive-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:640px){.archive-grid{grid-template-columns:repeat(2,1fr);}} .issue-card{display:flex;flex-direction:column;gap:.7rem;} .issue-card .cover{height:300px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;} .issue-card:hover .cover{transform:translateY(-3px);box-shadow:var(--shadow);} .issue-card .ic-title{font-family:var(--serif);font-weight:600;color:var(--navy-900);font-size:1rem;line-height:1.3;} [dir="rtl"] .issue-card .ic-title{font-family:var(--arabic);} .issue-card .ic-meta{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);} /* cover composition (reusable) */ .cover{position:relative;background:linear-gradient(160deg,var(--navy-700),var(--navy-900));border:1px solid var(--navy-800);border-radius:2px;display:flex;flex-direction:column;justify-content:space-between;padding:1rem;color:#fff;overflow:hidden;aspect-ratio:3/4;} .cover::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:5px;background:var(--brass-600);} .cover .c-top{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--navy-100);text-transform:uppercase;} .cover .c-mark{position:absolute;inset:0;background:var(--alnakib-mark,url('assets/logo-mark-white.png')) no-repeat center 42%/62% auto;opacity:.12;} .cover .c-abbr{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:#fff;position:relative;z-index:1;line-height:1;} .cover .c-vol{font-family:var(--serif);font-size:.82rem;color:var(--brass-400);position:relative;z-index:1;} .cover .c-bot{font-family:var(--mono);font-size:.56rem;color:var(--navy-300);letter-spacing:.06em;position:relative;z-index:1;} /* Real uploaded issue cover: the image fills the frame; keep the brass spine accent. */ .cover.cover-real{padding:0;background:var(--navy-900);} .cover.cover-real img{width:100%;height:100%;object-fit:cover;display:block;} .issue-banner .cover.cover-real{width:200px;} .cover-widget .cover.cover-real{width:150px;} /* indexing strip */ .index-strip{background:var(--paper-2);border-block:1px solid var(--line);padding-block:1.6rem;} .index-strip .ix-row{display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap;justify-content:center;} .index-strip .ix-label{font-family:var(--serif);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);} [dir="rtl"] .index-strip .ix-label{font-family:var(--arabic);text-transform:none;letter-spacing:0;} .index-strip .ix-item{font-family:var(--serif);font-weight:600;color:var(--navy-700);font-size:.95rem;opacity:.8;letter-spacing:.02em;} /* ============================================================ FORMS (submission / contact / login) ============================================================ */ .form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;} .field{margin-bottom:1.2rem;} .field label{display:block;font-family:var(--serif);font-weight:600;font-size:.84rem;letter-spacing:.04em;color:var(--navy-800);margin-bottom:.4rem;} [dir="rtl"] .field label{font-family:var(--arabic);} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .85rem;font-family:var(--body);font-size:.95rem;color:var(--ink);background:#fff;outline:none;} [dir="rtl"] .field input,[dir="rtl"] .field textarea,[dir="rtl"] .field select{font-family:var(--arabic);} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(45,96,152,.12);} .field .hint{font-size:.78rem;color:var(--ink-3);margin-top:.3rem;} /* steps list */ .steps{counter-reset:step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;} .steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;} .steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--navy-700);color:#fff;font-family:var(--serif);font-weight:600;font-size:1rem;flex:0 0 auto;} .steps li h4{margin:.2rem 0 .25rem;font-size:1.05rem;} .steps li p{margin:0;font-size:.92rem;color:var(--ink-2);} /* ============================================================ STAT BLOCK ============================================================ */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--navy-800);border-radius:var(--radius);overflow:hidden;} @media(max-width:640px){.stat-row{grid-template-columns:repeat(2,1fr);}} .stat-row .stat{background:var(--navy-900);color:#fff;padding:1.5rem 1rem;text-align:center;transition:transform .25s ease,background .25s ease;} .stat-row .stat:hover{transform:translateY(-4px);background:var(--navy-800);} /* Linked stat cards (count -> archive/search): read as cards, not links. */ .stat-row a.stat{text-decoration:none;color:#fff;display:block;cursor:pointer;} .stat-row a.stat:hover{text-decoration:none;color:#fff;} .stat-row a.stat:focus-visible{outline:3px solid var(--brass-500);outline-offset:-3px;} .stat-row .stat .s-n{font-family:var(--serif);font-weight:700;font-size:2.2rem;color:var(--brass-400);line-height:1;} .stat-row .stat .s-l{font-family:var(--serif);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-100);margin-top:.4rem;} [dir="rtl"] .stat-row .stat .s-l{font-family:var(--arabic);text-transform:none;letter-spacing:0;} /* prose */ .prose h2{font-size:1.45rem;margin:2rem 0 .7rem;} .prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem;color:var(--navy-800);} .prose p{font-size:1.02rem;color:var(--ink-2);line-height:1.75;} .prose ul{padding-inline-start:1.3rem;color:var(--ink-2);} .prose li{margin-bottom:.5rem;} .lead-para{font-size:1.18rem;line-height:1.7;color:var(--ink);font-family:var(--serif);} [dir="rtl"] .lead-para{font-family:var(--arabic);} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--navy-950);color:var(--navy-100);margin-top:var(--footer-mt,60px);border-top:3px solid var(--brass-600);} .footer .wrap{padding-block:var(--footer-pad,48px) 30px;} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;} @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px;}} @media(max-width:480px){.foot-grid{grid-template-columns:1fr;}} .foot-brand img{height:54px;width:auto;margin-bottom:1rem;} .foot-brand p{font-size:.86rem;color:var(--navy-300);line-height:1.6;} [dir="rtl"] .foot-brand p{font-family:var(--arabic);} .foot-col h2{font-family:var(--serif);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-400);margin:0 0 1rem;line-height:1.2;} [dir="rtl"] .foot-col h2{font-family:var(--arabic);text-transform:none;letter-spacing:0;font-size:1rem;} .foot-col ul{list-style:none;margin:0;padding:0;} .foot-col li{margin-bottom:.55rem;} .foot-col a{color:var(--navy-100);font-size:.9rem;font-family:var(--serif);} [dir="rtl"] .foot-col a{font-family:var(--arabic);} .foot-col a:hover{color:#fff;} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:var(--navy-300);} .foot-bottom .mono{font-family:var(--mono);letter-spacing:.02em;} .foot-issn{display:flex;gap:1.4rem;flex-wrap:wrap;} /* license / DOAJ row */ .oa-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.18);border-radius:2px;padding:.4rem .7rem;font-size:.76rem;color:var(--navy-100);font-family:var(--serif);letter-spacing:.04em;} [dir="rtl"] .oa-badge{font-family:var(--arabic);} .oa-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brass-500);} /* Footer social links (socialLinks option) */ .foot-social{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.9rem;} .foot-social a{color:var(--navy-100);font-family:var(--serif);font-size:.85rem;} [dir="rtl"] .foot-social a{font-family:var(--arabic);} .foot-social a:hover{color:#fff;} /* Homepage additional announcements (announcementsCount option) */ .ann-more{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem;} .ann-more li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:.45rem;} .ann-more li:last-child{border-bottom:0;} .ann-more a{font-family:var(--serif);font-size:.95rem;color:var(--navy-900);} [dir="rtl"] .ann-more a{font-family:var(--arabic);} .ann-more a:hover{color:var(--brass-700);} .ann-more .ann-date{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap;} [data-theme="dark"] .ann-more a{color:var(--ink);} /* utilities */ .stack-sm > * + *{margin-top:.6rem;} .mt0{margin-top:0}.mb0{margin-bottom:0} [hidden]{display:none !important;} .only-en{}.only-ar{display:none;} [dir="rtl"] .only-en{display:none;} [dir="rtl"] .only-ar{display:initial;} /* ============================================================ OJS BRIDGE — map core OJS DOM onto the Al-Nakib design (this theme is a child of Default but ships its own CSS; these rules style the inherited article/issue/about pages + the navigation/locale widgets that core renders) ============================================================ */ /* ---- Page layout: content + sidebar ---- */ .pkp_structure_page{display:flex;flex-direction:column;min-height:100vh;} .pkp_structure_content{ flex:1 0 auto;max-width:var(--wrap);margin-inline:auto;width:100%; padding:36px var(--gutter) 60px; display:grid;grid-template-columns:1fr;gap:48px;align-items:start; } .pkp_structure_main{min-width:0;} #pkp_content_footer{display:block;} /* ---- Primary nav: style the {load_menu}