/* ============================================================ MAJDI WEB SERVICES — PORTFOLIO | مجدي لخدمات الويب Design language: "Atelier Spotlight" An ink-green gallery at night, lit by warm brass spotlights. Bilingual: Arabic (default) / English — see rtl.css and js/i18n.js ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=El+Messiri:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); /* ---------- Design Tokens ---------- */ :root{ /* Color */ --bg: #0c1310; --bg-soft: #0f1a15; --surface: #131f1a; --surface-2: #1a2822; --gold: #c9a667; --gold-soft: #e3cb93; --gold-dim: rgba(201,166,103,0.55); --sage: #7c9186; --ivory: #ede9de; --ivory-dim: #a8afa8; --ivory-faint: #6f776f; --line: rgba(201,166,103,0.16); --line-strong: rgba(201,166,103,0.32); --shadow-deep: rgba(0,0,0,0.55); /* Type — swapped automatically for Arabic via [dir="rtl"] below */ --font-display: 'Fraunces', 'Iowan Old Style', serif; --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', monospace; --font-display-ar: 'El Messiri', 'Fraunces', serif; --font-body-ar: 'IBM Plex Sans Arabic', 'Manrope', sans-serif; /* Scale */ --fs-hero: clamp(2.6rem, 6vw, 5.2rem); --fs-h2: clamp(2rem, 3.6vw, 3.2rem); --fs-h3: clamp(1.3rem, 2vw, 1.7rem); --fs-body: 1.05rem; /* Layout */ --container: 1240px; --gutter: clamp(1.5rem, 5vw, 4rem); --radius-s: 6px; --radius-m: 14px; --radius-l: 28px; --ease: cubic-bezier(.22,.68,.24,1); } /* Arabic is the default language of the site, so RTL typography is the default rule; English (LTR) overrides it below. Only the font choice changes with language — layout tokens above stay the same for both. */ html[dir="rtl"]{ --font-display: var(--font-display-ar); --font-body: var(--font-body-ar); } html[dir="ltr"]{ --font-display: 'Fraunces', 'Iowan Old Style', serif; --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--ivory); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4,p{ margin:0; } ::selection{ background: var(--gold); color:#0c1310; } /* Focus visibility (a11y) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; } /* ---------- Grain overlay (tactile texture, whole page) ---------- */ .grain{ position: fixed; inset:0; pointer-events:none; z-index: 999; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Bilingual content toggle ---------- Every translatable element is written twice in the markup, tagged data-lang="ar" / data-lang="en" (spans only —