@import url("mobile-typography.css"); .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } .sr-only-focusable:focus { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important } .nav-link, .section-title, .shine-effect { position: relative } html { scroll-behavior: smooth } body { font-family: Vazirmatn, sans-serif } input, textarea, input[type=hidden], input::placeholder, textarea::placeholder { font-family: Vazirmatn, sans-serif } input, textarea { font-family: Vazirmatn, sans-serif } body.layout-sticky-footer { min-height: 100vh; display: flex; flex-direction: column } body.layout-sticky-footer .main-content-grow { flex: 1 0 0 } .glass-effect { background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .3) } .site-header-nav { display: none; align-items: center; gap: 2rem } .site-header-nav a { color: #334155; font-weight: 500; text-decoration: none; transition: color .2s } .site-header-nav a.font-bold, .site-header-nav a:hover { color: #2563eb } .site-header-nav a.bg-gradient-to-l { background: linear-gradient(90deg, #2563eb 0, #0ea5e9 100%); color: #fff; padding: .75rem 1.5rem; border-radius: .75rem; font-weight: 700 } .site-header-nav a.bg-gradient-to-l:hover { opacity: .95 } .site-header-mobile-btn { display: block; padding: .75rem; border-radius: .75rem; border: none; background: 0 0; cursor: pointer } @media (min-width:1024px) { .site-header-nav { display: flex !important } .site-header-mobile-btn, .site-header-mobile-menu { display: none !important } } .gradient-bg { background: linear-gradient(135deg, #f8fafc 0, #f0f9ff 25%, #f8fafc 50%, #f0f9ff 100%) } .gradient-text { background: linear-gradient(90deg, #2563eb 0, #0ea5e9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text } .gradient-border { border: 3px double transparent; background-image: linear-gradient(white, #fff), linear-gradient(90deg, #2563eb 0, #0ea5e9 100%); background-origin: border-box; background-clip: padding-box, border-box } .tool-card { transition: .4s cubic-bezier(.175, .885, .32, 1.275); display: flex; flex-direction: column; height: 100% } .tool-card .relative.z-10, .tool-card>div:not(.absolute) { display: flex; flex-direction: column; flex: 1 } .tool-card .relative.z-10>div:last-child, .tool-card>div:not(.absolute)>div:last-child { margin-top: auto } .tool-card:hover { transform: translateY(-10px) scale(1.02) } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 4.5em } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 3em } .shine-effect { overflow: hidden } .shine-effect::after { content: ''; position: absolute; top: -50%; left: -50%; width: 20%; height: 200%; background: rgba(255, 255, 255, .3); transform: rotate(30deg); transition: transform .6s } .nav-link::after, .section-title::after { content: ''; right: 0; background: linear-gradient(90deg, #2563eb 0, #0ea5e9 100%); position: absolute } .shine-effect:hover::after { transform: translateX(600px) rotate(30deg) } .floating-element { animation: 6s ease-in-out infinite float } .floating-delay-2s { animation-delay: 2s } .floating-delay-4s { animation-delay: 4s } @keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-20px) } } .feature-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 24px; font-size: 36px; transition: .3s } .feature-icon:hover { transform: rotate(10deg) scale(1.1) } .section-title { display: inline-block } .section-title::after { bottom: -10px; width: 60%; height: 4px; border-radius: 2px } .category-card { transition: .5s cubic-bezier(.175, .885, .32, 1.275); background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: 10px 10px 20px #e2e8f0, -10px -10px 20px #fff } .card-hover, .stat-card { transition: .3s } .category-card:hover { transform: translateY(-15px); box-shadow: 15px 15px 30px #cbd5e1, -15px -15px 30px #fff } .site-header-nav .nav-link::after { bottom: -5px; width: 0; height: 2px; transition: width .3s } .site-header-nav .nav-link:hover::after { width: 100% } .hero-bg { background: radial-gradient(circle at 10% 20%, rgba(219, 234, 254, .5) 0, rgba(240, 249, 255, .3) 90%) } .stat-card { background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0, rgba(240, 249, 255, .9) 100%); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .05) } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, .1) } .gradient-badge { background: linear-gradient(90deg, #2563eb 0, #0ea5e9 100%); color: #fff } .card-hover:hover { box-shadow: 0 25px 50px rgba(37, 99, 235, .1) } .blog-card { transition: .4s cubic-bezier(.175, .885, .32, 1.275); display: flex; flex-direction: column; height: 100% } .blog-card .relative.z-10 { display: flex; flex-direction: column; flex: 1 } .blog-card .card-body { display: flex; flex-direction: column; flex: 1 } .blog-card .card-footer { margin-top: auto } .blog-card .relative.z-10>*:last-child { margin-top: auto } .blog-card .post-image-placeholder { background: linear-gradient(145deg, #dbeafe, #bae6fd); border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; color: #2563eb } .pagination-item:hover, .tag-cloud a:hover { background: #2563eb; color: #fff } .sidebar-widget { background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .05); border: 1px solid #f1f5f9; margin-bottom: 1.5rem } .comment-form input, .comment-form textarea, .comment-item, .pagination-item, .tag-cloud a { transition: .2s } .tag-cloud a:hover { border-color: #2563eb } .blog-article-content p { margin-bottom: 1rem; line-height: 1.75; color: #334155 } .blog-article-content h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-top: 2rem; margin-bottom: 1rem } .blog-article-content h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-top: 1.5rem; margin-bottom: .75rem } .blog-article-content ul { list-style-type: disc; padding-right: 1.5rem; margin-bottom: 1rem } .blog-article-content ol { list-style-type: decimal; padding-right: 1.5rem; margin-bottom: 1rem } .blog-article-content li { margin-bottom: .5rem; color: #334155 } .blog-article-content blockquote { border-right: 4px solid #2563eb; padding-right: 1rem; font-style: italic; color: #475569; margin: 1.5rem 0 } .blog-article-content img { border-radius: 1rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .05); margin: 1.5rem 0; max-width: 100%; height: auto } .blog-article-content a { color: #2563eb; text-decoration: none } .blog-article-content a:hover { text-decoration: underline } .blog-article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9375rem } .blog-article-content thead th { background: #f1f5f9; border: 1px solid #e2e8f0; padding: .75rem 1rem; text-align: right; font-weight: 600; color: #0f172a } .blog-article-content tbody td { border: 1px solid #e2e8f0; padding: .75rem 1rem; color: #334155 } .blog-article-content tbody tr:nth-child(2n), .comment-item:hover { background: #f8fafc } .blog-article-content pre { direction: ltr; text-align: left; unicode-bidi: isolate; background: #1e293b; color: #e2e8f0; padding: 1.25rem 1.5rem; border-radius: .75rem; overflow-x: auto; margin: 1.5rem 0; font-size: .875rem; line-height: 1.6 } .blog-article-content pre code { direction: ltr; text-align: left; unicode-bidi: isolate; background: 0 0; padding: 0; color: inherit } .blog-article-content code { direction: ltr; unicode-bidi: isolate; background: #f1f5f9; color: #0f172a; padding: .2em .4em; border-radius: .375rem; font-size: .875em } .blog-article-content figure { margin: 1.5rem 0 } .blog-article-content figure img { margin: 0 } .blog-article-content figcaption { margin-top: .5rem; font-size: .875rem; color: #64748b; text-align: center } .blog-article-content .article-video { position: relative; width: 100%; margin: 1.5rem 0; border-radius: 1rem; overflow: hidden; background: #0f172a; aspect-ratio: 16/9 } .blog-article-content .article-video iframe, .blog-article-content .article-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none } .comment-form input:focus, .comment-form textarea:focus { outline: 0; box-shadow: 0 0 0 2px #2563eb; border-color: transparent } .share-telegram { background-color: #069 } .share-telegram:hover { background-color: #005580 } .share-whatsapp { background-color: #0d6b5f } .share-whatsapp:hover { background-color: #0b5c52 } .share-twitter { background-color: #0868a0 } .share-twitter:hover { background-color: #065a8a } .share-linkedin { background-color: #004182 } .share-linkedin:hover { background-color: #036 } .site-header-mobile-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 60 } .site-header-mobile-menu { position: fixed; top: 0; right: 0; height: 100vh; width: min(86vw, 360px); transform: translateX(105%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); z-index: 70; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); box-shadow: -20px 0 50px rgba(0, 0, 0, .12); border-left: 1px solid rgba(226, 232, 240, .8); padding: 1.25rem; display: flex; flex-direction: column } .site-header-mobile-menu-inner { height: 100%; display: flex; flex-direction: column; min-height: 0 } .site-header-mobile-menu-top { position: sticky; top: 0; z-index: 1; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); padding-bottom: .25rem } .site-header-mobile-menu-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) } .site-header-mobile-menu-scroll::-webkit-scrollbar { width: 0; height: 0 } .site-header-mobile-menu-scroll::-webkit-scrollbar-thumb { background: transparent } .site-header-mobile-menu-scroll::-webkit-scrollbar-track { background: transparent } .site-header-mobile-menu.is-open { transform: translateX(0) } .site-header-mobile-overlay.is-open { opacity: 1; pointer-events: auto } body.mobile-menu-open { overflow: hidden }