/** * تخصيصات ثيم جمعية التنمية الأهلية بالعرضية الشمالية العامة. * * هوية «الفسيفساء الكوفية» المستمدة من الشعار: كلمة «تنمية» بالخط الكوفي المربع داخل معيّن، بتدرّج من النعناعي * (أعلى الرمز) إلى الأزرق المخضر (أسفله)، ومربعاتها الصغيرة المائلة كحبّات فسيفساء، وورقتاها الذهبيتان. * ورموزها: المعيّن (مربع مائل بزوايا ناعمة) إطاراً للصور والأيقونات، و«نقاط الكوفي» الثلاث تحت العناوين، * والورقتان الذهبيتان لمسةً في الشارات، وشبكة المعيّنات الخافتة نقشاً على قلة. * * الألوان من إعدادات الموقع في لوحة التحكم (متغيرات الأب ‎--theme-*‎)، وكل الدرجات مشتقة منها. * الثابت الوحيد نعناعي الشعار (‎--sh-mint‎) لأنه طرف التدرّج في الرمز نفسه. * القيم المقترحة من الشعار: الأساسي ‎#2f6e89‎ (الأزرق المخضر)، والثانوي ‎#bdab52‎ (ذهبي الورقتين)، * والخلفية ‎#f5f8f7‎، والنص ‎#2d363c‎ و‎#5d6b71‎. * أنماط أقسام الرئيسية في assets/css/blocks/، والهيدر وهيدر الصفحات والفوتر في ملفاتها. */ /* ========================================================================== 1) متغيرات الهوية ========================================================================== */ :root { /* نعناعي الشعار: أعلى تدرّج الرمز */ --sh-mint: #44aa8f; --sh-mint-deep: color-mix(in srgb, var(--sh-mint) 70%, var(--theme-primary)); /* الأساسي الأعمق للخلفيات الكبيرة (الإحصائيات والفوتر وهيدر الصفحات) */ --sh-deep: color-mix(in srgb, var(--theme-primary) 68%, #071a24); --theme-primary-dark: var(--sh-deep); --sh-ink: var(--theme-heading); /* الذهبي كما هو في الشعار (لا يُغمَّق)، ونسخة فاتحة للخلفيات */ --sh-gold: var(--theme-secondary); --sh-gold-soft: color-mix(in srgb, var(--theme-secondary) 16%, #ffffff); /* الخلفيات: الصفحة من الإعدادات، والبديل نعناعي خافت جداً */ --sh-stone: var(--theme-bg-body, #f5f8f7); --sh-mist: color-mix(in srgb, var(--sh-mint) 7%, var(--sh-stone)); --sh-mist-deep: color-mix(in srgb, var(--sh-mint) 16%, var(--sh-stone)); --sh-card: #ffffff; /* * تدرّج الرمز: من النعناعي إلى الأساسي. --sh-grad للعناصر الصغيرة (خطوط، أيقونات، حدود)، * و--sh-grad-deep للمساحات الكبيرة التي عليها نص أبيض (أعمق ليبقى النص مقروءاً). */ --sh-grad: linear-gradient(150deg, var(--sh-mint), var(--theme-primary)); --sh-grad-deep: linear-gradient(150deg, color-mix(in srgb, var(--sh-mint) 62%, var(--sh-deep)) 0%, var(--theme-primary) 48%, var(--sh-deep) 100%); /* الحدود والظلال */ --sh-line: rgba(var(--theme-primary-rgb), 0.12); --sh-line-strong: rgba(var(--theme-primary-rgb), 0.24); --sh-gold-line: rgba(var(--theme-secondary-rgb), 0.5); --sh-shadow: 0 1px 2px rgba(var(--theme-primary-rgb), 0.06), 0 16px 34px -20px rgba(var(--theme-primary-rgb), 0.34); --sh-shadow-hover: 0 2px 4px rgba(var(--theme-primary-rgb), 0.06), 0 28px 50px -24px rgba(var(--theme-primary-rgb), 0.46); /* زوايا البلاطات: مربعات ناعمة كمربعات الكوفي في الشعار */ --sh-radius-sm: 8px; --sh-radius: 14px; --sh-radius-lg: 22px; --sh-ease: cubic-bezier(0.22, 0.8, 0.26, 1); /* * المعيّن: قناع للصور والإطارات، مربع مائل 45° بزوايا ناعمة كمعيّن الشعار. مثال: * -webkit-mask: var(--sh-diamond) center / contain no-repeat; mask: var(--sh-diamond) center / contain no-repeat; */ --sh-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.3 3.3a8 8 0 0 1 11.4 0l41 41a8 8 0 0 1 0 11.4l-41 41a8 8 0 0 1-11.4 0l-41-41a8 8 0 0 1 0-11.4z'/%3E%3C/svg%3E"); /* * شبكة المعيّنات: نقش خافت كحبّات الفسيفساء، قناعاً يُلوَّن بأي لون عبر background. مثال: * background: rgba(255,255,255,.08); mask: var(--sh-lattice) 0 0 / var(--sh-lattice-size); */ --sh-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15.5l6.5 6.5-6.5 6.5-6.5-6.5z M0 -6.5l6.5 6.5-6.5 6.5-6.5-6.5z M44 -6.5l6.5 6.5-6.5 6.5-6.5-6.5z M0 37.5l6.5 6.5-6.5 6.5-6.5-6.5z M44 37.5l6.5 6.5-6.5 6.5-6.5-6.5z'/%3E%3C/svg%3E"); --sh-lattice-size: 44px 44px; } /* رمز الشعار بلا كتابة قناعاً (زر الهيدر والفوتر)، (مسارا association_child_sh_emblem_body وassociation_child_sh_emblem_leaves) */ :root { --sh-emblem-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-59 0 860 860%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M371 4L477 108L483 118L483 128L479 136L450 165L442 169L434 169L428 167L370 113L288 195L289 176L291 174L289 152L283 132L269 110L269 106ZM499 150L516 149L520 151L553 186L553 202L514 239L498 237L463 200L463 188L469 178ZM569 220L586 219L592 223L619 250L623 258L621 274L584 309L568 307L533 270L533 256L537 250ZM151 224L154 223L239 308L257 332L273 368L275 384L277 386L277 398L279 400L279 424L277 426L277 440L273 456L263 482L249 504L210 545L155 492L191 454L201 430L203 408L201 406L201 394L193 374L183 360L154 331L97 388L87 412L87 422L85 424L87 448L91 460L103 480L260 637L372 525L484 635L511 608L525 584L527 576L527 544L521 526L515 516L477 476L475 460L479 452L512 421L520 419L532 423L575 468L593 500L600 519L643 474L651 460L657 438L657 420L651 398L643 384L609 350L605 342L607 328L642 293L648 291L660 293L701 334L711 348L723 372L733 412L733 448L731 450L729 468L719 496L703 522L372 855L45 530L27 504L19 486L9 446L9 416L11 414L13 392L25 360L47 328ZM443 346L450 345L456 347L493 386L493 396L489 404L460 433L452 437L442 437L432 431L407 406L401 394L403 382L438 347ZM148 553L123 578L123 590L146 615L158 617L185 592L187 580L164 555ZM198 603L173 628L171 636L173 642L196 665L208 667L235 642L237 630L214 605ZM372 633L315 690L370 747L427 690L427 686ZM199 64L206 65L224 77L245 98L263 126L273 156L275 198L273 200L273 210L269 226L257 252L240 275L236 275L216 263L191 238L177 216L165 180L163 146L165 144L165 130L169 114L183 84ZM327 220L354 219L356 221L372 223L390 231L403 240L403 244L393 262L372 283L342 299L324 301L322 303L302 303L272 295L260 289L249 280L263 256L280 239L300 227Z%27/%3E%3C/svg%3E"); } /* ورقتا الشعار وحدهما قناعاً (لمسات ذهبية في السلايدر وغيره) */ :root { --sh-leaves-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='150 50 270 270'%3E%3Cpath d='M199 64L206 65L224 77L245 98L263 126L273 156L275 198L273 200L273 210L269 226L257 252L240 275L236 275L216 263L191 238L177 216L165 180L163 146L165 144L165 130L169 114L183 84ZM327 220L354 219L356 221L372 223L390 231L403 240L403 244L393 262L372 283L342 299L324 301L322 303L302 303L272 295L260 289L249 280L263 256L280 239L300 227Z'/%3E%3C/svg%3E"); } /* * رمز الشعار خطاً رفيعاً (حدود أشكاله بلا تعبئة) قناعاً، للّمسات الفنية في خلفيات الأقسام والهيدر: * background: var(--sh-grad); mask: var(--sh-emblem-line) center / contain no-repeat; */ :root { --sh-emblem-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-79 -20 900 900' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M371 4L477 108L483 118L483 128L479 136L450 165L442 169L434 169L428 167L370 113L288 195L289 176L291 174L289 152L283 132L269 110L269 106ZM499 150L516 149L520 151L553 186L553 202L514 239L498 237L463 200L463 188L469 178ZM569 220L586 219L592 223L619 250L623 258L621 274L584 309L568 307L533 270L533 256L537 250ZM151 224L154 223L239 308L257 332L273 368L275 384L277 386L277 398L279 400L279 424L277 426L277 440L273 456L263 482L249 504L210 545L155 492L191 454L201 430L203 408L201 406L201 394L193 374L183 360L154 331L97 388L87 412L87 422L85 424L87 448L91 460L103 480L260 637L372 525L484 635L511 608L525 584L527 576L527 544L521 526L515 516L477 476L475 460L479 452L512 421L520 419L532 423L575 468L593 500L600 519L643 474L651 460L657 438L657 420L651 398L643 384L609 350L605 342L607 328L642 293L648 291L660 293L701 334L711 348L723 372L733 412L733 448L731 450L729 468L719 496L703 522L372 855L45 530L27 504L19 486L9 446L9 416L11 414L13 392L25 360L47 328ZM443 346L450 345L456 347L493 386L493 396L489 404L460 433L452 437L442 437L432 431L407 406L401 394L403 382L438 347ZM148 553L123 578L123 590L146 615L158 617L185 592L187 580L164 555ZM198 603L173 628L171 636L173 642L196 665L208 667L235 642L237 630L214 605ZM372 633L315 690L370 747L427 690L427 686ZM199 64L206 65L224 77L245 98L263 126L273 156L275 198L273 200L273 210L269 226L257 252L240 275L236 275L216 263L191 238L177 216L165 180L163 146L165 144L165 130L169 114L183 84ZM327 220L354 219L356 221L372 223L390 231L403 240L403 244L393 262L372 283L342 299L324 301L322 303L302 303L272 295L260 289L249 280L263 256L280 239L300 227Z'/%3E%3C/svg%3E"); } /* ========================================================================== 2) عام ========================================================================== */ body { background-color: var(--theme-bg-body, var(--sh-stone)); } ::selection { background: rgba(var(--theme-secondary-rgb), 0.32); color: var(--sh-deep); } :focus-visible { outline-color: var(--sh-mint); } /* * أزرار تنمية الشمالية: بلاطة بزوايا ناعمة (لا كبسولة)، وسهمها داخل معيّن صغير. * عند المرور ينساب تدرّج الرمز (النعناعي إلى الأساسي) على الزر ويتقدم السهم. */ .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 22px; border: 0; border-radius: var(--sh-radius); background: linear-gradient(150deg, var(--sh-mint), var(--theme-primary) 50%, var(--theme-primary)) 100% 0 / 220% 100%; color: #ffffff; font-weight: 700; font-size: 0.95rem; line-height: 1.4; text-decoration: none; box-shadow: 0 12px 24px -14px rgba(var(--theme-primary-rgb), 0.8); transition: background-position 0.45s var(--sh-ease), box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease; } .sh-btn:hover, .sh-btn:focus-visible { background-position: 0 0; color: #ffffff; box-shadow: 0 16px 28px -14px rgba(var(--theme-primary-rgb), 0.9); transform: translateY(-1px); } /* السهم داخل معيّن صغير */ .sh-btn__arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; } .sh-btn__arrow::before { content: ''; position: absolute; inset: 3px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); transform: rotate(45deg); transition: background-color 0.3s ease; } .sh-btn__arrow svg { position: relative; width: 13px; height: 13px; transition: transform 0.3s var(--sh-ease); } .sh-btn:hover .sh-btn__arrow svg, .sh-btn:focus-visible .sh-btn__arrow svg { transform: translateX(-3px); } /* ذهبي الورقتين */ .sh-btn--gold { background: var(--theme-secondary); color: var(--sh-deep); box-shadow: 0 12px 24px -14px rgba(var(--theme-secondary-rgb), 0.9); } .sh-btn--gold:hover, .sh-btn--gold:focus-visible { background: #ffffff; color: var(--sh-deep); } .sh-btn--gold .sh-btn__arrow::before { background: rgba(255, 255, 255, 0.4); } /* بحد رفيع فوق الخلفية الفاتحة */ .sh-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sh-line-strong); color: var(--theme-primary); } .sh-btn--ghost .sh-btn__arrow::before { background: rgba(var(--theme-primary-rgb), 0.1); } .sh-btn--ghost:hover, .sh-btn--ghost:focus-visible { background: var(--theme-primary); box-shadow: inset 0 0 0 1.5px var(--theme-primary); color: #ffffff; } /* بحد رفيع فوق الخلفية الداكنة */ .sh-btn--light { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); color: #ffffff; } .sh-btn--light:hover, .sh-btn--light:focus-visible { background: #ffffff; box-shadow: inset 0 0 0 1.5px #ffffff; color: var(--sh-deep); } .sh-btn--light:hover .sh-btn__arrow::before, .sh-btn--light:focus-visible .sh-btn__arrow::before { background: rgba(var(--theme-primary-rgb), 0.12); } .sh-btn svg { flex-shrink: 0; } /* * «درج الكوفي» تحت العناوين (association_child_sh_ornament في functions.php): ثلاثة مربعات مائلة صغيرة تنحدر * قطرياً كالمربعات المتتابعة في أسفل رمز الشعار، بألوان تدرّجه: النعناعي ثم الأساسي ثم الذهبي. */ .sh-ornament { display: inline-flex; align-items: flex-start; gap: 3px; height: 18px; } .sh-ornament__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--sh-mint); transform: rotate(45deg); } .sh-ornament__dot:nth-child(2) { margin-top: 5px; background: var(--theme-primary); } .sh-ornament__dot:nth-child(3) { margin-top: 10px; background: var(--theme-secondary); } /* فوق الخلفيات الداكنة: المعيّن الأوسط أبيض */ .sh-head--light .sh-ornament__dot:nth-child(2), .sh-section--deep .sh-ornament__dot:nth-child(2), .sh-page-hero .sh-ornament__dot:nth-child(2) { background: #ffffff; } /* شارة صغيرة: بلاطة ذهبية فاتحة وورقتا الشعار */ .sh-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--sh-gold-line); border-radius: var(--sh-radius-sm); background: var(--sh-gold-soft); color: var(--sh-ink); font-size: 0.82rem; font-weight: 700; line-height: 1.5; } .sh-tag svg { width: 15px; height: 15px; color: var(--theme-secondary); } /* رمز الشعار بأحجامه الشائعة */ .sh-emblem { display: block; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .sh-btn, .sh-btn__arrow svg { transition: none; } } /* ========================================================================== 3) قالب «صفحة بعرض كامل» (templates/template-full-width.php) ========================================================================== */ .child-full-width__media { margin-bottom: 35px; border-radius: var(--sh-radius-lg); overflow: hidden; box-shadow: var(--sh-shadow); } .child-full-width__media img { width: 100%; height: auto; display: block; } .child-full-width__content { font-size: 1.12rem; line-height: 1.9; color: var(--theme-text-dark); } /* ========================================================================== 4) الصفحات الداخلية: روابط المحتوى بخط ذهبي ========================================================================== */ .page-content-wrap .entry-content a:not(.btn):not(.sh-btn) { color: var(--theme-primary); text-decoration-color: var(--theme-secondary); text-underline-offset: 4px; } .page-content-wrap .entry-content a:not(.btn):not(.sh-btn):hover { color: var(--sh-mint-deep); } /* ========================================================================== 5) الصفحات الداخلية من الأب: زوايا البلاطات موحّدة ========================================================================== */ /* متغيرات زوايا الأب: تتبعها البطاقات والنماذج والجداول في كل القوالب */ :root { --theme-radius-sm: 8px; --theme-radius-md: 14px; --theme-radius-lg: 20px; --theme-radius-xl: 26px; } /* * البطاقات والصناديق الكبيرة (20px غالباً، مكتوبة داخل القوالب): زاوية البلاطة. * ‎body:not(.home)‎ في المحدِّد ليتقدم على وسوم