/* * QuickLink theme — v0.3 design system CSS. * Implements docs/design-v03/02 (tokens), 03 (type/grid), 04 (homepage), * 05 (page family), 06 (responsive/RTL), 07 (motion), 08 (components), * 09 (a11y/perf). Logical properties throughout; assets/css/rtl.css only * carries what logical properties cannot express (see 06 §RTL rules). */ /* --------------------------------------------------------------------- * 1. Per-language font stacks (html[lang]) — design-v03/03 §1 * ------------------------------------------------------------------- */ :root { --font-display: "Playfair Display", Georgia, serif; --font-text: Onest, "Segoe UI", system-ui, sans-serif; --ql-arabic-scale: 1; } html[lang^="ar"] { --font-display: Almarai, "IBM Plex Sans Arabic", sans-serif; --font-text: "IBM Plex Sans Arabic", Onest, Tahoma, sans-serif; --ql-arabic-scale: 0.92; } html[lang^="hi"] { --font-display: "Noto Sans Devanagari", sans-serif; --font-text: "Noto Sans Devanagari", Onest, sans-serif; } html[lang^="ru"] { --font-display: "Playfair Display", Georgia, serif; --font-text: Onest, "Segoe UI", system-ui, sans-serif; } /* --------------------------------------------------------------------- * 2. Base * ------------------------------------------------------------------- */ * { box-sizing: border-box; } html { overflow-x: hidden; scroll-behavior: auto; } @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } } body { overflow-x: hidden; font-family: var(--font-text); } html[lang^="ar"] body, html[dir="rtl"] body { line-height: 1.9; } html[lang^="hi"] body { line-height: 1.8; } /* Per design-v03/03 §2: only display-1/display-2/h2 use the display * (serif/Almarai/Noto-display) family; h3 and smaller use the text family * at 600 weight, matching the type scale table exactly. */ h1, h2, .wp-block-heading { font-family: var(--font-display); text-wrap: balance; } h3, h4, h5, h6 { font-family: var(--font-text); font-weight: 600; text-wrap: balance; color: var(--wp--preset--color--ink); line-height: 1.3; } /* The shared heading scale (report 18 S2-5). * * theme.json used to carry `styles.blocks.core/heading.typography.fontSize: * var(--wp--preset--font-size--h2)`. That preset is `--h-2`; `--h2` has never * existed, so the declaration was invalid at computed-value time, font-size * fell back to `inherit`, and EVERY `.wp-block-heading` -- the section titles * the importer writes on the homepage, the About page and the service pages -- * rendered at the inherited body size (18px at 1440). The broken override is * gone; the scale now lives here, on element selectors, so any component rule * that already sets its own size (all of them carry at least one class) keeps * winning on specificity. */ h1 { font-size: var(--wp--preset--font-size--display-2); } h2 { font-size: var(--wp--preset--font-size--h-2); } h3 { font-size: var(--wp--preset--font-size--h-3); } h4 { font-size: var(--wp--preset--font-size--h-4); } h5, h6 { font-size: var(--wp--preset--font-size--body); } /* Display headings never break mid-word (report 18 S2-3). Russian and Hindi * carry single words far longer than any English one; with * `overflow-wrap: break-word` Chromium chopped them at an arbitrary letter. * Word breaking is switched off on every heading. * * Release 0.3.2 (Fable, r15): hyphenation was `auto`, which handed the break * to Chromium's dictionary -- and Chromium duly hyphenated the Russian * display headline mid-word at every width ("нотари-/альные" at 1440, * "докумен-/тальное" at 820, three breaks at 390). A display headline is set, * not justified body copy: it wraps on word boundaries and takes the extra * line. `manual` keeps the browser from inventing breaks while still * honouring a `­` placed deliberately in the source, which is the escape * hatch if one specific word ever overflows at 390. */ h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title { overflow-wrap: normal; word-break: normal; hyphens: manual; } /* Almarai only ships 700/800 (no 600); IBM Plex Sans Arabic text ships * 400/500/700. Arabic h1/h2 (Almarai) and h3-h6 (Plex) both need a * available-weight override so the browser never synthesises bold. */ html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] .wp-block-heading { font-weight: 700; } html[lang^="ar"] h3, html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6 { font-weight: 700; } html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] .wp-block-heading, html[lang^="hi"] h1, html[lang^="hi"] h2, html[lang^="hi"] .wp-block-heading { line-height: 1.25; letter-spacing: 0; } /* Latin/foreign fragments inside RTL or Devanagari copy stay isolated and left-to-right (brand name, emails, phone numbers, URLs) — design-v03/06. */ bdi, .ql-bdi { unicode-bidi: isolate; } :focus-visible { outline: 3px solid var(--wp--preset--color--brand-blue-deep); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--wp--preset--color--navy-950); color: var(--wp--preset--color--white); padding: 0.75rem 1.25rem; border-radius: var(--wp--custom--radius--s); z-index: 9999; transition: top var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-out); } .skip-link:focus { top: 8px; } /* --------------------------------------------------------------------- * 3. Layout foundation — report 16 §1.1 / §2 D1 * * Division of labour (Fable decision 2026-09-22, Q2): * - core `alignfull` owns the BAND: background, edge-to-edge bleed. * - `.ql-container-*` owns the MEASURE inside the band (1280/1080/720). * - theme.json `contentSize: 720px` stays the default measure for * un-composed post content (articles, legal pages, imported pages). * * Every composed section in every template and in QL_Layout_Apply now * carries align:"full"; before this, core's zero-specificity constrained * rule clamped each one to 720px at every viewport. * ------------------------------------------------------------------- */ /* The header/footer template parts wrap their own
/