/* Theme Name: Khazzanha Theme URI: https://khazzanha.com Author: Khaled Author URI: https://khazzanha.com Description: ثيم ووردبريس احترافي لشركة "خزّنها" لخدمات تخزين ونقل العفش بالرياض. تصميم كوربوريت عصري RTL بألوان الكحلي والذهبي/البرتقالي، خط IBM Plex Sans Arabic، ومبني على Tailwind. Professional RTL WordPress theme for Khazzanha storage & moving company. Version: 1.3.0 Requires at least: 5.8 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: khazzanha Tags: rtl-language-support, custom-logo, custom-menu, featured-images, translation-ready, e-commerce */ /* ========================================================================== Tailwind (CDN) handles the bulk of styling. The rules below cover the few things the CDN config can't, plus WordPress-specific output and RTL polish. ========================================================================== */ html { scroll-behavior: smooth; } /* Prevent horizontal scroll / empty side gap without clipping fixed elements. overflow-x on (not ) keeps position:fixed children working. */ html { overflow-x: hidden; max-width: 100%; } body { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; max-width: 100%; } /* Material Symbols defaults (mirror the Stitch export) */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .icon-fill { font-variation-settings: 'FILL' 1; } /* Keep numerals & latin runs LTR inside an RTL document */ [dir="ltr"] { unicode-bidi: isolate; } /* WordPress core alignment / caption classes so the editor behaves */ .alignleft { float: left; margin: 0 0 1rem 1.5rem; } .alignright { float: right; margin: 0 1.5rem 1rem 0; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: 0.85rem; color: #44474d; text-align: center; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } /* Sticky-header offset for in-page anchors */ :target { scroll-margin-top: 90px; } /* Mobile menu (toggled by assets/js/main.js) */ .khz-mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .khz-mobile-menu.is-open { max-height: 520px; } /* ========================================================================== Article prose (single posts) — professional RTL typography ========================================================================== */ .khz-prose { font-size: 17px; line-height: 1.95; color: #191c1d; } .khz-prose > *:first-child { margin-top: 0; } /* Headings with a subtle right accent bar */ .khz-prose h2 { font-size: 28px; line-height: 1.4; font-weight: 700; color: #00030a; margin: 2.5rem 0 1rem; padding-right: 14px; border-right: 5px solid #fc9910; scroll-margin-top: 90px; } .khz-prose h3 { font-size: 22px; line-height: 1.4; font-weight: 600; color: #0a1d37; margin: 2rem 0 .75rem; scroll-margin-top: 90px; } .khz-prose h4 { font-size: 19px; font-weight: 600; color: #0a1d37; margin: 1.5rem 0 .5rem; } .khz-prose p { margin: 0 0 1.25rem; } .khz-prose a { color: #8a5100; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; } .khz-prose a:hover { color: #fc9910; } .khz-prose strong { color: #00030a; font-weight: 700; } /* Lists with custom markers */ .khz-prose ul, .khz-prose ol { margin: 0 0 1.5rem; padding-right: 0; list-style: none; } .khz-prose li { position: relative; padding-right: 1.9rem; margin-bottom: .65rem; } .khz-prose ul > li::before { content: ""; position: absolute; right: .4rem; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: #fc9910; } .khz-prose ol { counter-reset: khz-counter; } .khz-prose ol > li { counter-increment: khz-counter; } .khz-prose ol > li::before { content: counter(khz-counter); position: absolute; right: 0; top: .15em; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #0a1d37; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .khz-prose li > ul, .khz-prose li > ol { margin-top: .65rem; margin-bottom: 0; } /* Images + captions */ .khz-prose img { border-radius: .75rem; max-width: 100%; height: auto; margin: 1.5rem 0; } .khz-prose figure { margin: 2rem 0; } .khz-prose figcaption { text-align: center; font-size: 14px; color: #44474d; margin-top: .5rem; } /* Blockquote */ .khz-prose blockquote { border-right: 4px solid #fc9910; background: #f3f4f5; padding: 1.1rem 1.4rem; margin: 1.75rem 0; border-radius: .4rem; color: #2e3132; font-size: 18px; } .khz-prose blockquote p:last-child { margin-bottom: 0; } /* Tables */ .khz-prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 16px; border: 1px solid #c5c6ce; border-radius: .5rem; overflow: hidden; } .khz-prose thead { background: #0a1d37; color: #fff; } .khz-prose th, .khz-prose td { padding: 12px 14px; text-align: right; border-bottom: 1px solid #e1e3e4; } .khz-prose th { font-weight: 700; } .khz-prose tbody tr:nth-child(even) { background: #f8f9fa; } .khz-prose tbody tr:hover { background: #fff6e9; } .khz-prose tbody tr:last-child td { border-bottom: none; } /* Inline & block code */ .khz-prose code { background: #edeeef; padding: 2px 7px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .9em; color: #8a5100; direction: ltr; unicode-bidi: embed; } .khz-prose pre { background: #0a1d37; color: #e1e3e4; padding: 1.1rem 1.3rem; border-radius: .6rem; overflow-x: auto; margin: 1.75rem 0; direction: ltr; } .khz-prose pre code { background: none; color: inherit; padding: 0; } /* Horizontal rule */ .khz-prose hr { border: none; border-top: 1px solid #c5c6ce; margin: 2.5rem 0; } /* Categories / tags / meta dot */ .khz-cats a { color: #8a5100; text-decoration: none; } .khz-dot { opacity: .5; } .khz-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid #e1e3e4; } .khz-tags .material-symbols-outlined { color: #8a5100; font-size: 20px; } .khz-tags a { background: #f3f4f5; color: #44474d; text-decoration: none; font-size: 14px; padding: 5px 14px; border-radius: 9999px; border: 1px solid #e1e3e4; transition: all .2s ease; } .khz-tags a:hover { background: #fc9910; color: #2c1600; border-color: #fc9910; } /* Table of contents */ .khz-toc { background: #f3f4f5; border: 1px solid #e1e3e4; border-radius: .75rem; padding: 1.25rem 1.5rem; margin: 0 0 2rem; } .khz-toc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0a1d37; font-size: 17px; margin: 0 0 .75rem; } .khz-toc-title .material-symbols-outlined { color: #fc9910; } .khz-toc ul { list-style: none; margin: 0; padding: 0; } .khz-toc li { margin-bottom: .5rem; } .khz-toc li.khz-toc-sub { padding-right: 1.25rem; } .khz-toc a { color: #364763; text-decoration: none; font-size: 15px; border-right: 2px solid transparent; padding-right: 10px; transition: all .2s ease; } .khz-toc a:hover { color: #8a5100; border-right-color: #fc9910; } /* Article CTA box */ .khz-article-cta { margin-top: 2.5rem; background: #0a1d37; color: #fff; border-radius: .9rem; padding: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .khz-article-cta h3 { font-size: 20px; font-weight: 700; margin: 0 0 .35rem; color: #fff; } .khz-article-cta p { margin: 0; opacity: .85; font-size: 15px; } .khz-article-cta-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fc9910; color: #2c1600; font-weight: 600; padding: 12px 22px; border-radius: .4rem; text-decoration: none; transition: opacity .2s ease; } .khz-article-cta-btn:hover { opacity: .9; } @media (max-width: 600px) { .khz-prose { font-size: 16px; } .khz-prose h2 { font-size: 24px; } .khz-prose h3 { font-size: 20px; } .khz-article-cta { flex-direction: column; align-items: stretch; text-align: center; } .khz-article-cta-btn { justify-content: center; } } /* FAQ accordion (native details/summary) */ .khz-faq details { background: #ffffff; border: 1px solid #c5c6ce; border-radius: .5rem; margin-bottom: 12px; overflow: hidden; } .khz-faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; color: #00030a; display: flex; align-items: center; justify-content: space-between; font-size: 16px; } .khz-faq summary::-webkit-details-marker { display: none; } .khz-faq summary .khz-chevron { transition: transform .25s ease; color: #8a5100; } .khz-faq details[open] summary .khz-chevron { transform: rotate(180deg); } .khz-faq .khz-answer { padding: 0 20px 18px; color: #44474d; font-size: 15px; line-height: 26px; } /* Vertical moving timeline */ .khz-timeline { position: relative; } @media (min-width: 768px) { .khz-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; right: 50%; width: 2px; background: #c5c6ce; transform: translateX(50%); } } /* ========================================================================== Floating contact buttons (WhatsApp + Call) — self-contained CSS so they render on every page regardless of whether Tailwind utilities loaded. ========================================================================== */ .khz-floating { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; } .khz-fab { width: 56px; height: 56px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; cursor: pointer; } .khz-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .khz-fab-wa { background: #25D366; color: #ffffff; } .khz-fab-call { background: #fc9910; color: #2c1600; } .khz-fab .material-symbols-outlined { font-size: 28px; } .khz-fab svg { width: 28px; height: 28px; } @media (max-width: 480px) { .khz-floating { bottom: 16px; left: 16px; gap: 10px; } .khz-fab { width: 50px; height: 50px; } } /* Belt-and-suspenders: keep the main wrapper within the viewport (RTL safe) */ main, header, footer { max-width: 100%; } *, *::before, *::after { box-sizing: border-box; }