/* ===================================================================== ExitDelay — PRECISION design system for inner pages v20260928 --------------------------------------------------------------------- Source of truth: the landing (/index.php, redesign A "Precision"). Tokens, surfaces, radii, type scale and motion are copied 1:1 from it. Load (in , after the Vazirmatn font ): and put class="p-page" on . Docs: /assets/css/PRECISION.md NAMING · Every component is namespaced "p-" (p-card, p-hero, p-prose …) so it cannot collide with the class names the pages already use. · EXCEPTION — the top nav keeps the landing's names (.ed-nav, .nav-left, .nav-logo, .nav-links, .nav-item, .nav-item-gold, .nav-auth, .nav-lang, .nav-btn, .hamburger, .mobile-auth, .m-auth-btn), always scoped under .ed-nav, and #scroll-progress, because several pages' own scripts toggle them (#navbar.scrolled/.hidden, #navLinks.active, #hamburgerBtn.open). · Keyframes are prefixed "p-", the animated angle is --p-bang. · Never use .p-title / .p-desc: the landing/pricing modal owns them. · Nothing here styles a generic class (.card .btn .container .nav .hero .section .grid .title .badge .hidden .show …) — pages keep theirs. DIRECTION — RTL-first. Logical properties everywhere; the few physical bits (gradient angles, mirrored chevrons) treat any that is not dir="ltr" as RTL, and html[dir="ltr"] as LTR. ===================================================================== */ /* --------------------------------------------------------------------- 0. TOKENS (identical values to the landing :root) --------------------------------------------------------------------- */ :root { /* brand (legacy names the landing also uses) */ --bg: #04090b; --bg-2: #061417; --teal-deep: #0f2e2e; --teal-glow: #2ceaa3; --teal-mid: #1bbd82; --teal-acc: #206d68; --gold: #ffcc00; --gold-lt: #ffe184; --txt: #eef6f5; --muted: #94a6a9; --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275); /* surfaces */ --sf-0: #070d0f; /* sunken: table head, inputs, code */ --sf-1: #0a1315; /* card */ --sf-2: #0e181b; /* card gradient top / raised */ --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12); --line-teal: rgba(44,234,163,.32); /* ink (contrast on --sf-1: ink-1 ≈ 17:1, ink-2 ≈ 7.2:1, ink-3 ≈ 4.9:1) */ --ink-1: #eef6f5; --ink-2: #94a6a9; --ink-3: #76888c; /* accents — teal = links/icons/active; gold = ONLY "hot" items */ --teal: #2ceaa3; --teal-hi: #5cf0bb; --teal-ink: #03231a; /* text on solid teal */ --teal-a06: rgba(44,234,163,.06); --teal-a12: rgba(44,234,163,.12); --gold-ink: #1d1500; /* text on solid gold */ --gold-a06: rgba(255,204,0,.06); --gold-a12: rgba(255,204,0,.12); --bad: #e58585; --bad-a12: rgba(229,133,133,.12); /* radii */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-btn: 12px; --r-pill:999px; /* spacing (8px grid) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 120px; --container: 1120px; --narrow: 760px; --gutter: 32px; --nav-h: 64px; /* elevation */ --e-1: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.4); --e-2: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -24px rgba(0,0,0,.9); --e-3: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(44,234,163,.06); /* type */ --fs-micro: 12px; --fs-cap: 13px; --fs-sm: 14px; --fs-body: 14.5px; --fs-md: 16px; --fs-card: 17.5px; --fs-sub: clamp(19px, 2vw, 22px); --fs-h2: clamp(30px, 3.5vw, 46px); --fs-hero: clamp(40px, 5.4vw, 70px); /* landing hero only */ --fs-page: clamp(34px, 4.6vw, 60px); /* inner-page H1 (.p-hero-title) */ --fs-prose: 16px; --font-fa: "Vazirmatn", "Segoe UI", Tahoma, sans-serif; --font-en: "HighSpirited", "Segoe UI", Tahoma, sans-serif; --font-ui: "Vazirmatn", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; } @media (max-width:768px) { :root { --gutter:16px; --nav-h:60px; } } /* animated angle for the spinning conic rings */ @property --p-bang { syntax:''; initial-value:0deg; inherits:false; } @keyframes p-ringSpin { to { --p-bang:360deg; } } @keyframes p-hairlineFlow { to { background-position:200% 0; } } @keyframes p-blink { 50% { opacity:0; } } @keyframes p-sweep { to { background-position:-200% 0; } } @keyframes p-spin { to { transform:rotate(360deg); } } @keyframes p-pulse { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(1.35); opacity:1; } } @keyframes p-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } @keyframes p-shine { from { transform:translateX(-130%) skewX(-22deg); } to { transform:translateX(330%) skewX(-22deg); } } @keyframes p-pulseRing { 0% { transform:scale(1); opacity:.85; } 70%,100% { transform:scale(1.08,1.5); opacity:0; } } @keyframes p-sepSweep { from { inset-inline-start:0; } to { inset-inline-start:calc(100% - 140px); } } @keyframes p-aurora { from { transform:translate(0,0) scale(1); } to { transform:translate(6vw,5vh) scale(1.12); } } @keyframes p-ctaSweep { to { transform:rotate(360deg); } } @keyframes p-orb { from { transform:translate(0,0); opacity:.4; } to { transform:translate(18px,-22px); opacity:.9; } } @keyframes p-enter { from { opacity:0; transform:translateY(22px); filter:blur(6px); } } /* --------------------------------------------------------------------- 1. BASE — only and body.p-page are touched globally --------------------------------------------------------------------- */ html { scroll-padding-top:calc(var(--nav-h) + 24px); -webkit-text-size-adjust:100%; text-size-adjust:100%; } @media (prefers-reduced-motion: no-preference) { html:has(body.p-page) { scroll-behavior:smooth; } } /* safety net: a leftover page rule like html, body { background:… } would stop body's background from propagating to the canvas, so body would paint over the aurora + dot-grid layers (z-index:-1/-2) */ html:has(> body.p-page) { background:none; } /* zero-specificity base (:where) — any page rule wins over these */ :where(body.p-page, body.p-page *), :where(body.p-page, body.p-page *)::before, :where(body.p-page, body.p-page *)::after { box-sizing:border-box; } body.p-page { margin:0; min-height:100vh; min-height:100dvh; font-family:var(--font-ui); font-size:16px; line-height:1.8; color:var(--ink-1); background-color:var(--bg); /* teal glow at the top of the document (scrolls away with the hero) */ background-image: radial-gradient(1100px 620px at 50% -160px, rgba(32,109,104,.30), transparent 70%), radial-gradient(640px 380px at 50% -60px, rgba(44,234,163,.07), transparent 70%); background-repeat:no-repeat; overflow-x:clip; /* clip (not hidden): keeps position:sticky working */ color-scheme:dark; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; } :where(body.p-page) :where(button, input, select, textarea) { font-family:inherit; } :where(body.p-page) :where(img, svg, video) { max-width:100%; } body.p-page ::selection { background:rgba(44,234,163,.28); color:#fff; } /* focus: one visible teal ring for everything keyboard-reachable */ body.p-page :where(a, button, summary, input, select, textarea, [tabindex], [role="button"]):focus-visible { outline:2px solid var(--teal); outline-offset:3px; } /* --------------------------------------------------------------------- 2. BACKGROUND — CSS-only equivalent of the landing's layers base glow (body) → aurora (::before, drifts) → dot-grid (::after) no Three.js; aurora + dot-grid are desktop-only like the landing --------------------------------------------------------------------- */ body.p-page::before { content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none; opacity:.55; background: radial-gradient(26vw 26vw at 22% 24%, rgba(32,109,104,.30), transparent 62%), radial-gradient(26vw 26vw at 78% 78%, rgba(255,204,0,.07), transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(44,234,163,.10), transparent 60%); animation:p-aurora 28s ease-in-out infinite alternate; will-change:transform; } body.p-page::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle, rgba(44,234,163,.06) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 38%, #000 25%, transparent 72%); mask-image:radial-gradient(ellipse 65% 60% at 50% 38%, #000 25%, transparent 72%); } @media (max-width:768px) { body.p-page::before, body.p-page::after { display:none; } } /* thin progress bar (landing hook:
, driven by the page's own script). Physical left:0 + 90deg on purpose: identical to the landing in FA and EN (grows left → right). */ #scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; z-index:9000; background:linear-gradient(90deg, var(--teal-glow), var(--gold)); box-shadow:0 0 10px var(--teal-glow); transition:width .05s linear; } /* --------------------------------------------------------------------- 3. LAYOUT WRAPPERS --------------------------------------------------------------------- */ .p-main { display:block; position:relative; } .p-container { width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); } .p-container.is-narrow, .p-narrow { max-width:calc(var(--narrow) + 2 * var(--gutter)); } /* display/min-height/overflow reset = safety net against the landing-copied section { min-height:100vh; display:flex; align-items:center; overflow:hidden } many pages carry (overflow:hidden would also break a sticky .p-toc inside the section) */ .p-section { position:relative; display:block; min-height:0; overflow:visible; padding-block:72px; } .p-section.is-tight { padding-block:40px; } .p-section + .p-section { padding-top:24px; } .p-sep { width:calc(100% - 2 * var(--gutter)); max-width:var(--container); height:1px; margin:0 auto; background:var(--line); position:relative; overflow:hidden; } .p-container .p-sep { width:100%; } /* inside a container: full column width */ .p-sep::before { content:""; position:absolute; top:0; inset-inline-start:0; width:140px; height:1px; background:linear-gradient(90deg, transparent, rgba(44,234,163,.7), transparent); animation:p-sepSweep 9s ease-in-out infinite alternate; } .p-grid { display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr)); } .p-grid.p-cols-1 { grid-template-columns:minmax(0,1fr); } .p-grid.p-cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); } .p-grid.p-cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); } .p-grid.p-cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); } .p-grid.p-cols-auto { grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .p-stack { display:flex; flex-direction:column; gap:var(--p-gap, 16px); } .p-cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--p-gap, 8px); } .p-split { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); column-gap:64px; row-gap:32px; align-items:start; } .p-center { text-align:center; margin-inline:auto; } /* --------------------------------------------------------------------- 4. NAV — the landing's markup & class names (JS hooks), same look