/* ============================================================ Path to Peace — landing page Two themes via [data-theme="dark"|"light"] on ============================================================ */ :root { /* brand (from logo) */ --green: #066c3c; --green-deep: #044f2c; --green-glow: #34d399; --gold: #e4af23; --gold-soft: #f0d488; --navy: #151946; --radius: 18px; --max: 1180px; } /* ---- DARK (default) ---- */ [data-theme="dark"] { --bg: #060b14; --bg-2: #0a1322; --bg-3: #0f1c30; --text: #e9eef5; --text-soft: #aab4c4; --text-mute: #6f7d90; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); --card-bg: rgba(255,255,255,.04); --card-bg-hover:rgba(255,255,255,.07); --accent: var(--green-glow); --accent-2: var(--gold-soft); --hero-glow: rgba(6,108,60,.35); --hero-glow-2: rgba(228,175,35,.18); --star: rgba(255,255,255,.65); --shadow: 0 24px 60px rgba(0,0,0,.45); } /* ---- LIGHT ---- */ [data-theme="light"] { --bg: #f6f7f4; --bg-2: #eef1ec; --bg-3: #e6ebe2; --text: #14201a; --text-soft: #46554c; --text-mute: #7a8779; --line: rgba(0,0,0,.08); --line-strong: rgba(0,0,0,.14); --card-bg: rgba(255,255,255,.7); --card-bg-hover:rgba(255,255,255,.95); --accent: var(--green); --accent-2: var(--gold); --hero-glow: rgba(6,108,60,.20); --hero-glow-2: rgba(228,175,35,.16); --star: rgba(20,40,30,.30); --shadow: 0 20px 50px rgba(6,60,36,.18); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: system-ui, -apple-system, "Segoe UI", "Inter", sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .6s ease, color .6s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ THEME TOGGLE ============================================================ */ .theme-toggle { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 50; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card-bg); backdrop-filter: blur(12px); cursor: pointer; color: var(--text); font-size: 1.15rem; display: grid; place-items: center; transition: transform .4s cubic-bezier(.2,.9,.3,1.4), background .4s ease, border-color .4s ease; box-shadow: var(--shadow); } .theme-toggle:hover { transform: rotate(20deg) scale(1.08); border-color: var(--accent); } .theme-icon { grid-area: 1 / 1; transition: opacity .4s ease, transform .5s ease; } .theme-toggle .sun { opacity: 0; transform: translateY(6px) scale(.6); } .theme-toggle .moon{ opacity: 1; transform: translateY(0) scale(1); } [data-theme="light"] .theme-toggle .sun { opacity: 1; transform: translateY(0) scale(1); } [data-theme="light"] .theme-toggle .moon{ opacity: 0; transform: translateY(-6px) scale(.6); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, var(--hero-glow) 0%, transparent 60%), radial-gradient(80% 60% at 80% 110%, var(--hero-glow-2) 0%, transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } #globe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: grab; touch-action: none; } #globe:active { cursor: grabbing; } .hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(60% 50% at 50% 50%, transparent 0%, transparent 55%, var(--bg) 100%); opacity: .9; } .hero-content { position: relative; z-index: 3; text-align: center; padding: 0 1.5rem; pointer-events: none; /* let globe catch drags behind */ animation: heroIn 1.4s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .logo { width: 140px; max-width: 30vw; height: auto; margin: 0 auto 1.4rem; display: block; filter: drop-shadow(0 0 22px var(--hero-glow)); animation: float 7s ease-in-out infinite, logoGlow 4.5s ease-in-out infinite alternate; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes logoGlow { from { filter: drop-shadow(0 0 18px var(--hero-glow)); } to { filter: drop-shadow(0 0 36px var(--hero-glow-2)); } } .brand-title { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: var(--text); margin-bottom: .6rem; background: linear-gradient(120deg, var(--text) 0%, var(--accent) 55%, var(--accent-2) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 8s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .tagline { font-size: clamp(1rem, 2.4vw, 1.35rem); color: var(--text-soft); max-width: 38ch; margin: 0 auto; font-weight: 400; } .tagline-accent { color: var(--accent-2); font-style: italic; } .hero-hint { margin-top: 2.6rem; font-size: .82rem; color: var(--text-mute); letter-spacing: .18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .6rem; animation: hintFade 3.5s ease-in-out infinite; } @keyframes hintFade { 0%,100% { opacity: .35; } 50% { opacity: .9; } } .pulse-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: ping 2s ease-out infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 80%,100% { box-shadow: 0 0 0 12px transparent; } } /* ============================================================ DISCOVER SECTION ============================================================ */ .discover { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) 1.5rem 4rem; position: relative; } /* aurora wash behind the discover section */ .discover::before { content: ""; position: absolute; inset: -10vh 0 0; z-index: -1; background: radial-gradient(50% 40% at 18% 8%, var(--hero-glow) 0%, transparent 60%), radial-gradient(45% 40% at 82% 30%, var(--hero-glow-2) 0%, transparent 60%), radial-gradient(60% 50% at 50% 100%, var(--hero-glow) 0%, transparent 70%); opacity: .55; filter: blur(40px); animation: aurora 18s ease-in-out infinite alternate; pointer-events: none; } @keyframes aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(2%, 3%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 1%, 0) scale(1.02); } } /* decorative transition between hero and discover */ .divider { position: relative; height: 1px; margin: 0 auto; max-width: var(--max); background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } .divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--accent); background: var(--bg); box-shadow: 0 0 16px var(--hero-glow); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 4rem; } .eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; padding: .35rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card-bg); position: relative; } .eyebrow::before { content: ""; position: absolute; inset: -1px; border-radius: 999px; padding: 1px; background: linear-gradient(120deg, var(--accent), transparent, var(--accent-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; } .section-head h2 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: .9rem; color: var(--text); } .section-sub { color: var(--text-soft); font-size: 1.05rem; } /* ---- facts: each fact is its own section ---- */ .facts { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 4rem); } .fact { position: relative; min-height: 78vh; display: grid; place-items: center; padding: clamp(3rem, 7vw, 6rem) 1.5rem; overflow: hidden; border-top: 1px solid var(--line); } /* alternating ambient glow per fact */ .fact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 80% 50%, var(--hero-glow) 0%, transparent 60%); opacity: .25; filter: blur(30px); transition: opacity .8s ease; } .fact:nth-child(odd)::before { background: radial-gradient(60% 60% at 20% 50%, var(--hero-glow-2) 0%, transparent 60%); } .fact.in::before { opacity: .45; } .fact-inner { width: 100%; max-width: 1000px; display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } /* alternate side */ .fact:nth-child(even) .fact-inner { direction: rtl; } .fact:nth-child(even) .fact-visual, .fact:nth-child(even) .fact-body { direction: ltr; } /* ---- visual side ---- */ .fact-visual { position: relative; display: grid; place-items: center; min-height: 280px; } .fact-bignum { font-size: clamp(8rem, 20vw, 15rem); font-weight: 700; line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); background: linear-gradient(160deg, var(--accent) 0%, transparent 60%); -webkit-background-clip: text; background-clip: text; opacity: 0; transform: scale(1.25) translateY(20px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: .1s; } .fact.in .fact-bignum { opacity: 1; transform: scale(1) translateY(0); } .fact-orb { position: absolute; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-size: 2.6rem; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 0 50px var(--hero-glow), inset 0 0 30px color-mix(in srgb, var(--accent) 18%, transparent); backdrop-filter: blur(6px); opacity: 0; transform: scale(.4) rotate(-30deg); transition: opacity .9s ease .35s, transform 1s cubic-bezier(.2,.9,.3,1.4) .35s; } .fact.in .fact-orb { opacity: 1; transform: scale(1) rotate(0); } .fact-orb::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent); animation: orbSpin 18s linear infinite; } @keyframes orbSpin { to { transform: rotate(360deg); } } /* ---- body side ---- */ .fact-body { max-width: 30rem; } .fact-kicker { display: inline-block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; opacity: 0; transform: translateY(14px); transition: opacity .6s ease .25s, transform .6s ease .25s; } .fact.in .fact-kicker { opacity: 1; transform: translateY(0); } .fact-title { font-size: clamp(1.7rem, 4.5vw, 2.7rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--text); margin-bottom: 1.1rem; clip-path: inset(0 0 110% 0); transform: translateY(28px); opacity: 0; transition: opacity .7s ease .4s, transform .7s cubic-bezier(.2,.8,.2,1) .4s, clip-path .8s cubic-bezier(.2,.8,.2,1) .4s; } .fact.in .fact-title { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } /* drawing rule under title */ .fact-rule { display: block; width: 64px; height: 2px; margin-bottom: 1.3rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1) .55s; } .fact:nth-child(even) .fact-rule { transform-origin: right; } .fact.in .fact-rule { transform: scaleX(1); } .fact-text { color: var(--text-soft); font-size: 1.08rem; line-height: 1.75; opacity: 0; transform: translateY(20px); transition: opacity .8s ease .65s, transform .8s ease .65s; } .fact.in .fact-text { opacity: 1; transform: translateY(0); } .fact-text em { color: var(--accent-2); font-style: italic; } /* closing strip */ .closing { position: relative; margin-top: 5rem; text-align: center; padding: 3.5rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(120% 100% at 50% 0%, var(--hero-glow) 0%, transparent 70%), var(--card-bg); overflow: hidden; } .closing::before { content: ""; position: absolute; top: 0; left: 50%; width: 60%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); } .closing-text { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 500; color: var(--text); margin-bottom: .6rem; } .closing-sub { color: var(--text-mute); font-size: .95rem; } .closing-sub a { font-weight: 600; } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 3rem 1.5rem; } .footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; } .footer-brand { display: flex; align-items: center; gap: .7rem; font-weight: 600; letter-spacing: -.01em; } .footer-logo { width: 36px; height: auto; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; font-size: .92rem; } .footer-links a { color: var(--text-soft); } .footer-links a:hover { color: var(--accent); text-decoration: underline; } .footer-copy { color: var(--text-mute); font-size: .82rem; } /* ============================================================ PAGE-LOAD VEIL ============================================================ */ .veil { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--bg); transition: opacity .8s ease .3s, visibility .8s ease .3s; } .veil.gone { opacity: 0; visibility: hidden; } .veil-mark { font-size: clamp(1rem, 2.2vw, 1.4rem); letter-spacing: .35em; text-transform: uppercase; color: var(--accent); opacity: .8; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: veilPulse 1.2s ease-in-out infinite alternate; } @keyframes veilPulse { from { opacity: .4; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .42em; } } /* ============================================================ SCROLL PROGRESS BAR ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2px; z-index: 100; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent); transition: width .1s linear; } /* ============================================================ CURSOR GLOW ============================================================ */ .cursor-glow { position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: 40; background: radial-gradient(circle, var(--hero-glow) 0%, transparent 60%); mix-blend-mode: screen; opacity: 0; transition: opacity .4s ease; will-change: transform; } [data-theme="light"] .cursor-glow { mix-blend-mode: multiply; opacity: 0; } body:hover .cursor-glow { opacity: .5; } @media (hover: none) { .cursor-glow { display: none; } } /* ============================================================ LOGO HALO RINGS ============================================================ */ .logo-wrap { position: relative; width: 160px; max-width: 32vw; height: 160px; max-height: 32vw; margin: 0 auto 1.8rem; display: grid; place-items: center; } .logo-ring, .logo-ring-2 { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-strong); pointer-events: none; } .logo-ring { animation: ringSpin 16s linear infinite; border-color: color-mix(in srgb, var(--accent) 40%, transparent); border-top-color: transparent; border-right-color: transparent; } .logo-ring-2 { inset: -14px; animation: ringSpin 24s linear infinite reverse; border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); border-bottom-color: transparent; border-left-color: transparent; } @keyframes ringSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .logo-wrap .logo { margin: 0; width: 70%; position: relative; z-index: 2; } /* ============================================================ TAGLINE WORD-BY-WORD REVEAL ============================================================ */ .tagline .tw { display: inline-block; opacity: 0; transform: translateY(12px); animation: wordIn .5s ease forwards; animation-delay: calc(1.6s + var(--wi, 0) * 80ms); } @keyframes wordIn { to { opacity: 1; transform: translateY(0); } } /* ============================================================ SCROLL-DOWN CUE ============================================================ */ .scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text-mute); text-decoration: none; pointer-events: auto; animation: cueIn 1s ease 3s both; } @keyframes cueIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .scroll-cue-mouse { width: 24px; height: 38px; border: 1.5px solid var(--line-strong); border-radius: 14px; display: grid; justify-items: center; padding-top: 6px; } .scroll-cue-wheel { width: 3px; height: 8px; border-radius: 2px; background: var(--accent); animation: wheelDown 1.6s ease-in-out infinite; } @keyframes wheelDown { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } .scroll-cue-text { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; } .scroll-cue:hover { color: var(--accent); } .scroll-cue:hover .scroll-cue-mouse { border-color: var(--accent); } /* ============================================================ FLOATING ARABIC WORDS ============================================================ */ .floating-words { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .floating-words span { position: absolute; left: var(--x); top: var(--y); font-size: clamp(1.4rem, 4vw, 2.8rem); font-weight: 300; color: var(--accent); opacity: 0; animation: wordFloat 12s ease-in-out infinite; animation-delay: var(--d); filter: blur(.5px); } @keyframes wordFloat { 0% { opacity: 0; transform: translateY(20px) scale(.9); } 20% { opacity: .12; } 50% { opacity: .06; transform: translateY(-10px) scale(1); } 80% { opacity: .12; } 100% { opacity: 0; transform: translateY(-30px) scale(1.05); } } /* ============================================================ HERO PARALLAX ============================================================ */ .hero-content { will-change: transform; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms); } .reveal.in { opacity: 1; transform: translateY(0); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 600px) { .logo { width: 110px; } .fact-inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; } .fact:nth-child(even) .fact-inner { direction: ltr; } .fact-visual { min-height: 220px; } .fact-body { max-width: none; } .fact-rule { margin-left: auto; margin-right: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }