/* Theme Name: Tazkiyah Theme URI: https://moknah.io/themes/tazkiyah Author: Moknah Author URI: https://moknah.io Description: An Arabic-first block theme for the Islamic Psychology community. Built around a reading site with five content sections, a site-wide glossary, and a directory — navy, teal and gold, right-to-left by default, with English available alongside. Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: tazkiyah Tags: blog, one-column, block-patterns, full-site-editing, rtl-language-support, translation-ready */ /* Right-to-left is the default here, not an afterthought: the layout is written with logical properties throughout, so the English side mirrors correctly without a second stylesheet. */ :root{ /* The three brand colours, sampled from the swatches in the identity file. The printed HSL labels beside them round to something slightly different; these are the values the artwork is actually drawn in, which is what the logo on the page will be matched against. */ --navy:#174064; --navy-deep:#0E2740; --teal:#26A2A2; --teal-soft:#E3F2F2; /* * The brand teal with white on it measures 3.1:1 — fine as a border or an * accent, under AA the moment it becomes the background of a button's label. * This is the same hue carried down until white clears 4.5:1, for the filled * interactive states only. The brand teal above is untouched. */ --teal-deep:#1B7E7E; --gold:#D0B574; --gold-soft:#F7F0E2; /* The identity sheet's own background, not plain white. */ --paper:#F9F9F9; --white:#fff; --ink:#16222B; --ink-2:#48606F; /* #7C8F9B measured 3.2:1 on the paper — this is the colour the dates, the inactive tabs and the small print are set in, so it was the single biggest readability problem on the site. Still plainly a muted grey at 4.9:1. */ --ink-3:#5F707D; --line:#E2E6E4; /* Cairo is the identity's own typeface — the only font embedded in the brand file, and the one the wordmark itself is drawn in. One family covers both scripts, so an English term inside an Arabic sentence stays in the same voice instead of switching face mid-line. */ --display:'Cairo','Tajawal',system-ui,sans-serif; --body:'Cairo','Tajawal',system-ui,sans-serif; --latin:'Cairo',system-ui,sans-serif; --wrap:1140px; --r:14px; --shadow:0 18px 40px -28px rgba(13,33,64,.32); } *{box-sizing:border-box} body{ background:var(--paper); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; } /* Both languages share one family now, so there is nothing to swap here. */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:28px} @media (max-width:680px){.wrap{padding-inline:20px}} a{color:inherit} /* ============================================================ HEADER */ header.site{ background:var(--white); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50; } header.site .bar{ display:flex;align-items:center;gap:26px; padding-block:13px; } /* * The wordmark, measured off the supplied lockup rather than guessed at. * * Three things the first attempt got wrong, all visible at a glance: the * English line is the same navy as the Arabic and not teal; it is set at very * nearly the same size as the Arabic rather than as a small caption under it; * and both lines are regular weight, not bold. The two lines also run to the * same width, which is what makes the block read as one mark instead of a * heading with a subtitle. * * Sizes are held in variables so the whole lockup scales from one number. */ .brand{ /* * Proportions measured off the supplied artwork rather than eyeballed. With * the mark's height as the unit: the gutter is 0.10 of it and the words run * to 2.23 of it. The type size that produces that width falls out of Cairo's * own metrics — 0.2575 — so the whole lockup scales from --mark alone and * keeps its proportions at any size. */ --mark:58px; --wm:calc(var(--mark) * .2575); display:flex;align-items:center;gap:calc(var(--mark) * .1); text-decoration:none;flex:none; /* * Mark on the left, words on the right, on both sides of the site. The header * as a whole still flips with the page, but the lockup is artwork: mirroring * it would be redrawing somebody's logo, and it stops being theirs. */ direction:ltr; } .brand img{height:var(--mark);width:auto;display:block} /* The mark is 103 × 110, not square — width has to follow the height or the motif comes out squashed. */ .brand .brand-mark{height:var(--mark);width:auto} .brand .wm{display:grid;gap:0} .brand .wm-a{ font-family:var(--display);font-weight:400; /* The two lines sit close enough in the artwork that the Arabic descenders almost meet the English caps. */ font-size:var(--wm);line-height:1.04;color:var(--navy); /* The lockup is set left-to-right, but this line is Arabic and has to shape as Arabic inside it. */ direction:rtl;unicode-bidi:isolate; } /* * 0.88 of the Arabic size with a little tracking brings the English line to the * same width as the Arabic one. The ratio is not the lockup's exactly, because * the supplied artwork spells it PSYCHOLGY and the corrected spelling is a * letter longer — setting it any larger would push the line wider than the * Arabic above it, which is the one proportion the mark depends on. * * It reads left-to-right whatever the page language, being a name rather than a * translation of one. */ .brand .wm-b{ font-family:var(--display);font-weight:400; font-size:calc(var(--wm) * .88);line-height:1.05; letter-spacing:.02em;color:var(--navy); direction:ltr;unicode-bidi:isolate; } @media (max-width:560px){ .brand{--mark:44px} } nav.main{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:wrap} nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap} nav.main a{ display:block;padding:9px 14px;border-radius:99px; font-size:15px;font-weight:500;color:var(--ink-2); text-decoration:none;transition:.18s; } nav.main a:hover{background:var(--teal-soft);color:var(--navy)} nav.main .current-menu-item > a, nav.main [aria-current="page"]{background:var(--teal-soft);color:var(--navy);font-weight:600} .hdr-actions{display:flex;align-items:center;gap:10px;flex:none} /* Polylang renders the switcher as a