/* ============================================================
بحيرة (bahira) — الدعوة امتدادٌ للوحة، لا ورقةٌ تحتها
------------------------------------------------------------
اللوحة مشهد نهارٍ على ضفّة بحيرة: سماء فاتحة، جبالٌ زرقاء بعيدة،
قنطرةُ وردٍ أبيض وأغصان، سروٌ وشرفةٌ حجرية وفانوسان نحاسيّان.
فالصفحة كلّها تنزل بالعين من السماء إلى الماء إلى الحديقة ثم إلى
حجر الشرفة، ومفرداتها الزخرفية من اللوحة نفسها: القنطرة والوردة
والغصن والدرابزين ووهج الفانوس.
كل لون هنا مقيسٌ من assets/painting.png بالبكسل لا محزوراً:
السماء #cce8fd البحيرة #94b9d0
سماء الأسفل #cee9fd الجبال #9fc3e1
ورق القنطرة #7e8568 خضرة الأرض #737548
ممرّ الحجر #c8b3a1 عاج الفستان #f2e2cc
عاج البدلة #ecdec9 نحاس الفانوس #9d8d62
حجر الدرابزين #89866a
وما زاد فهو تفتيحٌ أو تغميقٌ لأحدها لا لونٌ جديد.
الخطوط: لا خطّ خارج ما تحمّله المنصّة أصلاً — «أميري» و«رقعة عارف»
و«تجوّل» (وهي التي يبدّلها مُنتقي الخطوط: src/lib/content/fonts.ts)
و«كورمورانت» للأرقام اللاتينية (كل أرقام الدعوة لاتينية: latinDigits
في script.js)، و«الذهبي» المرفوع معنا لأسماء العروسين وحدها.
============================================================ */
/* خط الأسماء «الذهبي» — نستعليق يدعم حرف التطويل (U+0640).
گلزار لا يحمل هذا الحرف أصلاً، فالمدّ كان يُجلب من خطٍ آخر فينكسر
تسلسل النستعليق وتسقط نقطتا الياء. مرفوع معنا لا من جوجل. */
@font-face {
font-family: "Aldhabi";
src: url("/fonts/aldhabi.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
*, *::before, *::after { box-sizing: border-box; }
:root {
/* ---- ألوان اللوحة ---- */
--sky: #cce8fd;
--sky-art: #cce8fd; /* بند الواجهة يجب أن يساوي سماء اللوحة بالضبط */
--sky-low: #cee9fd;
--haze: #dfeef9; /* ضباب ما بين السماء والماء */
--lake: #94b9d0;
--lake-mid: #5f8ba4;
--lake-deep: #38607a; /* غامق الماء — حبر العناوين والأزرار */
--mountain: #9fc3e1;
--leaf: #7e8568; /* ورق القنطرة */
--leaf-low: #737548; /* خضرة الأرض */
--stone: #c8b3a1; /* ممرّ الحجر */
--stone-pale: #ece1d5;
--stone-warm: #f5efe6;
--ivory: #f2e2cc;
--ivory-cool: #ecdec9;
--brass: #9d8d62; /* نحاس الفانوس */
--brass-deep: #7a6c43; /* نفسه مغمَّقاً حتى يصلح للقراءة لا للزينة فقط */
--balus: #89866a; /* حجر الدرابزين */
--ink: #263c49;
--ink-soft: #4f6b7b;
--hair: rgba(var(--balus-rgb, 137, 134, 106), 0.24); /* شعرة بلون حجر الدرابزين */
--hair-cool: rgba(var(--lake-mid-rgb, 95, 139, 164), 0.22);
/* لوح الشرفة: مضيءٌ لا ورقيّ — تدرّجٌ شفيف يمرّر زرقة الخلفية من تحته */
--plate: linear-gradient(180deg, rgba(255,255,255,.93), rgba(253,250,245,.82));
--plate-flat: rgba(255,255,255,.62);
--shadow: 0 30px 54px -38px rgba(45,84,110,.55);
--shadow-sm: 0 16px 30px -24px rgba(45,84,110,.55);
--lit: inset 0 1px 0 rgba(255,255,255,.85);
--f-name: "Aref Ruqaa", "Amiri", serif;
--f-title: "Amiri", "Aref Ruqaa", serif;
/* الأسماء وحدها بالنستعليق (طلب الزبونة) */
--f-couple: "Aldhabi", "Aref Ruqaa", serif;
--f-body: "Tajawal", system-ui, sans-serif;
--f-serif: "Amiri", serif;
--f-ui: "Tajawal", system-ui, sans-serif;
--f-latin: "Cormorant Garamond", serif;
/* الأرقام لاتينية دائماً، فكورمورانت يلتقطها والعربي يسقط لتجوّل بعدها */
--f-num: "Cormorant Garamond", "Tajawal", serif;
/* ---- مفردات اللوحة مرسومةً: وردة، قنطرة، درابزين ---- */
/* وردة القنطرة البيضاء. مملوءةٌ لا محدَّدة بخط: هذه العلامة تُرسم بـ١٥–٢٢
بكسل، وخطٌّ سمكه بكسل واحد يصير عندها لطخة. ستّ بتلات وقلبٌ فاتح تبقى
مقروءةً وردةً حتى بأصغر مقاس. */
--rose-leaf: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%237e8568' opacity='.92'%3E%3Ccircle cx='12' cy='6.2' r='4'/%3E%3Ccircle cx='17' cy='9.1' r='4'/%3E%3Ccircle cx='17' cy='14.9' r='4'/%3E%3Ccircle cx='12' cy='17.8' r='4'/%3E%3Ccircle cx='7' cy='14.9' r='4'/%3E%3Ccircle cx='7' cy='9.1' r='4'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23f6f4ed'/%3E%3Ccircle cx='12' cy='12' r='1.25' fill='%237e8568' opacity='.85'/%3E%3C/svg%3E");
/* قنطرة القالب: قوسٌ منخفض يعلوه ورقٌ وبرعمان — عنوانٌ يجلس تحت قنطرة */
--arch: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 30' fill='none' stroke='%237e8568' stroke-linecap='round'%3E%3Cpath d='M5 28.5C5 14.5 45.5 6 104 6s99 8.5 99 22.5' stroke-width='.9' opacity='.5'/%3E%3Cpath d='M104 6c0-2.7 2.3-4.8 5.2-4.8 0 2.7-2.3 4.8-5.2 4.8Z' fill='%237e8568' stroke='none' opacity='.8'/%3E%3Cpath d='M104 6c0-2.7-2.3-4.8-5.2-4.8 0 2.7 2.3 4.8 5.2 4.8Z' fill='%237e8568' stroke='none' opacity='.8'/%3E%3Cpath d='M66 9.6c-.4-2 1-3.9 3.3-4.4.4 2-1 3.9-3.3 4.4Z' fill='%237e8568' stroke='none' opacity='.55'/%3E%3Cpath d='M142 9.6c.4-2-1-3.9-3.3-4.4-.4 2 1 3.9 3.3 4.4Z' fill='%237e8568' stroke='none' opacity='.55'/%3E%3Ccircle cx='36' cy='16' r='1.5' fill='%237e8568' stroke='none' opacity='.42'/%3E%3Ccircle cx='172' cy='16' r='1.5' fill='%237e8568' stroke='none' opacity='.42'/%3E%3C/svg%3E");
/* درابزين الشرفة: قائمٌ صغير يتكرّر تحت مسطرة حجرية */
--balustrade: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26' fill='%2389866a' opacity='.5'%3E%3Cpath d='M0 0h18v2.6H0z'/%3E%3Cpath d='M7.2 2.6h3.6v3.2c0 2 2.2 2.4 2.2 5.2s-2.2 3.2-2.2 5.2v4.2H7.2v-4.2c0-2-2.2-2.4-2.2-5.2S7.2 7.8 7.2 5.8Z'/%3E%3Cpath d='M0 20.4h18V23H0z'/%3E%3C/svg%3E");
}
html { -webkit-text-size-adjust: 100%; }
html, body {
margin: 0;
padding: 0;
overflow-x: hidden; /* clip يسقط على سفاري الآيفون — hidden أأمن */
background: var(--sky);
color: var(--ink);
font-family: var(--f-body);
font-weight: 400;
/* تحسينات قراءة العربية: أرقام مصفوفة ولِجاتورات نظيفة */
font-variant-numeric: lining-nums;
}
body.locked { overflow: hidden; height: 100%; }
img, svg, video { max-width: 100%; }
:focus-visible {
outline: 2px solid var(--lake-deep);
outline-offset: 3px;
border-radius: 4px;
}
/* ============================================================
البوّابة — بوّابةٌ بيضاء تنفتح على ممرّ اللوحة
------------------------------------------------------------
المقطع /templates/bahira/assets/entrance.mp4 (٧٢٠×١٢٨٠، ٨٫٧ث، صامت) يبدأ ببوّابةٍ
مغلقة ووردها الأبيض وينتهي بها مفتوحةً على الممرّ الحجري — الممرّ
نفسه الذي يقف عليه العروسان باللوحة. فالعبور امتدادٌ للمشهد:
البوّابة تنفتح، ثم يتمدّد ضوء الأفق، ثم تحلّ اللوحة محلّ الممرّ.
إطار البوّابة (poster) يُرى فوراً ويبقى وحده حين يُمنع التشغيل
التلقائي أو تُطلب حركةٌ مخفّضة — لا شاشة سوداء بحال.
============================================================ */
.gate {
/* 100lvh لا 100%: على سفاري iOS يُقاس العنصر الثابت بأصغر إطار عرض (والأشرطة
ظاهرة)، فحين تنزوي الأشرطة يكبر المرئيّ ولا يكبر هو — فيظهر شريط خلفية
الصفحة فوق المقطع وتحته («اريد يغطي المساحة الفوق والاسفل بالكامل»).
بأكبر إطار عرضٍ يغطّي الحالتين، وما زاد يقصّه overflow وobject-fit. */
position: fixed; inset: 0; height: 100lvh; z-index: 90;
background: var(--sky);
overflow: hidden;
transition: opacity .9s ease;
}
.gate.is-gone { opacity: 0; pointer-events: none; }
.gate-stage {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
/* على الهاتف يملأ المقطعُ الشاشة. وعلى الشاشة العريضة يُحصر بنفس عرض لوحة
الواجهة (نسبتاهما ٠٫٥٦٢ و٠٫٥٦٣ — الفرق لا يُرى)، فالبوّابة تنفتح ثم تحلّ
اللوحة محلّها في الإطار نفسه بلا قفزة مقاس. */
/* الإطارُ الساكن خلفيةً للعنصر نفسه لا سمةَ poster وحدها: لحظةَ بدء التشغيل
يُسقط المتصفّح الـposter قبل أن يُطلى أول إطارٍ مفكوك، فيُرى العنصر شفّافاً
ومضةً — وهو ما كان يظهر «اختفاء الفيديو ثم عودته» عند الضغط. الخلفية هنا
تحمل الإطارَ الأول نفسه بنفس القصّ، فما يُرى في تلك الومضة هو الصورة ذاتها. */
.gate-video {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
background: url("/templates/bahira/assets/entrance-poster.jpg") center / cover no-repeat;
}
/* الحجاب: ضبابُ صباحٍ على الماء، فاتحٌ فوق وأزرق عميق أسفل. يخفّ مع اللمسة
فتصفو الألوان لحظة انفتاح الدفّتين. */
/* 🚨 pointer-events: none شرطُ عمل البوّابة لا زينة. هذه الطبقة تملأ الشاشة،
و`z-index: 2` يرفعها داخل سياق .gate فوق زرّ اللمس (z تلقائي) — فتبتلع كل
لمسةٍ ولا تنفتح الدعوة أبداً. وقع هذا فعلاً بـ#749 حين رُفعت فوق الجناحين،
ولم تكشفه الاختبارات لأنّها تنادي btn.click() وهو يتخطّى اختبار الإصابة. */
.gate-veil {
position: absolute; inset: 0; z-index: 2; /* فوق المقطع */
pointer-events: none;
background:
linear-gradient(to bottom, rgba(var(--sky-rgb, 204, 232, 253), 0.3), rgba(var(--haze-rgb, 223, 238, 249), 0.06) 42%, rgba(var(--lake-deep-rgb, 56, 96, 122), 0.34));
transition: opacity .8s ease;
}
.gate.is-playing .gate-veil { opacity: .34; }
/* الشاشة العريضة: خلف المقطع ضبابٌ من إطاره نفسه لا حقلٌ أزرق مسطّح —
الفراغ حوله يصير جوّ المشهد، والمقطع لوحةٌ معلّقة فيه. */
/* الشاشة العريضة: خلف المقطع ضبابٌ من إطاره نفسه لا حقلٌ أزرق مسطّح —
الفراغ حوله يصير جوّ المشهد، والمقطع لوحةٌ معلّقة فيه.
بلا تفتيح: التفتيح (brightness) كان يشحّب ما حول المقطع فيصير هالةً.
وجناحا حافّةٍ ممدودان لا يصلحان هنا كما صلحا للوحة: حافّة الإطار وردٌ
وورقٌ متفرّق، ومدُّ شريطٍ منه أفقياً يخطّط الشاشة خطوطاً. */
@media (min-width: 620px) {
.gate::before {
content: ""; position: absolute; inset: -9%;
background: url("/templates/bahira/assets/entrance-poster.jpg") center / cover no-repeat;
filter: blur(54px) saturate(1.02);
pointer-events: none;
}
/* عمقٌ عند الحواف يدفع الجانبين إلى الخلف ويُبقي العين على الدفّتين */
.gate::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(104% 66% at 50% 46%, rgba(38,70,94,0) 50%, rgba(38,70,94,.2) 100%);
pointer-events: none;
}
.gate-stage { padding: min(4vh, 30px) 0; }
.gate-video {
position: relative; z-index: 1;
width: auto; height: 100%;
max-width: 100%;
aspect-ratio: 9 / 16;
border-radius: 7px;
box-shadow: 0 52px 92px -54px rgba(30,62,86,.78);
}
}
/* الضوء المنسكب حين تُفتح البوّابة — يتمدّد فيصير جسر العبور للرئيسية.
نصف القطر × آخر محطة ≤ ٥٠٪ حتى لا تُقصّ الهالة عند حافة الصندوق.
لونه ضوء شمعة الفانوس النحاسي، لا ذهبٌ عامّ. موضعه عند فتحة الدفّتين
لا وسط الشاشة: الضوء يخرج من البوّابة نفسها. */
.gate-bloom {
position: absolute; left: 50%; top: 54%; z-index: 3;
width: 40vmax; height: 40vmax;
margin-left: calc(-20vmax); margin-top: calc(-20vmax);
border-radius: 50%;
/* أبيضُ خالص لا ذهب: العبور من الفيديو إلى الرئيسية يمرّ ببياضٍ يتّسع
حتى يبتلع الشاشة، ثم يذوب البياض فتُكشف الدعوة من تحته (طلب كرار:
«الانتقال … اجمل وابيض»). شعلةٌ دافئة رقيقة بقلبه وحده كي لا يُقرأ
ومضةَ شاشةٍ باردة. */
background: radial-gradient(circle at 50% 50%,
rgba(255,255,255,1) 0%,
rgba(255,254,251,.96) 20%,
rgba(255,255,255,.62) 34%,
rgba(255,255,255,0) 50%);
opacity: 0; transform: scale(.18);
pointer-events: none;
}
.gate.is-opening .gate-bloom {
animation: bloom 1.15s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes bloom {
0% { opacity: 0; transform: scale(.18); }
40% { opacity: 1; transform: scale(1.6); }
100% { opacity: 1; transform: scale(4.6); }
}
/* البياض الكامل: لحظةَ التسليم تصير البوّابة صفحةً بيضاء (البلوم بلغ حوافّها
أصلاً فلا يُرى قطع)، ثم تذوب هي نفسها فتظهر الدعوة من داخل البياض. */
.gate.is-white { background: #fff; }
.gate.is-white .gate-stage { opacity: 0; transition: opacity .34s ease; }
.gate.is-white .gate-bloom { opacity: 0; transition: opacity .5s ease .12s; }
.gate.is-gone { transition: opacity 1s cubic-bezier(.4,0,.2,1); }
/* الشاشة كلّها مساحة لمس — والزرّ المرئي أسفلها يدلّ عليها. زرٌّ واحد لا
طبقتان: نداء الموسيقى على iOS مربوط بلمسةٍ حيّة، وأي مساحة لمسٍ ثانية
خارج الزرّ كانت تبتلع اللمسة وتُسقط اللحن. */
.gate-tap {
/* z صريحٌ فوق كل طبقات البوّابة (الحجاب ٢، الوهج ٣، المقطع ١ على العريضة):
بـz تلقائي كانت أي طبقةٍ مرفوعة تسبقه في الإصابة */
position: absolute; inset: 0; z-index: 5;
width: 100%; height: 100%;
background: none; border: 0; padding: 0;
/* عمودٌ لا صفّ: اللوح ثم شريط التحميل تحته */
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
padding-bottom: calc(38px + env(safe-area-inset-bottom));
color: inherit; font: inherit;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: opacity .5s ease, transform .5s ease;
}
.gate.is-playing .gate-tap { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* لوحٌ عاجيّ رفيع بحافّة نحاس — هيئة لوحات الشرفة نفسها، مصغَّرةً */
/* بلا backdrop-filter: طمسُ ما خلف اللوح يُعاد حسابه مع **كل إطار** من
المقطع تحته — ثمنٌ متواصل على هاتفٍ متوسّط يظهر تأخّراً في استجابة اللمسة.
وخلفيةٌ أكثف قليلاً تعطي نفس الوضوح بلا ثمن. */
.gate-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 22px;
border-radius: 999px;
border: 1px solid rgba(var(--brass-rgb, 157, 141, 98), 0.5);
background: linear-gradient(180deg, rgba(255,253,247,.96), rgba(247,239,227,.9));
box-shadow: 0 20px 36px -24px rgba(35,72,98,.85), inset 0 1px 0 rgba(255,255,255,.92);
transition: transform .14s ease;
}
/* ردّ فعلٍ فوريّ تحت الإصبع: الضغطة تُرى قبل أن يبدأ أي شيءٍ آخر */
.gate-tap:active .gate-pill { transform: scale(.955); }
/* شريط التحميل — عرضه نسبةُ ما وصل فعلاً: بايتات المقطع (٧٥٪) واللوحة (٢٥٪).
RTL: يمتلئ من اليمين، فهو يسير مع اتّجاه القراءة لا ضدّه. */
.gate-bar {
display: block; width: 136px; height: 2px; margin: 13px auto 0;
border-radius: 2px; overflow: hidden;
background: rgba(var(--brass-rgb, 157, 141, 98), 0.2);
transition: opacity .45s ease;
}
.gate-bar i {
display: block; width: 100%; height: 100%;
transform-origin: right center; transform: scaleX(0);
background: linear-gradient(to left, var(--brass-deep), #c9b587);
transition: transform .3s cubic-bezier(.3,.7,.4,1);
}
/* اكتمل: يذوب الشريط وتبدأ النبضة تدعو للمس */
.gate.is-ready .gate-bar { opacity: 0; }
.gate.is-ready .hint-ring { animation: pulse 2.1s ease-in-out infinite; }
.gate-pill-text {
font-family: var(--f-ui); font-weight: 500;
font-size: 13.5px; word-spacing: .3em;
color: var(--brass-deep);
}
.gate-tap:focus-visible .gate-pill { outline: 2px solid var(--lake-deep); outline-offset: 4px; }
/* نبضة صامتة تدلّ على اللمس — حلقةٌ بلون النحاس على هالة عاجية */
.hint-ring {
flex: 0 0 auto;
width: 11px; height: 11px; border-radius: 50%;
border: 1.5px solid rgba(var(--brass-rgb, 157, 141, 98), 0.78);
box-shadow: 0 0 0 4px rgba(var(--ivory-rgb, 242, 226, 204), 0.5);
opacity: .5;
transition: opacity .4s ease;
}
.gate.is-ready .hint-ring { opacity: 1; }
@keyframes pulse {
0%,100% { transform: scale(1); opacity: .55; }
50% { transform: scale(1.32); opacity: 1; }
}
/* ============================================================
نزول الصفحة: سماء ← ضباب ← ماء ← خضرة ← حجر الشرفة
------------------------------------------------------------
التدرّج على .invite نفسها لا على طبقة ثابتة: بهذا يمتدّ على طول
المستند كلّه، فالتمرير هبوطٌ حقيقي من السماء إلى الحجر لا خلفيةٌ
واحدة تتكرّر. أوّل محطّة = سماء اللوحة بالضبط، فلا يُرى وصلٌ تحت
الغلاف. و.scene فوقه (ابنٌ بـz سالب يُطلى فوق خلفية أبيه وتحت
محتواه) تحمل جوّاً ثابتاً: ضوء الشمس أعلى ودفء الحجر أسفل.
============================================================ */
.invite {
/* مقاسا الغلاف هنا لا على .hero: خلفية هذه الطبقة نفسها تحتاجهما لتضع بلاط
الشرفة عند حافّة اللوحة السفلى بالضبط، و.hero يرثهما */
--hero-foot: 26px; /* بلاط الشرفة تحت اللوحة — مرسى مؤشّر التمرير */
--hero-head: 0px; /* ما يُحجز للنصّ فوق اللوحة (الشاشات العريضة وحدها) */
/* إطار العرض الذي تُبنى عليه الواجهة وخلفيّتها معاً — يصير 100lvh على
الهاتف (انظر كتلة max-width: 619px) فتمتدّ اللوحة خلف شريطَي المتصفّح */
--vh: 100svh;
position: relative; z-index: 1; display: block;
background:
/* طبقةٌ مربوطة بارتفاع الشاشة تحمل جوَّ الغلاف: سماءُ اللوحة بالضبط طوال
الشاشة الأولى، ثم بلاطُ الشرفة عند حافّتها السفلى بالضبط، ثم تُسلِّم
للنزول الطويل. الغلاف نفسه بلا خلفية كي تنزل البتلات فوق سمائه أيضاً. */
linear-gradient(to bottom,
var(--sky-art) 0 calc(var(--vh) - var(--hero-foot) - 48px),
var(--stone-pale) calc(var(--vh) - var(--hero-foot)),
var(--stone-pale) calc(var(--vh) + 40px),
rgba(236,225,213,0) calc(var(--vh) + 560px)) no-repeat,
linear-gradient(to bottom,
var(--sky-art) 0%,
#d6ecfb 8%,
var(--haze) 20%,
#e4eff4 34%,
#e6f1ec 50%,
#edf0e6 64%,
#f4ebdf 80%,
var(--stone-pale) 100%);
}
/* z-index سالب لا صفر: المشهد موضَّع، وبالصفر يُطلى فوق كل نصٍّ غير موضَّع داخل
.invite — بما فيه أقسام المنصّة المحقونة (تأكيد الحضور/التقويم) التي لا نملك
تنسيقها. بالسالب يبقى خلف كل شيء مهما أُضيف لاحقاً. */
.scene { position: fixed; inset: 0; height: 100lvh; z-index: -1; pointer-events: none; }
/* فارغة على الهاتف (العمود يملأ الشاشة)، وعلى الشاشة العريضة ظلُّ حوافٍ
بارد يؤطّر عمود الشرفة بدل أن يطفو في فراغ */
.scene-photo { position: absolute; inset: 0; }
@media (min-width: 900px) {
.scene-photo {
background: linear-gradient(90deg,
rgba(96,140,168,.13), rgba(96,140,168,0) 22%,
rgba(96,140,168,0) 78%, rgba(96,140,168,.13));
}
}
/* دفء حجر الشرفة أسفل الشاشة — نفس ضوء الفانوسين على الممرّ */
.scene-veil {
position: absolute; inset: 0;
background: radial-gradient(120% 44% at 50% 118%, rgba(var(--ivory-rgb, 242, 226, 204), 0.42), rgba(242,226,204,0) 68%);
}
/* .scene موضَّعة فتُطلى فوق النص غير الموضَّع — نرفع العمود كله فوقها مرّة واحدة */
.page { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 0 20px 6px; }
/* ============================================================
بتلات الورد الأبيض — تنزل على الدعوة كلّها
------------------------------------------------------------
من مفردات اللوحة نفسها: بتلاتٌ بيضاء متناثرة على ممرّها الحجري.
طبقتان ثابتتان (fixed) فتستمرّان مع التمرير بلا إعادة حساب:
.petals-back بـz سالب داخل .invite: تُطلى **فوق** خلفية الصفحة
و**تحت** كل محتواها — بما فيه أقسام المنصّة المحقونة
(غير موضَّعة، فهي فوق z السالب أصلاً بلا أن نمسّ
تنسيقها). وترتيبها بعد .hero بالشجرة يجعلها تنزل
فوق سماء الغلاف وضبابه أيضاً لا بعده فقط.
.petals-front أمام كل شيء: بلا هذه الطبقة لا يُرى شيءٌ أصلاً على
الهاتف — الألواح تملأ عرض العمود فتحجب ما خلفها.
لذا هي الأصغر والأرقّ والأقلّ عدداً: بتلاتٌ قريبة
من العين لا ستارة تعبر النصّ.
الكلفة: transform وopacity لا غير — لا فلاتر ولا ظلال ولا كانفس،
وlpointer-events مطفأة. العدد الكلّي ١٤ على الهاتف و٢٠ على الشاشة
العريضة (script.js)، ومقاساتها وسرعاتها ودوراتها وشفافياتها متفرّقة
كي لا تُقرأ ثلجاً منتظماً.
============================================================ */
:root {
/* بتلةٌ ممتلئة: قمّةٌ مستديرة وقاعدةٌ مدبّبة — لا دائرة. قلبها مضيء وحافّتها
عاجية، وتجعيدةٌ على طولها تجعلها تُقرأ بتلةً حتى بـ١١ بكسل */
--petal-a: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 31'%3E%3CradialGradient id='p' cx='33%25' cy='26%25' r='84%25'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23fdfaf3'/%3E%3Cstop offset='1' stop-color='%23ddd0b5'/%3E%3C/radialGradient%3E%3Cpath d='M14 29.6C6.2 25.4 1.8 19.7 1.8 13.2 1.8 6.6 7.2 1.5 14 1.5s12.2 5.1 12.2 11.7c0 6.5-4.4 12.2-12.2 16.4Z' fill='url(%23p)'/%3E%3Cpath d='M14 28.6c-2.7-5.5-3.9-10.6-3.7-16.1.1-4 1-7.6 2.6-10.7' fill='none' stroke='%23d8c9ac' stroke-width='.95' stroke-linecap='round' opacity='.72'/%3E%3C/svg%3E");
/* بتلةٌ ملتفّة تُرى من حرفها — نفس الوردة بزاويةٍ أخرى */
--petal-b: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 31'%3E%3ClinearGradient id='q' x1='.12' y1='.05' x2='.92' y2='.95'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.58' stop-color='%23fcf8ef'/%3E%3Cstop offset='1' stop-color='%23d9cbaf'/%3E%3C/linearGradient%3E%3Cpath d='M14 29.4c-4.7-4.8-6.9-10.8-6.5-16.7C7.8 7.5 10.2 3.3 13.6 1.5c3.5 1.8 6.1 6 6.7 11.2.7 5.9-1.6 11.9-6.3 16.7Z' fill='url(%23q)'/%3E%3C/svg%3E");
}
.petals {
position: fixed; inset: 0; height: 100lvh; z-index: -1;
overflow: hidden; pointer-events: none;
}
/* ٣ لا ٢: أقسام المنصّة المحقونة غير موضَّعة فتُطلى تحت أي z موجب، و.page
عند ١ — وما فوق ٣ لا حاجة له (أشرطة المنصّة والبوّابة خارج .invite أصلاً) */
.petals-front { z-index: 3; }
.petal {
position: absolute; top: 0;
width: var(--sz); height: calc(var(--sz) * 1.107); /* نسبة viewBox: ٢٨×٣١ */
background: var(--petal-a) center / 100% 100% no-repeat;
opacity: 0;
will-change: transform;
animation: petal-fall var(--dur) ease-in-out var(--delay) infinite;
}
.petal.is-curled { background-image: var(--petal-b); width: calc(var(--sz) * .7); }
/* مسارٌ متمايل لا سقوطٌ عمودي: أربع محطّات تصنع حرف S، والدوران معها.
يبدأ فوق الشاشة وينتهي تحتها، فلا يُرى ظهورٌ ولا اختفاءٌ مفاجئ. */
@keyframes petal-fall {
0% { opacity: 0; transform: translate3d(0, -14vh, 0) rotate(0deg); }
9% { opacity: var(--op); }
25% { transform: translate3d(calc(var(--drift) * .85), 18vh, 0) rotate(calc(var(--spin) * .24)); }
50% { transform: translate3d(calc(var(--drift) * .14), 44vh, 0) rotate(calc(var(--spin) * .5)); }
75% { transform: translate3d(calc(var(--drift) * .92), 78vh, 0) rotate(calc(var(--spin) * .76)); }
88% { opacity: var(--op); }
100% { opacity: 0; transform: translate3d(calc(var(--drift) * .3), 114vh, 0) rotate(var(--spin)); }
}
/* ============================================================
الواجهة — اللوحة كاملةً، وسماؤها للأسماء
------------------------------------------------------------
اللوحة لا تُقصّ أبداً. سابقاً كانت object-fit:cover تقتطع سماءها ثم يُوضع
مكانها بندٌ أزرق مسطّح، فتُقرأ الواجهة «صورةً مقصوصة تحت لون» لا لوحةً.
الآن:
• .hero-frame يأخذ نسبة اللوحة نفسها (--art-ar) وتملؤه اللوحة بـcontain،
فلا يُقتطع منها بكسل مهما كان مقاس الشاشة ولا مقاس رسمة الزبونة.
• عرضه محسوبٌ من الارتفاع المتاح: (الشاشة − الأرض − حجز النصّ) × النسبة،
ومحصورٌ بعرض الشاشة. فهو دائماً داخل الشاشة الواحدة.
• النصّ يجلس **داخل سماء اللوحة**: بندٌ فوق الإطار بهامشٍ سفليٍّ سالب
(--sky-bite) يدخله في السماء، ومقاساته كلّها مشتقّة من عرض اللوحة نفسها
(--fw) فيكبر ويصغر معها.
• ما بقي من الشاشة فوق اللوحة ليس بنداً: خلفية .invite هناك هي سماء
اللوحة بلونها المقيس من صفّها الأعلى (#cce8fd ثابتٌ حتى ١٨٪ من ارتفاعها)
فالوصل بين الاثنتين لا يُرى أصلاً.
============================================================ */
.hero {
/* نسبة اللوحة. يضبطها السكربت حين تصل رسمةٌ بمقاسٍ مختلف، وهذه لوحة القالب
ورسمة «رسمتكم» معاً (٩٤١×١٦٧٢) */
--art-ar: 941 / 1672;
--art-arn: .5628;
--art-url: url("/templates/bahira/assets/painting.webp");
/* (--hero-foot و--hero-head معرَّفتان على .invite: خلفيتها تحتاجهما أيضاً) */
/* عرض اللوحة الفعلي — مرجعُ كلّ مقاسات النصّ أدناه */
--fw: min(100vw, calc((100vh - var(--hero-foot) - var(--hero-head)) * var(--art-arn)));
--fw: min(100vw, calc((100svh - var(--hero-foot) - var(--hero-head)) * var(--art-arn)));
/* كم ينزل النصّ داخل سماء اللوحة: نسبةً من ارتفاع اللوحة (= العرض ÷ النسبة)
لا من ارتفاع الشاشة. بوحدات الشاشة كانت النسبة تنزلق بين جهازٍ وآخر —
١٦svh هي ١٩٪ من اللوحة على ٣٩٠×٨٤٤ و٢٢٪ على شاشةٍ قصيرة، فتجلس قاعدة
النصّ على قنطرة الورد هناك. سماء اللوحة الصافية ١٨٪ (مقيسة بالبكسل)،
و١٩٫٥٪ آخر ما تحتمله قبل أن تلامس أوّل ورقة. */
--sky-bite: calc(var(--fw) / var(--art-arn) * .195);
position: relative;
min-height: 100vh; min-height: var(--vh);
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
padding-bottom: var(--hero-foot);
text-align: center;
overflow: hidden;
}
.hero-frame {
order: 2; /* اللوحة أولاً بالـHTML لتُحمَّل أولاً، وتُعرض ثانيةً */
position: relative;
width: min(100%, var(--fw));
aspect-ratio: var(--art-ar);
}
/* اللوحة عنصر ![]()
لا خلفية CSS: الخلفية لا تُبلّغ عن فشل تحميلها، والرسمة
قد تكون /ai/ لمهمة حُذفت أو رابطاً كُسر — والواجهة عندها تبقى بيضاء
بلا أن يعلم أحد. مع ![]()
يوجد onerror يرتدّ للوحة القالب (script.js). */
.hero-art {
position: absolute; inset: 0;
width: 100%; height: 100%;
/* contain لا cover: الإطار بنسبة اللوحة فهما متطابقان عملياً، وحين تصل
رسمةٌ بنسبةٍ أخرى تُحتوى كاملةً بدل أن تُقصّ */
object-fit: contain;
display: block;
}
/* حافّة اللوحة السفلى تذوب بضبابٍ قصير في بلاط الشرفة، فلا يقع خطٌّ قاطع بين
الممرّ وبين ما بعد الغلاف. ٧٪ وحدها، وآخرها وحده معتم: اللوحة تبقى مقروءة. */
.hero-frame::after {
content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 7%;
background: linear-gradient(to bottom,
rgba(236,225,213,0), rgba(var(--stone-pale-rgb, 236, 225, 213), 0.42) 64%, var(--stone-pale) 100%);
pointer-events: none;
}
/* الشاشة العريضة: ما حول اللوحة جوُّ اللوحة نفسها ممدوداً، لا حقلٌ أزرق مسطّح.
------------------------------------------------------------
المدّ بـ`100% 100%` لا بـcover: التغطية تقصّ اللوحة القائمة إلى شريطٍ عريض
فتصعد خضرةُ الحديقة إلى أعلى الشاشة ويصير ما حول اللوحة طيناً أخضر. بالمدّ
يبقى كل صفٍّ من الضباب بلون صفّ اللوحة نفسه على ارتفاعه — سماءٌ فوق، فجبالٌ
فماء فخضرةٌ فحجر — والمدّ الأفقي لا يُرى تحت ضبابٍ بـ٥٦ بكسل.
وموضعه بالضبط شريطُ اللوحة عمودياً (من --hero-head إلى --hero-foot) كي
تتطابق المحطّات. ما فوقه وما تحته خلفية .invite: سماءٌ مسطّحة ثم بلاط.
z سالب كي تنزل البتلات الخلفية فوقه (وهي تالية له بالشجرة).
ومطفأةٌ ما دامت اللوحة تملأ العرض: لا شيء منها يُرى، وطمسُ صورةٍ بـ٥٨ بكسل
ليس مجّانياً على هاتفٍ متوسّط. تُشعَّل حيث يظهر فراغٌ جانبيّ فعلاً. */
.hero::after { display: none; }
/* ✗ ما كان هنا: نسخةٌ من اللوحة كلّها **مشدودةً أفقياً** خلفها ومطموسة.
الشدّ يسحب وسطَ كل صفٍّ (فستان العروس العاجيّ، الماء الفاتح) إلى الجانبين،
فيصير ما حول اللوحة حقلاً شاحباً لا امتداداً للحديقة — وهو بعينه ما جعل
اللوحة تُقرأ «غير كاملة»: صورةٌ ملصوقة على ضبابٍ أبيض.
✓ البديل .hero-wings أدناه: يمتدّ شريطُ **حافّة** اللوحة وحده لا وسطُها. */
/* جناحا المشهد — امتداد الحديقة خارج الإطار
------------------------------------------------------------
كل جناحٍ يعرض ١٪ من عرض اللوحة (١٠ بكسل من ٩٤١) مشدودةً على عرضه:
`background-size: 9000%` يكبّر اللوحة تسعين ضعفَ عرض الجناح، فلا يقع
داخله إلا تسعون جزءاً من واحد منها — أي شريطُ الحافّة وحده. وكلّما ضاق
الشريط صار كل صفٍّ لوناً واحداً ممدوداً لا بنيةً مكبَّرةً تسعة عشر ضعفاً
(شريطٌ بـ٣١ بكسل كان يكبّر وردَ القنطرة الأبيض عند الحافّة فيصير هالةً
بيضاء حول اللوحة — نفس العلّة التي نعالجها). وبهذا يبقى كل
صفٍّ بلون صفّ اللوحة على ارتفاعه: سماءٌ فوق، فوردُ القنطرة، فخضرةُ
الحديقة، فحجرُ الممرّ. والطمسُ ٢٦ بكسل يذيب خشونة الشريط لا أكثر.
يتجاوز كلُّ جناحٍ حافّةَ اللوحة بـ٣٠ بكسل ليلتقي قناعَها (تحتها بـz). */
.hero-wings {
display: none; /* يُشعَّل حيث يظهر فراغٌ جانبيّ فعلاً */
position: absolute; z-index: -1;
top: var(--hero-head); bottom: var(--hero-foot); /* شريط اللوحة بالضبط */
inset-inline: 0;
pointer-events: none;
}
/* الطمس يُبهت حوافَّ العنصر نفسه إلى الشفافية، فحافّةٌ عند حدّ اللوحة كانت
تترك شريطاً فاتحاً يفضح الوصل. لذا يمتدّ الجناح ٩٠ بكسل **تحت** اللوحة
(فتخفي حافّتَه المبهتة، وقناعها ٢٨ بكسل وحدها هو ما يكشف الجناح) ويمتدّ
٤٠ بكسل خارج الشاشة. وحافّتاه العلوية والسفلية يغطّيهما .hero::after
(سماءٌ مسطّحة فوق، بلاطٌ أسفل) وهو يُطلى بعده. */
.hero-wings::before, .hero-wings::after {
content: ""; position: absolute; top: 0; bottom: 0;
width: calc(50% - var(--fw) / 2 + 130px);
background-image: var(--art-url);
background-size: 9000% 100%;
background-repeat: no-repeat;
filter: blur(26px) saturate(1.04);
}
.hero-wings::before { left: -40px; background-position: left center; }
.hero-wings::after { right: -40px; background-position: right center; }
/* حجابٌ يُبعِد الضباب: سماءٌ مسطّحة فوق اللوحة تماماً (فحافّتها العليا لا
تُرى أصلاً)، وبلاطُ الشرفة يصعد من أسفله (وإلا وقع خطٌّ أفقي صريح عند حافّة
الغلاف: ضبابٌ بارد فوقه وبلاطٌ دافئ تحته)، وضياءٌ عند الحواف يدفع الجانبين
إلى الخلف */
.hero::after {
content: ""; position: absolute; z-index: -1; inset: 0;
background:
linear-gradient(to bottom,
var(--sky-art) 0 calc(var(--hero-head) + 4px),
rgba(204,232,253,0) calc(var(--hero-head) + 104px)),
linear-gradient(to bottom,
rgba(236,225,213,0) calc(100% - 104px),
rgba(var(--stone-pale-rgb, 236, 225, 213), 0.6) calc(100% - 34px),
var(--stone-pale) 100%),
/* ظلٌّ باردٌ خفيف عند الحواف البعيدة يعطي المشهد عمقاً ويُبقي العين على
اللوحة. كان هنا ضياءٌ أبيض بـ٠٫٧٨ فكان يبيّض ما حول اللوحة حتى يصير
هالةً شاحبة حولها — وهي التي جعلتها تبدو غير كاملة. */
radial-gradient(102% 64% at 50% 46%, rgba(38,70,94,0) 54%, rgba(38,70,94,.13) 100%);
pointer-events: none;
}
/* حافّتا اللوحة الجانبيّتان تذوبان في امتداد الحديقة بدل أن تُقصّا بخطٍّ حادّ:
حدٌّ صريحٌ فوق ضبابٍ خلفه هو بعينه منظر «صورةٍ ملصوقة». القناع ٢٨ بكسل على
لوحةٍ عرضها ~٤٧٠، وما يذوب منها ورقُ الحديقة لا وجهٌ ولا نصّ.
ولماذا نسبة الشاشة لا عرضها وحده؟ اللوحة تُقاس بالارتفاع: عرضها
`(100svh − قدم) × ٠٫٥٦٢٨`. فمتى كانت الشاشة أعرض من ذلك ظهر فراغٌ
جانبيّ — **وهذا يقع على الهواتف أيضاً** كلّما قصُرت الشاشة الفعلية
(شريط المتصفّح الظاهر، هاتفٌ قديم، وضع أفقي): ٤٣٠×٧٠٠ تترك ٥١ بكسلاً
من كل جانب. وكانت هذه القاعدة محصورةً بـ٦٢٠ بكسل عرضاً، فيُرى الفراغُ
سماءً مسطّحة بلا امتداد — «الصورة لا تغطّي الرئيسية». الشرط الصحيح هو
نسبة الشاشة: ١:٢ أدنى ما يظهر عنده فراغٌ يُرى (نسبة اللوحة ٠٫٥٦٣). */
@media (min-width: 620px), (min-aspect-ratio: 13 / 20) {
.hero::after { display: block; }
.hero-wings { display: block; }
.hero-art {
-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
}
/* الهاتف: اللوحة تملأ عرض الشاشة دائماً — ولو كلّف ذلك قصّاً من أسفلها
------------------------------------------------------------
اللوحة تُقاس بالارتفاع، فمتى قصُرت الشاشة الفعلية (شريط المتصفّح ظاهراً،
هاتفٌ قديم) ضاقت عن العرض وبقي على الجانبين شريطان. وكنّا نملؤهما بامتداد
حافّة اللوحة — فقُرئ لوناً مضافاً لا صورة («الصورة لا تغطي كل الرئيسية
وانت مكملها بلون»). الصواب على الهاتف أن تغطّي اللوحة العرض كلّه: تُكبَّر
حتى يملأ عرضُها الشاشة ويُقصّ ما زاد من **أسفلها** وحده (`object-position:
top`) — فسماؤها التي تحمل الأسماء لا تُمسّ، والمقصوص بلاطُ الممرّ أسفل
الذيل، وتحته شريط الشرفة أصلاً.
والسقف ١٣:٢٠ (٠٫٦٥): عنده يبلغ القصّ ١٥٪ من ارتفاع اللوحة. وما فوقه —
لوحيٌّ، حاسوب، وضعٌ أفقي — يعود الاحتواء وجناحا المشهد، فالقصّ هناك يبلع
العروسين أنفسهم. */
/* الهاتف: الواجهة لوحةٌ ملءَ الشاشة والنصّ فوقها
------------------------------------------------------------
كانت اللوحة بنداً في عمود: نصٌّ فوقها وبلاطُ شرفةٍ تحتها، ومقاسها محسوبٌ
من الارتفاع الباقي. فكلّما طال النصّ (شعار «حروف» مثلاً) هبطت اللوحة
وصغُر العروسان، وبقي أسفل الشاشة شريطٌ حجريّ غريبٌ عن المشهد. وثلاث
شكاوى من كرار كلّها من هذا: الفراغ الجانبيّ، ثمّ «مكملها بلون»، ثمّ
«الصورة جداً منزلها لتحت بحيث الشخصيات غير مبينة، والخلفية التي بالاسفل
غير جميلة».
الآن اللوحة تملأ الشاشة كلّها (cover) والنصّ يطفو فوق سمائها:
• لا فراغ، ولا لونٌ مضاف، ولا شريط أسفل — المشهد يبلغ الحواف الأربع.
• القصّ ٤٪ من العرض وحده على ٣٩٣×٧٥٩ (لا ١٩٪ من الارتفاع كما كان)،
وهو سروٌ عند الطرفين لا وجهٌ ولا وردة.
• والعروسان بحجمهما الطبيعي في وسط الشاشة لا في قاعها.
والسماء تنسكب على أعلى اللوحة (.hero::before) فيقرأ الاسمان فيها حتى حيث
تبدأ قنطرة الورد — بلونها هي لا بلونٍ غريب. */
@media (max-width: 619px) {
/* 🚨 100lvh لا 100svh: `svh` هو إطار العرض **وأشرطة المتصفّح ظاهرة**، فتقف
اللوحة عند حافّتها ويظهر خلف شريط البحث أسفل — وخلف الساعة والشبكة
أعلى — لونُ خلفية الصفحة لا المشهد («لا يمتد الى خلف الساعة والشحن
والشبكة… اريد ان يمتد ولا تغطي الفوق والاسفل بلون»). وبالإطار الأكبر
يمتدّ المشهد تحتهما، وما زاد يقصّه `overflow` و`object-fit`.
(الصفحة أصلاً بـviewport-fit=cover، والنصّ محميٌّ بـsafe-area أدناه.) */
.invite { --vh: 100lvh; --hero-foot: 0px; --hero-head: 0px; }
/* الفرق بين الإطارين هو ارتفاع شريط المتصفّح: المؤشّر يرتفع بقدره فيبقى
مرئياً وهو ظاهر، ويجلس عند الحافّة حين ينزوي. وكلا الوحدتين ثابتةٌ لا
تتبدّل مع إظهار الشريط وإخفائه، فالتخطيط لا يقفز. */
.hero .scroll-cue { bottom: calc(100lvh - 100svh + 10px + env(safe-area-inset-bottom)); }
.invite:has(#da3wa-initials-logo:not([hidden])) { --hero-head: 0px; }
.hero {
--fw: 100vw; /* مرجع مقاسات النصّ: عرض الشاشة */
--sky-bite: 0px; /* لا هامشَ سالب: النصّ فوق اللوحة أصلاً */
justify-content: flex-start;
padding-bottom: 0;
}
/* اللوحة طبقةٌ تملأ الواجهة، والنصّ يطفو فوقها */
.hero-frame {
position: absolute; inset: 0; z-index: 0;
width: auto; height: auto; aspect-ratio: auto;
}
/* ١٠٥٪ ارتفاعاً لا ١٠٠٪: بلا هذا يملأ المشهدُ الارتفاعَ تماماً فلا سعةَ
لإنزاله، فيقع سطر التشرّف على وجه العريس («اريد ان تنزل قليلاً تحت لكي
لا تكون الكتابة امام الوجه»). الزيادة تنزل بالوجهين ~٢٠ بكسلاً مقابل
قصٍّ إضافي من العرض يقع على ورق القنطرة لا على أحد. */
.hero-art { height: 105%; object-fit: cover; object-position: center; }
.hero-frame::after { display: none; } /* لا ضبابَ بلاطٍ أسفلها */
.hero-wings { display: none; }
.hero::after { display: none; }
/* انسكابُ السماء: بلون سماء اللوحة نفسها، معتمٌ عند القمّة ثمّ يذوب — فما
تحته من قنطرةٍ وجبالٍ يبقى مرئياً وراء النصّ ويبقى النصّ مقروءاً */
.hero::before {
content: ""; position: absolute; z-index: 1;
inset-inline: 0; top: 0; height: 56%;
background: linear-gradient(to bottom,
var(--sky-art) 0 16%,
rgba(var(--sky-rgb, 204, 232, 253), 0.93) 44%,
rgba(var(--sky-rgb, 204, 232, 253), 0.62) 70%,
rgba(204,232,253,0) 100%);
pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }
/* هالةُ سماءٍ حول الحروف: الاسمان قد يقعان حيث بدأت قنطرة الورد، فتبقى
حوافّهما مقروءةً على الورق الأخضر بلا أن يُرى تحتهما صندوق */
.hero .hero-kicker, .hero .couple-name {
text-shadow: 0 0 14px rgba(213,236,252,.92), 0 0 5px rgba(213,236,252,.85);
}
}
/* شعار «حروف» (src/lib/render/monogram.ts) يُحقن أولَ طفلٍ في .hero-inner،
فيزيد ارتفاع البند ~١٠٠ بكسل. بلا حجزٍ يقابله ينزل أسفل اللوحة تحت الطيّة،
فنقلّص اللوحة بقدره — وعندها تضيق عن عرض الشاشة فيلزمها الضباب أيضاً.
لمن لم يفعّل الشعار لا شيء من هذا يُحسب: المحدِّد لا يطابق أصلاً. */
/* 🚨 داخل استعلام العرض لا خارجه: هذه القواعد كُتبت للتخطيط القديم (احتواءٌ
وجناحان)، ومحدِّدها `:has()` أقوى من قواعد الهاتف فكانت تسبقها مهما تأخّرت
في الملف. فدعوةٌ بشعار «حروف» على هاتفٍ كانت تستعيد حجزَ النصّ (٢٢٦ بكسل)
والجناحين و**قناع الحافّتين** — وهو الذي رآه كرار: «الجوانب لا اريد بهم
هذا الايفكت»، شريطان شاحبان على طرفي اللوحة تُرى تحتهما السماء المسطّحة. */
@media (min-width: 620px) {
.invite:has(#da3wa-initials-logo:not([hidden])) {
--hero-head: 226px;
}
.hero:has(#da3wa-initials-logo:not([hidden]))::after { display: block; }
.hero:has(#da3wa-initials-logo:not([hidden])) .hero-wings { display: block; }
.hero:has(#da3wa-initials-logo:not([hidden])) .hero-art {
-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
}
/* ١٢٨ بكسل من الشعار تأكل خُمس سماء اللوحة — هنا يجلس أصغر وأقرب للأسماء */
.hero #da3wa-initials-logo {
--da3wa-logo-width: 96px;
margin: 0 auto .5rem;
}
/* على الهاتف لا يُحجز للنصّ شيءٌ فوق اللوحة (هي ملء الشاشة والنصّ فوقها)،
لكنّ الشعار يبقى أصغر قليلاً كي لا يزحم الاسمين في السماء */
@media (max-width: 619px) {
.hero #da3wa-initials-logo { --da3wa-logo-width: 80px; margin: 0 auto .35rem; }
}
.hero-inner {
order: 1;
/* z لازم لا زينة: ترتيب الطلاء بين عناصر المرن يتبع `order` لا ترتيب
الشجرة، فاللوحة (order:2) تُطلى بعد البند وتغطّي ما دخل منه في سمائها */
position: relative; z-index: 1;
width: min(100%, var(--fw));
/* الهامش السالب يُدخل النصّ في سماء اللوحة: قاعدته تستقرّ قبل قنطرة الورد،
وسماء اللوحة صافيةٌ حتى ١٨٪ من ارتفاعها (مقيسة بالبكسل من painting.png) */
margin-bottom: calc(var(--sky-bite) * -1);
/* viewport-fit=cover: النصّ بأعلى الشاشة، فبلا الهامش الآمن تجلس الكلمة
الأولى تحت نتوء الهاتف */
padding: calc(14px + env(safe-area-inset-top)) 22px 0;
}
/* موضع الختم بـ«رَند» كان شعار زبونتها. هنا يبقى فارغاً عمداً: شعار «حروف»
(src/lib/render/monogram.ts) يُحقن أولَ طفلٍ في .hero-inner فيجلس هنا تماماً
لمن فعّله، ومن لم يفعّله يبدأ عنده الفراغ فوق الأسماء. */
/* كل مقاس هنا مشتقٌّ من عرض اللوحة (--fw) لا من عرض الشاشة: النصّ يجلس داخل
سماء اللوحة، فلا بدّ أن يكبر ويصغر معها بالضبط. وسماء اللوحة الصافية ١٨٪
من ارتفاعها (مقيسةٌ بالبكسل: صفوفها حتى y=300 لونٌ واحد #cce8fd)، فمجموع
هذا البند لا يتجاوزها بعد إضافة ما فوق اللوحة من سماءٍ ممدودة. */
.sprig {
display: flex; align-items: center; justify-content: center;
color: var(--leaf); margin: 0 auto 8px;
}
.sprig svg {
display: block;
width: clamp(96px, calc(var(--fw) * .315), 150px);
height: auto;
}
/* 🚨 word-spacing لا letter-spacing: العربية خطٌّ متّصل، وتباعدُ الحروف يفتح
فجوةً **داخل الكلمة بين حرفٍ وحرفٍ موصولَين** فتُقرأ «د ع و ة» لا «دعوة» —
وهو ما رآه كرار: «كلمة دعوة زفاف متقطعة». وتباعدُ الكلمات يعطي نفس السعة
المقصودة بالتصميم ولا يمسّ الوصل. (وtext-indent كان يعوّض فراغ الحرف
الأخير، فذهب معه.) القاعدة تسري على كل نصٍّ عربيّ بالقالب لا على هذا
السطر وحده — واختبارٌ يحرسها. */
.hero-kicker {
margin: 0 0 7px; font-family: var(--f-ui); font-weight: 400;
font-size: clamp(9.5px, calc(var(--fw) * .0285), 12.5px);
word-spacing: .5em;
color: var(--lake-deep); opacity: .82;
}
/* والنستعليق أشدّ: تباعدُ الحروف يُسقط منه حرفاً بالعرض */
.couple {
margin: 0 0 7px; font-family: var(--f-couple); font-weight: 400;
/* نستعليق: السطر ينحدر ومدّة الحرف تنزل تحت الخط — يحتاج ارتفاع سطر أوسع
وحشوة سفلية وإلا قُصّت ذيول المدّ. ويبدو أصغر من الرقعة بنفس المقاس فيُكبَّر،
لكنّه يبقى تحت سقف السماء. */
font-size: clamp(29px, calc(var(--fw) * .098), 48px);
line-height: 1.42; color: var(--lake-deep);
display: flex; flex-direction: column; align-items: center; gap: 0;
padding-bottom: .1em;
}
/* العلامة بين الاسمين: حرفٌ سائبٌ بالنستعليق يُقرأ زلّةً لا تصميماً. فصارت
مِشبكاً نحاسياً — أمبرساند كورمورانت المائل بين خيطين يخفتان عند طرفيهما،
على هيئة درابزين الشرفة نفسه مصغَّراً (انظر .closing-divider).
وموضعها: النستعليق ينحدر ومدّاته تنزل تحت الخط، فمنتصف الصندوق ليس منتصف
ما تراه العين بين الاسمين — الإزاحة أدناه مقيسةٌ على الشاشة لا محزورة. */
.couple-sep {
display: flex; align-items: center; justify-content: center; gap: .66em;
/* كورمورانت المائل مرفوعٌ بوزن ٣٠٠ وحده (رابط الخطوط بالرأس) — بلا تصريحه
يرث ٤٠٠ من .couple فيُصطنع الثقل ويُثخن الحرف */
font-family: var(--f-latin); font-size: .64em; font-style: italic; font-weight: 300;
color: var(--brass-deep); line-height: 1;
margin: .06em 0 0;
/* حبر النستعليق يجلس بأعلى صندوق سطره وتحته فراغُ المدّات، فمنتصف الصندوقين
أعلى من منتصف ما تراه العين بين الاسمين بنحو ربع قَدّ الاسم. مقيسة على
٣٧٥×٨١٢: حبر الأول ينتهي عند ١٢٥ بكسل وحبر الثاني يبدأ عند ١٦٥. */
transform: translateY(.5em);
}
.couple-sep::before, .couple-sep::after {
content: ""; height: 1px; width: 2em; border-radius: 1px;
}
.couple-sep::before { background: linear-gradient(to right, rgba(157,141,98,0), rgba(var(--brass-rgb, 157, 141, 98), 0.52)); }
.couple-sep::after { background: linear-gradient(to left, rgba(157,141,98,0), rgba(var(--brass-rgb, 157, 141, 98), 0.52)); }
/* آخر سطرين من البند يلامسان أعلى قنطرة الورد على الهواتف الأقصر — نَفَسُ
ضبابٍ بلون السماء تحتهما يُبقيهما مقروءين هناك بلا أن يُرى فوق السماء نفسها */
.hero-sub {
margin: 0 auto 5px; max-width: 33ch;
font-family: var(--f-serif);
font-size: clamp(12.5px, calc(var(--fw) * .0372), 16.5px);
line-height: 1.72; color: #3f5d6e;
text-shadow: 0 0 10px rgba(213,236,252,.95), 0 0 3px rgba(213,236,252,.85);
white-space: pre-line;
}
/* لوحٌ عاجيّ صغير بحافّة نحاس — هيئة لوح البوّابة نفسها مصغَّرةً. كان نصّاً
شاحباً بـ٠٫٧٨ شفافية على ممرّ اللوحة، فلا يكاد يُرى («مرّر للأسفل اريدها
اوضح وأجمل»). اللوح يُقرأ على أي خلفيةٍ تقع تحته. */
.scroll-cue {
position: absolute; z-index: 2;
left: 50%; bottom: calc(10px + env(safe-area-inset-bottom));
transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 15px;
border-radius: 999px;
border: 1px solid rgba(var(--brass-rgb, 157, 141, 98), 0.46);
background: linear-gradient(180deg, rgba(255,253,247,.94), rgba(247,239,227,.86));
box-shadow: 0 16px 28px -20px rgba(35,72,98,.9), inset 0 1px 0 rgba(255,255,255,.92);
font-family: var(--f-ui); font-weight: 500; font-size: 11.5px; color: var(--brass-deep);
white-space: nowrap;
}
.scroll-cue-label { word-spacing: .3em; }
.scroll-cue-arrow {
font-size: 12px; line-height: 1;
animation: float 2.2s ease-in-out infinite; /* السهم وحده يتحرّك لا اللوح */
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* اللوحة نسبتها ٠٫٥٦٣ — أضيق من كل شاشةٍ عريضة. فكلّما اتّسعت الشاشة صار
الارتفاع هو القيد، ووجب حجز مكان النصّ فوق اللوحة صراحةً (--hero-head)
وإلا خرج الغلاف عن الشاشة الواحدة. القيم مقيسةٌ على ارتفاع البند الفعلي
عند عرض اللوحة الناتج. */
@media (min-width: 620px) {
.invite { --hero-foot: 34px; --hero-head: 150px; }
.invite:has(#da3wa-initials-logo:not([hidden])) { --hero-head: 300px; }
.hero-inner { padding-top: calc(20px + env(safe-area-inset-top)); }
.scroll-cue { bottom: calc(9px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
.invite { --hero-foot: 40px; --hero-head: 172px; }
.invite:has(#da3wa-initials-logo:not([hidden])) { --hero-head: 322px; }
.hero-inner { padding-top: calc(24px + env(safe-area-inset-top)); }
.hero-kicker { word-spacing: .6em; }
.hero-sub { max-width: 32ch; line-height: 1.82; }
}
/* ============================================================
ألواح الشرفة — ثلاثة أوزان لا وزنٌ واحد يتكرّر
.card لوحٌ مضيء بحافّة حجرٍ رفيعة (الدعوة، البرنامج، القاعة)
.verse-card لوحٌ مقنطر: أول ما بعد اللوحة، كأنك عبرت تحت القنطرة
.plate بلاطة حجرٍ بلا حافّة (الملاحظات، التواصل)
============================================================ */
.card {
position: relative;
background: var(--plate);
border: 1px solid var(--hair);
border-radius: 26px 26px 20px 20px;
padding: 30px 24px 32px;
margin: 0 0 30px;
box-shadow: var(--shadow), var(--lit);
}
.card:first-of-type { margin-top: 26px; }
/* عنوانٌ تحت قنطرة: القوس مرسومٌ خلفيةً فوق الكلمة لا خطّين يمرّان عبر حروفها
(كانا يقطعان «ملاحظات» و«الموقع» فعلاً في النسخة السابقة) */
.sec-title {
margin: 0 0 20px; text-align: center;
font-family: var(--f-title); font-weight: 400; font-size: 23px; line-height: 1.5;
color: var(--lake-deep);
padding-top: 34px;
background-image: var(--arch);
background-repeat: no-repeat;
background-position: top center;
background-size: 208px 30px;
}
.sec-title > span { display: inline-block; padding-inline: 8px; }
/* وردة اللوحة وحدها فوق الآية */
.card-leaf { display: block; text-align: center; color: var(--leaf); margin-bottom: 14px; }
.card-leaf svg { display: inline-block; vertical-align: middle; }
/* ---- الآية: اللوح المقنطر ---- */
/* نصف القطر الأفقي ٥٠٪ بالضبط: أي قيمة بالبكسل يجمعها المتصفح فتتجاوز العرض
فيقلّص كل الأنصاف بنفس النسبة — ومنها الرأسي — فتضيع القنطرة */
.verse-card {
border-radius: 50% 50% 22px 22px / 118px 118px 22px 22px;
padding: 44px 32px 34px;
background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(252,248,241,.84));
overflow: hidden;
}
/* وهجٌ خفيف تحت قمّة القنطرة — ضوء النهار نازلاً من فتحتها */
.verse-card::before {
content: ""; position: absolute; inset-inline: 0; top: 0; height: 120px;
background: radial-gradient(70% 100% at 50% 0%, rgba(var(--ivory-rgb, 242, 226, 204), 0.5), rgba(242,226,204,0) 72%);
pointer-events: none;
}
.verse-card .card-leaf { position: relative; margin-bottom: 20px; color: var(--leaf); }
.verse-card .card-leaf svg { width: 32px; height: 32px; }
.verse {
position: relative;
margin: 0; text-align: center;
font-family: var(--f-serif); font-size: 20px; line-height: 2.15; color: var(--lake-deep);
white-space: pre-line;
}
/* ---- بطاقة الدعوة والعائلتان ---- */
.invitation-text {
margin: 0 0 26px; text-align: center;
font-family: var(--f-serif);
font-size: 17px; line-height: 2.1; color: var(--ink);
white-space: pre-line; /* أسطر الزبونة كما كتبتها */
}
/* العائلتان لوحا حجرٍ صغيران ووردةٌ بينهما */
.families { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; }
.family {
flex: 1 1 38%; min-width: 108px; text-align: center;
padding: 16px 12px 15px;
border-radius: 40px 40px 14px 14px / 26px 26px 14px 14px;
background: rgba(var(--stone-pale-rgb, 236, 225, 213), 0.34);
border: 1px solid rgba(var(--balus-rgb, 137, 134, 106), 0.18);
}
.family-label {
display: block; margin-bottom: 7px;
font-family: var(--f-ui); font-weight: 500; font-size: 10.5px;
word-spacing: .35em; color: var(--brass-deep);
}
.family-names {
margin: 0; font-family: var(--f-serif); font-size: 16px; line-height: 1.95;
color: var(--lake-deep); white-space: pre-line;
}
.families-leaf {
flex: 0 0 auto; align-self: center;
display: inline-flex; color: var(--brass);
}
.families-leaf svg { display: block; }
/* ============================================================
العدّاد — أربعة فوانيس على الممرّ
الفانوسان النحاسيّان في اللوحة: قبّةٌ فوق، حلقةُ تعليق، وشمعةٌ تضيء الأسفل
============================================================ */
.count-card {
background: none; border: 0; box-shadow: none;
padding: 6px 4px 10px; margin-bottom: 34px;
}
.countdown { display: flex; justify-content: center; gap: 10px; padding-top: 6px; }
.cd-unit {
position: relative;
flex: 1 1 0; min-width: 0; max-width: 92px;
padding: 20px 6px 16px;
border-radius: 50% 50% 9px 9px / 22px 22px 9px 9px;
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,241,228,.9));
border: 1px solid rgba(var(--brass-rgb, 157, 141, 98), 0.38);
box-shadow: 0 18px 28px -22px rgba(45,84,110,.7), var(--lit);
text-align: center;
}
/* حلقة التعليق النحاسية */
.cd-unit::before {
content: ""; position: absolute; top: -7px; left: 50%;
width: 12px; height: 12px; margin-left: -6px;
border: 1.5px solid var(--brass); border-radius: 50%;
background: rgba(252,249,243,.9);
}
/* ضوء الشمعة داخل الفانوس */
.cd-unit::after {
content: ""; position: absolute; inset-inline: 14%; bottom: 5px; height: 52%;
border-radius: 50%;
background: radial-gradient(64% 100% at 50% 100%, rgba(var(--ivory-rgb, 242, 226, 204), 0.95), rgba(242,226,204,0) 74%);
pointer-events: none;
}
.cd-num {
position: relative; z-index: 1;
display: block; font-family: var(--f-num); font-weight: 400;
font-size: clamp(27px, 8vw, 34px); line-height: 1.12;
color: var(--lake-deep);
font-variant-numeric: lining-nums;
}
.cd-lbl {
position: relative; z-index: 1;
display: block; margin-top: 4px;
font-family: var(--f-ui); font-weight: 500; font-size: 10px;
color: var(--brass-deep);
}
.cd-arrived {
margin: 18px 0 0; text-align: center;
font-family: var(--f-serif); font-size: 19px; color: var(--lake-deep);
}
/* ============================================================
كشف الموعد — ثلاث بلاطات تُحَكّ بالإصبع
------------------------------------------------------------
الغشاء أزرقُ بحيرة اللوحة (--lake → --lake-mid) لا أزرقُ عامّ، وعليه لمعةٌ
مائلة كالتي على الماء. يُرسم على