01 · نظرة عامة
التحفّظ بوصفه إشارة فخامة
في هذا التصوّر، تخيّلت فندقًا افتُتح عام 1927 ولم يعلن عن نفسه قط. كل أعراف موقع الفندق الحديث — أداة الحجز اللاصقة، وشريط الاستعجال، والفيديو الذي يعمل تلقائيًّا فوق الطية — تعمل ضد هذه الفرضية. لذلك تستعير الصفحة من الوسيط الوحيد الذي يثق به الفندق أصلًا: قرطاسيته المطبوعة. كل شيء يجلس على محور مركزي. والذهبي لا يظهر إلا خطًّا شعريًّا أو معيّنًا صغيرًا. ولا شيء يعدّ تنازليًّا.
النتيجة هي الصفحة الأكثر تناظرًا في المجموعة، وهي عمدًا نقيض جريدة Ember & Oak — فحيث تعلّق تلك الصفحة أرقام الصفحات في هامش جانبي وتُجري أعمدة لا متناظرة، تضع هذه كل شيء على خط المنتصف وتترك المساحة تقوم بالعمل.
02 · الفكرة
إحدى وأربعون غرفة، بلا استعجال
السطر الذي كتبته للعلامة — عنوان هادئ في قرن صاخب — حدّد الموجز كله. تلته ثلاثة قرارات، وكل خيار آخر في الصفحة متفرّع عنها.
الذهبي خط شعري
اللون المميِّز لا يملأ سطحًا أبدًا. يسطّر، ويؤكّد، ويرسم معيّنًا بين المحطات — وهذا كل شيء.
كل شيء في المنتصف
التناظر يُقرأ رباطة جأش. وحدها أزواج التحدّي/الحل تكسر المحور، ولأن المقارنة تحتاج عمودين لا غير.
أبطأ من البقية
تجري الظهورات في 1.1 ثانية، وهي --reveal-time الخاصة بالفندق — أبطأ بوضوح من أي صفحة أخرى هنا.
03 · الأهداف
ما كان على الموقع أن يحمله
ثماني محطات، صوت واحد
مقدمة، وغرف، ومرافق، وإرث، ومعرض، وكلمات النزلاء، وعروض، واستفسار — كل منها قسم بعنوانه المسمّى.
معرض يدير نفسه
ثلاث عشرة لوحة تتناوب بتلاشٍ متقاطع على مؤقّت، وتتوقف لحظة يدخلها مؤشر أو تركيز لوحة مفاتيح.
استفسار، لا صفحة دفع
سبعة حقول — الوصول، والمغادرة، والنزلاء، والغرفة، والاسم، والبريد، والرسالة — تُتحقّق فوريًّا وتُؤكَّد في منطقة حيّة.
قائمة لا يتسرّب منها التركيز
لوحة الجوال تحبس التركيز وهي مفتوحة وتعيده إلى الزر المُطلِق عند الإغلاق.
04 · ترتيب البناء
البيت عبر مراحل البناء
اللوحة قبل التخطيط
أربع عشرة خاصية مخصّصة، نصفها ذهبي بدرجات شفافية مختلفة. فحمي، وعاجي، وذهبي، وبرونزي، وأردوازي — ولم يُسمح لغير ذلك بالدخول.
الشبكة الممركزة
عمود قياس واحد ممركز في الحاوية، مع سماح للّوحات بأن تتّسع أكثر. لا أشرطة جانبية، ولا لا تناظر.
الحلية
مربع مُدار بين تدرّجين شعريين، مرسوم بـ CSS. يفصل كل قسم عن الذي يليه وهو زخرفة الصفحة الوحيدة.
مؤقّت المعرض
تلاشٍ متقاطع على فاصل زمني مع نقاط معيّنية للموضع، يتوقف عند
mouseenterوfocusinفلا يصارع الزائر أبدًا.نموذج الاستفسار
بُني أخيرًا، فورث الحرف والمسافات بدل أن يفرض ما عنده.
05 · البنية
ثلاثة ملفات
├── index.html 27.4 KB — 8 أقسام، 13 لوحة
├── styles.css 33.6 KB — 14 خاصية مخصّصة، 5 استعلامات وسائط
└── script.js 15.2 KB — 450 سطرًا: ترويسة · قائمة · ظهورات · معرض · نموذج
الحزمة التقنية
- Semantic HTML
- CSS Grid
- Custom properties
- IntersectionObserver
- setInterval
- Cormorant Garamond
- Jost
الإتاحة
- حبس التركيز
- aria-modal
- aria-live
- إيقاف عند التركيز
- Escape للإغلاق
- استعادة التركيز
06 · ما قاوَم
ما قاوَم
المعرض الذي يتقدّم تلقائيًّا عدائي تجاه من يقرأ بإيقاعه الخاص، ويكسر استخدام لوحة المفاتيح فعليًّا: يحطّ التركيز على شريحة تنزلق بعيدًا بعدها.
يتوقف المؤقّت عند mouseenter وfocusin، ولا يستأنف إلا عند المغادرة المقابلة. الانتقال بـ Tab إلى داخل المعرض يوقفه تمامًا، وهذا هو السلوك الذي يتوقعه مستخدم لوحة المفاتيح ولا يكاد يناله.
الذهبي على الفحمي جميل وغير قانوني في أغلب الأحيان: #C7A867 على #101314 يجتاز الفحص، لكن البرونزي المرافق له لا يجتازه بحجم النص الأساسي.
أُنزل البرونزي إلى رمز زخرفي فقط — خطوط وحدود وحالات تحويم — وتولّى الأردوازي دور اللون الثانوي المقروء. حافظت اللوحة على مداها من دون أن تشحن نصًّا غير مقروء.
قائمة الجوال بملء الشاشة هي حيث يهرب التركيز: تابع الضغط على Tab بما يكفي وستجد نفسك في الصفحة خلفها، بلا أن ترى.
تدوّر اللوحة Tab في الاتجاهين بين أول عناصرها القابلة للتركيز وآخرها، وتعيد التركيز إلى زر القائمة عند الإغلاق.
التخطيطات الممركزة تنهار عند أطوال الأسطر الكبيرة — فقرة ممركزة بعرض 90 حرفًا غير مقروءة مهما بلغت أناقة الحرف.
حُدّ القياس عند 60 حرفًا ومُركز بـ margin-inline: auto، فيصمد المحور بينما يبقى طول السطر مريحًا.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
البيت عبر السنين
خط زمني للإرث يُقرأ كسجل مطبوع لا كإنفوغرافيك — تواريخ، سطر واحد لكل منها، بلا أيقونات.
نقاط معيّنية
علامات موضع المعرض مُدارة 45 درجة لتطابق شعار العلامة. أربعة أسطر من CSS، بلا صورة.
كلمات النزلاء
شهادات مصفوفة كاقتباسات بارزة ممركزة واسم الغرفة تحتها، مستعيرةً تراتبية قرطاسية الفندق نفسها.
استفسار حجز
سبعة حقول تسأل ما كان الكونسيرج سيسأله، وتؤكّد في منطقة حيّة مهذّبة لا في نافذة منبثقة.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمّنًا وقيد التشغيل. يُحمَّل عند الطلب — لا يُجلب شيء قبل أن تطلبه.
تخطَّ المعاينة الحية
البناء الحقيقي، يعمل داخل الصفحة. المعاينة الحية صفحة مضمّنة؛ اضغط Escape للخروج منها.
افتح في ملء الشاشة ↖
