/* ========================================================================== ATHAR · أَثَر — prototype design system Single stylesheet. No frameworks, no remote assets, no build step. Bidirectional: all directional rules use CSS logical properties so the same declarations serve Arabic RTL and English LTR without overrides. ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { /* Brand */ --ink: #1B2A41; /* primary */ --ink-90: #26374F; --teal: #3E7C77; /* secondary */ --teal-dark: #2F6460; /* secondary, text-safe 6.37:1 */ --accent: #C8873E; /* DECORATIVE ONLY — 2.84:1, never used for text */ --accent-text: #8A5A1E; /* text-safe accent 5.57:1 */ /* Surfaces */ --bg: #FBF8F3; /* warm ivory */ --surface: #FFFFFF; --surface-2: #F5F1EA; --surface-sunken: #F0EBE2; /* Text */ --text: #1B2A41; /* 13.63:1 on --bg AAA */ --text-muted: #54637A; /* 5.76:1 on --bg AA */ --text-invert: #FBF8F3; /* Lines */ --border: #E3DDD3; --border-strong: #CFC6B8; /* Status */ --success: #2F7A4F; --warning: #8A5A1E; --error: #A33A32; --link: #2F6460; --link-hover: #1B2A41; --focus: #C8873E; /* Advertisement */ --ad-label: #7A8797; --ad-bg: #F5F1EA; --ad-border: #E3DDD3; /* Type scale */ --font-ar: 'Thmanyah', 'Thmanyah Sans', 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; --font-en: 'Thmanyah', 'Thmanyah Sans', 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: 1.1875rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.125rem; --fs-3xl: 2.625rem; --lh-tight: 1.25; --lh-body: 1.85; /* Arabic long-form needs more leading than Latin */ /* Space */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(27,42,65,.06), 0 4px 16px rgba(27,42,65,.05); --measure: 68ch; --wrap: 1180px; } /* Dark reading mode — opt-in via [data-theme="dark"] on */ :root[data-theme="dark"] { --ink: #E8EDF2; --teal: #7FB5B0; --teal-dark: #7FB5B0; --accent: #E0A860; --accent-text: #E0A860; --bg: #141C28; --surface: #1B2530; --surface-2: #202B38; --surface-sunken: #10161F; --text: #E8EDF2; /* 14.54:1 AAA */ --text-muted: #9BA9BA; /* 7.16:1 AAA */ --text-invert: #141C28; --border: #2C3846; --border-strong: #3C4A5A; --link: #7FB5B0; --link-hover: #A8D0CC; --ad-bg: #1B2530; --ad-border: #2C3846; --ad-label: #8A97A6; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ar); font-size: var(--fs-base); line-height: var(--lh-body); overflow-x: hidden; /* belt-and-braces against horizontal overflow */ } html[lang="en"] body, [lang="en"] { font-family: var(--font-en); } html[lang="en"] { --lh-body: 1.7; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--s3); font-weight: 700; } h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; } h2 { font-size: var(--fs-xl); margin-top: var(--s7); } h3 { font-size: var(--fs-lg); margin-top: var(--s5); } p { margin: 0 0 var(--s4); } a { color: var(--link); text-underline-offset: .22em; text-decoration-thickness: 1px; } a:hover { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } /* Long-form articles never use the heaviest weight (readability rule) */ .prose { font-weight: 400; } .prose h2, .prose h3 { font-weight: 700; } /* ---------------------------------------------------------------- layout */ .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: var(--s4); background: var(--ink); color: var(--text-invert); padding: var(--s3) var(--s4); border-radius: var(--radius); z-index: 200; } .skip-link:focus { inset-block-start: var(--s3); } .grid-2 { display: grid; gap: var(--s6); grid-template-columns: 1fr; } @media (min-width: 1024px) { .grid-2 { grid-template-columns: minmax(0,1fr) 320px; } } .cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%,240px), 1fr)); } /* ---------------------------------------------------------------- header */ .site-header { background: var(--surface); border-block-end: 1px solid var(--border); position: sticky; inset-block-start: 0; z-index: 100; } .header-bar { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s3); } .brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--text); } .brand svg { inline-size: 38px; block-size: 38px; flex: none; } .brand-name { font-size: var(--fs-md); font-weight: 700; line-height: 1.1; } .brand-desc { font-size: var(--fs-xs); color: var(--teal-dark); line-height: 1.1; } .nav-desktop { display: none; margin-inline-start: auto; } @media (min-width: 900px) { .nav-desktop { display: flex; align-items: center; gap: var(--s5); } .nav-toggle { display: none; } } .nav-desktop a { color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; padding-block: var(--s2); } .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--teal-dark); box-shadow: inset 0 -2px 0 var(--accent); } .header-tools { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; } @media (min-width: 900px) { .header-tools { margin-inline-start: 0; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-inline-size: 44px; min-block-size: 44px; /* touch target */ background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; font: inherit; font-size: var(--fs-xs); padding-inline: var(--s3); } .icon-btn:hover { background: var(--surface-2); } .icon-btn svg { inline-size: 20px; block-size: 20px; } .nav-toggle { display: inline-flex; } /* mobile nav */ .nav-mobile { display: block; background: var(--surface); border-block-end: 1px solid var(--border); padding: var(--s4) 0 var(--s5); } .nav-mobile[hidden] { display: none; } .nav-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); } .nav-mobile a { display: block; padding: var(--s3) var(--s3); border-radius: var(--radius); text-decoration: none; color: var(--text); font-weight: 600; min-block-size: 44px; } .nav-mobile a:hover { background: var(--surface-2); } @media (min-width: 900px) { .nav-mobile { display: none !important; } } /* ---------------------------------------------------------------- hero + search */ .hero { padding-block: var(--s7) var(--s6); } .hero h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.625rem); max-inline-size: 22ch; } .hero-lede { font-size: var(--fs-md); color: var(--text-muted); max-inline-size: 60ch; } .dream-search { margin-block-start: var(--s5); max-inline-size: 620px; } .dream-search form { display: flex; gap: var(--s2); } .dream-search input[type="search"] { flex: 1 1 auto; min-inline-size: 0; padding: var(--s3) var(--s4); font: inherit; font-size: var(--fs-base); background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong); border-radius: var(--radius); } .dream-search input::placeholder { color: var(--text-muted); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-block-size: 44px; padding: var(--s3) var(--s5); background: var(--ink); color: var(--text-invert); border: 1.5px solid var(--ink); border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--ink-90); color: var(--text-invert); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .search-hints { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: var(--s3); } .search-hints a { margin-inline-end: var(--s3); } /* ---------------------------------------------------------------- honesty notice */ .notice { border: 1px solid var(--border); border-inline-start: 4px solid var(--teal); background: var(--surface-2); border-radius: var(--radius); padding: var(--s4) var(--s5); font-size: var(--fs-sm); margin-block: var(--s5); } .notice strong { color: var(--teal-dark); } .notice-warn { border-inline-start-color: var(--warning); } .notice-warn strong { color: var(--warning); } /* ---------------------------------------------------------------- sections */ .section { padding-block: var(--s7); } .section-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-block-end: var(--s5); } .section-head h2 { margin: 0; } .section-head .more { margin-inline-start: auto; font-size: var(--fs-sm); font-weight: 600; } /* ---------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .card-media { aspect-ratio: 16 / 9; background: var(--surface-sunken); position: relative; } .card-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; } .card h3 { margin: 0; font-size: var(--fs-base); } .card h3 a { color: var(--text); text-decoration: none; } .card h3 a:hover { color: var(--teal-dark); } .card p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .card-meta { margin-block-start: auto; font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: var(--s3); flex-wrap: wrap; } /* placeholder image (no generated imagery available — see IMAGE_SYSTEM.md) */ .ph { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s1); text-align: center; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(27,42,65,.035) 10px 20px), var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-xs); padding: var(--s3); } .ph b { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); } /* ---------------------------------------------------------------- A–Z index */ .az { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .az a { min-inline-size: 46px; min-block-size: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); font-weight: 700; font-size: var(--fs-md); } .az a:hover { background: var(--ink); color: var(--text-invert); border-color: var(--ink); } .az a[aria-disabled="true"] { opacity: .35; pointer-events: none; } .az span[aria-disabled="true"] { min-inline-size: 46px; min-block-size: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-weight: 700; font-size: var(--fs-md); opacity: .5; } .symbol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%,200px), 1fr)); } .symbol-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); min-block-size: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); } .symbol-list a:hover { border-color: var(--teal); } .symbol-list .count { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); } /* ---------------------------------------------------------------- article */ .article-header { padding-block: var(--s6) var(--s4); } .breadcrumb { font-size: var(--fs-xs); color: var(--text-muted); margin-block-end: var(--s3); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .breadcrumb li + li::before { content: "›"; margin-inline-end: var(--s2); color: var(--border-strong); } .byline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--text-muted); padding-block: var(--s3); border-block: 1px solid var(--border); margin-block: var(--s4); } .byline b { color: var(--text); font-weight: 600; } .badge { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--s2); border-radius: 999px; border: 1px solid currentColor; } .badge-verified { color: var(--success); } .badge-attributed{ color: var(--accent-text); } .badge-pending { color: var(--text-muted); } .answer-box { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--teal); border-radius: var(--radius-lg); padding: var(--s5); margin-block: var(--s5); } .answer-box h2 { margin: 0 0 var(--s3); font-size: var(--fs-md); color: var(--teal-dark); } .answer-box p:last-child { margin-bottom: 0; } .prose { max-inline-size: var(--measure); } .prose h2 { padding-block-end: var(--s2); border-block-end: 1px solid var(--border); } .prose ul, .prose ol { padding-inline-start: var(--s5); margin-block: 0 var(--s4); } .prose li { margin-block-end: var(--s2); } .prose blockquote { margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--surface-2); border-inline-start: 3px solid var(--accent); border-radius: var(--radius); font-size: var(--fs-sm); } /* table of contents */ .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-block: var(--s5); } .toc summary { padding: var(--s4); cursor: pointer; font-weight: 700; list-style: none; min-block-size: 44px; display: flex; align-items: center; gap: var(--s2); } .toc summary::-webkit-details-marker { display: none; } .toc summary::after { content: "▾"; margin-inline-start: auto; color: var(--text-muted); } .toc[open] summary::after { content: "▴"; } .toc ol { margin: 0; padding: 0 var(--s5) var(--s4); } .toc li { margin-block-end: var(--s2); } /* two-column comparison */ .compare { overflow-x: auto; margin-block: var(--s5); } .compare table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-inline-size: 460px; } .compare th, .compare td { padding: var(--s3); border: 1px solid var(--border); text-align: start; vertical-align: top; } .compare thead th { background: var(--surface-2); font-weight: 700; } /* the two perspective blocks must be visually distinct — never merged */ .perspective { border-radius: var(--radius-lg); padding: var(--s5); margin-block: var(--s5); border: 1px solid var(--border); } .perspective h3 { margin-block-start: 0; } .perspective-tradition { background: var(--surface); border-inline-start: 4px solid var(--accent); } .perspective-psych { background: var(--surface-2); border-inline-start: 4px solid var(--teal); } .perspective-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-block-end: var(--s2); } /* ---------------------------------------------------------------- source citation */ .citation { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4) var(--s5); margin-block: var(--s4); font-size: var(--fs-sm); position: relative; } .citation::after { /* the brand "trace" rule */ content: ""; position: absolute; inset-inline: var(--s5); inset-block-end: 0; block-size: 2px; background: var(--accent); border-radius: 2px; opacity: .6; } .citation dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: var(--s3) 0 var(--s4); } .citation dt { color: var(--text-muted); font-size: var(--fs-xs); } .citation dd { margin: 0; } .citation .cite-title { font-weight: 700; font-size: var(--fs-base); } .citation .pending { color: var(--warning); font-style: italic; } /* ---------------------------------------------------------------- related */ .related { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr)); } .related a { display: block; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); font-size: var(--fs-sm); min-block-size: 44px; } .related a:hover { border-color: var(--teal); } /* ---------------------------------------------------------------- ads (reserved space, zero CLS) */ .ad-slot { background: var(--ad-bg); border: 1px dashed var(--ad-border); border-radius: var(--radius); display: grid; place-content: center; gap: var(--s1); text-align: center; color: var(--ad-label); font-size: var(--fs-xs); margin-block: var(--s6); /* dimensions are ALWAYS explicit so the box never shifts when an ad loads */ } .ad-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ad-label); font-weight: 700; } .ad-leaderboard { block-size: 100px; } @media (min-width: 768px) { .ad-leaderboard { block-size: 90px; } } .ad-inarticle { block-size: 280px; } .ad-rect { block-size: 250px; } .ad-sidebar { block-size: 600px; position: sticky; inset-block-start: 88px; } /* Minimum separation so an ad is never adjacent to an interactive control */ .ad-slot + * { margin-block-start: var(--s6); } /* ---------------------------------------------------------------- AI tool */ .ai-form { display: grid; gap: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); } .field { display: grid; gap: var(--s2); } .field label { font-weight: 600; font-size: var(--fs-sm); } .field textarea, .field select, .field input[type="text"] { font: inherit; padding: var(--s3); border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--bg); color: var(--text); inline-size: 100%; max-inline-size: 100%; } .field textarea { min-block-size: 140px; resize: vertical; } .field .hint { font-size: var(--fs-xs); color: var(--text-muted); } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chips label { border: 1px solid var(--border-strong); border-radius: 999px; padding: var(--s2) var(--s4); font-size: var(--fs-sm); cursor: pointer; min-block-size: 40px; display: inline-flex; align-items: center; } .chips input { position: absolute; opacity: 0; pointer-events: none; } .chips input:checked + span { font-weight: 700; } .chips label:has(input:checked) { border-color: var(--teal); background: var(--surface-2); } .chips label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .ai-result { margin-block-start: var(--s5); } /* ---------------------------------------------------------------- zodiac (visually separated) */ .zodiac-zone { background: var(--surface-sunken); border-block: 1px solid var(--border-strong); padding-block: var(--s6); } .zodiac-zone .notice { background: var(--surface); } .zodiac-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%,150px),1fr)); } .zodiac-grid a { display: grid; gap: var(--s1); place-items: center; text-align: center; padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); min-block-size: 88px; } .zodiac-grid a:hover { border-color: var(--teal); } .zodiac-grid .sign { font-weight: 700; } .zodiac-grid .dates { font-size: var(--fs-xs); color: var(--text-muted); } /* ---------------------------------------------------------------- search results */ .results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); } .results li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4) var(--s5); } .results h3 { margin: 0 0 var(--s2); font-size: var(--fs-md); } .results h3 a { text-decoration: none; color: var(--text); } .results .url { font-size: var(--fs-xs); color: var(--teal-dark); font-family: var(--font-mono); word-break: break-all; } .results mark { background: #FBE9CF; color: inherit; padding: 0 2px; border-radius: 3px; } :root[data-theme="dark"] .results mark { background: #4A3A22; } .result-count { color: var(--text-muted); font-size: var(--fs-sm); margin-block-end: var(--s4); } /* ---------------------------------------------------------------- footer */ .site-footer { background: var(--ink); color: var(--text-invert); padding-block: var(--s7) var(--s5); margin-block-start: var(--s8); } :root[data-theme="dark"] .site-footer { background: var(--surface-sunken); } .site-footer a { color: #C9D6E4; } :root[data-theme="dark"] .site-footer a { color: var(--link); } .footer-cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); } .footer-cols h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: #9FB0C4; margin-block-end: var(--s3); } .footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); } .footer-bottom { margin-block-start: var(--s6); padding-block-start: var(--s4); border-block-start: 1px solid rgba(255,255,255,.14); font-size: var(--fs-xs); color: #9FB0C4; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; } /* ---------------------------------------------------------------- utilities */ .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .muted { color: var(--text-muted); } .small { font-size: var(--fs-sm); } .center { text-align: center; } .stack > * + * { margin-block-start: var(--s4); } .pill { display: inline-block; font-size: var(--fs-xs); padding: 2px var(--s3); border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); } /* prototype-only banner */ .proto-bar { background: var(--warning); color: #fff; font-size: var(--fs-xs); padding: var(--s2) var(--s4); text-align: center; } .proto-bar a { color: #fff; } /* ========================================================================== WordPress / Kadence integration layer Appended to the approved prototype stylesheet. The tokens and components above are unchanged from the approved design. ========================================================================== */ /* Kadence resets we intentionally override */ .entry-content > * { max-inline-size: none; } .entry-content { font-size: var(--fs-base); line-height: var(--lh-body); } .entry-content p, .entry-content li { font-weight: 400; } /* WordPress core alignment classes, direction-safe */ .alignwide { inline-size: min(100%, 1180px); margin-inline: auto; } .alignfull { inline-size: 100%; } .alignleft { float: inline-start; margin-inline-end: var(--s4); margin-block-end: var(--s3); } .alignright { float: inline-end; margin-inline-start: var(--s4); margin-block-end: var(--s3); } .aligncenter{ margin-inline: auto; } /* Screen-reader text (WP convention) */ .screen-reader-text { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .screen-reader-text:focus { inline-size: auto; block-size: auto; clip: auto; background: var(--ink); color: var(--text-invert); padding: var(--s3) var(--s4); border-radius: var(--radius); inset-block-start: var(--s3); inset-inline-start: var(--s4); z-index: 200; } /* ---- 1:1 editorial cover — the single approved cover ratio ---- */ .athar-cover, .post-thumbnail img, .entry-content .wp-block-post-featured-image img { aspect-ratio: 1 / 1; object-fit: cover; inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); background: var(--surface-sunken); } .athar-cover { display: block; margin-block-end: var(--s5); } @media (min-width: 768px) { /* On wide screens a full-bleed square is too tall; cap it and centre it. */ .athar-cover { max-inline-size: 560px; margin-inline: auto; } } .athar-card-media { aspect-ratio: 1 / 1; } .athar-card-media img { aspect-ratio: 1 / 1; object-fit: cover; inline-size: 100%; } /* ---- Collapsed table of contents (core plugin markup) ---- */ .athar-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-block: var(--s5); } .athar-toc > summary { padding: var(--s4); cursor: pointer; font-weight: 700; list-style: none; min-block-size: 44px; display: flex; align-items: center; gap: var(--s2); } .athar-toc > summary::-webkit-details-marker { display: none; } .athar-toc > summary::after { content: "\25BE"; margin-inline-start: auto; color: var(--text-muted); } .athar-toc[open] > summary::after { content: "\25B4"; } .athar-toc ol { margin: 0; padding: 0 var(--s5) var(--s4); } .athar-toc li { margin-block-end: var(--s2); } .athar-toc a { text-decoration: none; } .athar-toc a:hover { text-decoration: underline; } /* Anchored headings must clear the sticky header */ .entry-content :is(h2,h3)[id] { scroll-margin-block-start: 90px; } /* ---- Source citation (core plugin) ---- */ .athar-citation { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4) var(--s5); margin-block: var(--s4); font-size: var(--fs-sm); position: relative; } .athar-citation::after { content: ""; position: absolute; inset-inline: var(--s5); inset-block-end: 0; block-size: 2px; background: var(--accent); border-radius: 2px; opacity: .6; } .athar-citation .cite-title { font-weight: 700; font-size: var(--fs-base); margin: 0 0 var(--s3); } .athar-citation dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); } .athar-citation dt { color: var(--text-muted); font-size: var(--fs-xs); } .athar-citation dd { margin: 0; } .athar-citation .pending { color: var(--warning); font-style: italic; } /* ---- Zodiac section: separated by design, NOT labelled "entertainment" ---- */ body.athar-zodiac { background: var(--surface-sunken); } body.athar-zodiac .site-content > .entry-content { background: transparent; } /* ---- Ad slots: reserved height, zero CLS ---- */ .athar-ad { background: var(--ad-bg); border: 1px dashed var(--ad-border); border-radius: var(--radius); display: grid; place-content: center; gap: var(--s1); text-align: center; color: var(--ad-label); font-size: var(--fs-xs); margin-block: var(--s6); } .athar-ad + * { margin-block-start: var(--s6); } .athar-ad-leaderboard { block-size: 100px; } @media (min-width: 768px) { .athar-ad-leaderboard { block-size: 90px; } } .athar-ad-inarticle { block-size: 280px; } .athar-ad-rect { block-size: 250px; } .athar-ad-sidebar { block-size: 600px; position: sticky; inset-block-start: 88px; } /* ---- Interpreter pages ---- */ .athar-interpreter-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin-block: var(--s5); font-size: var(--fs-sm); } .athar-interpreter-meta dt { color: var(--text-muted); } .athar-interpreter-meta dd { margin: 0; } /* ---- Gutenberg editor parity ---- */ .editor-styles-wrapper { background: var(--bg); color: var(--text); } .editor-styles-wrapper .wp-block { max-inline-size: var(--measure); } /* ========================================================================== ATHAR template layer — elements introduced by the WordPress templates ========================================================================== */ /* Header CTA button */ .athar-cta { min-block-size:44px; padding-inline:var(--s4); font-size:var(--fs-xs); white-space:nowrap; } @media (max-width:640px){ .athar-cta{ display:none; } } /* Cover fallback when a post has no featured image */ .athar-cover--fallback{ display:grid; place-items:center; aspect-ratio:1/1; background:var(--surface-sunken); border-radius:var(--radius-lg); } .athar-cover--fallback svg{ inline-size:44%; block-size:44%; opacity:.55; } /* Previous / next */ .athar-prevnext{ display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:space-between; margin-block-start:var(--s7); padding-block-start:var(--s4); border-block-start:1px solid var(--border); font-size:var(--fs-sm); } .athar-prevnext a{ text-decoration:none; } .athar-prevnext a:hover{ text-decoration:underline; } /* Pagination */ .athar-pagination{ margin-block:var(--s7); } .athar-pagination .nav-links{ display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:center; } .athar-pagination .page-numbers{ min-inline-size:44px; min-block-size:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text); padding-inline:var(--s3); } .athar-pagination .page-numbers.current{ background:var(--ink); color:var(--text-invert); border-color:var(--ink); } .athar-pagination .page-numbers:hover{ background:var(--surface-2); } .athar-pagination h2.screen-reader-text{ position:absolute!important; clip:rect(0 0 0 0); inline-size:1px; block-size:1px; overflow:hidden; } /* Article cover sizing on single posts */ .article-header + .athar-cover{ max-inline-size:520px; margin-inline:auto; } /* Kill any legacy giant SVG inherited from old page blocks */ .wp-block-ultimate-post-button .ultp-btnIcon-wrap svg, .ultp-btnIcon-wrap svg{ inline-size:1em!important; block-size:1em!important; max-inline-size:1em!important; } /* Old theme leftovers must not leak into the new design */ .site-header + #masthead, .oceanwp-hidden{ display:none!important; } /* Primary nav must stay on one line, as in the approved prototype */ .nav-desktop { gap: var(--s4); } .nav-desktop a { white-space: nowrap; } @media (min-width:900px) and (max-width:1200px){ .nav-desktop { gap: var(--s3); font-size: var(--fs-xs); } .athar-cta { display:none; } } @media (min-width:1201px){ .nav-desktop { gap: var(--s4); } } /* English nav labels are longer than Arabic — tighten the desktop band so the header never forces horizontal overflow. Verified at 1024 and 1280. */ @media (min-width:900px) and (max-width:1439px){ .nav-desktop { gap: var(--s3); font-size: var(--fs-xs); } .athar-cta { display:none; } .header-bar { gap: var(--s3); } .brand-desc { display:none; } } @media (min-width:900px) and (max-width:1120px){ .nav-desktop a { font-size: 0.8125rem; } .header-tools .icon-btn { padding-inline: var(--s2); } } /* Absolute guard: the header must never be the source of page overflow */ .site-header, .header-bar { max-inline-size:100%; } .nav-desktop { min-inline-size:0; flex-wrap:nowrap; overflow:visible; }