/* ========================================================================== Layout — حاويات وأقسام. الخلفية متدرّجة على مستوى الصفحة كما في البوسترات. ========================================================================== */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{max-width:var(--container-narrow)} .container--wide{max-width:1280px} /* ---------- الأقسام ---------- */ .section{padding-block:var(--section);position:relative} .section--sm{padding-block:var(--section-sm)} .section--flush-top{padding-block-start:0} .section--flush-bottom{padding-block-end:0} /* الخلفية العامة متدرّجة على . الأقسام هنا تضيف طبقات خفيفة فوقها بدل ألوان مصمتة، حتى يبقى التدرّج ظاهرًا عبر الصفحة كلها. */ .section--tint{background:linear-gradient(180deg,rgba(233,220,245,0) 0%,rgba(233,220,245,.55) 50%,rgba(233,220,245,0) 100%)} .section--lav{background:rgba(242,234,250,.72)} .section--paper{background:rgba(255,255,255,.66)} .section--deep{background:var(--grad-deep);color:var(--ink-invert)} .section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:#fff} .section--deep .t-lead,.section--deep .t-muted{color:rgba(246,241,251,.72)} .section--deep .t-eyebrow{color:var(--purple-300)} /* فاصل شعري بين الأقسام */ .section--hair{border-block-start:1px solid rgba(217,199,236,.55)} /* ---------- ترويسة القسم ---------- */ .section-head{ max-width:54ch; margin-block-end:clamp(2.5rem,5vw,4rem); } .section-head--center{margin-inline:auto;text-align:center} .section-head__title{margin:0} .section-head__text{margin:.9rem 0 0} .section-head--center .section-head__text{margin-inline:auto;max-width:52ch} /* ---------- شبكات ---------- */ .grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)} .grid--2{grid-template-columns:1fr} .grid--3{grid-template-columns:1fr} .grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} /* ---------- تقسيم محتوى/صورة ---------- */ .split{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .split__body{display:flex;flex-direction:column;gap:1.15rem;min-width:0} .split--reverse .split__media{order:-1} /* تساوي ارتفاع الصورة مع عمود النص — القواعد في responsive.css عند نقطة العمودين، لأن block-size:100% بلا ارتفاع صفٍّ محدّد (عمود واحد على الجوّال) ينهار إلى auto. */ /* ---------- أدوات ---------- */ .stack{display:flex;flex-direction:column} .stack--sm{gap:.75rem} .stack--md{gap:1.25rem} .stack--lg{gap:2rem} .row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem} .row--center{justify-content:center} .u-mt{margin-block-start:1.5rem} .u-mt-lg{margin-block-start:2.5rem} .u-mt-xl{margin-block-start:clamp(2.5rem,5vw,4rem)} .u-full{width:100%} /* ---------- هيكل الصفحة ---------- */ .site{display:flex;flex-direction:column;min-height:100vh;overflow-x:clip} .site-main{flex:1}