Shop

إصدار النهضة – Shopify

/* إعدادات الخلفية والخط */
body, html {
margin: 0; padding: 0; height: 100%;
background-color: #3b4a3c; /* اللون الأخضر الزيتوني من صورتك */
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: white;
overflow: hidden;
}

/* الهيدر العلوي */
header {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 50px; position: absolute; width: 100%; z-index: 100;
}
.nav-links span { margin: 0 15px; font-size: 14px; cursor: pointer; opacity: 0.8; }
.btn-start { background: white; color: black; padding: 8px 25px; border-radius: 25px; text-decoration: none; font-weight: bold; }

/* حاوية العرض الرئيسية */
.hero {
position: relative; height: 100vh; width: 100%;
display: flex; align-items: center; justify-content: center;
}

/* الشخصية اليسرى (تمثيل هندسي باللون البيج) */
.person-left {
position: absolute; left: 5%; width: 30%; height: 60%;
background: linear-gradient(to bottom, #d2b48c 0%, #8b4513 100%);
border-radius: 50% 50% 20% 20%;
opacity: 0.7; z-index: 1;
}

/* الشخصية اليمنى (تمثيل هندسي باللون البني) */
.person-right {
position: absolute; right: 5%; width: 30%; height: 60%;
background: linear-gradient(to bottom, #8b4513 0%, #2a1a1a 100%);
border-radius: 50% 50% 20% 20%;
opacity: 0.7; z-index: 1;
}

/* المربع الأبيض في المنتصف (التصميم الأساسي) */
.content-box {
position: relative; z-index: 10;
border: 1.5px solid rgba(255, 255, 255, 0.4);
padding: 40px; width: 380px;
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.2);
text-align: right;
}

.content-box h1 { font-size: 2.8rem; line-height: 1; margin-bottom: 15px; font-family: serif; }
.content-box p { font-size: 13px; margin-bottom: 25px; line-height: 1.6; }

/* القائمة داخل المربع */
.menu-list {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
list-style: none; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px;
}
.menu-list li { font-size: 14px; border-bottom: 1px dotted rgba(255,255,255,0.3); padding-bottom: 4px; }

/* العناصر الوردية الفاقعة (مثل الكوب والحقيبة) */
.pink-accent {
position: absolute; background: #ff007f;
box-shadow: 0 0 20px #ff007f; z-index: 50;
}
.cup-shape { left: 8%; top: 35%; width: 40px; height: 60px; border-radius: 5px; transform: rotate(-15deg); }
.bag-shape { right: 8%; bottom: 15%; width: 100px; height: 100px; border-radius: 10px; transform: rotate(10deg); }

شتاء 2026 – إصدارات Shopify
الطبعات
البحث

Shopify.com
ابدأ مجاناً