:root { --navy: #0F1A30; --navy-2: #16213A; --cream: #E8E3D6; --copper: #C08552; --copper-dark: #A9713F; --muted: #AEB6C9; --muted-2: #C3C9D8; --muted-3: #8792AB; --cream-bg: #F4EFE6; --ink: #26221C; --ink-muted: #6B6353; --ink-faint: #8A8172; --hairline: rgba(232, 227, 214, 0.14); --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --serif: 'Marcellus', serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--navy); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } a { color: var(--copper); } a:hover { color: var(--cream); } /* ---- Language visibility (CSS-only, works without JS; FR is the no-JS default) ---- Scoped under .site so these rules never match / . */ .site [lang] { display: none; } .site [lang="fr"] { display: contents; } .site[data-lang="en"] [lang="fr"], .site[data-lang="ar"] [lang="fr"] { display: none; } .site[data-lang="en"] [lang="en"] { display: contents; } .site[data-lang="ar"] [lang="ar"] { display: contents; } .site[data-lang="ar"] { direction: rtl; } .site [lang="ar"] { font-family: 'Amiri', serif; letter-spacing: normal; font-size: 1.07em; } .site[data-lang="ar"] [data-keep-ltr] { direction: ltr; } /* ---- Layout ---- */ .site { width: 100%; min-height: 100vh; background: var(--navy); color: var(--cream); } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 26px 56px; border-bottom: 1px solid var(--hairline); } .brand { font-family: var(--serif); font-size: 19px; letter-spacing: 0.22em; } .lang-switch { display: flex; gap: 16px; } .lang-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; letter-spacing: 0.14em; color: inherit; padding: 4px 2px; opacity: 0.38; transition: opacity 0.2s ease; } .lang-btn:hover { opacity: 0.75; } .lang-btn:focus-visible { outline: 1px solid var(--copper); outline-offset: 4px; } .site[data-lang="fr"] .lang-btn[data-lang-btn="fr"], .site[data-lang="en"] .lang-btn[data-lang-btn="en"], .site[data-lang="ar"] .lang-btn[data-lang-btn="ar"] { opacity: 1; } /* ---- Hero ---- */ .hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; } .hero-copy { padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; } .eyebrow { font-size: 12px; letter-spacing: 0.3em; color: var(--copper); text-transform: uppercase; margin-bottom: 28px; } .hero-title { font-family: var(--serif); font-size: 62px; font-weight: 400; line-height: 1.15; margin: 0 0 30px; } .hero-lede { font-size: 18px; line-height: 1.8; color: var(--muted); max-width: 460px; margin: 0; } .hero-img { width: 100%; height: 100%; min-height: 680px; object-fit: cover; display: block; } /* ---- Stats ---- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 52px 56px; gap: 24px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .stat-num { font-family: var(--serif); font-size: 48px; line-height: 1; color: var(--copper); } .stat-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-3); margin-top: 10px; } /* ---- Story ---- */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 96px 56px; align-items: center; } .story--text-first { padding-top: 0; } .story-media { width: 100%; display: block; } .section-num { font-size: 12px; letter-spacing: 0.24em; color: var(--copper); margin-bottom: 12px; } .story-p { font-size: 16px; line-height: 1.9; color: var(--muted-2); margin: 0 0 36px; } .story-p:last-child { margin-bottom: 0; } /* ---- Quote ---- */ .quote { text-align: center; padding: 24px 56px 96px; } .quote-text { font-family: var(--serif); font-size: 34px; line-height: 1.5; color: var(--cream); max-width: 860px; margin: 0 auto; } /* ---- Gallery ---- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 56px; } .gallery-img { width: 100%; height: 400px; object-fit: cover; display: block; } /* ---- Hope ---- */ .hope { max-width: 720px; margin: 0 auto; padding: 96px 56px; text-align: center; } /* ---- CTA ---- */ .cta { background: var(--cream-bg); color: var(--ink); text-align: center; padding: 104px 56px; } .cta-eyebrow { font-size: 12px; letter-spacing: 0.3em; color: var(--copper-dark); text-transform: uppercase; margin-bottom: 24px; } .cta-title { font-family: var(--serif); font-size: 46px; font-weight: 400; margin: 0 0 24px; line-height: 1.25; color: var(--navy-2); } .cta-text { font-size: 17px; line-height: 1.8; color: var(--ink-muted); max-width: 560px; margin: 0 auto 44px; } .cta-btn { display: inline-block; background: var(--navy-2); color: var(--cream-bg); text-decoration: none; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; padding: 18px 44px; transition: background 0.2s ease, color 0.2s ease; } .cta-btn:hover { background: var(--copper); color: var(--navy-2); } .cta-email { margin-top: 22px; font-size: 14px; color: var(--ink-faint); } /* ---- Footer ---- */ .site-footer { display: flex; justify-content: space-between; padding: 24px 56px; font-size: 12px; letter-spacing: 0.14em; color: var(--muted-3); text-transform: uppercase; } /* ---- Responsive ---- */ @media (max-width: 960px) { .site-header { padding: 20px 24px; } .hero { grid-template-columns: 1fr; } .hero-copy { padding: 56px 24px; } .hero-title { font-size: 42px; } .hero-img { min-height: 340px; order: -1; } .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding: 40px 24px; } .story { grid-template-columns: 1fr; gap: 32px; padding: 56px 24px; } .story--text-first { padding-top: 0; } .story-media { order: -1; } .quote { padding: 8px 24px 56px; } .quote-text { font-size: 26px; } .gallery { grid-template-columns: 1fr; gap: 16px; padding: 0 24px; } .gallery-img { height: auto; aspect-ratio: 1 / 1; } .hope { padding: 64px 24px; } .cta { padding: 72px 24px; } .cta-title { font-size: 34px; } .site-footer { flex-direction: column; gap: 8px; text-align: center; padding: 24px; } } @media (max-width: 520px) { .stats { grid-template-columns: 1fr; } .hero-title { font-size: 34px; } .stat-num { font-size: 40px; } .cta-title { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }