/* ═══════════════════════════════════════════════════════════ مژده — استایل اصلی سه پس‌زمینه: شب / روشن / آبی (data-theme روی ) ═══════════════════════════════════════════════════════════ */ /* ---------- پایه ---------- */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;height:100%} html{-webkit-text-size-adjust:100%} body{ font-family:'Vazirmatn',system-ui,'Segoe UI',sans-serif; color:var(--ink); background:var(--bg-solid); -webkit-tap-highlight-color:transparent; overflow-x:hidden; } body.page-hero{scroll-behavior:smooth} ::selection{background:var(--pink);color:#fff} /* نوار اسکرول */ *{scrollbar-width:thin;scrollbar-color:var(--pink) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--pink);border-radius:99px;border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-track{background:transparent} img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} a{color:inherit;text-decoration:none} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:14px} /* ---------- تم‌ها ---------- */ :root, html[data-theme="night"]{ --bg-solid:#02081d; --bg: radial-gradient(120% 90% at 72% 14%, #2a1a63 0%, #101248 40%, #050c28 72%, #01060f 100%); --glow-a:radial-gradient(42% 46% at 14% 76%, rgba(122,72,222,.45), transparent 70%); --glow-b:radial-gradient(38% 42% at 84% 34%, rgba(255,110,190,.26), transparent 70%); --cloud:rgba(255,255,255,.07); --ink:#ffffff; --ink-dim:rgba(255,255,255,.74); --pink:#ff58ab; --gold:#ffd469; --violet:#b98bff; --panel-bg:rgba(255,255,255,.08); --panel-line:rgba(255,255,255,.2); --panel-bg-on:rgba(255,255,255,.95); --panel-ink-on:#1a1140; --title-glow:0 0 34px rgba(150,120,255,.65), 0 0 70px rgba(90,60,200,.35); --pink-glow:0 0 28px rgba(255,88,171,.8); --star-op:1; --deco-op:.55; --deco-blur:1.4px; --focus:#ffd469; --shade:rgba(0,0,0,.45); --card:rgba(255,255,255,.07); --card-line:rgba(255,255,255,.14); --bar-bg:rgba(5,9,32,.74); --sheet:rgba(255,255,255,.055); --sheet-line:rgba(255,255,255,.12); --flame:#ff6a3d; --flame2:#ff2e63; --mint:#3ee6b0; --ink3:rgba(255,255,255,.55); --pop:#fff; --aura1:rgba(190,150,255,.42); --aura2:rgba(255,110,190,.16); --ray:rgba(255,230,170,.075); } html[data-theme="light"]{ --bg-solid:#ece6fb; --bg: radial-gradient(120% 95% at 70% 10%, #ffffff 0%, #ecdcfb 34%, #d7dcfb 62%, #c7c9f3 100%); --glow-a:radial-gradient(46% 50% at 16% 74%, rgba(255,150,205,.55), transparent 72%); --glow-b:radial-gradient(42% 44% at 86% 30%, rgba(170,140,255,.42), transparent 72%); --cloud:rgba(255,255,255,.65); --ink:#3a2159; --ink-dim:rgba(58,33,89,.72); --pink:#ff2d8f; --gold:#f2a521; --violet:#8a5cf0; --panel-bg:rgba(255,255,255,.62); --panel-line:rgba(120,80,190,.22); --panel-bg-on:rgba(88,48,160,.95); --panel-ink-on:#ffffff; --title-glow:0 2px 0 rgba(255,255,255,.9), 0 0 30px rgba(255,190,240,.9); --pink-glow:0 0 22px rgba(255,45,143,.45); --star-op:1; --deco-op:.72; --deco-blur:1px; --focus:#8a5cf0; --shade:rgba(80,50,140,.18); --card:rgba(255,255,255,.7); --card-line:rgba(120,80,190,.18); --bar-bg:rgba(255,255,255,.8); --sheet:rgba(255,255,255,.72); --sheet-line:rgba(120,80,190,.16); --flame:#ff5a2b; --flame2:#e8134f; --mint:#0fb98a; --ink3:rgba(58,33,89,.55); --pop:#2a1348; --aura1:rgba(255,255,255,.95); --aura2:rgba(214,170,255,.45); --ray:rgba(255,255,255,.5); } html[data-theme="blue"]{ --bg-solid:#0058d8; --bg: radial-gradient(120% 95% at 66% 16%, #2a86ff 0%, #0f6ae8 38%, #0350cf 70%, #0a2f9e 100%); --glow-a:radial-gradient(44% 48% at 12% 78%, rgba(140,120,255,.5), transparent 72%); --glow-b:radial-gradient(40% 44% at 88% 28%, rgba(120,200,255,.35), transparent 72%); --cloud:rgba(255,255,255,.14); --ink:#ffffff; --ink-dim:rgba(255,255,255,.8); --pink:#ff5fae; --gold:#ffdf72; --violet:#c7b3ff; --panel-bg:rgba(255,255,255,.14); --panel-line:rgba(255,255,255,.3); --panel-bg-on:rgba(255,255,255,.95); --panel-ink-on:#0c3f9e; --title-glow:0 0 30px rgba(90,170,255,.85), 0 3px 0 rgba(10,50,140,.3); --pink-glow:0 0 26px rgba(255,95,174,.8); --star-op:1; --deco-op:.6; --deco-blur:1.2px; --focus:#ffdf72; --shade:rgba(0,30,90,.35); --card:rgba(255,255,255,.13); --card-line:rgba(255,255,255,.22); --bar-bg:rgba(6,52,150,.72); --sheet:rgba(255,255,255,.1); --sheet-line:rgba(255,255,255,.2); --flame:#ff7a45; --flame2:#ff3b6b; --mint:#44f0bd; --ink3:rgba(255,255,255,.6); --pop:#fff; --aura1:rgba(190,230,255,.5); --aura2:rgba(160,130,255,.2); --ray:rgba(255,255,255,.1); } /* ---------- صحنه ---------- */ .scene{position:fixed;inset:0;overflow:hidden;background:var(--bg-solid);z-index:0} .sky{position:absolute;inset:0;background:var(--bg)} .sky::after{content:'';position:absolute;inset:0;background:var(--glow-a),var(--glow-b)} .sky,.sky::after{transition:background .5s ease} /* ابرهای نرم */ .clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden} .clouds i{position:absolute;display:block;border-radius:50%;background:var(--cloud);filter:blur(28px)} .clouds i:nth-child(1){left:-6%;bottom:-12%;width:46%;height:38%} .clouds i:nth-child(2){left:30%;bottom:-18%;width:40%;height:30%} .clouds i:nth-child(3){right:-8%;top:-10%;width:38%;height:34%} .clouds i:nth-child(4){left:8%;top:-14%;width:30%;height:26%} /* ستاره‌ها */ .twinkles{position:absolute;inset:0;pointer-events:none;opacity:var(--star-op)} .twinkles img,.twinkles b{position:absolute;animation:twk var(--d,3.4s) ease-in-out var(--dl,0s) infinite} .twinkles b{border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)} @keyframes twk{0%,100%{opacity:.2;transform:scale(.72) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(12deg)}} /* جعبه‌های شناور تزئینی */ .floaters{position:absolute;inset:0;pointer-events:none;opacity:var(--deco-op)} .floaters img{position:absolute;filter:blur(var(--deco-blur)) drop-shadow(0 10px 22px var(--shade))} .f1{left:-3%;bottom:-6%;width:15%;animation:flt 11s ease-in-out infinite} .f2{left:11%;bottom:-9%;width:12%;animation:flt2 13s ease-in-out 1.1s infinite} .f3{left:1%;top:1%;width:8%;animation:flt 14s ease-in-out .6s infinite} .f4{left:20%;top:-9%;width:8%;animation:flt2 12s ease-in-out .9s infinite} .f5{right:-2%;bottom:-7%;width:13%;animation:flt 15s ease-in-out .3s infinite} .f6{right:4%;top:6%;width:8%;animation:flt2 16s ease-in-out 1.6s infinite} @keyframes flt{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(4deg)}} @keyframes flt2{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-28px) rotate(-3deg)}} /* ---------- نوار بالا ---------- */ .topbar{ position:fixed;inset-inline:0;top:0;z-index:60; transition:background .35s,backdrop-filter .35s,box-shadow .35s,padding .3s; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:clamp(10px,1.8vh,20px) clamp(12px,2.4vw,34px); } .topbar.stuck{ background:var(--bar-bg);backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 8px 30px var(--shade);padding-block:clamp(7px,1.1vh,12px); } .brand{display:inline-flex;align-items:center;gap:.45em;font-family:'Lalezar',sans-serif; font-size:clamp(20px,2.3vw,40px);line-height:1.4;letter-spacing:.5px; text-shadow:var(--pink-glow)} .brand img{width:.72em;height:.72em;object-fit:contain;animation:twk 3.6s ease-in-out infinite} .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .seg{position:relative;display:flex;align-items:center;padding:4px;border-radius:999px; background:var(--panel-bg);border:1px solid var(--panel-line);backdrop-filter:blur(10px)} .seg .knob{position:absolute;top:4px;bottom:4px;right:0;border-radius:999px;background:var(--panel-bg-on); box-shadow:0 4px 14px var(--shade);transition:transform .34s cubic-bezier(.2,.9,.25,1),width .34s} .seg button{position:relative;z-index:1;padding:6px clamp(9px,1vw,15px);border-radius:999px; font-size:clamp(11px,.92vw,14px);font-weight:700;color:var(--ink-dim);transition:color .3s;white-space:nowrap} .seg button[aria-pressed="true"]{color:var(--panel-ink-on)} .pill-btn{display:inline-flex;align-items:center;gap:.4em;padding:7px clamp(10px,1.1vw,16px); border-radius:999px;background:var(--panel-bg);border:1px solid var(--panel-line); font-size:clamp(11px,.92vw,14px);font-weight:700;color:var(--ink-dim); backdrop-filter:blur(10px);transition:transform .18s,background .25s,color .25s;white-space:nowrap} .pill-btn:hover{transform:translateY(-1px);color:var(--ink)} .pill-btn.hot{background:linear-gradient(180deg,#ffe28a,#ffb43c);color:#3a2000;border-color:transparent; box-shadow:0 6px 20px rgba(255,180,60,.4)} .pill-btn svg{width:1.05em;height:1.05em;fill:currentColor} /* ---------- چیدمان قهرمان ---------- */ .hero{position:relative;z-index:10;height:100dvh;min-height:540px;overflow:hidden} .hero .floaters{position:absolute;inset:0} .panel{ position:absolute;left:clamp(14px,3.4vw,72px);top:50%;transform:translateY(-50%);z-index:8; width:min(60vw,920px);display:flex;flex-direction:column;align-items:center; gap:clamp(8px,1.6vh,22px); } /* عنوان */ .title{ margin:0;font-family:'Lalezar',sans-serif;font-weight:400;text-align:center; font-size:clamp(26px,4.4vw,80px);line-height:1.22;letter-spacing:.5px; text-shadow:var(--title-glow); } .title em{font-style:normal;color:var(--pink);text-shadow:var(--pink-glow)} .swoosh{position:relative;width:min(74%,620px);height:clamp(12px,2.2vh,26px);margin-top:-.2em} .swoosh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .swoosh path{fill:none;stroke:url(#goldline);stroke-width:4;stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(255,205,105,.85));animation:shine 3.4s ease-in-out infinite} .swoosh img{position:absolute;width:clamp(12px,1.5vw,26px);height:auto} .swoosh img:nth-of-type(1){left:4%;top:-120%} .swoosh img:nth-of-type(2){right:6%;top:-150%} @keyframes shine{0%,100%{opacity:.75}50%{opacity:1}} /* ---------- شبکه‌ی چهار جعبه ---------- */ .grid{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(4px,1.2vh,20px) clamp(10px,2.6vw,56px); width:min(48vw,660px); } .tile{ position:relative;display:flex;flex-direction:column;align-items:center; gap:clamp(4px,.9vh,12px);padding:0; transition:transform .42s cubic-bezier(.2,.9,.25,1); } .tile:hover,.tile.is-near{transform:translateY(-8px) scale(1.055)} .tile:active{transform:translateY(-3px) scale(1.02)} .boxwrap{position:relative;width:clamp(78px,10.6vw,178px);aspect-ratio:1/1} .platform{position:absolute;left:50%;bottom:2%;transform:translateX(-50%); width:124%;height:52%;border-radius:50%; background:radial-gradient(60% 60% at 50% 50%, var(--p1) 0%, var(--p2) 45%, transparent 72%); filter:blur(6px);opacity:.92;transition:opacity .35s,transform .42s} .platform::after{content:'';position:absolute;left:50%;top:26%;transform:translateX(-50%); width:76%;height:56%;border-radius:50%;background:var(--p3);filter:blur(9px);opacity:.75} .tile:hover .platform,.tile.is-near .platform{opacity:1;transform:translateX(-50%) scale(1.08)} /* جعبه یک عکس است؛ در با clip-path از همان عکس بریده می‌شود، پس هیچ درزی دیده نمی‌شود. --ll/--lr لبه‌ی پایین در کنار چپ/راست، --lx و --lc گوشه‌ی جلوی در (درصد از عکس). */ .box{position:absolute;inset:0;z-index:2;filter:drop-shadow(0 10px 18px var(--shade))} .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom} .box-base{z-index:2} .box-lid{z-index:4; clip-path:polygon(0 0,100% 0,100% var(--lr),var(--lx) var(--lc),0 var(--ll)); transform-origin:var(--lx) var(--lc); transition:transform .55s cubic-bezier(.34,1.56,.64,1)} .tile.is-open .box-base{ clip-path:polygon(0 var(--ll),var(--lx) var(--lc),100% var(--lr),100% 100%,0 100%)} /* موس رویش: جعبه ذوق می‌کند و قِل می‌خورد */ .box-base,.box-lid{transform-origin:50% 100%} .tile.is-near .box-base,.tile.is-near .box-lid,.tile.is-near .shine{animation:boing .75s cubic-bezier(.3,1.4,.5,1) both} @keyframes boing{0%{transform:scale(1,1)}22%{transform:scale(1.1,.88)}48%{transform:scale(.94,1.08) translateY(-7%)} 70%{transform:scale(1.03,.97)}100%{transform:scale(1,1)}} .boxwrap .bob{animation:bob 3.6s ease-in-out var(--bd,0s) infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}} /* برق که هر چند ثانیه از روی جعبه رد می‌شود (فقط روی خود جعبه، با ماسک همان عکس) */ .shine{position:absolute;inset:0;z-index:5;pointer-events:none; -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center bottom;mask-position:center bottom; background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.75) 47%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.75) 53%,transparent 62%); background-size:300% 100%;background-repeat:no-repeat;background-position:130% 0; mix-blend-mode:soft-light;opacity:.9; animation:sweep 6.5s cubic-bezier(.45,.05,.3,1) calc(var(--bd,0s) * 1.6 + 1.2s) infinite} @keyframes sweep{0%{background-position:130% 0}22%,100%{background-position:-30% 0}} .tile.is-open .shine{opacity:0} /* نور داخل جعبه — موقع باز شدن فوران می‌کند، موقع دید زدن آرام می‌تابد */ .burst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2); width:130%;aspect-ratio:1;border-radius:50%;z-index:3;opacity:0;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, #fff 0%, var(--p1) 34%, transparent 70%); mix-blend-mode:screen;transition:opacity .4s,transform .5s} .tile.is-open .box-lid{animation:none;transform-origin:var(--lx) var(--lc);transform:translateY(-22%) translateX(-4%) rotate(-13deg) scale(1.03)} .tile.is-open .box-base{animation:none} .tile.is-open .burst{animation:burst .9s cubic-bezier(.2,.8,.3,1) forwards} @keyframes burst{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.18)} 20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)} 62%{opacity:.7;transform:translate(-50%,-50%) scale(1.5)} 100%{opacity:.55;transform:translate(-50%,-50%) scale(1.32)} } .tile.is-open{transform:translateY(-14px) scale(1.09)} /* برچسب زیر جعبه */ .label{ display:inline-flex;align-items:center;gap:.5em; padding:.42em 1.05em .42em .45em;border-radius:999px; font-size:clamp(11px,1.12vw,20px);font-weight:700;color:#fff; background:linear-gradient(180deg,var(--c1),var(--c2)); box-shadow:0 6px 18px var(--cglow),inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(255,255,255,.14); transition:filter .3s,box-shadow .3s;white-space:nowrap; } .tile:hover .label,.tile.is-near .label{filter:brightness(1.09);box-shadow:0 10px 26px var(--cglow),inset 0 1px 0 rgba(255,255,255,.55)} .chev{display:inline-flex;align-items:center;justify-content:center; width:1.55em;height:1.55em;border-radius:50%;background:rgba(255,255,255,.24)} .chev svg{width:.72em;height:.72em;fill:#fff} /* رنگ دسته‌ها */ .tile[data-cat="girl"]{--c1:#ff4b9d;--c2:#e2107a;--cglow:rgba(255,45,143,.45); --p1:rgba(255,160,205,.85);--p2:rgba(255,120,185,.35);--p3:rgba(255,225,240,.5)} .tile[data-cat="boy"]{--c1:#4aa8ff;--c2:#1668e0;--cglow:rgba(50,130,240,.45); --p1:rgba(150,205,255,.85);--p2:rgba(90,160,255,.35);--p3:rgba(215,240,255,.5)} .tile[data-cat="mom"]{--c1:#ff4b9d;--c2:#e2107a;--cglow:rgba(255,45,143,.45); --p1:rgba(255,178,200,.85);--p2:rgba(255,130,160,.35);--p3:rgba(255,235,240,.5)} .tile[data-cat="dad"]{--c1:#8a5a33;--c2:#59341a;--cglow:rgba(120,75,35,.5); --p1:rgba(255,228,170,.85);--p2:rgba(235,190,120,.35);--p3:rgba(255,245,220,.55)} /* ---------- دکمه‌ی پایین ---------- */ .cta{ display:inline-flex;align-items:center;gap:.6em; padding:.55em 1.3em .55em .55em;border-radius:999px; font-size:clamp(11px,1.05vw,18px);font-weight:700;color:var(--ink); background:var(--panel-bg);border:1px solid var(--panel-line);backdrop-filter:blur(10px); transition:transform .25s,background .3s,box-shadow .3s; } .cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--shade)} .cta .chev{background:var(--pink);box-shadow:var(--pink-glow)} /* ---------- دختر قصه (ویدیو روی بوم) ---------- */ .char{ --h:min(96dvh,1080px); position:absolute;right:-1.5vw;bottom:0;z-index:6; height:var(--h);aspect-ratio:var(--ar,1272/1006); pointer-events:none; opacity:0;transform:translateY(26px) scale(.97);transform-origin:62% 100%; transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1); } .char.ready{opacity:1;transform:none} .char-inner{position:absolute;inset:0;transform-origin:62% 100%;will-change:transform} /* پایین تنه نرم محو می‌شود تا لبه‌ی بریده‌ی ویدیو دیده نشود */ .char-cv{position:absolute;inset:0;width:100%;height:100%; -webkit-mask-image:linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 7%,#000 17%); mask-image:linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 7%,#000 17%)} /* هاله و نور پشت سرش */ .aura{position:absolute;left:29%;top:-12%;width:66%;height:98%;pointer-events:none} .aura .halo{position:absolute;inset:0;border-radius:50%; background:radial-gradient(closest-side,var(--aura1),var(--aura2) 52%,transparent 100%); animation:aura 7s ease-in-out infinite} .aura .rays{position:absolute;inset:-26%;border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--ray) 0deg 3.5deg,transparent 3.5deg 15deg); -webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 38%,transparent 70%); mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 38%,transparent 70%); animation:rays 110s linear infinite} @keyframes aura{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}} @keyframes rays{to{transform:rotate(360deg)}} /* بوم ذرات */ .fx{position:fixed;inset:0;z-index:20;pointer-events:none} /* ---------- راهنما ---------- */ .hint{ position:absolute;left:50%;bottom:clamp(44px,7vh,74px);transform:translateX(-50%); z-index:25;margin:0;padding:.5em 1.1em;border-radius:999px; font-size:clamp(10.5px,.86vw,13px);font-weight:700;color:var(--ink); background:var(--panel-bg);border:1px solid var(--panel-line); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 8px 26px var(--shade); white-space:nowrap;opacity:.95;transition:opacity .5s,transform .5s;cursor:default; } .hint.gone{opacity:0;pointer-events:none;transform:translate(-50%,8px)} .hint.ask{cursor:pointer;animation:askglow 2.2s ease-in-out infinite} @keyframes askglow{0%,100%{box-shadow:0 8px 26px var(--shade),0 0 0 0 rgba(255,88,171,.5)} 50%{box-shadow:0 8px 26px var(--shade),0 0 0 6px rgba(255,88,171,0)}} /* عوض شدن تم: دایره‌ی جادویی از روی دکمه باز می‌شود */ ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} ::view-transition-new(root){z-index:2} html.vt *,html.vt *::before,html.vt *::after{transition:none!important} /* ---------- موبایل و تبلت ---------- */ /* گوشی — حالت عمودی: بالا سؤال و چهار جعبه، پایین صحنه‌ی دختر قصه */ @media (max-width:760px){ .topbar{padding:8px 10px;gap:6px;flex-wrap:nowrap} .brand{font-size:19px;gap:.3em} .tools{gap:5px;flex-wrap:nowrap} .seg{padding:3px} .seg button{padding:5px 8px;font-size:10.5px} .pill-btn{padding:6px 8px;font-size:10.5px;gap:0} .pill-btn span{display:none} .pill-btn svg{width:15px;height:15px} .panel{left:0;right:0;top:calc(54px + env(safe-area-inset-top,0px));bottom:0;transform:none; width:100%;padding:0 8px;gap:9px;z-index:8} .title{font-size:clamp(24px,7.6vw,40px);line-height:1.3} .swoosh{width:min(84%,340px);height:12px} .grid{grid-template-columns:repeat(4,1fr);width:100%;max-width:470px;gap:0 2px} .tile{gap:5px} .boxwrap{width:clamp(66px,21.5vw,104px)} .label{font-size:clamp(10.5px,3.1vw,13.5px);padding:.44em .82em} .label .chev{display:none} .cta{margin-top:auto;margin-bottom:calc(56px + env(safe-area-inset-bottom,0px)); font-size:13px;padding:.55em 1.2em .55em .55em;box-shadow:0 10px 30px var(--shade)} /* صورتش حدود ۵۷٪ عرض صفحه؛ ۰٫۷۸۵ = جای صورت در فریم × نسبت عرض به ارتفاع */ .char{--h:min(66dvh,142vw);right:auto;left:calc(57vw - var(--h) * .785)} .hint{bottom:calc(108px + env(safe-area-inset-bottom,0px));font-size:11px; width:max-content;max-width:92vw;white-space:normal;text-align:center;line-height:1.75;border-radius:18px} .floaters .f1,.floaters .f2,.floaters .f5{display:none} .f3{width:16%}.f4{width:16%}.f6{width:14%;right:2%;top:auto;bottom:24%} } /* تبلت — حالت عمودی */ @media (min-width:761px) and (max-width:1100px) and (orientation:portrait){ .panel{left:0;right:0;top:9vh;bottom:0;transform:none;width:100%;padding:0 4vw;gap:2vh;z-index:8} .title{font-size:clamp(34px,6.2vw,58px)} .swoosh{width:min(70%,520px);height:18px} .grid{grid-template-columns:repeat(4,1fr);width:100%;max-width:900px;gap:0 2vw} .boxwrap{width:clamp(118px,18.5vw,190px)} .label{font-size:clamp(14px,2.1vw,19px)} .cta{margin-top:auto;margin-bottom:9vh;font-size:clamp(14px,2vw,18px)} .char{--h:min(67dvh,120vw);right:auto;left:calc(56vw - var(--h) * .785)} .hint{bottom:calc(9vh + 64px)} } /* افقی و کم‌ارتفاع (گوشی خوابیده) */ @media (max-height:540px) and (orientation:landscape){ .topbar{padding:6px 10px} .brand{font-size:17px} .seg button,.pill-btn{font-size:10px;padding:5px 7px} .pill-btn span{display:none} .hero{min-height:0} .panel{left:2.5vw;right:auto;top:54%;bottom:auto;transform:translateY(-50%);width:62vw;padding:0;gap:.7vh;z-index:8} .title{font-size:clamp(17px,3.6vw,30px);line-height:1.25} .swoosh{width:70%;height:10px;margin-top:0} .grid{grid-template-columns:1fr 1fr;width:100%;max-width:none;gap:.4vh clamp(10px,3.5vw,40px)} .boxwrap{width:clamp(48px,9vw,86px)} .label{font-size:clamp(9px,1.5vw,13px);padding:.3em .7em .3em .3em} .chev{width:1.4em;height:1.4em} .cta{margin:0;font-size:clamp(9px,1.5vw,13px);padding:.35em .9em .35em .35em} .char{--h:100%;left:auto;right:-9vw} .hint{display:none} .floaters{opacity:calc(var(--deco-op) * .6)} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.12s!important} } /* ═══════════════════════════════════════════════════════════ صفحه‌ی محصولات (catalog.html) ═══════════════════════════════════════════════════════════ */ body.page-cat{overflow:auto;min-height:100%} .page-cat .scene{position:fixed;inset:0;z-index:0} .wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 clamp(12px,2.4vw,28px) 60px} .cat-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:clamp(12px,2vh,22px) 0} .back{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1.1em .5em .6em;border-radius:999px; background:var(--panel-bg);border:1px solid var(--panel-line);font-size:14px;font-weight:700; backdrop-filter:blur(10px);transition:transform .2s} .back:hover{transform:translateY(-2px)} .back svg{width:1.1em;height:1.1em;fill:currentColor;transform:scaleX(-1)} .cat-head{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px); padding:clamp(6px,1.4vh,14px) 0 clamp(10px,2vh,20px)} .cat-head .icon{width:clamp(62px,7vw,104px);aspect-ratio:1;position:relative;flex:0 0 auto} .cat-head .icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 8px 18px var(--shade));animation:bob 3.8s ease-in-out infinite} .cat-head .icon .platform{width:120%;height:46%} .cat-head h1{margin:0;font-family:'Lalezar',sans-serif;font-weight:400; font-size:clamp(24px,3.4vw,46px);line-height:1.3;text-shadow:var(--title-glow)} .cat-head p{margin:.2em 0 0;font-size:clamp(12px,1.1vw,15px);color:var(--ink-dim)} .cat-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,26px)} @media (min-width:900px){.cat-body{grid-template-columns:270px minmax(0,1fr)}} .filters{align-self:start;position:sticky;top:14px;display:flex;flex-direction:column;gap:14px; padding:clamp(14px,1.6vw,20px);border-radius:22px; background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(14px); box-shadow:0 14px 40px var(--shade)} .fhead{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; padding:0;font-size:15px;font-weight:800;color:var(--ink);text-align:start;cursor:default} .fhead svg{width:20px;height:20px;fill:currentColor;display:none;transition:transform .3s} .fbody{display:flex;flex-direction:column;gap:14px} .fgroup{display:flex;flex-direction:column;gap:8px} .fgroup > span{font-size:12.5px;font-weight:700;color:var(--ink-dim)} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{padding:.42em .85em;border-radius:999px;font-size:12.5px;font-weight:700; background:var(--panel-bg);border:1px solid var(--panel-line);color:var(--ink-dim); transition:all .2s;cursor:pointer} .chip:hover{color:var(--ink);transform:translateY(-1px)} .chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--pink),#d1146f);color:#fff; border-color:transparent;box-shadow:0 5px 16px var(--shade)} .fld{display:flex;align-items:center;gap:8px;padding:.5em .8em;border-radius:14px; background:var(--panel-bg);border:1px solid var(--panel-line)} .fld input,.fld select{flex:1;min-width:0;background:none;border:0;color:var(--ink); font:inherit;font-size:13px;outline:none} .fld select option{color:#1a1140;background:#fff} .fld svg{width:16px;height:16px;fill:var(--ink-dim);flex:0 0 auto} .rng{display:flex;flex-direction:column;gap:6px} .rng input[type=range]{width:100%;accent-color:var(--pink)} .rng .val{font-size:12.5px;font-weight:700;color:var(--ink-dim)} .clear{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--ink-dim); text-decoration:underline;text-underline-offset:3px} .clear:hover{color:var(--ink)} .results{display:flex;flex-direction:column;gap:14px} .res-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; font-size:13px;color:var(--ink-dim)} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:clamp(10px,1.3vw,18px)} .card{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:20px; background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(10px); box-shadow:0 10px 30px var(--shade);transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s; text-align:start} .card:hover{transform:translateY(-6px);box-shadow:0 18px 44px var(--shade)} .card .thumb{position:relative;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden; background:radial-gradient(70% 70% at 50% 45%,var(--p1,rgba(255,255,255,.22)),transparent 72%); display:flex;align-items:center;justify-content:center} .card .thumb img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 8px 16px var(--shade)); transform:rotate(var(--rot,0deg));transition:transform .35s} .card:hover .thumb img{transform:rotate(var(--rot,0deg)) scale(1.08) translateY(-3px)} .card h3{margin:0;font-size:14.5px;font-weight:700;line-height:1.5;min-height:2.9em} .card .meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:auto} .card .price{font-size:14px;font-weight:800;color:var(--gold);white-space:nowrap} .card .age{font-size:11.5px;font-weight:700;color:var(--ink-dim);white-space:nowrap; padding:.2em .6em;border-radius:999px;background:var(--panel-bg);border:1px solid var(--panel-line)} .empty,.loading{padding:40px 16px;text-align:center;color:var(--ink-dim);font-size:14px} .skel{border-radius:20px;background:var(--card);border:1px solid var(--card-line); height:250px;animation:pulse 1.3s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.5}50%{opacity:.85}} .cat-tabs{display:flex;gap:8px;flex-wrap:wrap} .cat-tabs a{padding:.45em 1em;border-radius:999px;font-size:13px;font-weight:700; background:var(--panel-bg);border:1px solid var(--panel-line);color:var(--ink-dim);transition:all .2s} .cat-tabs a:hover{color:var(--ink);transform:translateY(-1px)} .cat-tabs a[aria-current="page"]{background:linear-gradient(180deg,var(--c1),var(--c2));color:#fff; border-color:transparent;box-shadow:0 6px 18px var(--shade)} @media (max-width:899px){ .filters{position:static;padding:12px 14px;gap:0} .fhead{cursor:pointer;padding:2px 0} .fhead svg{display:block} .filters.open .fhead svg{transform:rotate(180deg)} .fbody{max-height:0;overflow:hidden;opacity:0; transition:max-height .35s ease,opacity .25s ease,margin-top .3s} .filters.open .fbody{max-height:760px;opacity:1;margin-top:14px} .cards{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))} .cat-head .icon{width:clamp(54px,16vw,80px)} } /* ---------- نوار بالا: برند + منو ---------- */ .brandwrap{display:flex;align-items:center;gap:clamp(8px,1.4vw,22px);min-width:0} .topnav{display:flex;align-items:center;gap:clamp(6px,.9vw,16px)} .topnav a{position:relative;font-size:clamp(12px,.95vw,14.5px);font-weight:700;color:var(--ink-dim); padding:.35em .2em;transition:color .22s} .topnav a:hover{color:var(--ink)} .topnav a::after{content:'';position:absolute;inset-inline:.2em;bottom:0;height:2px;border-radius:2px; background:var(--pink);transform:scaleX(0);transform-origin:center;transition:transform .28s} .topnav a:hover::after{transform:scaleX(1)} .hot-link i{display:inline-block;width:6px;height:6px;margin-inline-start:4px;border-radius:50%; background:var(--flame2);box-shadow:0 0 0 0 rgba(255,46,99,.6);animation:dot 1.8s ease-out infinite; vertical-align:.35em} @keyframes dot{0%{box-shadow:0 0 0 0 rgba(255,46,99,.6)}70%{box-shadow:0 0 0 7px rgba(255,46,99,0)}100%{box-shadow:0 0 0 0 rgba(255,46,99,0)}} @media (max-width:760px){.topnav{display:none}} @media (max-height:540px) and (orientation:landscape){.topnav{display:none}}