/* ===================================================== الأنماط الأساسية - Base Styles ===================================================== */ /* طلب الخطوط انتقل إلى : كان هنا @import داخل ملف مستورَد، فيصير طلبُه متتابعاً بعد تحميل هذا الملف ويحجب عرض الصفحة كلّها حتى يردّ خادم الخطوط — وإن تعذّر الوصول إليه بقيت الصفحة بيضاء. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; direction: rtl; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--bg-page); background-image: radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.06), transparent 60%), radial-gradient(ellipse at bottom left, rgba(10, 61, 46, 0.04), transparent 60%); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ===== Selection ===== */ ::selection { background-color: var(--color-gold-soft); color: var(--color-ink-deep); } ::-moz-selection { background-color: var(--color-gold-soft); color: var(--color-ink-deep); } /* ===== Scrollbar ===== */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--color-cream-warm); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--color-gold-soft), var(--color-gold-deep)); border-radius: var(--radius-full); border: 3px solid var(--color-cream-warm); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--color-gold-bright), var(--color-bronze)); } /* ===== Typography ===== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); color: var(--text-primary); letter-spacing: -0.01em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { line-height: var(--leading-relaxed); } a { color: var(--color-emerald-deep); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-gold-deep); } a:focus-visible { outline: 2px solid var(--color-gold-soft); outline-offset: 2px; border-radius: var(--radius-sm); } img, video { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } button:focus-visible { outline: 2px solid var(--color-gold-soft); outline-offset: 2px; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* ===== Containers ===== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); } .container-narrow { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6); } /* ===== Section ===== */ .section { padding-block: var(--space-16); } .section-title { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-3); position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -8px; right: 0; width: 60%; height: 3px; background: linear-gradient(90deg, var(--color-gold-bright), transparent); border-radius: var(--radius-full); } .section-subtitle { color: var(--text-tertiary); font-size: var(--text-md); margin-bottom: var(--space-10); } .section-header { margin-bottom: var(--space-10); } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-weight: 500; font-size: var(--text-sm); transition: all var(--transition-base); text-align: center; white-space: nowrap; border: 1px solid transparent; position: relative; } .btn-primary { background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid)); color: var(--color-cream); box-shadow: var(--shadow-emerald); } .btn-primary:hover { color: var(--color-cream); box-shadow: 0 12px 32px rgba(10, 61, 46, 0.3); transform: translateY(-2px); } .btn-gold { background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep)); color: var(--color-ink-deep); box-shadow: var(--shadow-gold); font-weight: 600; } .btn-gold:hover { color: var(--color-ink-deep); box-shadow: 0 12px 32px rgba(201, 169, 97, 0.4); transform: translateY(-2px); } .btn-outline { background: transparent; border-color: var(--color-border-mid); color: var(--text-primary); } .btn-outline:hover { background-color: var(--color-cream-warm); border-color: var(--color-gold-soft); color: var(--text-primary); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: rgba(201, 169, 97, 0.1); color: var(--color-gold-deep); } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); } .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); } /* ===== Badges ===== */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; background-color: var(--color-cream-warm); color: var(--text-secondary); border: 1px solid var(--color-border-light); } .badge-gold { background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(201, 169, 97, 0.1)); color: var(--color-gold-deep); border-color: rgba(201, 169, 97, 0.3); } .badge-emerald { background: linear-gradient(135deg, rgba(10, 61, 46, 0.12), rgba(15, 83, 64, 0.08)); color: var(--color-emerald-deep); border-color: rgba(10, 61, 46, 0.2); } /* ===== Utility Classes ===== */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--text-accent); } .text-emerald { color: var(--color-emerald-deep); } .text-gold { color: var(--color-gold-deep); } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Decorative Elements ===== */ .ornament { text-align: center; margin-block: var(--space-8); color: var(--color-gold-soft); font-size: var(--text-xl); letter-spacing: 1rem; } .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--color-border-mid), transparent); margin-block: var(--space-8); border: none; } .divider-gold { height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold-soft), transparent); margin-block: var(--space-6); border: none; }