/* ========================================================================== Tasvirify — استایل اصلی قالب فونت: ایران‌یکان وب (assets/fonts/iranyekan) ========================================================================== */ /* -------------------------------------------------------------------------- ۰. فونت -------------------------------------------------------------------------- */ @font-face { font-family: 'IRANYekan'; font-weight: 400; font-display: swap; src: url('../fonts/iranyekan/woff2/IRANYekanWebRegular.woff2') format('woff2'), url('../fonts/iranyekan/woff/IRANYekanWebRegular.woff') format('woff'); } @font-face { font-family: 'IRANYekan'; font-weight: 500; font-display: swap; src: url('../fonts/iranyekan/woff2/IRANYekanWebMedium.woff2') format('woff2'), url('../fonts/iranyekan/woff/IRANYekanWebMedium.woff') format('woff'); } @font-face { font-family: 'IRANYekan'; font-weight: 700; font-display: swap; src: url('../fonts/iranyekan/woff2/IRANYekanWebBold.woff2') format('woff2'), url('../fonts/iranyekan/woff/IRANYekanWebBold.woff') format('woff'); } @font-face { font-family: 'IRANYekan'; font-weight: 800; font-display: swap; src: url('../fonts/iranyekan/woff2/IRANYekanWebExtraBold.woff2') format('woff2'), url('../fonts/iranyekan/woff/IRANYekanWebExtraBold.woff') format('woff'); } @font-face { font-family: 'IRANYekan'; font-weight: 900; font-display: swap; src: url('../fonts/iranyekan/woff2/IRANYekanWebBlack.woff2') format('woff2'), url('../fonts/iranyekan/woff/IRANYekanWebBlack.woff') format('woff'); } @font-face { font-family: 'IRANYekan'; font-weight: 1000; font-display: swap; src: url('../fonts/iranyekan/woff2/IRANYekanWebExtraBlack.woff2') format('woff2'), url('../fonts/iranyekan/woff/IRANYekanWebExtraBlack.woff') format('woff'); } /* -------------------------------------------------------------------------- ۱. توکن‌های طراحی -------------------------------------------------------------------------- */ :root { --d-950: #05070f; --d-900: #0a0e1c; --d-850: #0f1428; --d-800: #151c34; --b-300: #a5b4fc; --b-400: #818cf8; --b-500: #6366f1; --b-600: #4f46e5; --b-700: #4338ca; --v-500: #8b5cf6; --v-400: #a78bfa; --cy-400: #22d3ee; --cy-600: #0891b2; --em-400: #34d399; --em-500: #10b981; --em-600: #059669; --am-400: #fbbf24; --am-500: #f59e0b; --ro-400: #fb7185; --ro-500: #f43f5e; --l-0: #ffffff; --l-50: #f8fafc; --l-100: #f1f5f9; --l-200: #e6ebf2; --l-300: #cbd5e1; --t-900: #0a0e1c; --t-700: #364152; --t-500: #64748b; --t-400: #94a3b8; --wrap: 1200px; --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-full: 999px; --ease: cubic-bezier(.22, 1, .36, 1); --header-h: 74px; --sh-1: 0 1px 2px rgba(10,14,28,.05), 0 2px 6px rgba(10,14,28,.05); --sh-2: 0 4px 10px rgba(10,14,28,.05), 0 14px 34px rgba(10,14,28,.07); --sh-3: 0 10px 24px rgba(10,14,28,.08), 0 30px 70px rgba(49,46,129,.14); --sh-glow: 0 8px 30px rgba(99,102,241,.42); --mono: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- ۲. پایه -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'IRANYekan', 'Segoe UI', Tahoma, sans-serif; font-size: 16px; line-height: 1.9; color: var(--t-900); background: var(--l-0); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 .55em; line-height: 1.35; font-weight: 800; letter-spacing: -.015em; } h1 { font-size: clamp(2.15rem, 1.1rem + 4.2vw, 4.1rem); font-weight: 1000; line-height: 1.22; letter-spacing: -.03em; } h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.28; } h3 { font-size: 1.16rem; font-weight: 800; } h4 { font-size: .98rem; font-weight: 800; } p { margin: 0 0 1em; } a { color: var(--b-600); text-decoration: none; transition: color .2s var(--ease); } img, svg { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } code { font-family: var(--mono); font-size: .88em; direction: ltr; unicode-bidi: isolate; } .num { font-variant-numeric: tabular-nums; } :where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--b-400); outline-offset: 3px; border-radius: 8px; } .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; } .wrap--wide { width: min(100% - 40px, 1380px); } .wrap--slim { width: min(100% - 40px, 940px); margin-inline: auto; } .section { position: relative; padding: clamp(64px, 8vw, 128px) 0; } .section--dark { background: var(--d-900); color: #fff; } .section--soft { background: var(--l-50); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- ۳. عناصر مشترک -------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--b-700); background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #ddd8fe; padding: 6px 15px 6px 12px; border-radius: var(--r-full); margin-bottom: 18px; } .eyebrow--on-dark { color: var(--b-300); background: rgba(99,102,241,.12); border-color: rgba(129,140,248,.28); } .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--em-400); flex: none; animation: ping 2.4s var(--ease) infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } .section-head { max-width: 700px; margin: 0 auto clamp(40px, 5vw, 68px); text-align: center; } .section-head p { color: var(--t-500); font-size: 1.06rem; margin: 0; } .section--dark .section-head p { color: rgba(226,232,240,.66); } .grad-text { background: linear-gradient(100deg, var(--b-400), var(--v-400) 45%, var(--cy-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .grad-text--warm { background: linear-gradient(100deg, var(--em-400), var(--cy-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* -------------------------------------------------------------------------- ۴. دکمه‌ها -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 800; font-size: .97rem; line-height: 1; padding: 15px 28px; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .22s var(--ease), box-shadow .28s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); } .btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; box-shadow: var(--sh-glow); } .btn--primary:hover { color: #fff; box-shadow: 0 12px 40px rgba(99,102,241,.55); } .btn--primary:hover svg { transform: translateX(-4px); } .btn--glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); } .btn--glass:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); color: #fff; } .btn--ghost { background: var(--l-0); color: var(--t-900); border-color: var(--l-200); box-shadow: var(--sh-1); } .btn--ghost:hover { border-color: var(--b-300); color: var(--b-700); box-shadow: var(--sh-2); } .btn--sm { padding: 11px 20px; font-size: .9rem; } .btn--block { width: 100%; } .textlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .95rem; } .textlink svg { width: 16px; height: 16px; transition: transform .25s var(--ease); } .textlink:hover svg { transform: translateX(-4px); } /* -------------------------------------------------------------------------- ۵. هدر -------------------------------------------------------------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 90; height: var(--header-h); display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .site-header.is-stuck { background: rgba(8,11,24,.72); backdrop-filter: saturate(180%) blur(16px); border-bottom-color: rgba(255,255,255,.08); } .site-header .wrap { display: flex; align-items: center; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; font-size: 1.25rem; color: #fff; letter-spacing: -.02em; } .brand:hover { color: #fff; } .brand__mark { width: 36px; height: 36px; flex: none; border-radius: 11px; background: linear-gradient(140deg, var(--b-400), var(--v-500) 55%, var(--cy-400)); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,.45); } .brand__mark svg { width: 19px; height: 19px; } .nav { margin-inline-start: auto; } .nav > ul { display: flex; align-items: center; gap: 2px; } .nav a { display: block; padding: 9px 15px; border-radius: var(--r-sm); color: rgba(226,232,240,.72); font-weight: 500; font-size: .95rem; } .nav a:hover { background: rgba(255,255,255,.08); color: #fff; } /* is-current از طرح ایستا می‌آید، بقیه کلاس‌هایی است که wp_nav_menu می‌گذارد */ .nav .is-current > a, .nav .current-menu-item > a, .nav .current_page_item > a, .nav .current-menu-ancestor > a { color: #fff; font-weight: 700; } .header-actions { display: flex; align-items: center; gap: 10px; } .header-actions .link-login { color: rgba(226,232,240,.8); font-weight: 700; font-size: .93rem; padding: 10px 6px; } .header-actions .link-login:hover { color: #fff; } .nav-toggle { display: none; margin-inline-start: auto; width: 44px; height: 44px; flex: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: var(--r-sm); cursor: pointer; color: #fff; } .nav-toggle svg { width: 20px; height: 20px; margin: auto; } /* -------------------------------------------------------------------------- ۶. هیرو -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(48px, 6vw, 84px)) 0 clamp(72px, 8vw, 120px); background: var(--d-950); color: #fff; } .aurora { position: absolute; inset: -22% -10%; z-index: -3; filter: blur(78px); opacity: .78; pointer-events: none; } .aurora span { position: absolute; display: block; border-radius: 50%; will-change: transform; } .aurora span:nth-child(1) { width: 46vw; height: 46vw; top: -6%; right: -4%; background: radial-gradient(circle, #4f46e5, transparent 68%); animation: drift1 19s ease-in-out infinite alternate; } .aurora span:nth-child(2) { width: 40vw; height: 40vw; top: 14%; left: -8%; background: radial-gradient(circle, #7c3aed, transparent 66%); animation: drift2 23s ease-in-out infinite alternate; } .aurora span:nth-child(3) { width: 34vw; height: 34vw; bottom: -14%; right: 22%; background: radial-gradient(circle, #0891b2, transparent 66%); animation: drift3 27s ease-in-out infinite alternate; } .aurora span:nth-child(4) { width: 26vw; height: 26vw; bottom: 2%; left: 16%; background: radial-gradient(circle, #059669, transparent 68%); animation: drift1 21s ease-in-out infinite alternate-reverse; } @keyframes drift1 { to { transform: translate3d(-7%, 9%, 0) scale(1.16); } } @keyframes drift2 { to { transform: translate3d(9%, -7%, 0) scale(1.1); } } @keyframes drift3 { to { transform: translate3d(-5%, -10%, 0) scale(1.2); } } .grid-lines { position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(120% 78% at 50% 12%, #000 24%, transparent 78%); -webkit-mask-image: radial-gradient(120% 78% at 50% 12%, #000 24%, transparent 78%); } .noise { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); opacity: .05; mix-blend-mode: overlay; } .hero__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .hero h1 { color: #fff; margin-bottom: 22px; text-wrap: balance; } .hero__sub { font-size: clamp(1.04rem, .96rem + .5vw, 1.24rem); color: rgba(226,232,240,.72); max-width: 48ch; margin-bottom: 34px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 32px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; } .hero__trust li { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: rgba(226,232,240,.6); } .hero__trust svg { width: 16px; height: 16px; color: var(--em-400); flex: none; } /* -------------------------------------------------------------------------- ۷. پنجرهٔ محصول -------------------------------------------------------------------------- */ .showcase { position: relative; perspective: 1600px; } .window { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(165deg, rgba(31,39,69,.92), rgba(10,14,28,.96)); border: 1px solid rgba(255,255,255,.11); box-shadow: 0 40px 90px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset; transform: rotateY(4.5deg) rotateX(2.5deg); transition: transform .7s var(--ease); } .window__bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .window__dots { display: flex; gap: 6px; } .window__dots i { width: 10px; height: 10px; border-radius: 50%; } .window__dots i:nth-child(1) { background: #ff5f57; } .window__dots i:nth-child(2) { background: #febc2e; } .window__dots i:nth-child(3) { background: #28c840; } .window__path { margin-inline-start: auto; font-size: .78rem; color: rgba(226,232,240,.45); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); padding: 5px 14px; border-radius: var(--r-full); } .window__body { padding: 20px; } .media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; } .tile { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.07); } .tile::before { content: ''; position: absolute; inset: 0; background: var(--tile-art); opacity: .82; } .tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,15,.86), rgba(5,7,15,.5)); animation: tile-done 4.2s var(--ease) infinite; animation-delay: var(--d, 0s); } @keyframes tile-done { 0%, 8% { transform: translateY(0); } 30%, 88% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .tile__chip { position: absolute; bottom: 6px; right: 6px; z-index: 2; font-size: .64rem; font-weight: 800; padding: 3px 7px; border-radius: var(--r-full); background: rgba(16,185,129,.92); color: #04231a; opacity: 0; animation: chip-in 4.2s var(--ease) infinite; animation-delay: var(--d, 0s); } @keyframes chip-in { 0%, 22% { opacity: 0; transform: translateY(4px) scale(.9); } 34%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px) scale(.9); } } .window__meter { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: var(--r-md); padding: 15px 17px; } .window__meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; } .window__meter-top small { font-size: .78rem; color: rgba(226,232,240,.5); } .window__meter-top b { font-size: 1.02rem; font-weight: 900; color: var(--em-400); } .bar { height: 8px; border-radius: var(--r-full); background: rgba(255,255,255,.09); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--em-400), var(--cy-400)); width: 0; transition: width 1.6s var(--ease); } .is-visible .bar i { width: var(--w, 70%); } .window__stats { display: flex; gap: 22px; margin-top: 14px; } .window__stats div { font-size: .76rem; color: rgba(226,232,240,.45); } .window__stats b { display: block; font-size: 1.05rem; color: #fff; font-weight: 900; } .float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: var(--r-md); background: rgba(12,16,32,.78); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); font-size: .85rem; font-weight: 700; color: #fff; animation: bob 6s ease-in-out infinite; } .float svg { width: 17px; height: 17px; flex: none; } .float--a { top: 9%; right: -7%; } .float--b { bottom: 16%; left: -6%; animation-delay: -2.6s; } .float--c { bottom: -3%; right: 8%; animation-delay: -4.2s; } .float b { color: var(--em-400); } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } /* -------------------------------------------------------------------------- ۸. نوار سازگاری -------------------------------------------------------------------------- */ .marquee-band { background: var(--d-950); padding: 0 0 clamp(48px, 6vw, 76px); } .marquee-band p { text-align: center; font-size: .86rem; color: rgba(226,232,240,.4); margin-bottom: 20px; } .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; width: max-content; gap: 12px; animation: slide 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(50%); } } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-full); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); color: rgba(226,232,240,.75); font-weight: 700; font-size: .9rem; white-space: nowrap; } .chip svg { width: 15px; height: 15px; color: var(--b-400); } /* -------------------------------------------------------------------------- ۹. سنجهٔ سرعت -------------------------------------------------------------------------- */ .speed { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)) 1.25fr; gap: clamp(20px, 3vw, 40px); align-items: center; } .gauge { text-align: center; } .gauge__ring { position: relative; width: min(190px, 46vw); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; /* --p را جاوااسکریپت فریم‌به‌فریم می‌راند */ background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), var(--l-200) 0); } .gauge__ring::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: var(--l-50); box-shadow: inset 0 2px 10px rgba(10,14,28,.06); } .gauge__val { position: relative; font-size: 2.7rem; font-weight: 1000; color: var(--c); line-height: 1; letter-spacing: -.03em; } .gauge__cap { font-weight: 800; font-size: .95rem; } .gauge__sub { font-size: .82rem; color: var(--t-400); } .gauge--bad { --c: #ef4444; } .gauge--good { --c: var(--em-500); } .metrics { display: grid; gap: 16px; } .metric { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; } .metric__name { font-weight: 700; font-size: .95rem; } .metric__vals { font-size: .88rem; color: var(--t-500); } .metric__vals s { color: var(--t-400); } .metric__vals b { color: var(--em-600); font-weight: 900; } .metric__bar { grid-column: 1 / -1; height: 9px; border-radius: var(--r-full); background: var(--l-200); overflow: hidden; position: relative; } .metric__bar i { position: absolute; inset-block: 0; right: 0; border-radius: inherit; width: 0; background: linear-gradient(90deg, var(--em-500), var(--cy-400)); transition: width 1.5s var(--ease); transition-delay: var(--d, 0s); } .is-visible .metric__bar i { width: var(--w); } /* ========================================================================== ۱۰. بخش‌های ویژگی (زیگزاگ) ========================================================================== */ .feature { position: relative; padding: clamp(64px, 8vw, 116px) 0; overflow: hidden; } .feature--soft { background: var(--l-50); } .feature--dark { background: var(--d-900); color: #fff; isolation: isolate; } .feature--dark h2 { color: #fff; } .feature__grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(36px, 5vw, 76px); align-items: center; } /* پیش‌فرض راست‌چین: متن راست، تصویر چپ. flip یعنی برعکس. */ .feature--flip .feature__media { order: -1; } .feature__no { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--t-400); margin-bottom: 14px; } .feature__no b { font-size: 1.05rem; font-weight: 1000; color: var(--b-600); } .feature__no::after { content: ''; width: 46px; height: 1px; background: var(--l-300); } .feature--dark .feature__no { color: rgba(226,232,240,.4); } .feature--dark .feature__no b { color: var(--b-300); } .feature--dark .feature__no::after { background: rgba(255,255,255,.15); } .feature h2 { margin-bottom: 16px; text-wrap: balance; } .feature__lead { font-size: 1.06rem; color: var(--t-500); margin-bottom: 26px; max-width: 46ch; } .feature--dark .feature__lead { color: rgba(226,232,240,.68); } .feature__list { display: grid; gap: 14px; margin-bottom: 30px; } .feature__list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .feature__list .tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 4px; background: #ecfdf5; color: var(--em-600); border: 1px solid #c6f0e0; } .feature__list .tick svg { width: 13px; height: 13px; } .feature--dark .feature__list .tick { background: rgba(16,185,129,.14); border-color: rgba(52,211,153,.3); color: var(--em-400); } .feature__list b { display: block; font-size: .98rem; font-weight: 800; color: var(--t-900); } .feature__list span { font-size: .92rem; color: var(--t-500); } .feature--dark .feature__list b { color: #fff; } .feature--dark .feature__list span { color: rgba(226,232,240,.55); } .feature__lead code, .feature__list code { background: rgba(99,102,241,.1); color: var(--b-700); padding: 2px 7px; border-radius: 5px; } .feature--dark .feature__lead code, .feature--dark .feature__list code { background: rgba(255,255,255,.09); color: var(--b-300); } /* ظرف مشترک تصویرسازی‌ها */ .viz { position: relative; border-radius: var(--r-xl); padding: 26px; background: var(--l-0); border: 1px solid var(--l-200); box-shadow: var(--sh-3); } .feature--soft .viz { background: var(--l-0); } .viz--dark { background: linear-gradient(165deg, rgba(31,39,69,.9), rgba(8,11,24,.96)); border-color: rgba(255,255,255,.11); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); color: #fff; } .viz__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .84rem; font-weight: 700; color: var(--t-500); } .viz--dark .viz__head { color: rgba(226,232,240,.5); } .viz__head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--em-500); flex: none; } .viz__head .spacer { margin-inline-start: auto; } /* ---- ۱۰٫۱ بهینه‌سازی: ترازوی حجم ---- */ .weigh { display: grid; gap: 18px; } .weigh__row { display: grid; gap: 8px; } .weigh__label { display: flex; align-items: baseline; justify-content: space-between; font-size: .86rem; } .weigh__label span { color: var(--t-500); font-weight: 700; } .weigh__label b { font-size: 1.35rem; font-weight: 1000; letter-spacing: -.02em; } .weigh__slab { height: 44px; border-radius: var(--r-sm); position: relative; overflow: hidden; background: var(--l-100); } .weigh__slab i { position: absolute; inset-block: 0; right: 0; width: 0; border-radius: inherit; transition: width 1.5s var(--ease); transition-delay: var(--d, 0s); } .is-visible .weigh__slab i { width: var(--w); } .weigh__slab--before i { background: repeating-linear-gradient(-45deg, #cbd5e1, #cbd5e1 9px, #dbe2ec 9px, #dbe2ec 18px); } .weigh__slab--after i { background: linear-gradient(90deg, var(--em-500), var(--cy-400)); box-shadow: 0 6px 18px rgba(16,185,129,.35); } .weigh__row--before b { color: var(--t-400); text-decoration: line-through; } .weigh__row--after b { color: var(--em-600); } .formats { display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--l-200); } .fmt { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; } .fmt__tag { font-family: var(--mono); font-size: .72rem; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--l-100); color: var(--t-700); } .fmt__track { height: 7px; border-radius: var(--r-full); background: var(--l-100); overflow: hidden; position: relative; } .fmt__track i { position: absolute; inset-block: 0; right: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--b-500), var(--cy-400)); transition: width 1.3s var(--ease); transition-delay: var(--d, 0s); } .is-visible .fmt__track i { width: var(--w); } .fmt__val { font-size: .86rem; font-weight: 900; color: var(--b-600); } /* ---- ۱۰٫۲ WebP: پنل شبکه ---- */ .net { display: grid; gap: 12px; font-family: var(--mono); direction: ltr; text-align: left; } .net__block { border-radius: var(--r-md); padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); font-size: .78rem; line-height: 2.1; color: rgba(226,232,240,.75); } .net__block--ok { background: rgba(16,185,129,.09); border-color: rgba(52,211,153,.28); } .net__method { color: var(--b-300); font-weight: 700; } .net__ok { color: var(--em-400); font-weight: 700; } .net__key { color: rgba(226,232,240,.45); } .net__hi { color: var(--am-400); font-weight: 700; } .net__mid { display: flex; align-items: center; gap: 10px; padding-inline: 4px; direction: rtl; font-family: 'IRANYekan', sans-serif; } .net__mid span { font-size: .78rem; color: rgba(226,232,240,.5); } .net__mid::before, .net__mid::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); } .files { margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(255,255,255,.12); display: grid; gap: 9px; } .file { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .78rem; direction: ltr; color: rgba(226,232,240,.7); } .file svg { width: 15px; height: 15px; flex: none; color: rgba(226,232,240,.35); } .file b { margin-inline-start: auto; font-family: 'IRANYekan', sans-serif; font-size: .74rem; color: rgba(226,232,240,.45); direction: rtl; } .file--new { color: var(--em-400); } .file--new svg { color: var(--em-400); } .file--new b { color: var(--em-400); } /* ---- ۱۰٫۳ واترمارک: انتخابگر موقعیت ---- */ .wm { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; } .wm__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wm__cells { position: absolute; inset: 14px; z-index: 2; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 8px; } .wm__cell { border: 1.5px dashed rgba(255,255,255,.3); border-radius: 8px; background: transparent; cursor: pointer; padding: 0; transition: background-color .2s var(--ease), border-color .2s var(--ease); } .wm__cell:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); } .wm__cell[aria-pressed="true"] { border-style: solid; border-color: #fff; background: rgba(255,255,255,.16); } /* لوگو در یک لایهٔ گرید جداگانه است، نه داخل .wm__cells — وگرنه به‌عنوان آیتم صریح جا می‌گیرد و دکمه‌ها را به ردیف چهارم هل می‌دهد. */ .wm__layer { position: absolute; inset: 14px; z-index: 3; pointer-events: none; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 8px; } .wm__logo { grid-area: var(--r, 3) / var(--c, 1); place-self: center; display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); opacity: var(--o, .78); pointer-events: none; transform: scale(var(--s, 1)); transition: opacity .2s var(--ease), transform .2s var(--ease); white-space: nowrap; } .wm__logo svg { width: 18px; height: 18px; } .wm-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .wm-ctrl label { font-size: .82rem; font-weight: 700; color: var(--t-500); display: block; margin-bottom: 6px; } .wm-ctrl output { float: left; color: var(--b-600); font-weight: 900; } .wm-ctrl input[type="range"] { width: 100%; accent-color: var(--b-500); height: 6px; cursor: pointer; } /* ---- ۱۰٫۴ متن جایگزین: ردیف کتابخانهٔ رسانه ---- */ .alt-rows { display: grid; gap: 12px; } .alt-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--l-50); border: 1px solid var(--l-200); } .alt-row__thumb { aspect-ratio: 1; border-radius: 10px; background: var(--thumb); } /* این‌ها span هستند ولی باید بلوکی بچینند، وگرنه در یک خط سر هم می‌شوند */ .alt-row__body { min-width: 0; display: block; } .alt-row__name { display: block; font-family: var(--mono); font-size: .74rem; color: var(--t-400); direction: ltr; text-align: right; } .alt-row__alt { display: block; font-size: .88rem; font-weight: 700; color: var(--t-900); } .alt-row__alt.empty { color: var(--ro-500); font-weight: 500; } .alt-row__badge { font-size: .72rem; font-weight: 800; padding: 5px 11px; border-radius: var(--r-full); background: #ecfdf5; color: var(--em-600); border: 1px solid #c6f0e0; white-space: nowrap; } .alt-row__badge--warn { background: #fff1f2; color: var(--ro-500); border-color: #fecdd3; } .typing { border-inline-end: 2px solid var(--b-500); animation: caret 1s step-end infinite; } @keyframes caret { 50% { border-color: transparent; } } .alt-note { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #ddd8fe; font-size: .86rem; color: var(--b-700); display: flex; gap: 10px; align-items: flex-start; } .alt-note svg { width: 17px; height: 17px; flex: none; margin-top: 5px; } /* -------------------------------------------------------------------------- ۱۱. قابلیت‌های تکمیلی -------------------------------------------------------------------------- */ .extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .extra { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .extra:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #d7dcf7; } .extra__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; background: linear-gradient(140deg, #eef2ff, #ede9fe); color: var(--b-600); border: 1px solid #e0e0fd; } .extra__icon svg { width: 21px; height: 21px; } .extra h3 { margin-bottom: 7px; } .extra p { color: var(--t-500); font-size: .93rem; margin: 0; } /* -------------------------------------------------------------------------- ۱۲. مقایسه: محلی در برابر ما -------------------------------------------------------------------------- */ .vs { max-width: 860px; margin-inline: auto; } .vs__head { display: grid; grid-template-columns: 1fr 116px 116px; gap: 12px; padding: 0 22px 14px; align-items: end; } .vs__head span { font-size: .84rem; font-weight: 800; text-align: center; color: rgba(226,232,240,.5); } .vs__head span:first-child { text-align: start; } .vs__head .us { color: #fff; background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.22)); border: 1px solid rgba(129,140,248,.35); border-radius: var(--r-full); padding: 6px 0; } .vs__rows { border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,.025); } .vs__row { display: grid; grid-template-columns: 1fr 116px 116px; gap: 12px; align-items: center; padding: 17px 22px; border-top: 1px solid rgba(255,255,255,.07); } .vs__row:first-child { border-top: 0; } .vs__row > span:first-child { font-size: .95rem; color: rgba(226,232,240,.82); } .vs__cell { display: grid; place-items: center; } .vs__mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; } .vs__mark svg { width: 15px; height: 15px; } .vs__mark--no { background: rgba(248,113,113,.13); color: var(--ro-400); } .vs__mark--yes { background: rgba(52,211,153,.16); color: var(--em-400); } .vs__row .vs__cell:last-child { background: linear-gradient(180deg, rgba(99,102,241,.07), rgba(139,92,246,.07)); border-radius: var(--r-sm); padding: 4px 0; } /* -------------------------------------------------------------------------- ۱۳. اسلایدر مقایسه -------------------------------------------------------------------------- */ /* توجه: اینجا عمداً از خاصیت‌های فیزیکی (right/left) استفاده شده، نه منطقی. جاوااسکریپت درصد را از لبهٔ راست حساب می‌کند و inset-inline-* در راست‌چین برعکس می‌شود — قاطی کردنشان همان باگ جابه‌جایی معکوس را می‌سازد. */ .compare-wrap { max-width: 940px; margin-inline: auto; } .compare { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); background: var(--l-100); aspect-ratio: 16/10; user-select: none; touch-action: none; border: 1px solid var(--l-200); } .compare__layer { position: absolute; inset: 0; } .compare__layer img { width: 100%; height: 100%; object-fit: cover; } /* «بعد» از سمت راست بریده می‌شود، پس سمت راستِ اهرم «قبل» می‌ماند */ .compare__layer--after { clip-path: inset(0 var(--pos, 50%) 0 0); } .compare__tag { position: absolute; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 800; padding: 8px 15px; border-radius: var(--r-full); background: rgba(5,7,15,.7); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.13); } .compare__tag--before { right: 16px; } .compare__tag--after { left: 16px; background: rgba(5,150,105,.85); border-color: rgba(52,211,153,.4); } .compare__handle { position: absolute; inset-block: 0; right: var(--pos, 50%); width: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 20px rgba(0,0,0,.35); transform: translateX(50%); z-index: 4; pointer-events: none; } .compare__handle::after { content: ''; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a0e1c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6 3 12l5 6M16 6l5 6-5 6'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 8px 24px rgba(10,14,28,.4); } .compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; z-index: 5; } .compare-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 26px; } .compare-legend div { text-align: center; } .compare-legend b { display: block; font-size: 1.5rem; font-weight: 1000; letter-spacing: -.02em; } .compare-legend span { font-size: .84rem; color: var(--t-500); } .compare-legend .gain { color: var(--em-600); } /* -------------------------------------------------------------------------- ۱۴. مراحل راه‌اندازی -------------------------------------------------------------------------- */ .fsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; } .fsteps::before { content: ''; position: absolute; top: 84px; inset-inline: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--l-300) 0 7px, transparent 7px 15px); z-index: 0; } .fstep { position: relative; z-index: 1; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 28px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fstep:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: #d7dcf7; } .fstep__ghost { position: absolute; top: -18px; left: 14px; font-size: 6rem; font-weight: 1000; line-height: 1; color: var(--l-100); z-index: 0; pointer-events: none; } .fstep__n { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 13px; margin-bottom: 16px; display: grid; place-items: center; color: #fff; font-weight: 1000; background: linear-gradient(140deg, var(--b-500), var(--v-500)); box-shadow: 0 8px 20px rgba(99,102,241,.32); } .fstep h3 { position: relative; z-index: 1; margin-bottom: 6px; } .fstep p { position: relative; z-index: 1; color: var(--t-500); font-size: .93rem; margin: 0 0 20px; } .mini { position: relative; z-index: 1; border: 1px solid var(--l-200); border-radius: var(--r-md); background: var(--l-50); padding: 14px; } .mini__row { display: flex; align-items: center; gap: 10px; } .mini__ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: linear-gradient(140deg, var(--b-400), var(--v-500)); color: #fff; } .mini__ico svg { width: 16px; height: 16px; } .mini__txt { min-width: 0; } .mini__txt b { display: block; font-size: .82rem; font-weight: 800; } .mini__txt span { font-size: .72rem; color: var(--t-400); } .mini__btn { margin-inline-start: auto; font-size: .74rem; font-weight: 800; white-space: nowrap; padding: 6px 13px; border-radius: var(--r-full); background: var(--b-600); color: #fff; } .mini__btn--done { background: #ecfdf5; color: var(--em-600); border: 1px solid #c6f0e0; } .mini__field { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .76rem; color: var(--t-500); direction: ltr; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-sm); padding: 9px 12px; } .mini__field svg { width: 14px; height: 14px; flex: none; color: var(--em-500); margin-inline-start: auto; } .mini__bar { height: 7px; border-radius: var(--r-full); background: var(--l-200); overflow: hidden; margin-top: 11px; } .mini__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--em-500), var(--cy-400)); transition: width 1.8s var(--ease); } .is-visible .mini__bar i { width: var(--w, 68%); } .mini__legend { display: flex; justify-content: space-between; font-size: .72rem; color: var(--t-400); margin-top: 8px; } /* -------------------------------------------------------------------------- ۱۵. قیمت‌ها -------------------------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; } .plan { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 32px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .plan:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .plan--hot { background: linear-gradient(var(--l-0), var(--l-0)) padding-box, linear-gradient(150deg, var(--b-500), var(--v-500) 55%, var(--cy-400)) border-box; border: 2px solid transparent; box-shadow: var(--sh-3); } .plan__badge { position: absolute; top: -14px; right: 50%; transform: translateX(50%); background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; font-size: .76rem; font-weight: 800; padding: 6px 18px; border-radius: var(--r-full); box-shadow: var(--sh-glow); white-space: nowrap; } .plan h3 { margin-bottom: 5px; } .plan__desc { color: var(--t-500); font-size: .9rem; min-height: 3.2em; margin-bottom: 8px; } .plan__price { display: flex; align-items: baseline; gap: 8px; } .plan__price b { font-size: 2.3rem; font-weight: 1000; letter-spacing: -.03em; line-height: 1; } .plan__price span { color: var(--t-500); font-size: .9rem; } .plan__meta { font-size: .84rem; color: var(--t-400); margin: 6px 0 24px; } .plan ul { display: grid; gap: 12px; margin-bottom: 28px; } .plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--t-700); } .plan li svg { width: 18px; height: 18px; color: var(--em-500); flex: none; margin-top: 6px; } .plan li.off { color: var(--t-400); } .plan li.off svg { color: var(--l-300); } .plan .btn { margin-top: auto; } /* وقتی فقط یکی دو پکیج منتشر شده، کارت‌ها کش نیایند و وسط بمانند */ .plans--1 { grid-template-columns: minmax(0, 380px); justify-content: center; } .plans--2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; } /* قیمتی که ووکامرس تولید می‌کند — ساختارش با دستی فرق دارد */ .plan__price--wc { display: block; margin-bottom: 0; } .plan__price--wc .woocommerce-Price-amount { font-size: 2.1rem; font-weight: 1000; letter-spacing: -.03em; line-height: 1.25; color: var(--t-900); white-space: nowrap; } .plan__price--wc .woocommerce-Price-currencySymbol { font-size: .42em; font-weight: 700; color: var(--t-500); margin-inline-start: 6px; letter-spacing: 0; } .plan__price--wc del { display: block; opacity: .7; } .plan__price--wc del .woocommerce-Price-amount { font-size: 1.05rem; font-weight: 700; color: var(--t-400); } .plan__price--wc ins { display: block; text-decoration: none; } .plan__price--wc .price { display: block; } .plan li span { min-width: 0; } .plan .btn svg { width: 17px; height: 17px; } .plans-note { text-align: center; font-size: .9rem; color: var(--t-500); margin: 30px auto 0; max-width: 62ch; } /* -------------------------------------------------------------------------- ۱۶. سؤالات -------------------------------------------------------------------------- */ .faq { max-width: 840px; margin-inline: auto; display: grid; gap: 12px; } .faq details { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-md); padding: 2px 24px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .faq details[open] { border-color: #d7dcf7; box-shadow: var(--sh-2); } .faq summary { list-style: none; cursor: pointer; font-weight: 800; padding: 19px 0; display: flex; align-items: center; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; margin-inline-start: auto; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease); } .faq details[open] summary::after { transform: rotate(180deg); } .faq details > p { color: var(--t-500); font-size: .95rem; margin: 0 0 20px; padding-inline-end: 36px; } /* -------------------------------------------------------------------------- ۱۷. فراخوان و فوتر -------------------------------------------------------------------------- */ .cta { position: relative; overflow: hidden; isolation: isolate; background: var(--d-950); color: #fff; } .cta .wrap { position: relative; text-align: center; } .cta h2 { color: #fff; } .cta p { color: rgba(226,232,240,.66); max-width: 56ch; margin-inline: auto; margin-bottom: 32px; } .cta__actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; } .site-footer { background: var(--d-950); color: rgba(226,232,240,.6); border-top: 1px solid rgba(255,255,255,.07); padding-top: 68px; } .footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px 24px; padding-bottom: 48px; } .footer-about p { font-size: .93rem; max-width: 36ch; margin: 16px 0 0; } .footer-col h4 { color: #fff; margin-bottom: 16px; } .footer-col ul { display: grid; gap: 11px; } .footer-col a { color: rgba(226,232,240,.58); font-size: .93rem; } .footer-col a:hover { color: #fff; } .footer-badges { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 36px; } .footer-badges .badge { width: 98px; height: 98px; border-radius: var(--r-sm); border: 1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.03); display: grid; place-items: center; text-align: center; font-size: .7rem; color: rgba(226,232,240,.4); line-height: 1.7; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: .86rem; color: rgba(226,232,240,.45); } .footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- ۱۸. ظاهرشدن هنگام اسکرول -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .reveal.is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- ۱۹. واکنش‌گرا -------------------------------------------------------------------------- */ @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } .showcase { margin-top: 12px; } .window { transform: none; } .float--a { right: -2%; } .float--b { left: -2%; } .float--c { display: none; } .speed { grid-template-columns: 1fr 1fr; } .speed .metrics { grid-column: 1 / -1; } .feature__grid { grid-template-columns: 1fr; gap: 36px; } .feature--flip .feature__media { order: 0; } .feature__lead { max-width: none; } .extras { grid-template-columns: 1fr; } .fsteps { grid-template-columns: 1fr; } .fsteps::before { display: none; } .plans { grid-template-columns: 1fr; } .plan--hot { order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; } .vs__head, .vs__row { grid-template-columns: 1fr 84px 84px; } } @media (max-width: 760px) { :root { --header-h: 66px; } .nav-toggle { display: block; } .nav { position: fixed; inset-inline: 12px; top: calc(var(--header-h) + 6px); background: rgba(10,14,28,.96); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 14px; display: none; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); } .nav.is-open { display: block; } .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; } .nav a { padding: 13px 16px; } .header-actions .link-login { display: none; } .media-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr; } .viz { padding: 18px; } .wm-ctrl { grid-template-columns: 1fr; } .vs__head, .vs__row { grid-template-columns: 1fr 62px 62px; padding-inline: 14px; } .vs__row > span:first-child { font-size: .88rem; } } @media (max-width: 520px) { .speed { grid-template-columns: 1fr; } .hero__cta .btn, .cta__actions .btn { width: 100%; } .float { font-size: .78rem; padding: 9px 13px; } .alt-row { grid-template-columns: 44px 1fr; } .alt-row__badge { grid-column: 2; justify-self: start; } .fmt { grid-template-columns: 54px 1fr auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } @property --p { syntax: ''; inherits: false; initial-value: 0; } /* ========================================================================== ۲۰. یکپارچگی با وردپرس بخش‌های زیر مخصوص صفحاتی است که در طرح ایستا وجود نداشتند: وبلاگ، تک‌نوشته، برگه و ۴۰۴. طراحی کامل وبلاگ کار بعدی است. ========================================================================== */ .skip-link { position: absolute; top: -200px; right: 20px; z-index: 200; background: var(--b-600); color: #fff; font-weight: 800; padding: 13px 22px; border-radius: 0 0 var(--r-sm) var(--r-sm); } .skip-link:focus { top: 0; color: #fff; } /* در صفحات داخلی هیروِ تیره‌ای نیست که هدرِ شفاف رویش بنشیند */ .site-header--solid { background: var(--d-900); border-bottom-color: rgba(255,255,255,.08); } .site-main--offset { padding-top: var(--header-h); } .brand__img { max-height: 42px; width: auto; } .footer-bottom nav ul { display: flex; gap: 20px; flex-wrap: wrap; } /* ---- متن بلند ---- */ .prose { max-width: 74ch; margin-inline: auto; font-size: 1.05rem; } .prose > *:first-child { margin-top: 0; } .prose h2, .prose h3, .prose h4 { margin-top: 1.8em; } .prose a { text-decoration: underline; text-underline-offset: 4px; } .prose img { border-radius: var(--r-md); height: auto; } .prose ul, .prose ol { padding-inline-start: 1.5em; margin-bottom: 1.1em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: .4em; } .prose blockquote { margin: 1.7em 0; padding: 4px 22px; border-inline-start: 3px solid var(--b-400); color: var(--t-500); } .prose code { background: var(--l-100); padding: 2px 7px; border-radius: 5px; } .prose pre { background: var(--d-900); color: #e2e8f0; direction: ltr; text-align: left; padding: 20px; border-radius: var(--r-md); overflow-x: auto; } .prose pre code { background: none; padding: 0; } .prose figure { margin: 1.7em 0; } .prose figcaption { font-size: .86rem; color: var(--t-400); margin-top: 10px; text-align: center; } .prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; } .prose th, .prose td { border: 1px solid var(--l-200); padding: 10px 14px; text-align: start; } .prose th { background: var(--l-50); font-weight: 800; } /* ---- صفحه‌بندی ---- */ .pagination { margin-top: 44px; } .pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .pagination .page-numbers { display: grid; place-items: center; min-width: 44px; padding: 10px 16px; border: 1px solid var(--l-200); border-radius: var(--r-sm); color: var(--t-700); font-weight: 700; } .pagination .page-numbers:hover { border-color: var(--b-300); color: var(--b-700); } .pagination .current { background: var(--b-600); border-color: var(--b-600); color: #fff; } /* ---- فرم جست‌وجو ---- */ .search-form { display: flex; gap: 10px; align-items: stretch; } .search-form__field { position: relative; flex: 1; display: flex; align-items: center; } .search-form__field > svg { position: absolute; inset-inline-start: 18px; width: 18px; height: 18px; color: var(--t-400); pointer-events: none; } .search-form .search-field { width: 100%; font: inherit; color: var(--t-900); padding: 14px 20px 14px 50px; border: 1px solid var(--l-200); border-radius: var(--r-full); background: var(--l-0); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .search-form .search-field::placeholder { color: var(--t-400); } .search-form .search-field:focus { outline: none; border-color: var(--b-400); box-shadow: 0 0 0 4px rgba(99,102,241,.14); } .search-form .search-submit { font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; padding: 14px 26px; border: 0; border-radius: var(--r-full); background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; box-shadow: var(--sh-glow); transition: transform .2s var(--ease), box-shadow .25s var(--ease); } .search-form .search-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(99,102,241,.5); } /* روی زمینهٔ تیره — سرصفحهٔ وبلاگ و روپوش جست‌وجو */ .search-form--dark .search-form__field > svg { color: rgba(226,232,240,.5); } .search-form--dark .search-field { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16); backdrop-filter: blur(8px); } .search-form--dark .search-field::placeholder { color: rgba(226,232,240,.45); } .search-form--dark .search-field:focus { border-color: var(--b-400); background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(99,102,241,.2); } /* جست‌وجوی داخل سرصفحهٔ وبلاگ */ .hero-search { max-width: 540px; margin: 28px auto 0; position: relative; z-index: 1; } /* ---- دکمهٔ جست‌وجو در هدر ---- */ .search-toggle { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); border-radius: var(--r-sm); color: rgba(226,232,240,.85); cursor: pointer; padding: 0; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .search-toggle:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.3); } .search-toggle svg { width: 18px; height: 18px; } /* ---- روپوش جست‌وجو ---- */ .search-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: clamp(80px, 16vh, 180px) 20px 20px; background: rgba(5,7,15,.78); backdrop-filter: blur(14px); animation: overlay-in .25s var(--ease); } .search-overlay[hidden] { display: none; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .search-overlay__inner { width: min(100%, 620px); position: relative; z-index: 1; } .search-overlay__title { color: #fff; font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; } .search-overlay__sub { color: rgba(226,232,240,.55); font-size: .95rem; margin-bottom: 24px; } .search-overlay__close { position: absolute; top: 22px; inset-inline-end: 22px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); border-radius: var(--r-sm); color: #fff; cursor: pointer; padding: 0; } .search-overlay__close:hover { background: rgba(255,255,255,.14); } .search-overlay__close svg { width: 20px; height: 20px; } .search-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .search-hints span { font-size: .82rem; color: rgba(226,232,240,.4); align-self: center; margin-inline-end: 4px; } @media (max-width: 560px) { .search-form { flex-direction: column; } .search-form .search-submit { width: 100%; } } /* ========================================================================== ۲۱ب. پایهٔ ووکامرس استایل‌نامه‌های خود ووکامرس در inc/woocommerce.php برداشته شده‌اند، پس هر چیزی که آن‌ها می‌دادند باید از اینجا بیاید. ========================================================================== */ /* حیاتی: ووکامرس برچسب‌های فقط-برای-صفحه‌خوان را با همین کلاس پنهان می‌کرد. بدون این، متن‌هایی مثل «تعداد فلان محصول» وسط صفحه ظاهر می‌شوند. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; margin: 0; white-space: normal; } .woocommerce .clear { clear: both; } .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 24px; } /* قیمت‌ها. بدون این، در قیمت حراج زیرخط پیش‌فرض مرورگر را می‌گیرد و هم‌وزن قیمت اصلی دیده می‌شود — هر دو را ووکامرس درست می‌کرد. */ .woocommerce .woocommerce-Price-amount { white-space: nowrap; } .woocommerce .woocommerce-Price-currencySymbol { font-size: .88em; margin-inline-start: 3px; } .woocommerce del { color: var(--t-400); font-weight: 400; } .woocommerce del .woocommerce-Price-amount { text-decoration: line-through; } .woocommerce ins { background: none; text-decoration: none; font-weight: 800; } /* دکمهٔ عمومی ووکامرس — هر جایی که هنوز طراحی اختصاصی ندارد */ .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; font-size: .93rem; line-height: 1; padding: 13px 24px; border: 1px solid var(--l-200); border-radius: var(--r-full); background: var(--l-0); color: var(--t-900); cursor: pointer; text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover { border-color: var(--b-300); color: var(--b-700); transform: translateY(-1px); } .woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.button.alt { background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); } .woocommerce .button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.button.alt:hover { color: #fff; box-shadow: 0 12px 34px rgba(99,102,241,.5); } .woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ---- فیلدهای فرم در همهٔ صفحات ووکامرس ---- */ .woocommerce form .form-row { margin: 0 0 16px; padding: 0; display: block; } .woocommerce form .form-row:last-child { margin-bottom: 0; } .woocommerce .woocommerce-input-wrapper { display: block; width: 100%; } .woocommerce form .form-row label { display: block; font-size: .88rem; font-weight: 700; color: var(--t-700); margin-bottom: 7px; line-height: 1.7; } .woocommerce form .form-row .required { color: var(--ro-500); font-weight: 700; border: 0; text-decoration: none; visibility: visible; /* ووکامرس این را پنهان می‌کرد */ } .woocommerce form .form-row .optional { color: var(--t-400); font-weight: 400; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--t-900); padding: 13px 16px; line-height: 1.6; margin: 0; border: 1px solid var(--l-200); border-radius: var(--r-sm); background: var(--l-0); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .woocommerce form .form-row textarea { min-height: 110px; resize: vertical; } .woocommerce form .form-row .input-text::placeholder { color: var(--t-400); } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--b-400); box-shadow: 0 0 0 4px rgba(99,102,241,.14); } .woocommerce form .form-row select { cursor: pointer; appearance: none; padding-inline-end: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 17px; background-position: left 16px center; } .woocommerce form .form-row.woocommerce-invalid label { color: var(--ro-500); } .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--ro-400); } .woocommerce form .form-row.woocommerce-validated .input-text, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--em-400); } .woocommerce .input-checkbox, .woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { accent-color: var(--b-600); } .woocommerce-form__label-for-checkbox { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; cursor: pointer; } .woocommerce-form__label-for-checkbox input { width: 18px; height: 18px; flex: none; margin: 0; } .woocommerce-form__label-for-checkbox span { font-size: .93rem; } .woocommerce-password-strength { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-xs); font-size: .82rem; font-weight: 700; text-align: center; } .woocommerce-password-strength.short, .woocommerce-password-strength.bad { background: #fff1f2; color: var(--ro-500); } .woocommerce-password-strength.good { background: #fffbeb; color: #b45309; } .woocommerce-password-strength.strong { background: #ecfdf5; color: var(--em-600); } .woocommerce-password-hint { display: block; margin-top: 8px; font-size: .82rem; color: var(--t-400); } .woocommerce-privacy-policy-text { font-size: .86rem; color: var(--t-500); } .woocommerce-privacy-policy-text p { margin-bottom: .6em; } /* select2 هم‌شکل بقیهٔ فیلدها */ .woocommerce .select2-container { width: 100% !important; } .woocommerce .select2-container--default .select2-selection--single { height: auto; padding: 13px 16px; border: 1px solid var(--l-200); border-radius: var(--r-sm); background: var(--l-0); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding: 0; color: var(--t-900); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; inset-inline-end: 12px; } .select2-dropdown { border-color: var(--l-200); border-radius: var(--r-sm); overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--b-600); } .select2-search--dropdown .select2-search__field { border-radius: var(--r-xs); border-color: var(--l-200); padding: 8px 10px; } /* پوشش بارگذاری ای‌جکس */ .blockUI.blockOverlay { background: rgba(255,255,255,.65) !important; border-radius: var(--r-lg); } /* ========================================================================== ۲۲. ووکامرس — سبد خرید ========================================================================== */ /* استایل‌های خود ووکامرس همچنان بارگذاری می‌شوند؛ کلاس‌های اینجا عمداً نام تازه دارند تا تداخل نداشته باشند. جاهایی که کلاس ووکامرس ناچار استفاده شده (.quantity، .remove، .woocommerce-message) با .wc-page یا کلاس والد پوشش داده شده تا وزن انتخابگر بالاتر برود. */ .wc-page { max-width: 1180px; } /* ---- دکمهٔ سبد در هدر ---- */ .cart-link { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); border-radius: var(--r-sm); color: rgba(226,232,240,.85); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .cart-link:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.3); } .cart-link svg { width: 18px; height: 18px; } .tsv-cart-count { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-full); background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; box-shadow: 0 3px 10px rgba(99,102,241,.5); } .tsv-cart-count.is-empty { display: none; } /* ---- چیدمان دو ستونی ---- */ .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); align-items: start; } /* ---- فهرست آیتم‌ها ---- */ .cart-items { display: grid; gap: 0; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); overflow: hidden; } .cart-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto 36px; grid-template-areas: "thumb body qty total remove"; gap: 18px; align-items: center; padding: 20px 22px; border-top: 1px solid var(--l-200); } .cart-item:first-child { border-top: 0; } .cart-item__thumb { grid-area: thumb; } .cart-item__thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-sm); background: var(--l-100); } .cart-item__body { grid-area: body; min-width: 0; } .cart-item__name { font-size: 1.02rem; margin: 0 0 4px; line-height: 1.6; } .cart-item__name a { color: var(--t-900); } .cart-item__name a:hover { color: var(--b-600); } .cart-item__unit { font-size: .85rem; color: var(--t-400); display: flex; gap: 6px; flex-wrap: wrap; } .cart-item__unit .amount { color: var(--t-500); font-weight: 700; } /* دادهٔ اضافهٔ آیتم که ووکامرس به‌صورت dl می‌سازد */ .cart-item__body .variation { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0; font-size: .84rem; color: var(--t-500); } .cart-item__body .variation dt { font-weight: 700; color: var(--t-700); } .cart-item__body .variation dd { margin: 0; } .cart-item__body .variation dd p { margin: 0; } .cart-item__qty { grid-area: qty; } .cart-item__total { grid-area: total; font-weight: 900; font-size: 1.05rem; white-space: nowrap; } .cart-item__remove { grid-area: remove; display: grid; place-items: center; } .cart-item__remove .remove { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--t-400); font-size: 0; /* × پیش‌فرض ووکامرس اگر فیلتری برش گرداند دیده نشود */ transition: background-color .2s var(--ease), color .2s var(--ease); } .cart-item__remove .remove:hover { background: #fff1f2; color: var(--ro-500); } .cart-item__remove .remove svg { width: 17px; height: 17px; } /* ---- ورودی تعداد ---- */ .wc-page .quantity, .quantity { display: inline-flex; align-items: center; border: 1px solid var(--l-200); border-radius: var(--r-full); background: var(--l-0); overflow: hidden; } .qty-btn { width: 36px; height: 40px; flex: none; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--t-500); padding: 0; transition: background-color .2s var(--ease), color .2s var(--ease); } .qty-btn:hover { background: var(--l-100); color: var(--b-600); } .qty-btn:disabled { opacity: .35; cursor: not-allowed; } .qty-btn svg { width: 15px; height: 15px; } .wc-page .quantity .qty, .quantity .qty { width: 46px; height: 40px; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 800; text-align: center; color: var(--t-900); -moz-appearance: textfield; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity .qty:focus { outline: none; } .quantity--readonly { border-style: dashed; } /* ---- کنش‌های زیر سبد ---- */ .cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; } .cart-actions__update { margin-inline-start: auto; } /* وقتی جاوااسکریپت هست، تغییر تعداد خودش فرم را ثبت می‌کند */ .js-auto-cart .cart-actions__update { display: none; } .cart-coupon__toggle { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .92rem; font-weight: 700; color: var(--b-600); background: none; border: 0; cursor: pointer; padding: 6px 0; } .cart-coupon__toggle:hover { color: var(--b-700); } .cart-coupon__toggle svg { width: 17px; height: 17px; } .cart-coupon__toggle[aria-expanded="true"] { color: var(--t-500); } .cart-coupon__field { display: flex; gap: 8px; margin-top: 12px; } .cart-coupon__field[hidden] { display: none; } .cart-coupon__field .input-text { font: inherit; padding: 11px 18px; width: 190px; border: 1px solid var(--l-200); border-radius: var(--r-full); background: var(--l-0); } .cart-coupon__field .input-text:focus { outline: none; border-color: var(--b-400); box-shadow: 0 0 0 4px rgba(99,102,241,.14); } /* ---- کارت خلاصهٔ سفارش ---- */ .cart-summary { position: sticky; top: calc(var(--header-h) + 24px); background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-2); } .cart-summary__title { font-size: 1.1rem; margin-bottom: 20px; } .cart-summary__rows { display: grid; gap: 14px; } .cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: .95rem; color: var(--t-500); } .cart-summary__row > span:last-child { font-weight: 800; color: var(--t-900); text-align: end; } .cart-summary__row--gain > span:last-child { color: var(--em-600); } .cart-summary__row--total { border-top: 1px solid var(--l-200); margin-top: 6px; padding-top: 18px; font-size: 1rem; color: var(--t-900); font-weight: 800; } .cart-summary__row--total > span:last-child { font-size: 1.35rem; font-weight: 1000; letter-spacing: -.02em; } .cart-summary__row small { font-weight: 400; color: var(--t-400); } /* ردیف‌هایی که ووکامرس به‌صورت می‌سازد (حمل‌ونقل و افزونه‌ها) */ .cart-summary__wc-rows { width: 100%; border-collapse: collapse; } .cart-summary__wc-rows tr { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: .95rem; } .cart-summary__wc-rows th { font-weight: 500; color: var(--t-500); text-align: start; padding: 0; border: 0; } .cart-summary__wc-rows td { font-weight: 800; color: var(--t-900); text-align: end; padding: 0; border: 0; } .cart-summary__wc-rows ul { display: grid; gap: 8px; } .cart-summary__wc-rows label { font-weight: 500; } .cart-summary__wc-rows .woocommerce-shipping-destination { font-size: .82rem; color: var(--t-400); font-weight: 400; } /* ---- دکمهٔ تکمیل خرید ---- ووکامرس این دکمه را با .woocommerce a.button.alt استایل می‌دهد که وزنش (۰,۳,۱) از .btn--primary (۰,۱,۰) بیشتر است و رنگ پیش‌فرضش برنده می‌شود. با افزودن .btn به انتخابگر وزن را به (۰,۴,۱) می‌بریم تا مستقل از ترتیب بارگذاری استایل‌ها، طرح خودمان بنشیند. */ .wc-proceed-to-checkout { margin-top: 24px; } .wc-proceed-to-checkout a.checkout-button.btn, .woocommerce .wc-proceed-to-checkout a.checkout-button.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font: inherit; font-weight: 800; font-size: 1rem; line-height: 1; padding: 17px 28px; border: 0; border-radius: var(--r-full); background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; text-decoration: none; text-align: center; box-shadow: var(--sh-glow); transition: transform .22s var(--ease), box-shadow .28s var(--ease), filter .22s var(--ease); } .wc-proceed-to-checkout a.checkout-button.btn:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,.55); filter: saturate(1.08); } .wc-proceed-to-checkout a.checkout-button.btn:active { transform: translateY(0); } .wc-proceed-to-checkout a.checkout-button.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); } .wc-proceed-to-checkout a.checkout-button.btn:hover svg { transform: translateX(-4px); } /* wc-forward در استایل ووکامرس یک فلش با فونت آیکونی اضافه می‌کند — ما آیکون خودمان را داریم، پس آن یکی نباید هم بیاید. */ .wc-proceed-to-checkout a.checkout-button.btn::after, .wc-proceed-to-checkout a.checkout-button.btn::before { content: none; } .cart-summary__note { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; font-size: .84rem; color: var(--t-400); line-height: 1.8; } .cart-summary__note svg { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--em-500); } /* ---- سبد خالی ---- */ .cart-empty h2 { font-size: 1.5rem; margin-bottom: 10px; } .cart-empty .cta__actions { justify-content: center; } .cart-empty__passthrough { margin-top: 26px; font-size: .9rem; color: var(--t-400); } /* ---- پیام‌های ووکامرس ---- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--l-200); border-radius: var(--r-md); background: var(--l-50); color: var(--t-700); font-size: .94rem; list-style: none; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } .woocommerce-message { background: #ecfdf5; border-color: #c6f0e0; color: var(--em-700, #047857); } .woocommerce-info { background: #eef2ff; border-color: #ddd8fe; color: var(--b-700); } .woocommerce-error { background: #fff1f2; border-color: #fecdd3; color: var(--ro-500); } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .88rem; line-height: 1; padding: 11px 20px; border-radius: var(--r-full); background: var(--l-0); color: var(--t-900); border: 1px solid var(--l-200); } /* ---- محصولات مرتبط زیر سبد ---- */ .cross-sells { margin-top: clamp(44px, 5vw, 72px); } .cross-sells > h2 { font-size: 1.3rem; margin-bottom: 22px; } .cross-sells ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .cross-sells ul.products li { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 18px; } .cross-sells ul.products img { border-radius: var(--r-sm); margin-bottom: 12px; } .cross-sells ul.products h2 { font-size: .98rem; margin-bottom: 8px; } @media (max-width: 980px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } } @media (max-width: 640px) { .cart-item { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb body remove" "thumb qty total"; gap: 12px 14px; padding: 18px; } .cart-item__thumb img { width: 64px; height: 64px; } .cart-item__total { text-align: end; } .cart-actions { flex-direction: column; align-items: stretch; } .cart-actions__update { margin-inline-start: 0; } .cart-coupon__field .input-text { width: auto; flex: 1; } } /* ========================================================================== ۲۳. ووکامرس — تسویه‌حساب فقط form-checkout.php و thankyou.php بازنویسی شده‌اند؛ بقیهٔ ظاهر از همین‌جا می‌آید تا تمپلیت‌های ووکامرس دست‌نخورده و به‌روز بمانند. ========================================================================== */ .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 3vw, 44px); align-items: start; } .checkout-main { min-width: 0; display: grid; gap: 26px; } .checkout-side { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; display: grid; gap: 0; } #order_review_heading { font-size: 1.1rem; margin-bottom: 16px; } /* بیلینگ و ارسال زیر هم، نه کنار هم — ستون اصلی برای دو ستون باریک است */ .wc-page .col2-set { display: grid; gap: 26px; } .wc-page .col2-set .col-1, .wc-page .col2-set .col-2 { width: auto; float: none; } /* ---- کارت هر بخش فرم ---- */ .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 26px; } .woocommerce-shipping-fields:empty, .woocommerce-additional-fields:empty { display: none; } .wc-page #customer_details h3 { font-size: 1.06rem; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--l-200); } .wc-page #ship-to-different-address { font-size: 1.06rem; margin: 0; padding: 0; border: 0; } .wc-page #ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; } /* ---- چیدمان فیلدها ---- ظاهر خود فیلدها در بخش «پایهٔ ووکامرس» تعریف شده؛ اینجا فقط جای گرفتنشان در گرید است. فیلد بدون کلاس first/last تمام‌عرض می‌شود. */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .woocommerce-billing-fields__field-wrapper > .form-row, .woocommerce-shipping-fields__field-wrapper > .form-row, .woocommerce-additional-fields__field-wrapper > .form-row { grid-column: 1 / -1; margin: 0; } .woocommerce-billing-fields__field-wrapper > .form-row-first, .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; } .woocommerce-billing-fields__field-wrapper > .form-row-last, .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; } /* ---- کد تخفیف و ورود در بالای صفحه ---- */ .woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { margin-bottom: 18px; } .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 0; } .checkout_coupon, .woocommerce-form-login { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 24px; margin-bottom: 26px; } .checkout_coupon .form-row { display: inline-block; margin: 0 0 0 10px; vertical-align: bottom; } .checkout_coupon .input-text { width: 220px; } .checkout_coupon .clear { clear: both; } .woocommerce-form-login .form-row { margin-bottom: 14px; } .wc-page .checkout_coupon .button, .wc-page .woocommerce-form-login .button, .wc-page .woocommerce-form-login button.button { font: inherit; font-weight: 800; font-size: .93rem; line-height: 1; padding: 14px 24px; border: 0; border-radius: var(--r-full); background: var(--b-600); color: #fff; cursor: pointer; } .wc-page .checkout_coupon .button:hover, .wc-page .woocommerce-form-login .button:hover { background: var(--b-700); } /* ---- جدول مرور سفارش ---- */ .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 20px; } .woocommerce-checkout-review-order-table thead th { font-size: .78rem; font-weight: 800; color: var(--t-400); text-align: start; padding: 14px 22px; background: var(--l-50); border-bottom: 1px solid var(--l-200); } .woocommerce-checkout-review-order-table thead th.product-total { text-align: end; } .woocommerce-checkout-review-order-table tbody td { padding: 16px 22px; border-bottom: 1px solid var(--l-200); font-size: .94rem; vertical-align: top; } .woocommerce-checkout-review-order-table tbody td.product-name { color: var(--t-900); font-weight: 700; } .woocommerce-checkout-review-order-table .product-quantity { color: var(--t-400); font-weight: 700; } .woocommerce-checkout-review-order-table tbody td.product-total { text-align: end; white-space: nowrap; font-weight: 800; } .woocommerce-checkout-review-order-table .variation { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 0; font-size: .84rem; font-weight: 400; color: var(--t-500); } .woocommerce-checkout-review-order-table .variation dt { font-weight: 700; } .woocommerce-checkout-review-order-table .variation dd { margin: 0; } .woocommerce-checkout-review-order-table .variation dd p { margin: 0; } .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td { padding: 13px 22px; border-bottom: 1px solid var(--l-200); font-size: .94rem; } .woocommerce-checkout-review-order-table tfoot th { text-align: start; font-weight: 500; color: var(--t-500); } .woocommerce-checkout-review-order-table tfoot td { text-align: end; font-weight: 800; color: var(--t-900); } .woocommerce-checkout-review-order-table tfoot .cart-discount td { color: var(--em-600); } .woocommerce-checkout-review-order-table tfoot .order-total th, .woocommerce-checkout-review-order-table tfoot .order-total td { border-bottom: 0; padding-top: 18px; padding-bottom: 20px; background: var(--l-50); font-size: 1rem; color: var(--t-900); font-weight: 800; } .woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 1.3rem; font-weight: 1000; letter-spacing: -.02em; } .woocommerce-checkout-review-order-table .woocommerce-shipping-destination { font-size: .8rem; color: var(--t-400); font-weight: 400; } .woocommerce-checkout-review-order-table ul#shipping_method { display: grid; gap: 8px; text-align: start; } .woocommerce-checkout-review-order-table ul#shipping_method label { font-weight: 500; } /* ---- روش‌های پرداخت ---- */ .woocommerce-checkout-payment { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 22px; } .woocommerce-checkout-payment .wc_payment_methods { display: grid; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; border: 0; } /* رادیو و برچسب در یک ردیف؛ توضیح درگاه در ردیف بعد و فقط وقتی باز است. کل li یک ناحیهٔ کلیک است تا انتخاب درگاه راحت باشد. */ .wc_payment_method { display: grid; grid-template-columns: auto 1fr; gap: 0 11px; align-items: center; margin: 0; padding: 15px 17px; line-height: 1.7; border: 1px solid var(--l-200); border-radius: var(--r-md); transition: border-color .2s var(--ease), background-color .2s var(--ease); } .wc_payment_method:has(input:checked) { border-color: var(--b-400); background: #f7f8ff; } .wc_payment_method > input[type="radio"] { grid-column: 1; width: 19px; height: 19px; flex: none; margin: 0; accent-color: var(--b-600); cursor: pointer; } .wc_payment_method > label { grid-column: 2; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: .96rem; cursor: pointer; margin: 0; padding: 0; } .wc_payment_method > label img { max-height: 26px; width: auto; margin-inline-start: auto; padding: 0; } .wc_payment_method .payment_box { grid-column: 1 / -1; margin: 13px 0 0; padding: 13px 15px; width: auto; background: var(--l-50); border-radius: var(--r-sm); font-size: .87rem; line-height: 1.9; color: var(--t-500); } .wc_payment_method .payment_box p { margin-bottom: .7em; } .wc_payment_method .payment_box p:last-child { margin-bottom: 0; } .wc_payment_method .payment_box::before, .wc_payment_method .payment_box::after { content: none; display: none; } .woocommerce-checkout-payment .place-order { padding: 0; margin: 0; } .woocommerce-checkout-payment .place-order noscript { display: block; margin-bottom: 14px; font-size: .86rem; color: var(--t-500); } /* ---- شرایط و دکمهٔ ثبت سفارش ---- */ .woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; font-size: .89rem; color: var(--t-500); } .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 0; } .woocommerce-terms-and-conditions-wrapper label { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; } .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--b-600); } .woocommerce-terms-and-conditions { max-height: 200px; overflow-y: auto; margin-bottom: 14px; padding: 16px; background: var(--l-50); border-radius: var(--r-sm); font-size: .86rem; } .wc-page #place_order, .woocommerce-checkout-payment #place_order { display: block; width: 100%; font: inherit; font-weight: 800; font-size: 1rem; line-height: 1; padding: 17px 28px; border: 0; border-radius: var(--r-full); background: linear-gradient(135deg, var(--b-500), var(--v-500)); color: #fff; cursor: pointer; text-align: center; box-shadow: var(--sh-glow); transition: transform .22s var(--ease), box-shadow .28s var(--ease), filter .22s var(--ease); } .wc-page #place_order:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,.55); filter: saturate(1.08); } .wc-page #place_order:active { transform: translateY(0); } .wc-page #place_order::after, .wc-page #place_order::before { content: none; } /* ========================================================================== ۲۴. ووکامرس — حساب کاربری ========================================================================== */ .account-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } /* ---- ناوبری ---- */ .account-nav { position: sticky; top: calc(var(--header-h) + 24px); background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 10px; overflow: hidden; } .account-nav__user { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 12px 16px; border-bottom: 1px solid var(--l-200); margin-bottom: 10px; } .account-nav__avatar { border-radius: 50%; } .account-nav__id { min-width: 0; } .account-nav__id b { display: block; font-size: .95rem; font-weight: 800; } .account-nav__id span { display: block; font-size: .78rem; color: var(--t-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; } .account-nav ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .account-nav li { margin: 0; } .account-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); color: var(--t-700); font-weight: 500; font-size: .94rem; transition: background-color .2s var(--ease), color .2s var(--ease); } .account-nav a svg { width: 18px; height: 18px; flex: none; color: var(--t-400); transition: color .2s var(--ease); } .account-nav a:hover { background: var(--l-100); color: var(--t-900); } .account-nav a:hover svg { color: var(--b-600); } .account-nav .is-active > a, .account-nav li.is-active > a { background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: var(--b-700); font-weight: 800; } .account-nav .is-active > a svg { color: var(--b-600); } .account-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--t-500); } .account-nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--ro-500); background: #fff1f2; } .account-nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover svg { color: var(--ro-500); } /* ---- محتوا ---- */ .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } .account-dash { display: grid; gap: 24px; } .account-dash__hello h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: 6px; } .account-dash__hello p { color: var(--t-500); margin: 0; font-size: .95rem; } .account-dash__hello a { font-weight: 700; } /* ---- کارت‌های آمار ---- */ .account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; } .account-stat { display: grid; gap: 4px; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 20px 22px; } .account-stat__icon { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 8px; display: grid; place-items: center; background: linear-gradient(140deg, #eef2ff, #ede9fe); color: var(--b-600); border: 1px solid #e0e0fd; } .account-stat__icon svg { width: 18px; height: 18px; } .account-stat__label { font-size: .82rem; color: var(--t-400); } .account-stat__value { font-size: 1.4rem; font-weight: 1000; letter-spacing: -.02em; color: var(--t-900); } .account-stat__value .woocommerce-Price-amount { font-size: inherit; } /* ---- بلوک‌ها ---- */ .account-block { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 24px; } .account-block__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .account-block__head h3 { font-size: 1.04rem; margin: 0; } /* ---- ردیف سفارش ---- */ .order-rows { display: grid; gap: 10px; } .order-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 15px 17px; border-radius: var(--r-md); border: 1px solid var(--l-200); background: var(--l-50); transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .order-row:hover { border-color: #d7dcf7; background: var(--l-0); transform: translateY(-2px); } .order-row__no { font-weight: 900; color: var(--t-900); font-size: .95rem; } .order-row__meta { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--t-400); flex-wrap: wrap; } .order-row__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; } .order-row__total { font-weight: 900; color: var(--t-900); white-space: nowrap; } .order-row__status { font-size: .76rem; font-weight: 800; white-space: nowrap; padding: 5px 12px; border-radius: var(--r-full); background: var(--l-100); color: var(--t-500); border: 1px solid var(--l-200); } .status--completed { background: #ecfdf5; color: var(--em-600); border-color: #c6f0e0; } .status--processing { background: #eef2ff; color: var(--b-700); border-color: #ddd8fe; } .status--on-hold, .status--pending { background: #fffbeb; color: #b45309; border-color: #fde68a; } .status--cancelled, .status--failed, .status--refunded { background: #fff1f2; color: var(--ro-500); border-color: #fecdd3; } /* ---- میان‌برها ---- */ .account-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .account-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 17px; border-radius: var(--r-md); border: 1px solid var(--l-200); background: var(--l-50); color: var(--t-900); font-weight: 700; font-size: .94rem; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .account-link:hover { border-color: #d7dcf7; background: var(--l-0); color: var(--b-700); transform: translateY(-2px); } .account-link__icon { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--l-0); border: 1px solid var(--l-200); color: var(--b-600); } .account-link__icon svg { width: 17px; height: 17px; } .account-link__go { width: 16px; height: 16px; color: var(--t-300, var(--l-300)); transition: transform .2s var(--ease); } .account-link:hover .account-link__go { transform: translateX(-3px); color: var(--b-500); } /* ---- تب توکن‌های من ---- */ .tokens { display: grid; gap: 20px; } .token-card { position: relative; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 20px; } .token-card.is-off { background: var(--l-50); } .token-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .token-card__head h3 { margin: 8px 0 0; font-size: 1.08rem; } .token-badge { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 800; line-height: 1; padding: 6px 12px; border-radius: var(--r-full); background: #ecfdf5; color: var(--em-600); border: 1px solid #c6f0e0; } .token-card.is-off .token-badge { background: #fff1f2; color: var(--ro-500); border-color: #fecdd3; } .token-flag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .78rem; font-weight: 700; color: var(--b-700); background: #eef2ff; border: 1px solid #ddd8fe; padding: 6px 12px; border-radius: var(--r-full); } .token-flag svg { width: 13px; height: 13px; } /* ---- خود توکن ---- */ .token-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--d-950); border-radius: var(--r-md); padding: 6px 6px 6px 6px; } .token-key code { direction: ltr; text-align: left; overflow-x: auto; white-space: nowrap; padding: 12px 14px; font-size: .84rem; color: #a5b4fc; scrollbar-width: thin; } .token-key__copy { width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(226,232,240,.8); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .token-key__copy:hover { background: rgba(255,255,255,.16); color: #fff; } .token-key__copy svg { width: 17px; height: 17px; } .token-key__copy.is-copied { background: rgba(16,185,129,.9); border-color: transparent; color: #04231a; } .token-key__hint { font-size: .82rem; color: var(--t-400); margin: -12px 0 0; } /* ---- نوارهای سهمیه ---- */ .token-quotas { display: grid; gap: 18px; } .quota { display: grid; gap: 8px; } .quota__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .quota__top span { font-size: .88rem; color: var(--t-500); font-weight: 700; } .quota__top b { font-size: 1.15rem; font-weight: 1000; letter-spacing: -.02em; color: var(--t-900); } .quota__bar { height: 9px; border-radius: var(--r-full); background: var(--l-200); overflow: hidden; } .quota__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--em-500), var(--cy-400)); transition: width .8s var(--ease); } .quota__bar.is-warn i { background: linear-gradient(90deg, var(--am-500), var(--am-400)); } .quota__bar.is-critical i { background: linear-gradient(90deg, #e11d48, var(--ro-400)); } .quota__foot { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--t-400); } .quota--unlimited .quota__top b { color: var(--em-600); } /* ---- اطلاعات ---- */ .token-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; } .token-meta > div { background: var(--l-50); border: 1px solid var(--l-200); border-radius: var(--r-md); padding: 14px 16px; } .token-card.is-off .token-meta > div { background: var(--l-0); } .token-meta dt { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--t-400); margin-bottom: 5px; } .token-meta dt svg { width: 14px; height: 14px; } .token-meta dd { margin: 0; font-size: .96rem; font-weight: 800; color: var(--t-900); } .token-domains { display: flex; flex-wrap: wrap; gap: 8px; } .token-domain { font-family: var(--mono); font-size: .78rem; direction: ltr; padding: 6px 12px; border-radius: var(--r-full); background: var(--l-100); color: var(--t-700); border: 1px solid var(--l-200); } /* ---- تمدید ---- */ .token-renew { border-top: 1px dashed var(--l-200); padding-top: 20px; margin: 0; } .token-renew > label { display: block; font-size: .88rem; font-weight: 800; color: var(--t-700); margin-bottom: 10px; } .token-renew__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .token-renew__row select { width: 100%; font: inherit; font-size: .92rem; color: var(--t-900); padding: 12px 16px; cursor: pointer; appearance: none; border: 1px solid var(--l-200); border-radius: var(--r-sm); background: var(--l-0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 17px; background-position: left 14px center; padding-inline-end: 40px; } .token-renew__row select:focus { outline: none; border-color: var(--b-400); box-shadow: 0 0 0 4px rgba(99,102,241,.14); } .token-renew__note { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: .84rem; color: var(--t-400); line-height: 1.9; } .token-renew__note svg { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--b-400); } @media (max-width: 560px) { .token-card { padding: 20px; } .token-card__head { flex-direction: column; align-items: flex-start; gap: 10px; } .token-renew__row { grid-template-columns: 1fr; } } /* ---- جدول‌های پیش‌فرض سایر تب‌ها ---- */ .woocommerce-MyAccount-content .woocommerce-orders-table, .woocommerce-MyAccount-content .shop_table { width: 100%; border-collapse: collapse; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); overflow: hidden; } .woocommerce-MyAccount-content .shop_table th, .woocommerce-MyAccount-content .shop_table td { padding: 14px 18px; text-align: start; font-size: .92rem; border-bottom: 1px solid var(--l-200); } .woocommerce-MyAccount-content .shop_table thead th { background: var(--l-50); font-size: .78rem; font-weight: 800; color: var(--t-400); } .woocommerce-MyAccount-content .shop_table tbody tr:last-child td { border-bottom: 0; } .woocommerce-MyAccount-content .addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .woocommerce-MyAccount-content .woocommerce-Address { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 24px; } .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 1rem; margin: 0; } .woocommerce-MyAccount-content address { font-style: normal; color: var(--t-500); font-size: .93rem; line-height: 2; } .woocommerce-EditAccountForm, .woocommerce-address-fields { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 26px; } .woocommerce-EditAccountForm fieldset { border: 1px solid var(--l-200); border-radius: var(--r-md); padding: 20px; margin: 24px 0 20px; } .woocommerce-EditAccountForm legend { font-weight: 800; font-size: .95rem; padding-inline: 8px; } /* ---- ورود و ثبت‌نام ---- */ .woocommerce-account .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } .woocommerce-account .u-column1, .woocommerce-account .u-column2 { width: auto; float: none; } .woocommerce-account .woocommerce-form { background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 26px; margin: 0; } .woocommerce-account .u-columns h2 { font-size: 1.1rem; margin-bottom: 18px; } .woocommerce-LostPassword { margin: 14px 0 0; font-size: .88rem; } @media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; } .account-nav { position: static; } .account-nav ul { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media (max-width: 620px) { .order-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; } .order-row__meta { grid-column: 1 / -1; } .order-row__total { grid-column: 2; grid-row: 1; text-align: end; } .order-row__status { grid-column: 1 / -1; justify-self: start; } .account-nav ul { grid-template-columns: 1fr; } } /* ---- صفحهٔ پس از پرداخت ---- */ .order-done { max-width: 760px; margin-inline: auto; } .order-done__head { text-align: center; margin-bottom: 34px; } .order-done__icon { width: 70px; height: 70px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, var(--em-400), var(--cy-400)); color: #fff; box-shadow: 0 12px 34px rgba(16,185,129,.35); } .order-done__icon svg { width: 32px; height: 32px; } .order-done__icon--failed { background: linear-gradient(140deg, var(--ro-400), #ef4444); box-shadow: 0 12px 34px rgba(244,63,94,.32); } .order-done__head h2, .order-done__head .woocommerce-thankyou-order-received, .order-done__head .woocommerce-notice--success { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 900; color: var(--t-900); margin: 0 0 10px; } .order-done__head p { color: var(--t-500); margin: 0; } .order-done__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; list-style: none; margin: 0 0 26px; padding: 0; background: var(--l-200); border: 1px solid var(--l-200); border-radius: var(--r-lg); overflow: hidden; } .order-done__grid li { background: var(--l-0); padding: 20px 22px; display: grid; gap: 5px; border: 0; } .order-done__grid span { font-size: .8rem; color: var(--t-400); } .order-done__grid strong { font-size: 1.02rem; font-weight: 900; color: var(--t-900); word-break: break-word; } .order-done__next { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-radius: var(--r-md); background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #ddd8fe; font-size: .93rem; color: var(--b-700); } .order-done__next svg { width: 19px; height: 19px; flex: none; margin-top: 4px; } .order-done__next p { margin: 0; } .order-done__next a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } /* جدول‌های جزئیات سفارش که هوک woocommerce_thankyou می‌سازد */ .woocommerce-order-details, .woocommerce-customer-details { margin-top: 36px; } .woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: 1.1rem; margin-bottom: 16px; } .woocommerce-table--order-details, .woocommerce-table--customer-details { width: 100%; border-collapse: collapse; border: 1px solid var(--l-200); border-radius: var(--r-lg); overflow: hidden; } .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 14px 20px; border-bottom: 1px solid var(--l-200); font-size: .93rem; text-align: start; } .woocommerce-table--order-details thead th { background: var(--l-50); font-size: .78rem; color: var(--t-400); font-weight: 800; } .woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--t-500); } .woocommerce-table--order-details tfoot td { font-weight: 800; } .woocommerce-customer-details address { font-style: normal; padding: 18px 20px; border: 1px solid var(--l-200); border-radius: var(--r-md); background: var(--l-50); font-size: .93rem; line-height: 2; } @media (max-width: 980px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-side { position: static; } } @media (max-width: 560px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } .wc-page .form-row-first, .wc-page .form-row-last { grid-column: 1 / -1; } .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields { padding: 20px; } .checkout_coupon .form-row { display: block; margin: 0 0 12px; } .checkout_coupon .input-text { width: 100%; } } /* ---- دیدگاه‌ها ---- */ .comment-list { display: grid; gap: 20px; margin: 0 0 32px; } .comment-list li { background: var(--l-50); border: 1px solid var(--l-200); border-radius: var(--r-md); padding: 20px; } .comment-form input:not([type="submit"]), .comment-form textarea { width: 100%; font: inherit; padding: 12px 16px; border: 1px solid var(--l-200); border-radius: var(--r-sm); background: var(--l-0); } .comment-form .submit { font: inherit; font-weight: 800; cursor: pointer; padding: 13px 26px; border: 0; border-radius: var(--r-full); background: var(--b-600); color: #fff; } /* ========================================================================== ۲۱. وبلاگ ========================================================================== */ /* ---- سرصفحهٔ تیرهٔ صفحات داخلی ---- */ .page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--d-950); color: #fff; padding: clamp(52px, 7vw, 96px) 0 clamp(44px, 5vw, 72px); } .page-hero .grid-lines { opacity: .6; } .page-hero__inner { position: relative; z-index: 1; } .page-hero h1 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); margin: 0; text-wrap: balance; } .page-hero__sub { color: rgba(226,232,240,.62); margin: 14px 0 0; font-size: 1.02rem; max-width: 60ch; } .page-hero--center { text-align: center; } .page-hero--center .page-hero__sub { margin-inline: auto; } /* ---- برچسب دسته ---- */ .cat-chip { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 800; line-height: 1; padding: 7px 14px; border-radius: var(--r-full); background: #eef2ff; color: var(--b-700); border: 1px solid #ddd8fe; transition: background-color .2s var(--ease), color .2s var(--ease); } .cat-chip:hover { background: var(--b-600); color: #fff; border-color: var(--b-600); } .cat-chip--on-dark { background: rgba(99,102,241,.16); color: var(--b-300); border-color: rgba(129,140,248,.3); } .cat-chip--on-dark:hover { background: var(--b-500); color: #fff; border-color: var(--b-500); } /* ---- فیلتر دسته‌ها زیر سرصفحه ---- */ .cat-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; position: relative; z-index: 1; } .page-hero--center .cat-filter { justify-content: center; } /* ---- نوشتهٔ شاخص ---- */ .post-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 44px; transition: box-shadow .35s var(--ease), border-color .35s var(--ease); } .post-feature:hover { box-shadow: var(--sh-3); border-color: #d7dcf7; } .post-feature__media { position: relative; align-self: stretch; min-height: 280px; background: var(--l-100); } .post-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .post-feature__body { padding: clamp(26px, 3vw, 44px); } .post-feature__body h2 { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.95rem); margin: 16px 0 12px; } .post-feature__body h2 a { color: var(--t-900); } .post-feature__body h2 a:hover { color: var(--b-600); } .post-feature__body p { color: var(--t-500); margin: 0 0 22px; } /* ---- شبکهٔ کارت‌ها ---- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 24px; } .post-card { display: flex; flex-direction: column; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: #d7dcf7; } .post-card__thumb { display: block; position: relative; background: var(--l-100); } .post-card__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease); } .post-card:hover .post-card__thumb img { transform: scale(1.04); } .post-card__thumb--empty { aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--d-850), var(--d-950)); display: grid; place-items: center; color: rgba(255,255,255,.14); } .post-card__thumb--empty svg { width: 46px; height: 46px; } .post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } /* عنوان و چکیده بریده می‌شوند و کف ارتفاع می‌گیرند، تا طول متن ارتفاع کارت را تغییر ندهد و همهٔ کارت‌ها یک‌اندازه بمانند. */ .post-card__title { font-size: 1.14rem; line-height: 1.55; margin: 14px 0 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(1.55em * 2); } .post-card__title a { color: var(--t-900); } .post-card__title a:hover { color: var(--b-600); } .post-card__excerpt { color: var(--t-500); font-size: .94rem; line-height: 1.8; margin: 0 0 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: calc(1.8em * 3); } .post-card__foot { margin-top: auto; } .post-feature__body p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } /* ---- ریز‌اطلاعات نوشته ---- */ .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .85rem; color: var(--t-400); } .entry-meta > span { display: inline-flex; align-items: center; gap: 6px; } .entry-meta svg { width: 15px; height: 15px; } .entry-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; } .entry-meta--on-dark { color: rgba(226,232,240,.6); } /* ---- سرصفحهٔ تک‌نوشته ---- */ .entry-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--d-950); color: #fff; text-align: center; padding: clamp(52px, 7vw, 100px) 0 clamp(60px, 7vw, 96px); } .entry-hero__inner { position: relative; z-index: 1; max-width: 800px; margin-inline: auto; } .entry-hero h1 { color: #fff; font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3.05rem); margin: 20px 0 22px; text-wrap: balance; } .entry-hero .entry-meta { justify-content: center; } /* تصویر شاخص که روی مرز تیره و روشن می‌نشیند */ .entry-figure { margin: -60px auto 0; max-width: 980px; position: relative; z-index: 2; padding-inline: 20px; } .entry-figure img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-3); } .entry-figure figcaption { text-align: center; font-size: .86rem; color: var(--t-400); margin-top: 12px; } /* ---- چیدمان تک‌نوشته: متن راست، فهرست چپ ---- */ .entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(44px, 5vw, 76px); } .entry-content { max-width: 72ch; } .entry-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 22px; } /* ---- فهرست مطالب ---- */ .toc { background: var(--l-50); border: 1px solid var(--l-200); border-radius: var(--r-md); padding: 20px 22px; } .toc__title { font-size: .8rem; font-weight: 800; color: var(--t-400); margin-bottom: 14px; } .toc ol { display: grid; gap: 2px; } .toc a { display: block; padding: 7px 12px; border-radius: var(--r-xs); font-size: .88rem; line-height: 1.7; color: var(--t-500); border-inline-start: 2px solid transparent; } .toc a:hover { background: var(--l-100); color: var(--t-900); } .toc a.is-active { color: var(--b-700); background: #eef2ff; border-inline-start-color: var(--b-500); font-weight: 700; } .toc .lvl-3 a { padding-inline-start: 26px; font-size: .84rem; } /* ---- اشتراک‌گذاری ---- */ .share__title { font-size: .8rem; font-weight: 800; color: var(--t-400); margin-bottom: 12px; } .share__row { display: flex; flex-wrap: wrap; gap: 8px; } .share__btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--l-200); border-radius: var(--r-sm); background: var(--l-0); color: var(--t-500); cursor: pointer; font: inherit; padding: 0; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); } .share__btn:hover { border-color: var(--b-300); color: var(--b-700); background: #eef2ff; } .share__btn svg { width: 18px; height: 18px; } .share__btn.is-copied { border-color: var(--em-500); color: var(--em-600); background: #ecfdf5; } /* ---- نوار پیشرفت مطالعه ---- */ .read-progress { position: fixed; inset-inline: 0; top: var(--header-h); z-index: 80; height: 3px; background: transparent; pointer-events: none; } .read-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--b-500), var(--v-500), var(--cy-400)); transition: width .1s linear; } /* ---- جعبهٔ نویسنده ---- */ .author-box { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--l-50); border: 1px solid var(--l-200); border-radius: var(--r-lg); padding: 26px; } .author-box img { border-radius: 50%; } .author-box h3 { margin-bottom: 4px; } .author-box p { color: var(--t-500); font-size: .94rem; margin: 0; } /* ---- ناوبری نوشتهٔ قبلی و بعدی ---- */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; } .post-nav a { display: block; padding: 22px 24px; background: var(--l-0); border: 1px solid var(--l-200); border-radius: var(--r-md); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .post-nav a:hover { border-color: #d7dcf7; box-shadow: var(--sh-2); transform: translateY(-2px); } .post-nav small { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; color: var(--t-400); margin-bottom: 8px; } .post-nav small svg { width: 14px; height: 14px; } .post-nav b { display: block; font-size: 1rem; font-weight: 800; color: var(--t-900); line-height: 1.6; } .post-nav .next { text-align: end; } .post-nav .next small { justify-content: flex-end; } .post-nav .next small svg { transform: rotate(180deg); } /* ---- نوشته‌های مرتبط ---- */ .related { border-top: 1px solid var(--l-200); } /* ---- حالت خالی ---- */ .empty-state { text-align: center; padding: clamp(40px, 6vw, 80px) 0; } .empty-state svg { width: 54px; height: 54px; color: var(--l-300); margin: 0 auto 20px; } .empty-state p { color: var(--t-500); margin-bottom: 24px; } @media (max-width: 1080px) { .entry-layout { grid-template-columns: 1fr; } .entry-side { position: static; grid-template-columns: 1fr 1fr; align-items: start; } .entry-content { max-width: none; } } @media (max-width: 860px) { .post-feature { grid-template-columns: 1fr; } .post-feature__media { min-height: 0; aspect-ratio: 16 / 9; } .post-feature__media img { position: static; } } @media (max-width: 620px) { .entry-side { grid-template-columns: 1fr; } .post-nav { grid-template-columns: 1fr; } .entry-figure { margin-top: -32px; } }