/* Theme Name: Khabar Armani Theme URI: https://khabararmani.com Author: KhabarARMANI Description: Arabic-language Armenian news. RTL-first classic theme with directory post types, an Arabic-aware search, and two article shapes (news and reference). Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: kbr Tags: rtl-language-support, news, custom-menu, translation-ready */ /* ========================================================================== The stylesheet below is the prototype's, unchanged apart from this header. Editing it here is safe: nothing in the PHP depends on class names beyond what the templates output. ========================================================================== */ /* ========================================================================== KhabarARMANI.com — stylesheet Written with CSS logical properties throughout, so the future English (LTR) version needs only dir="ltr" on . No left/right values anywhere. ========================================================================== */ /* --- Tokens -------------------------------------------------------------- */ :root { /* Palette: Armenian manuscript illumination — lapis, vermilion, gold, vellum */ --vellum: #FAF8F4; --paper: #FFFFFF; --ink: #0F1B33; --ink-soft: #55607A; --lapis: #1D3B7A; --lapis-deep: #132A5C; --band-rgb: 19, 42, 92; /* --lapis-deep as components, for gradients */ --masthead-bg: #DCE4F2; /* pale lapis behind the wordmark row */ --vermilion: #B8321F; --gold: #A87C2A; --stone: #E4DED2; --stone-2: #F1ECE3; --shell: 1200px; --measure: 760px; /* single-column width: article and topic pages */ --gap: 32px; --font-display: "Changa", "Segoe UI", sans-serif; --font-body: "IBM Plex Sans Arabic", "Segoe UI", sans-serif; --radius: 3px; } [data-theme="dark"] { --vellum: #0D1118; --paper: #151A23; --ink: #ECE8E0; --ink-soft: #99A2B4; --lapis: #7C9DE0; --lapis-deep: #1B2740; --band-rgb: 27, 39, 64; --masthead-bg: #10151E; --vermilion: #E2705C; --gold: #C9A45E; --stone: #29303C; --stone-2: #1B212B; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: clip; background: var(--vellum); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.85; font-weight: 400; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* --- Layout helpers ------------------------------------------------------ */ .shell { max-inline-size: var(--shell); margin-inline: auto; padding-inline: 24px; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 16px; background: var(--lapis); color: #fff; padding: 10px 18px; z-index: 100; } .skip-link:focus { inset-block-start: 12px; } /* --- Header -------------------------------------------------------------- */ .topbar { background: var(--lapis-deep); color: #E8EEF9; font-size: 13px; line-height: 1; } [data-theme="dark"] .topbar { color: #A9BCE0; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 11px; } .topbar__date { opacity: .75; letter-spacing: .01em; } .topbar__actions { display: flex; align-items: center; gap: 18px; } .topbar__actions button { opacity: .85; font-size: 13px; } .topbar__actions button:hover { opacity: 1; } .masthead { background: var(--paper); border-block-end: 1px solid var(--stone); } .masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; } .wordmark { display: flex; flex-direction: column; gap: 2px; } .wordmark__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 42px); line-height: 1; letter-spacing: -.01em; color: var(--ink); } .wordmark__tag { font-size: 13px; line-height: 1; color: var(--ink-soft); letter-spacing: .02em; } .masthead__promo { display: flex; align-items: center; gap: 12px; } .btn-letter { background: var(--vermilion); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: var(--radius); transition: background .18s ease; } .btn-letter:hover { background: #962717; } /* --- Navigation ---------------------------------------------------------- */ .nav { background: var(--paper); border-block-end: 2px solid var(--ink); } .nav__inner { display: flex; align-items: stretch; gap: 4px; } .nav a { font-family: var(--font-display); font-weight: 600; font-size: 18px; padding: 15px 20px; color: var(--ink); border-block-end: 4px solid transparent; margin-block-end: -2px; transition: color .15s ease, border-color .15s ease; } .nav a:hover { color: var(--lapis); border-block-end-color: var(--gold); } .nav a[aria-current="page"] { color: var(--lapis); border-block-end-color: var(--lapis); } /* --- Section headings ---------------------------------------------------- */ .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-block-end: 22px; padding-block-end: 10px; border-block-end: 1px solid var(--stone); position: relative; } .sec-head::after { content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0; inline-size: 64px; block-size: 3px; background: var(--gold); } .sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3; } .sec-head a { font-size: 14px; color: var(--ink-soft); transition: color .15s ease; } .sec-head a:hover { color: var(--vermilion); } /* --- Lead well (the signature moment) ------------------------------------ */ .lead { padding-block: 40px 48px; display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; } .lead__main { position: relative; } .lead__media { aspect-ratio: 16 / 10; background: var(--stone); overflow: hidden; } .lead__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } .lead__panel { background: var(--lapis); color: #fff; padding: 28px 30px 30px; inline-size: 84%; margin-block-start: -72px; margin-inline-start: 0; position: relative; z-index: 2; } .lead__kicker { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #F0C97A; margin-block-end: 8px; } .lead__panel h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.38; letter-spacing: -.005em; } .lead__panel p { font-size: 16px; line-height: 1.8; color: #D5DFF2; margin-block-start: 12px; max-inline-size: 60ch; } .lead__meta { margin-block-start: 16px; font-size: 13px; color: #A9BEE4; } .lead__side { display: flex; flex-direction: column; gap: 26px; } .lead__side .card + .card { border-block-start: 1px solid var(--stone); padding-block-start: 26px; } /* --- Cards --------------------------------------------------------------- */ .card__media { aspect-ratio: 16 / 10; background: var(--stone); overflow: hidden; margin-block-end: 12px; } .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; } .card:hover .card__media img { transform: scale(1.03); } .card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.45; } .card h3 a { transition: color .15s ease; } .card:hover h3 a { color: var(--lapis); } .card p { font-size: 15px; color: var(--ink-soft); line-height: 1.75; margin-block-start: 8px; } .meta { font-size: 13px; color: var(--ink-soft); margin-block-start: 10px; display: flex; gap: 10px; align-items: center; } .meta__sec { color: var(--vermilion); font-weight: 600; } .meta__dot { inline-size: 3px; block-size: 3px; background: var(--stone); border-radius: 50%; } /* --- Main grid: river + diaspora rail ------------------------------------ */ .grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 56px; padding-block-end: 56px; } .river li { padding-block: 24px; border-block-end: 1px solid var(--stone); } .river li:first-child { padding-block-start: 0; } .river__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: start; } .river__thumb { aspect-ratio: 4 / 3; background: var(--stone); overflow: hidden; } .river__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; } .river li:hover .river__thumb img { transform: scale(1.04); } .river h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.45; } .river li:hover h3 a { color: var(--lapis); } .river p { font-size: 15px; color: var(--ink-soft); margin-block-start: 8px; line-height: 1.75; } .more { display: inline-block; margin-block-start: 28px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--lapis); border-block-end: 2px solid var(--gold); padding-block-end: 3px; } /* Diaspora rail — the structural device unique to this publication */ .rail { position: sticky; inset-block-start: 24px; } .rail__list li { padding-block: 15px; border-block-end: 1px solid var(--stone); } .rail__list li:first-child { padding-block-start: 0; } .rail__tag { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--lapis); background: var(--stone-2); padding: 3px 10px; margin-block-end: 7px; border-radius: 2px; } .rail__list h4 { font-weight: 500; font-size: 16px; line-height: 1.6; } .rail__list li:hover h4 { color: var(--lapis); } .rail__time { font-size: 12px; color: var(--ink-soft); margin-block-start: 5px; } .sponsor { margin-block-start: 36px; border: 1px solid var(--stone); background: var(--stone-2); padding: 26px 20px; text-align: center; } .sponsor span { display: block; font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; margin-block-end: 10px; } .sponsor strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-soft); } /* --- Relations band ------------------------------------------------------ */ .band { background: var(--lapis-deep); color: #fff; padding-block: 52px; } [data-theme="dark"] .band { border-block: 1px solid var(--stone); } .band .sec-head { border-block-end-color: rgba(255,255,255,.18); } .band .sec-head h2 { color: #fff; } .band .sec-head a { color: #B9C9E8; } .band .sec-head::after { background: #F0C97A; } .band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .band__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.45; } .band__item h3 a { transition: color .15s ease; } .band__item:hover h3 a { color: #F0C97A; } .band__item p { font-size: 15px; color: #C3D0EA; margin-block-start: 9px; line-height: 1.75; } .band__item .meta { color: #96A9CC; } /* --- Memory (evergreen, no timestamps) ----------------------------------- */ .memory { padding-block: 56px; } .memory__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .memory .card__media { aspect-ratio: 3 / 4; } /* --- Guide --------------------------------------------------------------- */ .guide { background: var(--stone-2); padding-block: 52px; border-block: 1px solid var(--stone); } .guide__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .guide__card { background: var(--paper); border: 1px solid var(--stone); padding: 24px 22px; transition: border-color .18s ease, transform .18s ease; } .guide__card:hover { border-color: var(--gold); } .guide__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.5; } .guide__card p { font-size: 14px; color: var(--ink-soft); margin-block-start: 7px; line-height: 1.7; } /* --- Newsletter ---------------------------------------------------------- */ .letter { padding-block: 60px; } .letter__box { background: var(--lapis); color: #fff; padding: 44px 48px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; } .letter h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.4; } .letter p { color: #C9D6EE; font-size: 16px; margin-block-start: 8px; max-inline-size: 52ch; } .letter__form { display: flex; gap: 10px; } .letter__form input { font-family: var(--font-body); font-size: 16px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; inline-size: 260px; border-radius: var(--radius); } .letter__form input::placeholder { color: #A9BEE4; } .letter__form button { background: #F0C97A; color: var(--lapis-deep); font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: var(--radius); transition: background .18s ease; } .letter__form button:hover { background: #E5B854; } /* --- Footer -------------------------------------------------------------- */ .footer { background: var(--ink); color: #C6CCDA; padding-block: 52px 30px; font-size: 15px; } [data-theme="dark"] .footer { background: var(--paper); border-block-start: 1px solid var(--stone); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap); } .footer h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; margin-block-end: 14px; } [data-theme="dark"] .footer h4 { color: var(--ink); } .footer li { margin-block-end: 9px; } .footer a { transition: color .15s ease; } .footer a:hover { color: #F0C97A; } .footer__about p { line-height: 1.8; max-inline-size: 42ch; opacity: .8; } .footer__mark { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: #fff; margin-block-end: 12px; } [data-theme="dark"] .footer__mark { color: var(--ink); } .footer__bottom { margin-block-start: 40px; padding-block-start: 22px; border-block-start: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; opacity: .7; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 1000px) { .lead { grid-template-columns: 1fr; gap: 40px; } .lead__panel { inline-size: 92%; margin-block-start: -56px; } .lead__side { flex-direction: row; gap: 24px; } .lead__side .card { flex: 1; } .lead__side .card + .card { border-block-start: 0; padding-block-start: 0; } .grid-main { grid-template-columns: 1fr; gap: 48px; } .rail { position: static; } .guide__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { body { font-size: 16px; } .nav__inner { overflow-x: auto; scrollbar-width: none; } .nav__inner::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; font-size: 16px; padding: 13px 14px; } .masthead__inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 18px; } .lead { padding-block: 26px 34px; } .lead__panel { inline-size: 100%; margin-block-start: -32px; padding: 22px; } .lead__side { flex-direction: column; } .lead__side .card + .card { border-block-start: 1px solid var(--stone); padding-block-start: 22px; } .river__row { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; } .river h3 { font-size: 18px; } .river p { display: none; } .band__grid, .memory__grid { grid-template-columns: 1fr; gap: 30px; } .memory .card__media { aspect-ratio: 16 / 10; } .guide__grid { grid-template-columns: 1fr; } .letter__box { grid-template-columns: 1fr; padding: 28px 24px; } .letter__form { flex-direction: column; } .letter__form input { inline-size: 100%; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .footer__bottom { flex-direction: column; } .topbar__date { display: none; } } /* ========================================================================== Article page (single.php) Built for readers arriving cold from Facebook or Instagram: they have no idea what this site is, so the page has to introduce itself and give them somewhere to go next. ========================================================================== */ .crumbs { padding-block: 22px 0; font-size: 13px; color: var(--ink-soft); } .crumbs a:hover { color: var(--vermilion); } .crumbs span { margin-inline: 7px; opacity: .5; } .post { padding-block-end: 20px; } /* .post__head only ever sits inside a banner, so it has no width of its own and never centres. Every alignment override that used to fight this rule has been deleted. */ .post__head { padding-block: 22px 0; } .post__head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.38; letter-spacing: -.008em; } .post__standfirst { font-size: 20px; line-height: 1.8; color: var(--ink-soft); margin-block-start: 18px; max-inline-size: 60ch; } .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block-start: 26px; padding-block: 16px; border-block: 1px solid var(--stone); font-size: 14px; color: var(--ink-soft); } .byline strong { color: var(--ink); font-weight: 600; } /* Featured image sits in the same column as the text instead of spanning the full grid. Roughly 40% narrower, which is around 60% less area — the headline now leads the page rather than the picture. */ /* Body copy — the measure is the whole design here */ .prose { max-inline-size: 680px; margin-inline: auto; font-size: 19px; line-height: 2.05; } .prose > p { margin-block-end: 26px; } /* No drop cap: ::first-letter breaks Arabic letter joining, orphaning the first character of the word. The opening paragraph gets a touch more weight through size instead. */ .prose--lede > p:first-of-type { font-size: 1.08em; color: var(--ink); } .prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.5; margin-block: 40px 16px; } .prose ul { margin-block-end: 26px; } .prose ul li { position: relative; padding-inline-start: 22px; margin-block-end: 10px; } .prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .82em; inline-size: 7px; block-size: 7px; background: var(--gold); transform: rotate(45deg); } .prose a:not(.btn-letter) { color: var(--lapis); border-block-end: 1px solid var(--gold); } .pullquote { margin-block: 34px; padding-inline-start: 22px; border-inline-start: 4px solid var(--gold); } .pullquote p { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.7; color: var(--lapis); } .pullquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 14px; color: var(--ink-soft); margin-block-start: 10px; } .tags { max-inline-size: 680px; margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 8px; } .tags a { font-size: 14px; padding: 6px 14px; background: var(--stone-2); border: 1px solid var(--stone); border-radius: 2px; color: var(--ink-soft); transition: border-color .15s ease, color .15s ease; } .tags a:hover { border-color: var(--gold); color: var(--ink); } /* First-visit introduction. A stranger from Facebook needs to know in one sentence what this publication is before we ask them for an email. */ .intro-card { max-inline-size: 680px; margin: 44px auto 0; border-block-start: 3px solid var(--lapis); background: var(--paper); border-inline: 1px solid var(--stone); border-block-end: 1px solid var(--stone); padding: 28px 30px; } .intro-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.5; margin-block-end: 8px; } .intro-card p { font-size: 16px; color: var(--ink-soft); line-height: 1.8; } .intro-card .letter__form { margin-block-start: 18px; } .intro-card .letter__form input { border-color: var(--stone); background: var(--vellum); color: var(--ink); flex: 1; inline-size: auto; } .intro-card .letter__form input::placeholder { color: var(--ink-soft); } .intro-card .letter__form button { background: var(--lapis); color: #fff; } .intro-card .letter__form button:hover { background: var(--lapis-deep); } /* Read next */ .readnext { background: var(--stone-2); border-block-start: 1px solid var(--stone); padding-block: 52px; margin-block-start: 56px; } .readnext__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } @media (max-width: 720px) { .post__head { padding-block: 18px 22px; } .prose { font-size: 18px; line-height: 1.95; } .byline { gap: 10px; } .readnext__grid { grid-template-columns: 1fr; gap: 30px; } .intro-card { padding: 22px; } } /* ========================================================================== Category / archive page (archive.php, category.php) Two jobs: help a reader browse, and rank in search. The intro paragraph and the year archive are there for the second job. ========================================================================== */ .archive-head { padding-block: 40px 30px; border-block-end: 1px solid var(--stone); } .archive-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.35; letter-spacing: -.008em; } .archive-head h1::after { content: ""; display: block; inline-size: 72px; block-size: 4px; background: var(--gold); margin-block-start: 14px; } .archive-head p { font-size: 18px; line-height: 1.9; color: var(--ink-soft); max-inline-size: 68ch; margin-block-start: 18px; } .archive-head .count { font-size: 14px; color: var(--ink-soft); margin-block-start: 14px; display: block; } /* Country filter — only appears on the diaspora section, where the country genuinely is how readers think about the content. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 22px; border-block-end: 1px solid var(--stone); } .chips a { font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 8px 18px; border: 1px solid var(--stone); border-radius: 2px; color: var(--ink-soft); transition: border-color .15s ease, color .15s ease, background .15s ease; } .chips a:hover { border-color: var(--gold); color: var(--ink); } .chips a[aria-current="true"] { background: var(--lapis); border-color: var(--lapis); color: #fff; } .arch-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--gap); align-items: center; padding-block: 40px; border-block-end: 1px solid var(--stone); } .arch-lead__media { aspect-ratio: 16 / 10; background: var(--stone); overflow: hidden; } .arch-lead__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; } .arch-lead:hover .arch-lead__media img { transform: scale(1.03); } .arch-lead h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 33px); line-height: 1.42; } .arch-lead:hover h2 a { color: var(--lapis); } .arch-lead p { font-size: 16px; color: var(--ink-soft); margin-block-start: 12px; line-height: 1.8; max-inline-size: 52ch; } .arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap); padding-block: 44px; } .pager { display: flex; align-items: center; gap: 6px; padding-block: 10px 56px; } .pager a, .pager span { font-family: var(--font-display); font-weight: 600; font-size: 16px; min-inline-size: 44px; padding: 10px 14px; text-align: center; border: 1px solid var(--stone); border-radius: 2px; color: var(--ink-soft); transition: border-color .15s ease, color .15s ease; } .pager a:hover { border-color: var(--lapis); color: var(--lapis); } .pager .current { background: var(--lapis); border-color: var(--lapis); color: #fff; } .pager .gap { border: 0; min-inline-size: auto; padding-inline: 4px; } .pager .next { margin-inline-start: auto; } /* Year archive. Four thousand articles across nineteen years is an asset; this is the only place on the site that admits how deep it goes. */ .years { background: var(--stone-2); border-block: 1px solid var(--stone); padding-block: 44px; } .years h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-block-end: 6px; } .years > .shell > p { font-size: 15px; color: var(--ink-soft); margin-block-end: 20px; } .years__list { display: flex; flex-wrap: wrap; gap: 7px; } .years__list a { font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 7px 15px; background: var(--paper); border: 1px solid var(--stone); border-radius: 2px; color: var(--ink-soft); transition: border-color .15s ease, color .15s ease; } .years__list a:hover { border-color: var(--gold); color: var(--ink); } @media (max-width: 1000px) { .arch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .archive-head { padding-block: 26px 22px; } .archive-head p { font-size: 16px; } .arch-lead { grid-template-columns: 1fr; gap: 20px; padding-block: 28px; } .arch-grid { grid-template-columns: 1fr; gap: 30px; padding-block: 30px; } .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips a { white-space: nowrap; } .pager a, .pager span { min-inline-size: 40px; padding: 9px 10px; font-size: 15px; } } /* ========================================================================== Guide hub (page-daleel.php) Not a news archive. Evergreen service content, organised by task rather than by date, and the page where travel and service revenue lands. ========================================================================== */ .hub-head { background: var(--lapis-deep); color: #fff; padding-block: 54px; } .hub-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.8vw, 48px); line-height: 1.34; } .hub-head h1::after { content: ""; display: block; inline-size: 72px; block-size: 4px; background: #F0C97A; margin-block-start: 16px; } .hub-head p { font-size: 19px; line-height: 1.9; color: #C6D3EC; max-inline-size: 62ch; margin-block-start: 20px; } .pillars { padding-block: 52px 20px; display: grid; gap: 44px; } .pillar { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; } .pillar__intro h2 { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.4; } .pillar__intro h2::after { content: ""; display: block; inline-size: 52px; block-size: 3px; background: var(--gold); margin-block-start: 12px; } .pillar__intro p { font-size: 16px; color: var(--ink-soft); margin-block-start: 14px; line-height: 1.8; } .pillar__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .guide-item { display: block; background: var(--paper); border: 1px solid var(--stone); padding: 20px 22px; transition: border-color .16s ease; } .guide-item:hover { border-color: var(--gold); } .guide-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.5; } .guide-item p { font-size: 14px; color: var(--ink-soft); margin-block-start: 6px; line-height: 1.7; } /* Evergreen content lives or dies on whether it looks maintained. */ .guide-item .updated { display: block; font-size: 12px; color: var(--ink-soft); margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--stone); } /* Directory: the paid listing product, presented as a reader service. */ .directory { background: var(--stone-2); border-block: 1px solid var(--stone); padding-block: 52px; margin-block-start: 44px; } .directory__top { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: center; } .directory h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.42; } .directory p { font-size: 16px; color: var(--ink-soft); margin-block-start: 10px; line-height: 1.8; max-inline-size: 54ch; } .directory__search { display: flex; gap: 10px; } .directory__search input { flex: 1; font-family: var(--font-body); font-size: 16px; padding: 13px 16px; border: 1px solid var(--stone); background: var(--paper); color: var(--ink); border-radius: var(--radius); } .directory__search button { background: var(--lapis); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 13px 24px; border-radius: var(--radius); transition: background .16s ease; } .directory__search button:hover { background: var(--lapis-deep); } .directory__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 28px; } .directory__cats a { font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 8px 16px; background: var(--paper); border: 1px solid var(--stone); border-radius: 2px; color: var(--ink-soft); transition: border-color .15s ease, color .15s ease; } .directory__cats a:hover { border-color: var(--gold); color: var(--ink); } .listing-cta { margin-block-start: 30px; background: var(--paper); border: 1px solid var(--stone); border-block-start: 3px solid var(--vermilion); padding: 26px 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .listing-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.5; } .listing-cta p { font-size: 15px; color: var(--ink-soft); margin-block-start: 6px; max-inline-size: 58ch; } @media (max-width: 1000px) { .pillar { grid-template-columns: 1fr; gap: 20px; } .directory__top { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 720px) { .hub-head { padding-block: 32px; } .hub-head p { font-size: 17px; } .pillars { padding-block: 32px 10px; gap: 34px; } .pillar__list { grid-template-columns: 1fr; } .pillar__intro h2 { font-size: 24px; } .directory__search { flex-direction: column; } .listing-cta { grid-template-columns: 1fr; } } /* ========================================================================== Section-specific blocks ========================================================================== */ /* أرمينيا والعرب — a relations file benefits from hard numbers up top. Informative, not decorative: these change as the relationship changes. */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--stone); margin-block: 34px 0; } .facts div { padding: 24px 26px; } .facts div + div { border-inline-start: 1px solid var(--stone); } .facts b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.2; color: var(--lapis); } .facts span { display: block; font-size: 14px; color: var(--ink-soft); margin-block-start: 6px; line-height: 1.6; } .facts em { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); opacity: .75; margin-block-start: 8px; } @media (max-width: 720px) { .facts { grid-template-columns: 1fr; } .facts div + div { border-inline-start: 0; border-block-start: 1px solid var(--stone); } .facts div { padding: 18px 20px; } .facts b { font-size: 28px; } } /* ========================================================================== Numerals The site uses Western digits (0-9) to match the existing archive, the metadata WordPress emits, and readers across the Maghreb and the diaspora. Tabular figures keep counts and dates from shifting width as they update. ========================================================================== */ .facts b, .pager a, .pager span, .years__list a, .archive-head .count, .topbar__date, .byline, .guide-item .updated, .tl__year, .rail__time, .meta { font-variant-numeric: tabular-nums; } /* ========================================================================== Header instant search The masthead row was half empty; this is the best use of it. With four thousand articles behind it, search is the main way into the archive. ========================================================================== */ .masthead__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; } .hsearch { position: relative; } .hsearch__icon { position: absolute; inset-inline-start: 15px; inset-block-start: 50%; transform: translateY(-50%); inline-size: 19px; block-size: 19px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; } .hsearch__input { inline-size: 100%; font-family: var(--font-body); font-size: 16px; line-height: 1.4; padding: 13px 46px 13px 18px; padding-inline: 46px 18px; border: 1px solid var(--stone); background: var(--vellum); color: var(--ink); border-radius: var(--radius); transition: border-color .16s ease, background .16s ease; } .hsearch__input::placeholder { color: var(--ink-soft); } .hsearch__input:focus { outline: none; border-color: var(--lapis); background: var(--paper); box-shadow: 0 0 0 3px rgba(29, 59, 122, .1); } .hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* Suggestions */ .ac { position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; z-index: 60; background: var(--paper); border: 1px solid var(--stone); border-block-start: 3px solid var(--lapis); box-shadow: 0 14px 34px rgba(15, 27, 51, .13); max-block-size: 440px; overflow-y: auto; overscroll-behavior: contain; } [data-theme="dark"] .ac { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); } .ac[hidden] { display: none; } .ac__list li { border-block-end: 1px solid var(--stone); } .ac__list li:last-child { border-block-end: 0; } .ac__item { display: flex; gap: 13px; align-items: flex-start; padding: 12px 16px; border-inline-start: 3px solid transparent; cursor: pointer; } /* Thumbnails make results scannable by shape as well as by word, which matters in Arabic where headlines are long and visually similar. */ .ac__thumb { inline-size: 62px; block-size: 46px; flex-shrink: 0; object-fit: cover; background: var(--stone); border-radius: 2px; } .ac__body { min-inline-size: 0; } .ac__item[aria-selected="true"], .ac__item:hover { background: var(--stone-2); border-inline-start-color: var(--gold); } .ac__item h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.55; color: var(--ink); } .ac__item mark { background: transparent; color: var(--lapis); font-weight: 700; } [data-theme="dark"] .ac__item mark { color: #8FB0EE; } .ac__meta { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--ink-soft); margin-block-start: 5px; } .ac__meta b { color: var(--vermilion); font-weight: 600; } .ac__empty { padding: 22px 18px; font-size: 15px; color: var(--ink-soft); line-height: 1.75; } .ac__empty span { display: block; font-size: 13px; margin-block-start: 6px; opacity: .8; } .ac__all { display: block; padding: 13px 18px; background: var(--stone-2); border-block-start: 1px solid var(--stone); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--lapis); text-align: center; } .ac__all:hover { color: var(--vermilion); } @media (max-width: 1000px) { .masthead__inner { gap: 20px; } } @media (max-width: 860px) { /* Search drops to its own full-width row rather than shrinking away. On mobile it is the fastest route into nineteen years of archive. */ .masthead__inner { grid-template-columns: 1fr auto; gap: 14px; padding-block: 16px; } .hsearch { grid-column: 1 / -1; grid-row: 2; } .ac { max-block-size: 60vh; } } /* ========================================================================== Topic page (taxonomy-topic.php) A reference entry and its complete coverage archive at one URL. The entry is written once; the article list below it assembles itself from the taxonomy and never needs maintaining. ========================================================================== */ /* Reference entry sits on paper to separate it from the news list below */ /* The seam between the written entry and the automatic archive */ /* ========================================================================== Topics index (page-topics.php) Rebuilt: the earlier version degraded into fifty text rows. Each group is now a self-contained panel, and every topic carries a proportional bar so the page reads as a picture of the archive rather than a list of links. ========================================================================== */ .tpx-featured { padding-block: 38px 44px; } /* auto-fit rather than fixed breakpoints, so it reflows at any width */ .tpx-featured__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .tpx-card { display: block; background: var(--paper); border: 1px solid var(--stone); transition: border-color .16s ease; } .tpx-card:hover { border-color: var(--gold); } .tpx-card__media { aspect-ratio: 4 / 3; background: var(--stone); overflow: hidden; } .tpx-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; } .tpx-card:hover .tpx-card__media img { transform: scale(1.04); } .tpx-card__body { padding: 16px 18px 18px; } .tpx-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; line-height: 1.45; } .tpx-card:hover h3 { color: var(--lapis); } .tpx-card p { font-size: 13.5px; color: var(--ink-soft); margin-block-start: 6px; line-height: 1.7; } .tpx-card .n { display: block; font-size: 12.5px; color: var(--ink-soft); margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--stone); font-variant-numeric: tabular-nums; } .alpha { display: flex; flex-wrap: wrap; gap: 5px; padding-block: 16px; border-block: 1px solid var(--stone); } .alpha a { font-family: var(--font-display); font-weight: 600; font-size: 15px; min-inline-size: 34px; padding: 5px 8px; text-align: center; color: var(--ink-soft); border: 1px solid transparent; border-radius: 2px; } .alpha a:hover { border-color: var(--stone); color: var(--lapis); } .alpha a.off { opacity: .3; pointer-events: none; } /* Panels, not columns of text */ .tpx-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; padding-block: 30px 10px; align-items: start; } .tpx-group { background: var(--paper); border: 1px solid var(--stone); } .tpx-group__head { padding: 20px 22px 17px; border-block-end: 2px solid var(--ink); background: var(--stone-2); } .tpx-group__head h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.4; } .tpx-group__head p { font-size: 13.5px; color: var(--ink-soft); margin-block-start: 6px; line-height: 1.7; } .tpx-group__head .k { font-size: 12.5px; color: var(--ink-soft); margin-block-start: 9px; font-variant-numeric: tabular-nums; } .tpx-list { padding: 4px 0 6px; } .tpx-list a { display: block; padding: 11px 22px 12px; position: relative; transition: background .14s ease; } .tpx-list a:hover { background: var(--stone-2); } .tpx-list .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .tpx-list .t { font-size: 16px; font-weight: 500; line-height: 1.5; } .tpx-list a:hover .t { color: var(--lapis); } .tpx-list .t em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--lapis); border: 1px solid var(--stone); background: var(--vellum); padding: 2px 6px; border-radius: 2px; margin-inline-start: 7px; white-space: nowrap; } .tpx-list .c { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* Proportional bar: turns a count into something you can compare at a glance */ .tpx-bar { block-size: 3px; background: var(--stone-2); margin-block-start: 8px; } .tpx-bar i { display: block; block-size: 3px; background: var(--lapis); } .tpx-list a:hover .tpx-bar i { background: var(--gold); } [data-theme="dark"] .tpx-bar { background: var(--stone); } @media (max-width: 720px) { .tpx-group__head { padding: 17px 18px 15px; } .tpx-list a { padding-inline: 18px; } } /* Homepage topics strip — the second entry point into the topic index, for readers who never look at the nav bar. */ .home-topics { padding-block: 46px; border-block-start: 1px solid var(--stone); } .home-topics__list { display: flex; flex-wrap: wrap; gap: 8px; } .home-topics__list a { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; padding: 9px 18px; background: var(--paper); border: 1px solid var(--stone); border-radius: 2px; color: var(--ink); transition: border-color .15s ease, color .15s ease; } .home-topics__list a:hover { border-color: var(--gold); color: var(--lapis); } .home-topics__list a b { font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-inline-start: 7px; font-variant-numeric: tabular-nums; } .home-topics__list a.all { background: var(--lapis); border-color: var(--lapis); color: #fff; } .home-topics__list a.all:hover { background: var(--lapis-deep); color: #fff; } /* Figures strip inside a single-column article, and a narrow inline figure for tall images that would otherwise dominate the reading column. */ /* Tall portrait images would run away down the column, so they render as a small thumbnail and open full size in the lightbox. */ /* ========================================================================== Archive photograph (single-photo.php) Not an article with a picture on top. The photograph is the subject, so it is shown whole on a dark stage rather than cropped to a layout grid, and the provenance is stated as structured data before any prose. ========================================================================== */ .ph-head { max-inline-size: var(--measure); margin-inline: auto; padding-block: 30px 26px; } .ph-format { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; color: var(--vermilion); border: 1px solid var(--stone); background: var(--stone-2); padding: 5px 13px; border-radius: 2px; margin-block-end: 15px; } .ph-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.38; } .ph-head .def { font-size: 19px; line-height: 1.85; color: var(--ink-soft); margin-block-start: 15px; max-inline-size: 60ch; } /* Dark stage: the picture is never cropped, whatever its proportions */ .ph-stage { background: var(--ink); padding: 26px; display: flex; justify-content: center; align-items: center; } [data-theme="dark"] .ph-stage { background: #05070C; border: 1px solid var(--stone); } .ph-stage img { max-block-size: 72vh; inline-size: auto; max-inline-size: 100%; object-fit: contain; } .ph-caption { max-inline-size: var(--measure); margin: 14px auto 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; padding-inline-start: 12px; border-inline-start: 3px solid var(--gold); } /* Provenance before prose — this is what makes it an archive record */ .ph-meta { max-inline-size: var(--measure); margin: 34px auto 0; border: 1px solid var(--stone); background: var(--paper); display: grid; grid-template-columns: repeat(3, 1fr); } .ph-meta > div { padding: 16px 20px; border-inline-start: 1px solid var(--stone); } .ph-meta > div:nth-child(3n+1) { border-inline-start: 0; } .ph-meta > div:nth-child(n+4) { border-block-start: 1px solid var(--stone); } .ph-meta dt { font-size: 11.5px; letter-spacing: .05em; color: var(--ink-soft); margin-block-end: 5px; } .ph-meta dd { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.6; } .ph-meta dd.free { color: var(--lapis); } .ph-note { max-inline-size: var(--measure); margin: 30px auto 0; background: var(--stone-2); border: 1px solid var(--stone); border-block-start: 3px solid var(--gold); padding: 22px 26px; } .ph-note h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-block-end: 8px; } .ph-note p { font-size: 15px; color: var(--ink-soft); line-height: 1.8; } .ph-note p + p { margin-block-start: 10px; } @media (max-width: 720px) { .ph-stage { padding: 14px; } .ph-stage img { max-block-size: 58vh; } .ph-meta { grid-template-columns: repeat(2, 1fr); } .ph-meta > div:nth-child(3n+1) { border-inline-start: 1px solid var(--stone); } .ph-meta > div:nth-child(2n+1) { border-inline-start: 0; } .ph-meta > div:nth-child(n+3) { border-block-start: 1px solid var(--stone); } .ph-note { padding: 18px 20px; } } /* ========================================================================== Country flags in the diaspora rail Inline SVG rather than emoji: flag emoji do not render at all on Windows Chrome, which would show bare letter pairs to a large share of readers. Simplified marks — at 22px an emblem is sub-pixel anyway, and the country name sits beside it doing the actual identifying. ========================================================================== */ .rail__tag { display: inline-flex; align-items: center; gap: 8px; } .flag { inline-size: 22px; block-size: 15px; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 27, 51, .16); display: block; } [data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); } /* Region tags carry no flag; the gap collapses on its own. */ /* ========================================================================== Static pages, search results, 404 ========================================================================== */ /* Simple prose page: about, terms, privacy */ .page-head { max-inline-size: var(--measure); margin-inline: auto; padding-block: 34px 26px; } .page-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.36; } .page-head h1::after { content: ""; display: block; inline-size: 72px; block-size: 4px; background: var(--gold); margin-block-start: 14px; } .page-head .def { font-size: 19px; line-height: 1.85; color: var(--ink-soft); margin-block-start: 16px; max-inline-size: 60ch; } .page-updated { max-inline-size: var(--measure); margin: 26px auto 0; font-size: 13.5px; color: var(--ink-soft); padding-block-start: 14px; border-block-start: 1px solid var(--stone); } /* --- Advertise: rate cards ------------------------------------------- */ .rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding-block: 8px 10px; } .rate { background: var(--paper); border: 1px solid var(--stone); border-block-start: 3px solid var(--lapis); padding: 26px 26px 28px; display: flex; flex-direction: column; } .rate.feature { border-block-start-color: var(--vermilion); } .rate h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.4; } .rate .price { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--lapis); margin-block: 12px 4px; font-variant-numeric: tabular-nums; } .rate .per { font-size: 13.5px; color: var(--ink-soft); } .rate ul { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--stone); } .rate li { position: relative; padding-inline-start: 20px; font-size: 15px; line-height: 1.7; margin-block-end: 9px; color: var(--ink-soft); } .rate li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em; inline-size: 7px; block-size: 7px; background: var(--gold); transform: rotate(45deg); } .rate .btn-letter { margin-block-start: auto; text-align: center; } .rate ul + .btn-letter { margin-block-start: 22px; } /* --- Audience figures ------------------------------------------------ */ .aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--stone); margin-block: 30px 0; } .aud div { padding: 24px 26px; border-inline-start: 1px solid var(--stone); } .aud div:first-child { border-inline-start: 0; } .aud b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--lapis); line-height: 1.2; font-variant-numeric: tabular-nums; } .aud span { display: block; font-size: 14px; color: var(--ink-soft); margin-block-start: 6px; line-height: 1.6; } /* --- Contact / submission form --------------------------------------- */ .form { max-inline-size: var(--measure); margin-inline: auto; } .field { margin-block-end: 20px; } .field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-block-end: 8px; } .field input, .field textarea, .field select { inline-size: 100%; font-family: var(--font-body); font-size: 16.5px; padding: 13px 16px; border: 1px solid var(--stone); background: var(--paper); color: var(--ink); border-radius: var(--radius); } .field textarea { min-block-size: 170px; resize: vertical; line-height: 1.8; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--lapis); box-shadow: 0 0 0 3px rgba(29,59,122,.1); } .field .help { font-size: 13.5px; color: var(--ink-soft); margin-block-start: 7px; line-height: 1.7; } .form button[type="submit"] { background: var(--lapis); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; padding: 14px 34px; border-radius: var(--radius); } .form button[type="submit"]:hover { background: var(--lapis-deep); } /* --- Search results --------------------------------------------------- */ .sr-head { padding-block: 34px 0; } .sr-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.4; } .sr-head h1 em { font-style: normal; color: var(--lapis); } .sr-head .count { display: block; font-size: 14.5px; color: var(--ink-soft); margin-block-start: 10px; } .sr-form { display: flex; gap: 10px; margin-block: 22px 0; } .sr-form input { flex: 1; font-family: var(--font-body); font-size: 17px; padding: 14px 18px; border: 1px solid var(--stone); background: var(--paper); color: var(--ink); border-radius: var(--radius); } .sr-form button { background: var(--lapis); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 14px 30px; border-radius: var(--radius); } .sr-list li { padding-block: 22px; border-block-end: 1px solid var(--stone); } .sr-list .row { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 20px; align-items: start; } .sr-list .thumb { aspect-ratio: 4/3; background: var(--stone); overflow: hidden; } .sr-list .thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; } .sr-list h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.45; } .sr-list li:hover h3 a { color: var(--lapis); } .sr-list p { font-size: 15px; color: var(--ink-soft); margin-block-start: 7px; line-height: 1.75; } .sr-list mark { background: transparent; color: var(--vermilion); font-weight: 600; } /* --- 404 --------------------------------------------------------------- */ .nf { text-align: center; padding-block: 70px 40px; } .nf .code { font-family: var(--font-display); font-weight: 800; font-size: clamp(72px, 13vw, 132px); line-height: 1; color: var(--stone); letter-spacing: -.02em; } .nf h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1.4; margin-block-start: 6px; } .nf p { font-size: 18px; color: var(--ink-soft); max-inline-size: 54ch; margin: 16px auto 0; line-height: 1.85; } .nf .sr-form { max-inline-size: 560px; margin-inline: auto; } .nf-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block-start: 30px; } .nf-links a { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; padding: 9px 18px; background: var(--paper); border: 1px solid var(--stone); border-radius: 2px; color: var(--ink); } .nf-links a:hover { border-color: var(--gold); color: var(--lapis); } @media (max-width: 720px) { .sr-list .row { grid-template-columns: 110px minmax(0,1fr); gap: 14px; } .sr-list p { display: none; } .sr-form { flex-direction: column; } .aud div { border-inline-start: 0; border-block-start: 1px solid var(--stone); } .aud div:first-child { border-block-start: 0; } } /* ========================================================================== Long-form reference article components For pieces like الدودوك that are read as reference rather than news: a jump menu, video embeds, a glossary and an FAQ. ========================================================================== */ /* Video embed */ .embed { max-inline-size: var(--measure); margin: 30px auto; } .embed__frame { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; } .embed__frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; } .embed figcaption { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin-block-start: 11px; padding-inline-start: 12px; border-inline-start: 3px solid var(--gold); } .embed figcaption b { color: var(--ink); font-weight: 600; } /* Glossary */ .gloss { max-inline-size: var(--measure); margin: 30px auto 0; border: 1px solid var(--stone); background: var(--paper); } .gloss > div { padding: 18px 24px; border-block-start: 1px solid var(--stone); } .gloss > div:first-child { border-block-start: 0; } .gloss dt { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-block-end: 5px; } .gloss dt span { font-weight: 400; font-size: 14px; color: var(--ink-soft); margin-inline-start: 9px; } .gloss dd { margin: 0; font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; } /* FAQ */ .faq { max-inline-size: var(--measure); margin: 30px auto 0; } /* No panels and no boxes: the questions read as a run of text, with a single hairline between them and a gold marker that flips on open. */ .faq details { border: 0; background: transparent; margin-block-end: 0; /* rule between items only — nothing above the first or below the last */ border-block-end: 1px solid var(--stone); } .faq details:last-of-type { border-block-end: 0; } .faq summary { cursor: pointer; padding: 16px 0; padding-inline-end: 40px; font-family: var(--font-display); font-weight: 700; font-size: 18.5px; line-height: 1.5; list-style: none; position: relative; transition: color .15s ease; } .faq summary:hover { color: var(--lapis); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; inset-inline-end: 6px; inset-block-start: 15px; font-size: 24px; font-weight: 400; color: var(--gold); line-height: 1; transition: transform .18s ease; } .faq details[open] summary::after { content: "−"; } .faq details[open] summary { color: var(--lapis); } .faq .a { padding: 0 0 22px; padding-inline-end: 40px; font-size: 16.5px; color: var(--ink-soft); line-height: 1.9; max-inline-size: 74ch; } /* Source list */ .sources { max-inline-size: var(--measure); margin: 34px auto 0; padding-block-start: 20px; border-block-start: 1px solid var(--stone); } .sources h2 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-block-end: 12px; } .sources li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; margin-block-end: 8px; padding-inline-start: 18px; position: relative; } .sources li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .8em; inline-size: 6px; block-size: 6px; background: var(--stone); transform: rotate(45deg); } @media (max-width: 720px) { .gloss > div { padding: 16px 18px; } .faq summary { font-size: 16.5px; padding: 15px 18px; padding-inline-end: 42px; } } /* ========================================================================== Lightbox Any figure inside an article opens full size, with arrows to move through every other image on the page. Keyboard, swipe and click all work. ========================================================================== */ .zoomable { cursor: zoom-in; } .lb { position: fixed; inset: 0; z-index: 200; background: rgba(8, 11, 18, .95); display: flex; flex-direction: column; opacity: 0; transition: opacity .18s ease; } .lb[hidden] { display: none; } .lb.open { opacity: 1; } .lb__stage { flex: 1; min-block-size: 0; display: flex; align-items: center; justify-content: center; padding: 58px 78px 8px; } .lb__stage img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; display: block; } .lb__bar { padding: 16px 24px 30px; color: #D6DDEA; text-align: center; flex-shrink: 0; } .lb__cap { max-inline-size: 72ch; margin-inline: auto; font-size: 15px; line-height: 1.75; } .lb__count { font-size: 13px; opacity: .62; margin-block-start: 9px; font-variant-numeric: tabular-nums; } .lb button { position: absolute; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; inline-size: 46px; block-size: 46px; display: grid; place-items: center; transition: background .15s ease; } .lb button:hover { background: rgba(255, 255, 255, .2); } .lb button svg { inline-size: 20px; block-size: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lb__close { inset-block-start: 18px; inset-inline-end: 18px; } .lb__prev, .lb__next { inset-block-start: 50%; transform: translateY(-50%); } .lb__prev { inset-inline-end: 18px; } .lb__next { inset-inline-start: 18px; } .lb[data-single="true"] .lb__prev, .lb[data-single="true"] .lb__next { display: none; } body.lb-open { overflow: hidden; } @media (max-width: 720px) { .lb__stage { padding: 56px 12px 6px; } .lb button { inline-size: 40px; block-size: 40px; } .lb__prev { inset-inline-end: 10px; } .lb__next { inset-inline-start: 10px; } .lb__cap { font-size: 14px; } } /* ========================================================================== Section banner — news variant The dark field on دليل marks content that does not expire. Trialling a shorter version on a news section: title, intro and count only, with the filter chips left below on the light background where they read as controls rather than decoration. Kept deliberately shorter so the lead story still clears the fold on a laptop. ========================================================================== */ .hub-head--news { padding-block: 34px 38px; } .hub-head--news .crumbs { padding-block: 0 0; color: #93A7CB; } .hub-head--news .crumbs a { color: #B9C9E8; } .hub-head--news .crumbs a:hover { color: #F0C97A; } .hub-head--news .crumbs span { opacity: .45; } .hub-head--news h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.34; margin-block-start: 16px; } .hub-head--news h1::after { content: ""; display: block; inline-size: 68px; block-size: 4px; background: #F0C97A; margin-block-start: 15px; } .hub-head--news p { font-size: 18px; line-height: 1.85; color: #C6D3EC; max-inline-size: 66ch; margin-block-start: 18px; } .hub-head--news .count { display: block; font-size: 14px; color: #93A7CB; margin-block-start: 16px; font-variant-numeric: tabular-nums; } /* chips sit on the light page directly beneath the banner */ .hub-head--news + .shell > .chips { border-block-start: 0; padding-block-start: 24px; } /* Anything that follows the banner needs air; without it the first heading sits flush against the dark edge. */ .hub-head + .shell, .hub-head + .shell.tpx-featured { padding-block-start: 34px; } .hub-head + .shell > .sec-head:first-child, .hub-head + .shell .sec-head:first-child { margin-block-start: 6px; } .hub-head + .pillars { padding-block-start: 44px; } /* ========================================================================== Section banner — single-page variant Used on topic pages always, and on articles as an optional "feature" treatment. Everything inside inverts: kicker, byline, share buttons. ========================================================================== */ .hub-head--single { padding-block: 30px 40px; } .hub-head--single .crumbs { padding-block: 0; color: #93A7CB; } .hub-head--single .crumbs a { color: #B9C9E8; } .hub-head--single .crumbs a:hover { color: #F0C97A; } .hub-head--single .crumbs span { opacity: .45; } .hub-head--single h1 { color: #fff; } .hub-head--single .post__standfirst { color: #C6D3EC; } .hub-head--single .def { color: #C6D3EC; } .hub-head--single .byline { border-block-color: rgba(255, 255, 255, .18); color: #A9BEE4; } .hub-head--single .byline strong { color: #fff; } /* The featured image sits on the light page just beneath the banner, so it reads as the start of the article rather than part of the header. */ .hub-head--single + .shell .post__figure, .hub-head--single + .ph-stage { margin-block-start: 34px; } .hub-head--single .post__standfirst, .hub-head--single .def { max-inline-size: 62ch; } /* No rules above and below the metadata line inside the banner — the dark field already separates it from everything else. */ /* ========================================================================== Single-page layout: content column + media rail The content sits flush with the banner's start edge, and the space that was empty on the other side carries the article's own images. They open in the lightbox and step through each other with the arrows. ========================================================================== */ /* One size for every banner headline, section and single alike. */ .hub-head h1, .hub-head--news h1, .hub-head--single h1, .hub-head--single .post__head h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.34; } .single-grid { display: grid; grid-template-columns: 1fr; gap: 34px; } .single-col { min-inline-size: 0; } /* inside the fixed column these no longer need to centre themselves */ .single-col .prose, .single-col .slot, .single-col .tags, .single-col .intro-card, .single-col .facts, .single-col .embed, .single-col .gloss, .single-col .faq, .single-col .sources, .media-rail { min-inline-size: 0; } .media-rail__head { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); padding-block-end: 10px; margin-block-end: 18px; border-block-end: 1px solid var(--stone); } .media-rail figure { margin: 0 0 26px; } .media-rail img { inline-size: 100%; display: block; background: var(--stone); cursor: zoom-in; } .media-rail figcaption { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); margin-block-start: 9px; padding-inline-start: 10px; border-inline-start: 2px solid var(--gold); } .media-rail .hint { font-size: 12px; color: var(--ink-soft); opacity: .8; margin-block-start: 4px; } @media (min-width: 1080px) { /* content first so it lands on the start edge, aligned with the banner */ .single-grid { grid-template-columns: var(--measure) minmax(0, 1fr); gap: 52px; align-items: start; } } @media (min-width: 861px) and (max-width: 1079px) { /* Tablet: a swipeable strip above the article. Below 861px the gallery takes over. Images move above the article rather than being stranded below it, as a single swipeable row. Every thumbnail is cropped to the same ratio so the row has one height whatever the source images are. */ .media-rail { order: -1; display: flex; gap: 12px; overflow-x: auto; padding-block-end: 10px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline-start: 0; } .media-rail::-webkit-scrollbar { display: none; } .media-rail__head { display: none; } .media-rail figure { margin: 0; flex: 0 0 74%; max-inline-size: 320px; scroll-snap-align: start; } .media-rail img { aspect-ratio: 4 / 3; object-fit: cover; block-size: auto; } .media-rail figcaption { display: none; } .media-rail .hint { display: none; } /* the last item can still scroll clear of the edge */ .media-rail::after { content: ""; flex: 0 0 4px; } } /* No rules around the byline inside the banner — the dark field separates it already, and the sharing buttons have moved to the foot of the article where a reader is actually likely to want them. */ .hub-head--single .byline { border-block: 0; padding-block: 0; margin-block-start: 24px; gap: 20px; } /* ========================================================================== Banner with a featured image bleeding in from the far side The photograph enters from the edge opposite the text and dissolves into the field, so the headline always sits on flat colour and stays legible whatever the picture is doing. Direction-aware: it enters from the left in Arabic and from the right in the English and Armenian editions. ========================================================================== */ .hub-head--media { position: relative; overflow: hidden; } .hub-head--media > .shell { position: relative; z-index: 2; } .hub-head__media { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 62%; z-index: 1; pointer-events: none; } .hub-head__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .hub-head__media::after { content: ""; position: absolute; inset: 0; } /* Arabic: picture on the left, opaque at its right edge where the text is. */ [dir="rtl"] .hub-head__media::after { background: linear-gradient(to left, var(--lapis-deep) 0%, rgba(var(--band-rgb), .92) 26%, rgba(var(--band-rgb), .62) 62%, rgba(var(--band-rgb), .42) 100%); } [dir="ltr"] .hub-head__media::after { background: linear-gradient(to right, var(--lapis-deep) 0%, rgba(var(--band-rgb), .92) 26%, rgba(var(--band-rgb), .62) 62%, rgba(var(--band-rgb), .42) 100%); } /* A little more height so the picture has somewhere to live */ /* Plain block layout. This was a flex column, which made .shell a flex item — and a flex item with a max-inline-size does not position like a normal block, so the banner content sat inset while the article below it did not. Height comes from padding instead. */ .hub-head--media { padding-block: 62px 66px; } @media (max-width: 860px) { /* On a phone the picture fills the width and fades upward instead, so the headline still lands on solid colour. */ .hub-head__media { inline-size: 100%; } [dir="rtl"] .hub-head__media::after, [dir="ltr"] .hub-head__media::after { background: linear-gradient(to top, var(--lapis-deep) 18%, rgba(var(--band-rgb), .92) 52%, rgba(var(--band-rgb), .72) 100%); } .hub-head--media { padding-block: 34px 40px; } } /* Photo credit for the banner image. The licences these pictures carry require attribution, and the caption that used to hold it is gone. */ .hub-head__credit { position: absolute; inset-block-end: 12px; inset-inline-end: 20px; z-index: 3; font-size: 11.5px; color: rgba(255, 255, 255, .58); letter-spacing: .01em; } @media (max-width: 860px) { .hub-head__credit { position: static; display: block; margin-block-start: 18px; color: #93A7CB; } } /* except the reading-width caps, which are about line length not position */ .hub-head--single .post__standfirst, .hub-head--news p { max-inline-size: 62ch; } /* ========================================================================== Country entry points on الشتات Light surface: a dark figures panel now sits directly above it, and two dark fields in a row would read as one long slab. ========================================================================== */ .countries { padding-block: 46px 52px; } .countries__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-block-start: 26px; } .country-card { display: flex; align-items: center; gap: 13px; background: var(--paper); border: 1px solid var(--stone); padding: 14px 16px; transition: border-color .16s ease; } .country-card:hover { border-color: var(--gold); } .country-card .flag { inline-size: 40px; block-size: 27px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 27, 51, .16); flex-shrink: 0; } [data-theme="dark"] .country-card .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); } .country-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.4; } .country-card:hover h3 { color: var(--lapis); } .country-card .n { display: block; font-size: 12.5px; color: var(--ink-soft); margin-block-start: 3px; font-variant-numeric: tabular-nums; } /* ========================================================================== Bilateral relations grid Crossed flag pins on a light surface, for the same reason as above. ========================================================================== */ .pairs { background: var(--stone-2); border-block: 1px solid var(--stone); padding-block: 46px 52px; } .pairs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 10px; margin-block-start: 26px; } .pair-card { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--stone); padding: 11px 13px; transition: border-color .16s ease; } .pair-card:hover { border-color: var(--gold); } .pair-card .pins { inline-size: 56px; block-size: 34px; flex-shrink: 0; display: block; } .pair-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.4; } .pair-card:hover h3 { color: var(--lapis); } .pair-card .n { display: block; font-size: 12px; color: var(--ink-soft); margin-block-start: 2px; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .countries, .pairs { padding-block: 32px 38px; } .countries__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .pairs__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .country-card, .pair-card { padding: 11px 12px; gap: 9px; } .country-card .flag { inline-size: 32px; block-size: 22px; } .pair-card .pins { inline-size: 44px; block-size: 27px; } .country-card h3, .pair-card h3 { font-size: 14.5px; } } /* ========================================================================== أرمينيا: figures, standing files, cities Three blocks with deliberately different weights — a dark figures panel, a light file grid, then a compact city row — so the section does not read as three versions of the same card grid. ========================================================================== */ /* --- 1. بالأرقام ------------------------------------------------------ */ .figures { position: relative; overflow: hidden; background: var(--lapis-deep); color: #fff; padding-block: 46px 50px; margin-block-start: 8px; } .figures__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .figures__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 55%; filter: grayscale(.6); opacity: .45; } .figures::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } [dir="rtl"] .figures::before { background: linear-gradient(to left, var(--lapis-deep) 0%, rgba(var(--band-rgb),.94) 28%, rgba(var(--band-rgb),.72) 66%, rgba(var(--band-rgb),.45) 100%); } [dir="ltr"] .figures::before { background: linear-gradient(to right, var(--lapis-deep) 0%, rgba(var(--band-rgb),.94) 28%, rgba(var(--band-rgb),.72) 66%, rgba(var(--band-rgb),.45) 100%); } .figures > .shell { position: relative; z-index: 2; } .figures h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.36; } .figures h2::after { content: ""; display: block; inline-size: 64px; block-size: 4px; background: #F0C97A; margin-block-start: 14px; } .figures > .shell > p { font-size: 17px; line-height: 1.85; color: #C6D3EC; max-inline-size: 64ch; margin-block-start: 16px; } .figures__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; margin-block-start: 32px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); } .figures__grid > div { background: rgba(var(--band-rgb), .55); padding: 22px 24px; } .figures__grid b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.15; color: #F0C97A; font-variant-numeric: tabular-nums; } .figures__grid span { display: block; font-size: 15px; color: #DDE5F3; margin-block-start: 8px; line-height: 1.65; } .figures__grid em { display: block; font-style: normal; font-size: 12.5px; color: #93A7CB; margin-block-start: 8px; } .figures__credit { position: relative; z-index: 2; font-size: 11.5px; color: rgba(255,255,255,.45); margin-block-start: 22px; } @media (max-width: 720px) { .figures { padding-block: 32px 38px; } .figures__grid { grid-template-columns: 1fr; } .figures__grid b { font-size: 32px; } } /* ========================================================================== Country guide + notable figures on أرمينيا ========================================================================== */ /* --- دليل أرمينيا: flag panel beside the pinned reference articles ---- */ .guide-ar { padding-block: 46px 52px; } .guide-ar__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; margin-block-start: 26px; } .guide-ar__flag { position: static; } .guide-ar__flag svg { inline-size: 100%; block-size: auto; display: block; box-shadow: 0 0 0 1px rgba(15, 27, 51, .18), 0 6px 20px rgba(15, 27, 51, .1); } [data-theme="dark"] .guide-ar__flag svg { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); } .guide-ar__flag h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; margin-block-start: 16px; } .guide-ar__flag p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 6px; } /* rules between items only — nothing above the first or below the last */ .guide-ar__list { border-block-start: 0; } .guide-ar__list a:last-child { border-block-end: 0; } .guide-ar__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding-block: 18px; border-block-end: 1px solid var(--stone); transition: color .15s ease; } .guide-ar__list a:hover { color: var(--lapis); } .guide-ar__list h4 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.45; } .guide-ar__list p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 5px; } .guide-ar__list .go { font-size: 13px; color: var(--ink-soft); white-space: nowrap; } .guide-ar__list a:hover .go { color: var(--gold); } /* --- مشاهير من أرمينيا ------------------------------------------------ */ .people { background: var(--stone-2); border-block: 1px solid var(--stone); padding-block: 46px 52px; } .people__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-block-start: 26px; } .person { display: block; background: var(--paper); border: 1px solid var(--stone); transition: border-color .16s ease; } .person:hover { border-color: var(--gold); } .person__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--stone); } .person__img img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 20%; } .person__body { padding: 13px 15px 15px; } .person h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.4; } .person:hover h4 { color: var(--lapis); } .person span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-block-start: 4px; line-height: 1.55; } .people__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 34px; margin-block-start: 38px; padding-block-start: 30px; border-block-start: 1px solid var(--stone); } .people__lists h4 { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--lapis); margin-block-end: 10px; } .people__lists li { font-size: 15.5px; line-height: 1.9; } .people__lists a { color: var(--ink); border-block-end: 1px solid transparent; } .people__lists a:hover { color: var(--lapis); border-block-end-color: var(--gold); } .people__note { font-size: 13px; color: var(--ink-soft); margin-block-start: 26px; line-height: 1.75; } @media (max-width: 860px) { .guide-ar__grid { grid-template-columns: 1fr; gap: 24px; } .guide-ar__flag { max-inline-size: 180px; } } @media (max-width: 720px) { .guide-ar, .people { padding-block: 32px 38px; } .guide-ar__list h4 { font-size: 18px; } .guide-ar__list .go { display: none; } .people__row { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* Portrait placeholders. Real photographs of living people are almost always copyrighted, so these are monogram tiles until licensed images exist. */ .person__img--mono { display: grid; place-items: center; background: linear-gradient(150deg, var(--lapis) 0%, var(--lapis-deep) 100%); } .person__img--mono span { font-family: var(--font-display); font-weight: 800; font-size: 46px; color: rgba(255, 255, 255, .9); line-height: 1; } /* ========================================================================== Homepage identity band Most homepage visitors arrive from Facebook with no idea what the site is. This says it once, with the numbers that make the claim credible. ========================================================================== */ .about-band { position: relative; overflow: hidden; background: var(--lapis-deep); color: #fff; padding-block: 48px 52px; } /* photograph, not a line map — same treatment as the section banners */ .about-band { position: relative; } .about-band__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .about-band__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 42%; filter: grayscale(.5); opacity: .5; } .about-band .hub-head__credit { inset-block-end: 12px; inset-inline-end: 20px; } .about-band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } [dir="rtl"] .about-band::before { background: linear-gradient(to left, var(--lapis-deep) 0%, rgba(var(--band-rgb),.94) 26%, rgba(var(--band-rgb),.6) 62%, rgba(var(--band-rgb),.12) 100%); } [dir="ltr"] .about-band::before { background: linear-gradient(to right, var(--lapis-deep) 0%, rgba(var(--band-rgb),.94) 26%, rgba(var(--band-rgb),.6) 62%, rgba(var(--band-rgb),.12) 100%); } .about-band > .shell { position: relative; z-index: 2; } .about-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(25px, 3.6vw, 36px); line-height: 1.38; max-inline-size: 26ch; } .about-band h2::after { content: ""; display: block; inline-size: 64px; block-size: 4px; background: #F0C97A; margin-block-start: 15px; } .about-band > .shell > p { font-size: 17.5px; line-height: 1.85; color: #C6D3EC; max-inline-size: 64ch; margin-block-start: 17px; } .about-band__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-block-start: 32px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); } .about-band__stats > div { background: rgba(var(--band-rgb), .55); padding: 20px 22px; } .about-band__stats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.15; color: #F0C97A; font-variant-numeric: tabular-nums; } .about-band__stats span { display: block; font-size: 14.5px; color: #DDE5F3; margin-block-start: 7px; line-height: 1.6; } .about-band__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; } .about-band__cta a { font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 12px 26px; border-radius: var(--radius); background: #F0C97A; color: var(--lapis-deep); } .about-band__cta a.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); } .about-band__cta a.ghost:hover { border-color: #F0C97A; color: #F0C97A; } @media (max-width: 720px) { .about-band { padding-block: 32px 38px; } .about-band__stats { grid-template-columns: repeat(2, 1fr); } .about-band__stats b { font-size: 26px; } .about-band__cta a { flex: 1; text-align: center; } } /* ========================================================================== Timeline on الذاكرة History is the one subject where chronology is the natural index, so this block is a timeline rather than another card grid. ========================================================================== */ .timeline { padding-block: 46px 52px; } .timeline__list { position: relative; margin-block-start: 30px; padding-inline-start: 0; } .timeline__list::before { content: ""; position: absolute; inset-block: 6px 6px; inset-inline-start: 128px; inline-size: 2px; background: var(--stone); } .tl { display: grid; grid-template-columns: 116px 26px minmax(0, 1fr); gap: 0 16px; align-items: start; padding-block: 14px; } .tl__year { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--lapis); text-align: end; line-height: 1.5; font-variant-numeric: tabular-nums; padding-block-start: 2px; } .tl__dot { position: relative; } .tl__dot i { position: absolute; inset-inline-start: 6px; inset-block-start: 9px; inline-size: 12px; block-size: 12px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--vellum); } .tl h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.45; } .tl a:hover h3 { color: var(--lapis); } .tl p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.72; margin-block-start: 5px; } @media (max-width: 720px) { .timeline { padding-block: 32px 38px; } .timeline__list::before { inset-inline-start: 7px; } .tl { grid-template-columns: 26px minmax(0, 1fr); gap: 0 12px; } .tl__year { grid-column: 2; text-align: start; font-size: 15px; color: var(--gold); margin-block-end: 2px; } .tl__dot { grid-column: 1; grid-row: 1 / 3; } .tl__dot i { inset-inline-start: 2px; } .tl > div:last-child { grid-column: 2; } } /* FAQ block on دليل. Sits between the dark figures panel and the stone directory, so the page alternates rather than running two tinted bands together. */ .faq-block { padding-block: 46px 52px; } .faq-block__lead { font-size: 16px; color: var(--ink-soft); line-height: 1.8; max-inline-size: 66ch; margin-block-start: -4px; } .faq-block .faq { max-inline-size: none; margin-block-start: 26px; } @media (max-width: 720px) { .faq-block { padding-block: 32px 38px; } } /* ========================================================================== Mobile navigation Below 860px the top bar and the horizontal nav are replaced by a single button opening a full-screen panel. The search field is moved into the panel rather than duplicated, so there is only ever one search input and its autocomplete keeps working. ========================================================================== */ .nav-toggle { display: none; } .mnav { position: fixed; inset: 0; z-index: 200; background: var(--lapis-deep); padding: 22px 24px 40px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .mnav.open { opacity: 1; visibility: visible; } body.mnav-open { overflow: hidden; } .mnav__close { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 44px; block-size: 44px; display: grid; place-items: center; color: #fff; } .mnav__close svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .mnav__inner { max-inline-size: 460px; margin-block-start: 62px; } .mnav .hsearch { margin-block-end: 26px; } .mnav .hsearch__input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; font-size: 17px; padding-block: 15px; } .mnav .hsearch__input::placeholder { color: #A9BEE4; } .mnav .hsearch__icon { stroke: #A9BEE4; } .mnav__links a { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.4; color: #fff; padding-block: 13px; } .mnav__links a[aria-current="page"] { color: #F0C97A; } .mnav__foot { margin-block-start: 28px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .mnav__foot .btn-letter { background: #F0C97A; color: var(--lapis-deep); } .mnav__langs { display: flex; gap: 16px; margin-block-start: 22px; } .mnav__langs a, .mnav__langs button { font-size: 15px; color: #B9C9E8; } .mnav__langs a:hover, .mnav__langs button:hover { color: #F0C97A; } @media (max-width: 860px) { .topbar { display: none; } .nav { display: none; } .masthead__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; } } /* One unit rather than a field plus a button: the container carries the surface, the input sits transparent inside it, and the whole thing lifts on focus. Aligned to the far end of the masthead row. */ .masthead .hsearch { max-inline-size: 500px; inline-size: 100%; justify-self: end; display: flex; gap: 0; background: rgba(255, 255, 255, .45); border: 1px solid rgba(15, 27, 51, .08); border-radius: var(--radius); /* not overflow:hidden — that clipped the suggestions panel, which is positioned inside this container. The button rounds its own corners. */ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .masthead .hsearch:hover { background: rgba(255, 255, 255, .68); } .masthead .hsearch:focus-within { background: #fff; border-color: rgba(29, 59, 122, .3); box-shadow: 0 3px 16px rgba(15, 27, 51, .1); } .masthead .hsearch__input { flex: 1; min-inline-size: 0; background: transparent; border: 0; border-radius: 0; font-size: 15.5px; padding-block: 13px; padding-inline: 44px 14px; color: var(--ink); } .masthead .hsearch__input:focus { box-shadow: none; background: transparent; } .masthead .hsearch__input::placeholder { color: rgba(15, 27, 51, .42); } .masthead .hsearch__icon { inline-size: 17px; block-size: 17px; inset-inline-start: 16px; stroke: rgba(15, 27, 51, .42); transition: stroke .2s ease; } .masthead .hsearch:focus-within .hsearch__icon { stroke: var(--lapis); } .masthead .hsearch__btn { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 0 22px; border-start-end-radius: calc(var(--radius) - 1px); border-end-end-radius: calc(var(--radius) - 1px); border-start-start-radius: 0; border-end-start-radius: 0; background: var(--lapis); color: #fff; transition: background .16s ease; } .masthead .hsearch__btn:hover { background: var(--lapis-deep); } /* the cycling placeholder gets a caret so it reads as an invitation to type */ .masthead .hsearch__input::placeholder { transition: color .2s ease; } .masthead .hsearch:focus-within .hsearch__input::placeholder { color: rgba(15, 27, 51, .3); } .masthead .ac { inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 60; } /* Mobile masthead: wordmark and the menu button only. This must sit after the desktop grid rule above, or it loses on source order — which is what broke the hamburger row. */ @media (max-width: 860px) { .masthead__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .masthead__inner::after { display: none; } .masthead .hsearch { display: none; } .nav-toggle { justify-self: end; } } /* Social links in the blue bar */ .nav__social { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; padding-inline-start: 14px; } .nav__social a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border-block-end: 0; color: #C6D3EC; border-radius: 50%; transition: color .15s ease, background .15s ease; } .nav__social a:hover { color: #F0C97A; background: rgba(255, 255, 255, .1); border-block-end-color: transparent; } .nav__social svg { inline-size: 19px; block-size: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 860px) { .nav__social { display: none; } .mnav .hsearch { display: flex; gap: 8px; } .mnav .hsearch__btn { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 0 20px; border-radius: var(--radius); background: #F0C97A; color: var(--lapis-deep); } } /* ========================================================================== RESTORED — the block below was removed by a bad edit and is put back as it was: blue nav, masthead tint, mobile nav and gallery, footer accordion, and the small components that went with them. ========================================================================== */ /* ---- masthead + blue nav ------------------------------------------------ */ .masthead { background: var(--masthead-bg); border-block-end: 0; } .nav { background: var(--lapis); border-block-end: 0; } .nav__inner { display: flex; align-items: center; } .nav a { color: #fff; border-block-end: 3px solid transparent; margin-block-end: 0; } .nav a:hover { color: #F0C97A; border-block-end-color: rgba(255, 255, 255, .45); } .nav a[aria-current="page"] { color: #F0C97A; border-block-end-color: #F0C97A; } /* ---- social links in the bar ------------------------------------------- */ .nav__social { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; padding-inline-start: 14px; } .nav__social a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border-block-end: 0; color: #C6D3EC; border-radius: 50%; transition: color .15s ease, background .15s ease; } .nav__social a:hover { color: #F0C97A; background: rgba(255, 255, 255, .1); border-block-end-color: transparent; } .nav__social svg { inline-size: 19px; block-size: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---- hidden section heading -------------------------------------------- */ .vh { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- country group labels on الشتات ------------------------------------ */ .countries__label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--ink-soft); margin-block: 34px 0; } .countries__label:first-of-type { margin-block-start: 24px; } .countries__label + .countries__grid { margin-block-start: 12px; } /* ---- note boxes --------------------------------------------------------- */ .tpx-note { background: var(--stone-2); border: 1px solid var(--stone); border-block-start: 3px solid var(--lapis); padding: 24px 28px; } .tpx-note h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-block-end: 7px; } .tpx-note p { font-size: 15px; color: var(--ink-soft); line-height: 1.8; max-inline-size: 76ch; } .tpx-notes { padding-block: 34px 0; display: grid; gap: 14px; } .tpx-note--cta { border-block-start-color: var(--gold); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; } .tpx-note--cta .btn-letter { white-space: nowrap; } .tpx-notes + .figures { margin-block-start: 44px; } /* ---- single-page banner on mobile --------------------------------------- */ @media (max-width: 860px) { .hub-head.hub-head--single { background: transparent; color: var(--ink); padding-block: 22px 6px; } .hub-head--single .hub-head__photo, .hub-head--single .hub-head__media, .hub-head--single .hub-head__credit { display: none; } .hub-head--single::before, .hub-head--single.hub-head--media::before, [dir="rtl"] .hub-head--single.hub-head--media::before, [dir="ltr"] .hub-head--single.hub-head--media::before { display: none; background: none; } .hub-head--single h1 { color: var(--ink); } .hub-head--single .post__standfirst, .hub-head--single .def { color: var(--ink-soft); } .hub-head--single .crumbs, .hub-head--single .crumbs a { color: var(--ink-soft); } .hub-head--single .crumbs a:hover { color: var(--vermilion); } .hub-head--single .crumbs span { opacity: .5; } .hub-head--single .byline { color: var(--ink-soft); } .hub-head--single .byline strong { color: var(--ink); } } /* ---- mobile gallery ------------------------------------------------------ */ .media-rail--hero { position: relative; } .media-rail--hero .media-rail__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; } .media-rail--hero .media-rail__track::-webkit-scrollbar { display: none; } .media-rail--hero figure { margin: 0; flex: 0 0 100%; scroll-snap-align: start; } .media-rail--hero img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; } .media-rail--hero figcaption, .media-rail--hero .hint, .media-rail--hero .media-rail__head { display: none; } .gal-btn { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(15, 27, 51, .55); border: 1px solid rgba(255, 255, 255, .3); color: #fff; z-index: 2; } .gal-btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gal-btn[hidden] { display: none; } .gal-prev { inset-inline-end: 12px; } .gal-next { inset-inline-start: 12px; } .gal-count { position: absolute; inset-block-end: 12px; inset-inline-end: 14px; z-index: 2; background: rgba(15, 27, 51, .6); color: #fff; font-size: 12.5px; padding: 4px 11px; border-radius: 20px; font-variant-numeric: tabular-nums; } /* ---- footer accordion on mobile ------------------------------------------ */ @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; gap: 0; } .footer__about { margin-block-end: 24px; } .footer .facc + .facc { border-block-start: 1px solid rgba(255, 255, 255, .14); } .footer .facc > h4 { margin: 0; padding-block: 18px; padding-inline-end: 34px; position: relative; cursor: pointer; user-select: none; } .footer .facc > h4::after { content: ""; position: absolute; inset-inline-end: 6px; inset-block-start: 50%; inline-size: 9px; block-size: 9px; margin-block-start: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; opacity: .75; } .footer .facc.open > h4::after { transform: rotate(-135deg); margin-block-start: -2px; } .footer .facc > ul { display: none; padding-block-end: 14px; } .footer .facc.open > ul { display: block; } .footer li { margin-block-end: 13px; } .footer__bottom { margin-block-start: 28px; } } /* ---- mobile masthead: wordmark and the menu button only ------------------ */ @media (max-width: 860px) { .masthead { background: var(--paper); } .masthead__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .masthead .hsearch { display: none; } .nav-toggle { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border: 1px solid rgba(15, 27, 51, .18); border-radius: var(--radius); color: var(--ink); justify-self: end; } .nav-toggle svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nav__social { display: none; } .mnav .hsearch { display: flex; gap: 8px; } .mnav .hsearch__btn { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 0 20px; border-radius: var(--radius); background: #F0C97A; color: var(--lapis-deep); } } /* ========================================================================== Lede gallery on single pages The dark banner is gone here too. The page opens on the article's images, full width and swipeable, then the breadcrumb, headline, standfirst and byline, then the text in one centred column with no sidebar. ========================================================================== */ /* Desktop: the gallery sits in the reading column, not edge to edge, with room between it and the nav. Full-bleed is a phone treatment. */ .lede-gallery { max-inline-size: var(--measure); margin: 38px auto 0; } .lede-gallery.media-rail--hero img { aspect-ratio: 16 / 10; } .lede-gallery .media-rail__track { border-radius: var(--radius); } .post__head { max-inline-size: var(--measure); margin-inline: auto; padding-block: 34px 0; } .post__head .crumbs { padding-block: 0 0; } .post__head h1 { margin-block-start: 14px; } /* one column, no rail */ .post > .prose, .post > .sources, .post > .tags, .post > .intro-card, .post > .embed, .post > .gloss, .post > .faq, .post > .facts { max-inline-size: var(--measure); margin-inline: auto; } @media (max-width: 860px) { /* phone: edge to edge, straight under the nav */ .lede-gallery { max-inline-size: none; margin: 0; } .lede-gallery.media-rail--hero img { aspect-ratio: 4 / 3; } .lede-gallery .media-rail__track { border-radius: 0; } .post__head { padding-block: 20px 0; } } /* ========================================================================== Article: news shape and reference shape One template, two flags. News leads with the headline and one image. Reference adds a summary box, a review date and a sources block. ========================================================================== */ /* --- source credit under the byline ------------------------------------- */ .srcline { max-inline-size: var(--measure); margin: 14px auto 0; font-size: 14px; color: var(--ink-soft); padding-inline-start: 12px; border-inline-start: 3px solid var(--stone); line-height: 1.7; } .srcline a { color: var(--lapis); border-block-end: 1px solid var(--gold); } /* --- في سطور: the summary that makes a long piece scannable ------------- */ .gist { max-inline-size: var(--measure); margin: 30px auto 0; background: var(--stone-2); border-inline-start: 4px solid var(--gold); padding: 22px 26px; } .gist h2 { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--ink-soft); margin-block-end: 12px; } .gist li { position: relative; padding-inline-start: 20px; font-size: 16.5px; line-height: 1.8; margin-block-end: 9px; } .gist li:last-child { margin-block-end: 0; } .gist li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em; inline-size: 7px; block-size: 7px; background: var(--gold); transform: rotate(45deg); } /* --- single figure, when there is no gallery ---------------------------- */ .lede-figure { max-inline-size: var(--measure); margin: 30px auto 0; } .lede-figure img { inline-size: 100%; display: block; border-radius: var(--radius); cursor: zoom-in; } .lede-figure figcaption { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 10px; padding-inline-start: 12px; border-inline-start: 3px solid var(--gold); } /* --- correction / update note at the foot ------------------------------- */ .corr { max-inline-size: var(--measure); margin: 40px auto 0; padding-block-start: 20px; border-block-start: 1px solid var(--stone); font-size: 14px; color: var(--ink-soft); line-height: 1.8; } .corr b { color: var(--ink); font-weight: 600; } /* body a touch larger — 17px runs light on a 760px Arabic measure */ .prose > p { font-size: 18.5px; } @media (max-width: 720px) { .gist { padding: 18px 20px; } .gist li { font-size: 15.5px; } .prose > p { font-size: 17.5px; } } /* ========================================================================== Article refinements ========================================================================== */ /* No rules bracketing the byline on desktop — the spacing separates it. */ .post__head .byline { border-block: 0; padding-block: 0; margin-block-start: 20px; } @media (max-width: 860px) { /* Phone order: image, then breadcrumb, headline, standfirst, byline, rule, text. The gallery is reordered rather than moved in the DOM. */ .post { display: flex; flex-direction: column; } /* No negative margins. The wrapper drops its side padding so the image is naturally full width, and the text blocks carry their own padding. This cannot overflow, which the margin trick could. */ .shell--post { padding-inline: 0; padding-block-start: 0; } .shell--post > .post > .post__head, .shell--post > .post > .prose, .shell--post > .post > .gist, .shell--post > .post > .sources, .shell--post > .post > .tags, .shell--post > .post > .corr, .shell--post > .post > .intro-card { padding-inline: 24px; } .post > .lede-gallery, .post > .lede-figure { order: -1; inline-size: 100%; max-inline-size: none; margin: 0; border-radius: 0; } .post > .lede-gallery .media-rail__track, .post > .lede-figure img { border-radius: 0; } /* caption belongs in the lightbox on a phone, not under the image */ .post > .lede-figure figcaption { display: none; } .post__head { padding-block: 18px 0; } /* a single rule closing the header, before the text begins */ .post__head .byline { padding-block-end: 18px; border-block-end: 1px solid var(--stone); } /* the topic strip is desktop-only */ .post > .tags { display: none; } } /* ========================================================================== شخصيات — the people directory Every name on the four section pages leads here. Cards carry a photograph where one is freely licensed and a monogram where none exists yet. ========================================================================== */ .ppl { padding-block: 34px 56px; } .ppl__lead { font-size: 17px; line-height: 1.85; color: var(--ink-soft); max-inline-size: 70ch; margin-block-start: 14px; } .ppl__count { display: block; font-size: 14px; color: var(--ink-soft); margin-block-start: 12px; font-variant-numeric: tabular-nums; } .ppl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-block-start: 26px; } .ppl-card { display: block; background: var(--paper); border: 1px solid var(--stone); transition: border-color .16s ease; } .ppl-card:hover { border-color: var(--gold); } .ppl-card__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--stone); } .ppl-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 18%; } .ppl-card__img--mono { display: grid; place-items: center; background: linear-gradient(150deg, var(--lapis) 0%, var(--lapis-deep) 100%); } .ppl-card__img--mono span { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: rgba(255, 255, 255, .9); line-height: 1; } .ppl-card__body { padding: 14px 16px 16px; } .ppl-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.4; } .ppl-card:hover h3 { color: var(--lapis); } .ppl-card .role { display: block; font-size: 13px; color: var(--ink-soft); margin-block-start: 5px; line-height: 1.6; } .ppl-card .grp { display: inline-block; font-size: 11.5px; color: var(--ink-soft); margin-block-start: 10px; padding: 3px 9px; background: var(--stone-2); border: 1px solid var(--stone); border-radius: 2px; } .ppl__note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; margin-block-start: 34px; padding-block-start: 20px; border-block-start: 1px solid var(--stone); max-inline-size: 76ch; } @media (max-width: 720px) { .ppl { padding-block: 22px 38px; } .ppl__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ppl-card__img--mono span { font-size: 34px; } .ppl-card h3 { font-size: 15px; } } /* ========================================================================== أماكن — the places directory Same card model as شخصيات: a photograph, the name, what it is, and where. The type and the place become taxonomy terms in WordPress, so a card can surface later on a country or city page without being duplicated. ========================================================================== */ .plc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-block-start: 26px; } .plc-card { display: block; background: var(--paper); border: 1px solid var(--stone); transition: border-color .16s ease; } .plc-card:hover { border-color: var(--gold); } .plc-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); } .plc-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; } .plc-card__body { padding: 15px 17px 17px; } .plc-card .kind { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; color: var(--vermilion); margin-block-end: 7px; } .plc-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.5px; line-height: 1.4; } .plc-card:hover h3 { color: var(--lapis); } .plc-card .where { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); margin-block-start: 9px; } .plc-card .where svg { inline-size: 14px; block-size: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; } .plc-card .note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 8px; } @media (max-width: 720px) { .plc__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .plc-card h3 { font-size: 15px; } .plc-card .note { display: none; } } /* Country flag in the place card's location line */ .plc-card .where .flag { inline-size: 19px; block-size: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 27, 51, .18); flex-shrink: 0; } /* ========================================================================== Term cards — الأطباق and ألقاب العائلات Typographic rather than photographic: the Armenian script carries the card. Photographs can be added later without changing the structure. ========================================================================== */ .term__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-block-start: 22px; } .term-card { display: block; background: var(--paper); border: 1px solid var(--stone); border-block-start: 3px solid var(--lapis); padding: 20px 22px 22px; transition: border-color .16s ease; } .term-card:hover { border-color: var(--stone); border-block-start-color: var(--gold); } .term-card .hy { display: block; font-family: 'Noto Serif Armenian', serif; font-size: 26px; line-height: 1.25; color: var(--lapis); margin-block-end: 10px; } .term-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.4; } .term-card:hover h3 { color: var(--lapis); } .term-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.75; margin-block-start: 8px; } .term-card .tag { display: inline-block; font-size: 11.5px; color: var(--ink-soft); margin-block-start: 12px; padding: 3px 9px; background: var(--stone-2); border: 1px solid var(--stone); border-radius: 2px; } @media (max-width: 720px) { .term__grid { grid-template-columns: 1fr; gap: 10px; } .term-card { padding: 16px 18px 18px; } .term-card .hy { font-size: 23px; } } /* Innovation cards: no Armenian headline, so the person's name carries the line under the title, and the flag sits in the tag with the country. */ .inv-card .who { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--vermilion); margin-block-start: 7px; } .inv-card .tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; } .inv-card .tag .flag { inline-size: 19px; block-size: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 27, 51, .18); flex-shrink: 0; } /* ========================================================================== الكتب — book directory Covers are set typographically rather than scanned: modern jackets are copyrighted, and mixing scanned title pages with designed tiles reads as inconsistent. Real covers can replace these without changing the markup. ========================================================================== */ .bk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; margin-block-start: 26px; } .bk-card { display: block; } .bk-card__cover { aspect-ratio: 2 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 18px; background: var(--lapis-deep); color: #fff; position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 27, 51, .14); transition: transform .18s ease, box-shadow .18s ease; } .bk-card:hover .bk-card__cover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(15, 27, 51, .2); } /* the spine edge */ .bk-card__cover::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 7px; background: rgba(0, 0, 0, .22); } .bk-card__cover .hy { font-family: 'Noto Serif Armenian', serif; font-size: 21px; line-height: 1.35; color: #F0C97A; } .bk-card__cover .yr { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; } .bk-card--v2 .bk-card__cover { background: var(--vermilion); } .bk-card--v2 .bk-card__cover .hy { color: #FFE3B0; } .bk-card--v3 .bk-card__cover { background: var(--ink); } .bk-card--v4 .bk-card__cover { background: var(--gold); color: var(--ink); } .bk-card--v4 .bk-card__cover .hy { color: var(--lapis-deep); } .bk-card--v4 .bk-card__cover .yr { color: rgba(15, 27, 51, .55); } .bk-card__body { padding-block-start: 12px; } .bk-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.4; } .bk-card:hover h3 { color: var(--lapis); } .bk-card .by { display: block; font-size: 13.5px; color: var(--vermilion); margin-block-start: 4px; } .bk-card .note { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 7px; } .bk-card .tag { display: inline-block; font-size: 11.5px; color: var(--ink-soft); margin-block-start: 9px; padding: 3px 9px; background: var(--stone-2); border: 1px solid var(--stone); border-radius: 2px; } @media (max-width: 720px) { .bk__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .bk-card__cover { padding: 15px 13px; } .bk-card__cover .hy { font-size: 17px; } .bk-card h3 { font-size: 15px; } .bk-card .note { display: none; } } /* films reuse the book card; the tag carries a flag as well as the kind */ .bk-card .tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; } .bk-card .tag .flag { inline-size: 18px; block-size: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 27, 51, .18); flex-shrink: 0; } /* ========================================================================== الأفلام — landscape thumbnails, not book covers 16:9 tiles with a film-strip edge and a play badge, so the page reads as moving pictures. Posters and stills are copyrighted, so the tile is set typographically until licensed art exists. ========================================================================== */ .fl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-block-start: 26px; } .fl-card { display: block; } .fl-card__still { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 18px 20px 16px; background: var(--lapis-deep); color: #fff; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .fl-card:hover .fl-card__still { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15, 27, 51, .22); } /* sprocket holes along the top and bottom, like a strip of film */ .fl-card__still::before, .fl-card__still::after { content: ""; position: absolute; inset-inline: 0; block-size: 11px; background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .38) 0 7px, transparent 7px 16px); opacity: .5; } .fl-card__still::before { inset-block-start: 0; } .fl-card__still::after { inset-block-end: 0; } .fl-card__still .hy { font-family: 'Noto Serif Armenian', serif; font-size: 22px; line-height: 1.35; color: #F0C97A; max-inline-size: 82%; position: relative; z-index: 1; } .fl-card__still .yr { position: absolute; inset-block-start: 18px; inset-inline-start: 20px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; } .fl-card__play { position: absolute; inset-block-start: 16px; inset-inline-end: 18px; inline-size: 30px; block-size: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); } .fl-card__play svg { inline-size: 12px; block-size: 12px; fill: #fff; } .fl-card--v2 .fl-card__still { background: var(--vermilion); } .fl-card--v2 .fl-card__still .hy { color: #FFE3B0; } .fl-card--v3 .fl-card__still { background: var(--ink); } .fl-card--v4 .fl-card__still { background: #2A3550; } .fl-card__body { padding-block-start: 12px; } .fl-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.4; } .fl-card:hover h3 { color: var(--lapis); } .fl-card .by { display: block; font-size: 13.5px; color: var(--vermilion); margin-block-start: 4px; } .fl-card .note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 7px; } .fl-card .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); margin-block-start: 10px; padding: 4px 10px; background: var(--stone-2); border: 1px solid var(--stone); border-radius: 2px; } .fl-card .tag .flag { inline-size: 18px; block-size: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 27, 51, .18); flex-shrink: 0; } @media (max-width: 720px) { .fl__grid { grid-template-columns: 1fr; gap: 16px; } .fl-card__still .hy { font-size: 19px; } } /* ========================================================================== ثقافة — a hub, not a feed The six directories have lived only in the footer. This gives them a front door, in the same shape as the other section pages. ========================================================================== */ .dir__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-block-start: 26px; } .dir-card { display: block; background: var(--paper); border: 1px solid var(--stone); border-block-start: 3px solid var(--lapis); padding: 24px 26px 26px; transition: border-color .16s ease, transform .16s ease; } .dir-card:hover { border-block-start-color: var(--gold); } .dir-card__icon { inline-size: 30px; block-size: 30px; fill: none; stroke: var(--lapis); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dir-card:hover .dir-card__icon { stroke: var(--gold); } .dir-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.4; margin-block-start: 14px; } .dir-card:hover h3 { color: var(--lapis); } .dir-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.75; margin-block-start: 8px; } .dir-card .n { display: block; font-size: 12.5px; color: var(--ink-soft); margin-block-start: 16px; padding-block-start: 12px; border-block-start: 1px solid var(--stone); font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .dir__grid { grid-template-columns: 1fr; gap: 12px; } .dir-card { padding: 20px 22px 22px; } } /* ========================================================================== الفهرس — alphabetical index ========================================================================== */ .idx { padding-block: 34px 56px; } .idx__alpha { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 24px; padding-block-end: 22px; border-block-end: 1px solid var(--stone); } .idx__chip { display: grid; place-items: center; min-inline-size: 38px; block-size: 38px; padding-inline: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--stone); border-radius: 2px; transition: background .14s ease, color .14s ease, border-color .14s ease; } .idx__chip:hover { background: var(--lapis); color: #fff; border-color: var(--lapis); } .idx__chip.is-on { background: var(--lapis); color: #fff; border-color: var(--lapis); } .idx__chip.is-off { color: var(--stone); background: transparent; cursor: default; } .idx__block { margin-block-start: 34px; scroll-margin-block-start: 20px; } .idx__letter { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--lapis); padding-block-end: 9px; border-block-end: 2px solid var(--ink); } .idx__list { columns: 3; column-gap: 34px; margin-block-start: 16px; } .idx__list li { break-inside: avoid; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 9px; border-block-end: 1px solid var(--stone-2); } .idx__list a { font-size: 16px; color: var(--ink); } .idx__list a:hover { color: var(--lapis); } .idx__list .kind { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; flex-shrink: 0; } @media (max-width: 900px) { .idx__list { columns: 2; } } @media (max-width: 620px) { .idx { padding-block: 22px 38px; } .idx__list { columns: 1; } .idx__chip { min-inline-size: 34px; block-size: 34px; font-size: 15px; } } /* Homepage directory block: eight compact cards, four across */ .guide__lead { font-size: 16px; color: var(--ink-soft); line-height: 1.8; max-inline-size: 70ch; margin-block-start: -4px; } .dir__grid--sm { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-block-start: 24px; } .dir-card--sm { padding: 20px 20px 22px; } .dir-card--sm .dir-card__icon { inline-size: 26px; block-size: 26px; } .dir-card--sm h3 { font-size: 18px; margin-block-start: 11px; } .dir-card--sm p { font-size: 13.5px; margin-block-start: 6px; } .dir-card--sm .n { margin-block-start: 12px; padding-block-start: 10px; font-size: 12px; } @media (max-width: 1000px) { .dir__grid--sm { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .dir__grid--sm { grid-template-columns: 1fr; gap: 10px; } .dir-card--sm { padding: 16px 18px 18px; } .dir-card--sm p { display: none; } } /* Dividers in the nav: one after الرئيسية, one after الذاكرة. Drawn on the items themselves, so the markup stays a plain list of links. */ @media (min-width: 861px) { .nav__inner > a:nth-child(1), .nav__inner > a:nth-child(5) { position: relative; margin-inline-end: 20px; } .nav__inner > a:nth-child(1)::after, .nav__inner > a:nth-child(5)::after { content: ""; position: absolute; inset-inline-end: -20px; inset-block-start: 50%; inline-size: 1px; block-size: 20px; margin-block-start: -10px; background: rgba(255, 255, 255, .3); } } /* ========================================================================== WordPress: dividers now come from a menu item's CSS class rather than nth-child, so reordering the menu cannot break them. ========================================================================== */ @media (min-width: 861px) { .nav__inner > a[data-divider] { position: relative; margin-inline-end: 20px; } .nav__inner > a[data-divider]::after { content: ""; position: absolute; inset-inline-end: -20px; inset-block-start: 50%; inline-size: 1px; block-size: 20px; margin-block-start: -10px; background: rgba(255, 255, 255, .3); } } /* WordPress core classes the editor can output */ .prose .alignleft { float: left; margin: 0 0 20px 24px; } .prose .alignright { float: right; margin: 0 24px 20px 0; } .prose .aligncenter { display: block; margin-inline: auto; } .prose .wp-caption { max-inline-size: 100%; } .prose .wp-caption-text, .prose figcaption { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-block-start: 10px; padding-inline-start: 12px; border-inline-start: 3px solid var(--gold); } .prose .wp-block-image { margin-block: 28px; } .prose .wp-block-image img { inline-size: 100%; block-size: auto; border-radius: var(--radius); } .screen-reader-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }