/* ============================================================================ try monjiz — PRE-LAUNCH WAITLIST PAGE ---------------------------------------------------------------------------- This is the public face of trymonjiz.com until the stores go live. A visitor WITHOUT the preview flag (localStorage monjiz_gate_ok) sees only this screen; the owner reveals the full landing page through the discreet "دخول المعاينة" link, which sets the same flag the old access gate used. Palette is the CLOSED brand set — nothing outside it: violet #7C5CFC · deep #5B3FD6 · tint #A791FF ink #241757 · surface #33236B · paper #F7F7FA · black-ink #1A1526 No green, no invented hex. No emoji anywhere: the only glyphs are drawn SVG. HOW THE PAGE IS HIDDEN BEHIND IT The attribute is stamped by a tiny inline head script BEFORE first paint, so the landing page never flashes. Everything in except #pl is display:none while that attribute is present; removing the attribute (after a correct access code) restores the landing page untouched. ============================================================================ */ html[data-prelaunch], html[data-prelaunch] body { overflow: hidden; height: 100%; } html[data-prelaunch] body > *:not(#pl) { display: none !important; } /* Hidden by default: on a preview-approved visit the landing page renders as it does today and this markup never shows. */ #pl { display: none; } html[data-prelaunch] #pl { display: block; } #pl { --pl-brand:#7C5CFC; --pl-deep:#5B3FD6; --pl-tint:#A791FF; --pl-bg:#241757; --pl-surface:#33236B; --pl-ink:#1A1526; --pl-edge:rgba(124,92,252,.30); --pl-glow:rgba(124,92,252,.18); --pl-text:#FFFFFF; --pl-muted:#BEB4E4; position: fixed; inset: 0; z-index: 9999; background: var(--pl-bg); color: var(--pl-text); overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; line-height: 1.7; } html[lang="en"] #pl { font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif; } /* Violet bloom behind the lockup — same radial the landing hero uses. */ #pl .pl-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 46% at 50% 0%, var(--pl-glow), transparent); } #pl .pl-card { position: relative; max-width: 560px; margin: 0 auto; padding: clamp(40px, 9vh, 84px) 24px clamp(32px, 7vh, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; } /* ---------- Lockup: official kit render ONLY, never redrawn, never boxed ---------- */ #pl .pl-lockup { display: block; width: auto; height: auto; max-width: 300px; margin: 0 auto clamp(22px, 4vh, 34px); } html[lang="ar"] #pl .pl-lockup { max-width: 236px; } /* ---------- Approved slogan — verbatim, no trailing period ---------- */ #pl .pl-slogan { font-size: clamp(1.02rem, 2.4vw, 1.32rem); font-weight: 700; color: var(--pl-tint); letter-spacing: .005em; margin: 0 0 14px; } #pl .pl-title { font-size: clamp(1.6rem, 5.2vw, 2.3rem); font-weight: 800; line-height: 1.35; margin: 0 0 12px; } #pl .pl-sub { font-size: clamp(.95rem, 2.2vw, 1.05rem); color: var(--pl-muted); margin: 0 0 clamp(26px, 4.5vh, 36px); max-width: 44ch; } /* ---------- Stores ---------- */ #pl .pl-stores { margin-bottom: clamp(26px, 4.5vh, 36px); } #pl .pl-soon { display: inline-flex; align-items: center; gap: 9px; background: var(--pl-glow); color: var(--pl-brand); border: 1px solid var(--pl-deep); padding: 6px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; margin-bottom: 16px; } #pl .pl-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } /* Third-party store artwork: never recoloured, never overlaid, never cropped. "Coming soon" is said in the pill above, not painted onto the badge. */ #pl .pl-badges img { height: 48px; width: auto; display: block; opacity: .9; } @media (max-width: 400px) { #pl .pl-badges img { height: 42px; } } /* ---------- Waitlist form ---------- */ #pl .pl-form { width: 100%; background: var(--pl-surface); border: 1px solid var(--pl-edge); border-radius: 18px; padding: clamp(20px, 4vw, 28px); text-align: start; } #pl .pl-form-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; text-align: center; } #pl .pl-form-sub { font-size: .88rem; color: var(--pl-muted); margin: 0 0 18px; text-align: center; } #pl .pl-lbl { display: block; font-size: .84rem; font-weight: 600; color: var(--pl-muted); margin: 0 0 6px; } #pl .pl-in { width: 100%; background: var(--pl-bg); border: 1px solid var(--pl-edge); border-radius: 12px; padding: 13px 15px; color: var(--pl-text); font-size: 1rem; font-family: inherit; transition: border-color .2s; } #pl .pl-in::placeholder { color: rgba(190,180,228,.55); } #pl .pl-in:focus { outline: none; border-color: var(--pl-brand); } #pl .pl-in + .pl-lbl { margin-top: 16px; } #pl .pl-in[dir="ltr"] { text-align: left; } #pl .pl-hint { font-size: .78rem; color: var(--pl-muted); margin: 8px 0 0; } #pl .pl-err { font-size: .84rem; color: var(--pl-tint); font-weight: 600; margin: 10px 0 0; } #pl .pl-btn { width: 100%; margin-top: 18px; background: var(--pl-brand); color: #fff; border: none; border-radius: 12px; padding: 14px 24px; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .2s, opacity .2s; } #pl .pl-btn:hover { background: var(--pl-deep); } #pl .pl-btn[disabled] { opacity: .6; cursor: default; } #pl .pl-consent { font-size: .76rem; color: var(--pl-muted); margin: 14px 0 0; text-align: center; line-height: 1.65; } #pl .pl-consent a { color: var(--pl-tint); } /* ---------- Success state ---------- */ #pl .pl-done { width: 100%; background: var(--pl-surface); border: 1px solid var(--pl-deep); border-radius: 18px; padding: clamp(28px, 6vw, 40px) clamp(20px, 4vw, 28px); text-align: center; } #pl .pl-check { display: block; margin: 0 auto 16px; color: var(--pl-brand); } #pl .pl-done-title { font-size: 1.14rem; font-weight: 800; margin: 0 0 8px; } #pl .pl-done-sub { font-size: .9rem; color: var(--pl-muted); margin: 0; } /* ---------- Footer row: language, privacy, preview access ---------- */ #pl .pl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(24px, 4vh, 34px); font-size: .82rem; } #pl .pl-foot a, #pl .pl-foot button { color: var(--pl-muted); text-decoration: none; background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; cursor: pointer; transition: color .2s; } #pl .pl-foot a:hover, #pl .pl-foot button:hover { color: var(--pl-tint); } #pl .pl-sep { color: rgba(190,180,228,.4); } /* Deliberately quiet — the owner knows it is there, a visitor has no reason to. */ #pl .pl-gate-link { opacity: .55; } #pl .pl-gate-link:hover { opacity: 1; } /* ---------- Preview access code ---------- */ #pl .pl-gate { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; width: 100%; } #pl .pl-gate .pl-in { max-width: 220px; text-align: center; } #pl .pl-gate button { background: var(--pl-surface); border: 1px solid var(--pl-edge); color: var(--pl-text); border-radius: 12px; padding: 13px 22px; font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .2s; } #pl .pl-gate button:hover { border-color: var(--pl-brand); } #pl .pl-gate-err { width: 100%; text-align: center; font-size: .82rem; color: var(--pl-tint); margin: 0; } #pl [hidden] { display: none !important; } @media (prefers-reduced-motion: no-preference) { #pl .pl-card > * { animation: pl-rise .5s ease both; } #pl .pl-card > *:nth-child(2) { animation-delay: .04s; } #pl .pl-card > *:nth-child(3) { animation-delay: .08s; } #pl .pl-card > *:nth-child(4) { animation-delay: .12s; } #pl .pl-card > *:nth-child(5) { animation-delay: .16s; } #pl .pl-card > *:nth-child(6) { animation-delay: .20s; } @keyframes pl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } }