پرامپت طراحی سایت صفحه ی اصلی سه بعدی

Build a single-file landing page, \`index.html\`: plain HTML, one inline \`\<style>\`, inline \`\<script>\`s, no frameworks, no build step. It is a full-screen, non-scrolling hero for a fictional space product called "Orbit". Reproduce every value below exactly. Do not round numbers, add sections or "improve" anything.
\## 1. Assets
\- \*\*Background video (looping, silent, 1664×1248, 9 s):\*\*
&#x20; \`[https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/4b73c700-3112-4c07-bd48-0af2893dff7c.mp4](https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/4b73c700-3112-4c07-bd48-0af2893dff7c.mp4)\`
\- \*\*Poster / fallback image (same artwork as a still, 1536×1024):\*\* \`assets/images/sky.webp\`. If you don't have that file, use this PNG copy:
&#x20; \`[https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0bf7409c-9fa2-4bef-a49d-34903dcc91ad.png](https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0bf7409c-9fa2-4bef-a49d-34903dcc91ad.png)\`
\- \*\*Font:\*\* Inter v4 variable (axes \`opsz\` 14–32, \`wght\` 100–900), self-hosted as \`assets/fonts/inter-var.woff2\`:
&#x20; \`\`\`css
&#x20; @font-face{ font-family:"InterVar"; font-style:normal; font-weight:100 900; font-display:block; src:url(assets/fonts/inter-var.woff2) format("woff2"); }
&#x20; \`\`\`
&#x20; If you don't have the file, load \`[https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=block](https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900\&display=block)\` and use family "Inter". Font stack: \`"InterVar","Inter","Helvetica Neue",Arial,system-ui,sans-serif\`.
The artwork is a painterly illustration: pure black upper half. Below it, a dark cratered ringed planet sits in front of mint-green flame-shaped clouds, surrounded by small moons and asteroids and two satellites, with large purple/violet cumulus clouds across the bottom. In the video the satellites fly, moons drift and stars twinkle.
\## 2. Scaling system (critical)
Everything was measured from a 1563×1006 reference render. One CSS variable \`--u\` equals one reference pixel. \*\*Every size, offset, font size, letter-spacing, radius, gap and border is written as \`calc(N \* var(--u))\`\*\*, so the whole composition scales as one rigid unit.
\`\`\`css
:root{
&#x20; \--u: max( min(calc(100vw / 1563), calc(100vh / 460)), 0.80px );
&#x20; \--ink:#ffffff; --ink-mark:rgba(255,255,255,.98); --ink-nav:rgba(255,255,255,.91);
&#x20; \--ink-sub:rgba(255,255,255,.50); --ink-pill:rgba(255,255,255,.88); --ink-dark:#000000;
&#x20; \--hairline:rgba(255,255,255,.98); --glass-bg:rgba(255,255,255,.12); --glass-line:rgba(255,255,255,.15);
&#x20; \--r-btn: calc(10 \* var(--u));
}
@supports (height:100dvh){ :root{ --u: max( min(calc(100vw / 1563), calc(100dvh / 460)), 0.80px ); } }
@supports not (width: max(1px,1vw)){ :root{ --u: calc(100vw / 1563); } }
\`\`\`
Global rules:
\- \`\*,\*::before,\*::after{box-sizing:border-box}\`, \`html,body{height:100%}\`.
\- body: \`margin:0; background:#000; color:#fff; overflow:hidden; font-optical-sizing:none; font-feature-settings:"kern" 1,"calt" 1; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision\`.
\- Optical size is set manually per element with \`font-variation-settings:'opsz' N\`.
\## 3. Layer structure
\`\`\`
div.frame        position:fixed; inset:0; overflow:hidden; background:#000; isolation:isolate
├─ video.sky     background artwork (z 0)
├─ div.veil      position:absolute; inset:0; background:rgba(0,0,0,.06); z 1; pointer-events:none
├─ header.bar    nav (z 3)
└─ div.screen    position:absolute; top:0; left:50%; translateX(-50%); width 1563u; height 1006u; z 2
&#x20;  └─ main.hero  position:absolute; left 0.9u; right -0.9u; top 0; text-align:center
\`\`\`
\*\*video.sky:\*\*
\- \`\<video class="sky" aria-hidden="true" autoplay muted loop playsinline preload="auto" poster="…" src="…video URL…">\`
\- \`position:absolute; top:calc(-1.5\*u); left:50%; transform:translateX(-50%); width:100%; height:auto; min-height:calc(100% + 1.5u); object-fit:cover; object-position:center top; z-index:0; pointer-events:none; user-select:none\`.
\- Width-driven and flush to the top; it overflows the bottom but is never shorter than the viewport.
\## 4. Header (\`header.bar\`)
\*\*Bar:\*\* \`position:absolute; left:calc(50% - 495.5u); top:7.5u; width:983.5u; height:36.2u\`.
\*\*Brand\*\* (\`a.brand\`, \`aria-label="Orbit — home"\`):
\- Positioning: absolute, left 0, vertically centred (\`top:50%; translateY(-50%)\`). Flex row, gap 11.4u, colour \`--ink-mark\`, no underline.
\- Logo: SVG, viewBox \`0 0 26.9 16.6\`, displayed at 26.9u × 16.6u, \`overflow:visible\`, \`fill="none"\`. Draw these in order:
&#x20; 1\. Ring back: \`\<ellipse cx="13.25" cy="8.4" rx="13.2" ry="2.9" transform="rotate(-25 13.25 8.4)" stroke="currentColor" stroke-width="1.25"/>\`
&#x20; 2\. Gap: \`\<circle cx="13.25" cy="8.4" r="8.8" fill="#000"/>\`
&#x20; 3\. Planet: \`\<circle cx="13.25" cy="8.4" r="8.1" fill="currentColor"/>\`
&#x20; 4\. Ring front, black cut: the same ellipse with \`stroke="#000" stroke-width="0.9" stroke-dasharray="28.2 28.2"\`
&#x20; 5\. Ring front, white: the same ellipse with \`stroke="currentColor" stroke-width="1.25" stroke-dasharray="28.2 28.2"\`
\- Word "Orbit": 17.5u, weight 550, \`'opsz' 22\`, letter-spacing 0, line-height 1.
\*\*Nav links\*\* (\`nav.links\`, \`aria-label="Primary"\`):
\- Absolute, left 353.8u, vertically centred. Flex, gap 25.2u.
\- Links: About \`#about\`, Features \`#features\`, Pricing \`#pricing\`, Contact \`#contact\`, Blog \`#blog\`.
\- Text: 11.9u, weight 450, \`'opsz' 15\`, letter-spacing -0.30u, colour \`--ink-nav\`, nowrap, \`transition:color .18s ease\`, white on hover.
\*\*Actions\*\* (\`div.actions\`): absolute, right 0, top 0. Flex, gap 7.8u. Children:
\- \`a.btn.ghost\` "Try for free" → \`#try\`
\- \`a.btn.solid\` "Get a demo" → \`#demo\`
\- \`button.menu#menu-btn\`: \`aria-label="Menu" aria-expanded="false" aria-controls="menu-sheet"\`. Contains an SVG, viewBox \`0 0 20 14\`, path \`M0 1h20M0 7h20M0 13h20\`, stroke currentColor, width 1.6, round caps.
\- \`nav.sheet#menu-sheet\`, \`aria-label="Menu"\`: the same 5 links plus \`a.btn.solid\` "Get a demo" → \`#demo\`.
\*\*Buttons (shared):\*\*
\- \`.btn\`: inline-flex centred, radius 10u, no underline, nowrap, line-height 1, border 0, transition on background-color, color and border-color at .18s ease.
\- \`.ghost\`: transparent background, white text, \`1u solid rgba(255,255,255,.98)\` border; hover background \`rgba(255,255,255,.10)\`.
\- \`.solid\`: \`#fff\` background, black text; hover \`#e9e9ea\`.
\*\*Header buttons\*\* (\`.bar .btn\`):
\- Height and line-height 36.2u; 11.9u; weight 500; \`'opsz' 15\`; letter-spacing -0.38u.
\- Ghost: width 85.5u.
\- Solid: width 88.2u, 12.15u, weight 550, letter-spacing -0.35u.
\*\*Menu button:\*\*
\- Hidden on desktop (\`display:none\`). 36.2u square, radius 10u, \`1u solid rgba(255,255,255,.35)\` border, transparent, white, \`cursor:pointer\`, padding 0.
\- SVG at 55% × 55%. Hover background \`rgba(255,255,255,.10)\`.
\*\*Menu sheet:\*\*
\- \`display:none\`; shown when \`.bar[data-open="true"]\`.
\- Absolute, \`top:calc(100% + 9u)\`, right 0, min-width 210u, padding 10u, radius 14u.
\- Background \`rgba(18,18,20,.88)\`, \`1u solid rgba(255,255,255,.15)\` border, \`backdrop-filter:blur(18u) saturate(140%)\` (with the -webkit- prefix), \`box-shadow:0 18u 44u rgba(0,0,0,.55)\`.
\- Links: block, padding 9u 10u, radius 9u, \`--ink-nav\`, 14u, weight 450, \`'opsz' 15\`, letter-spacing -0.30u. Hover background \`rgba(255,255,255,.08)\`, white text.
\- Its solid button: flex, width 100%, height 38u, margin-top 8u, 14u, weight 500, \`'opsz' 15\`, letter-spacing -0.30u, black text.
\## 5. Hero (inside \`.screen > main.hero\`)
\*\*Eyebrow pill\*\* (\`a.pill\` → \`#new\`):
\- Box: absolute, top 129.6u, left 50%, \`translateX(-50%)\`, inline-flex, items centred. Width 194.5u, height 22.4u, padding-left 4.0u, padding-right 8.6u.
\- Style: radius 999px, background \`rgba(255,255,255,.12)\`, \`1u solid rgba(255,255,255,.15)\` border, \`backdrop-filter:blur(10u)\` (with the -webkit- prefix), nowrap, \`transition:background-color .18s ease\`. Hover background \`rgba(255,255,255,.17)\`.
\- Contents, in order:
&#x20; 1\. \`span.chip\` "New": inline-flex centred, 33.3u × 14u, radius 999px, white background, black text, 10.2u, weight 600, \`'opsz' 14\`, padding-top 1.7u, letter-spacing -0.1u, line-height 1.
&#x20; 2\. \`span.pill-label\` "Go beyond the ordinary": margin-left 3.4u, \`position:relative; top:1u\`, colour \`rgba(255,255,255,.88)\`, 12.4u, weight 450, \`'opsz' 15\`, letter-spacing -0.48u, height and line-height 22.4u.
&#x20; 3\. Arrow SVG: viewBox \`0 0 9.5 8\`, size 9.5u × 8u, \`margin-left:auto\`, colour \`rgba(255,255,255,.95)\`, path \`M0.7 4H8.8M5.6 0.75 8.85 4 5.6 7.25\`, stroke currentColor, width 1.35, round caps and joins.
\*\*Headline\*\* (\`h1\`):
\- Box: absolute, left 0.6u, right -0.6u, top 168.5u, margin 0.
\- Type: 55u, weight 545, \`'opsz' 32\`, line-height 56u, letter-spacing -0.76u, white.
\- Two lines, each wrapped for a mask reveal: \`\<span class="ln">\<span class="ln-i">See beyond now\</span>\</span>\` and \`\<span class="ln">\<span class="ln-i">Explore the stars\</span>\</span>\`.
\- \`.ln{display:block; overflow:hidden; padding-bottom:7u; margin-bottom:-7u}\` (clears descenders without changing layout). \`.ln-i{display:block}\`.
\*\*Sub-headline\*\* (\`p\`): "Everything you need to discover, understand, and explore what is out there."
\- Box: absolute, left 50%, \`transform:translateX(calc(-50% + 0.25u))\`, top 292.6u, margin 0, width 700u.
\- Type: 15.7u, weight 400, \`'opsz' 20\`, line-height 24u, letter-spacing -0.05u, colour \`rgba(255,255,255,.50)\`.
\*\*CTA row\*\* (\`div.cta\`):
\- Absolute, left 50%, \`translateX(-50%)\`, top 342.8u. Flex, gap 9.9u.
\- Buttons: \`a.btn.ghost\` "Try for free" → \`#try\`, and \`a.btn.solid\` "Explore" → \`#explore\`.
\- \`.cta .btn\`: height and line-height 36.4u, padding-top 2u, 13.3u, weight 480, \`'opsz' 16\`, letter-spacing -0.34u. Ghost width 99.6u; solid width 96.4u.
\## 6. Accessibility
\- \`a:focus-visible, button:focus-visible{ outline:2px solid #9b8cff; outline-offset:3px; border-radius:4px }\`.
\- Add a \`.sr\` visually-hidden utility.
\- Meta tags: \`\<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">\`, title \`Orbit — See beyond now\`, description "Everything you need to discover, understand, and explore what is out there."
\## 7. Responsive
\- \*\*≤1023px (tablet):\*\* \`--u: calc(100vw/900)\`. \`.bar{left:4.2vw; width:91.6vw}\`. Hide \`.links\` and the header \`.solid\`. Show \`.menu\` (inline-flex).
\- \*\*≤640px (phone):\*\* \`--u: calc(100vw/486)\`. \`.bar{left:5.2vw; width:89.6vw}\`. \`.hero p{width:min(560u, 88vw); line-height:23u}\`. \`.pill{padding-right:8u}\`.
\- \*\*≤380px:\*\* \`--u: calc(100vw/470)\`.
\- \*\*≤1023px and height ≤520px:\*\* \`--u: min(calc(100vw/900), calc(100vh/470))\`.
\- \*\*min-aspect-ratio 3/1 (ultra-wide):\*\*
&#x20; \- \`.sky{top:auto; bottom:0; height:auto; min-height:0; width:100%; min-width:100%}\` (anchor the artwork to the bottom).
&#x20; \- \`.veil{background:linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.18) 100%)}\`.
\## 8. Entrance animation (runs once on load, then is removed)
\*\*Before first paint\*\* (inline \`\<script>\` in \`\<head>\`):
\- If \`prefers-reduced-motion: reduce\`, do nothing.
\- Otherwise add class \`intro\` to \`\<html>\`, plus a failsafe \`setTimeout(() => remove 'intro' and 'intro-play', 5000)\`.
\*\*CSS\*\* (inside \`@media (prefers-reduced-motion: no-preference)\`):
Easing and distance variables:
\`\`\`css
\--e-reveal: cubic-bezier(.18,.85,.26,1);
\--e-soft:   cubic-bezier(.22,1,.36,1);
\--e-nav:    cubic-bezier(.33,1,.68,1);
\--rise:     calc(10 \* var(--u));
\--rise-lg:  calc(13 \* var(--u));
\`\`\`
Opening frame:
\- Under \`.intro\`, these start at \`opacity:0\`: \`.brand\`, \`.links a\`, \`.actions > .btn\`, \`.actions > .menu\`, \`.pill\`, \`.hero p\`, \`.cta .btn\`.
\- \`.intro .ln-i{transform:translate3d(0,115%,0)}\`.
\- Set \`will-change:transform,opacity\` on the brand, pill, p, \`.ln-i\` and CTA buttons.
Keyframes (each keeps the element's existing centring transform):
\- \`i-rise\`: from opacity 0, \`translate3d(0,var(--rise),0)\` → opacity 1, \`none\`.
\- \`i-rise-cy\`: the same, prefixed with \`translateY(-50%)\` (for the brand).
\- \`i-pill\`: from opacity 0, \`translateX(-50%) translate3d(0,var(--rise-lg),0) scale(.972)\` → opacity 1, \`translateX(-50%)\`.
\- \`i-sub\`: from opacity 0, \`translateX(calc(-50% + 0.25u)) translate3d(0,var(--rise-lg),0)\` → opacity 1, \`translateX(calc(-50% + 0.25u))\`.
\- \`i-btn\`: from opacity 0, \`translate3d(0,var(--rise-lg),0) scale(.986)\` → opacity 1, \`none\`.
\- \`i-line\`: from \`translate3d(0,115%,0)\` → \`none\`.
Timeline (under \`.intro-play\`, all \`both\`). Ends at about 1.69s:
\| Element | Keyframes | Duration | Easing | Delay |
\|---|---|---|---|---|
\| Brand | i-rise-cy | .62s | e-nav | 0s |
\| Nav links 1–5 | i-rise | .55s | e-nav | .070 / .115 / .160 / .205 / .250s |
\| \`.actions > .btn\` and \`.menu\` | i-rise | .55s | e-nav | .215s |
\| \`.actions > .ghost\` (overrides the row above) | i-rise | .55s | e-nav | .160s |
\| Pill | i-pill | .62s | e-soft | .26s |
\| Headline line 1 | i-line | .95s | e-reveal | .34s |
\| Headline line 2 | i-line | .95s | e-reveal | .48s |
\| Sub-headline | i-sub | .70s | e-soft | .86s |
\| CTA button 1 | i-btn | .62s | e-soft | 1.00s |
\| CTA button 2 | i-btn | .62s | e-soft | 1.07s |
Reduced motion: \`@media (prefers-reduced-motion: reduce){ \*{transition:none!important; animation:none!important} }\`.
\*\*Script at the end of \`\<body>\`:\*\*
\- If \`\<html>\` has \`intro\`, wait for \`document.fonts.ready\` (with a 700ms fallback timer), then call start inside a double \`requestAnimationFrame\`. The mask reveal must never show a fallback font.
\- start runs once: add \`intro-play\`.
\- On the \`animationend\` of the last CTA button (ignore events from other targets), or after a 3000ms fallback, remove both \`intro\` and \`intro-play\`, so no animation or \`will-change\` remains.
\## 9. Mobile menu script
\- \`set(open)\` writes \`bar.dataset.open = 'true'|'false'\`, updates \`aria-expanded\`, and swaps \`aria-label\` between "Close menu" and "Menu". Call \`set(false)\` on load.
\- Button click: \`stopPropagation\`, then toggle.
\- A document click outside \`.bar\` closes it. Pressing Escape closes it.
\## 10. Background video playback script
\- Get \`video.sky\` and set \`v.muted = true\`.
\- \`play()\`: if paused, call \`v.play()\` and swallow the rejected promise.
\- Call it immediately, on \`canplay\`, on \`visibilitychange\` when the page becomes visible, and once on the first \`pointerdown\`, \`touchstart\` or \`scroll\` (passive listeners).
\- The \`autoplay\` attribute alone doesn't start the video reliably.
\## Final check
\- At 1563×1006, the nav sits at the top of a pure-black band.
\- The pill, a two-line 55u headline, a 50%-white sub-line and two buttons are centred in the black area.
\- The animated planet illustration fills the lower half.
\- Nothing scrolls. The entrance plays once, in about 1.7s. این سایت رو به فارسی با رعایت راست به چپ برام بنویس