فراغیب

تست5: تفاوت میان نسخه‌ها

تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<!-- صفحهٔ اصلی آماده برای MediaWiki و پوستهٔ Vector 2022 پیش از انتشار: ۱) عبارت «نام کسب‌وکار شما» را با نام برند خود جایگزین کنید. ۲) نام فایل‌های رسانه‌ای را دقیقاً با نام فایل‌های آپلودشده در ویکی جایگزین کنید. ۳) عنوان صفحات لینک‌شده مانند «درباره...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<!--
/*
صفحهٔ اصلی آماده برای MediaWiki و پوستهٔ Vector 2022
  Faraghaib / فراغیب
  Paste this file into: MediaWiki:Common.css
  All selectors are scoped to .fg-home to reduce skin conflicts.
  Optional remote assets:
  https://dl.faraghaib.ir/mediawiki/faraghaib/
*/


پیش از انتشار:
@font-face {
۱) عبارت «نام کسب‌وکار شما» را با نام برند خود جایگزین کنید.
font-family: "FaraghaibVazirmatn";
۲) نام فایل‌های رسانه‌ای را دقیقاً با نام فایل‌های آپلودشده در ویکی جایگزین کنید.
src: url("https://dl.faraghaib.ir/mediawiki/faraghaib/Vazirmatn-Variable.woff2") format("woff2");
۳) عنوان صفحات لینک‌شده مانند «درباره ما»، «خدمات»، «پروژه‌ها» و «تماس با ما»
font-style: normal;
  را با عنوان واقعی صفحات ویکی خود هماهنگ کنید.
font-weight: 100 900;
۴) برای پخش صوت و ویدیو، افزونهٔ TimedMediaHandler باید روی ویکی فعال باشد.
font-display: swap;
-->
}
__NOTOC__
__NOEDITSECTION__


<div dir="rtl" lang="fa">
.mw-parser-output .fg-home {
--fg-ink: #172033;
--fg-muted: #667085;
--fg-soft: #f6f7fb;
--fg-border: rgba(23, 32, 51, 0.1);
--fg-primary: #6d28d9;
--fg-primary-dark: #4c1d95;
--fg-cyan: #06b6d4;
--fg-lime: #b7f34a;
--fg-white: #ffffff;
--fg-shadow: 0 24px 70px rgba(30, 27, 75, 0.12);
box-sizing: border-box;
color: var(--fg-ink);
font-family: "FaraghaibVazirmatn", Vazirmatn, Tahoma, Arial, sans-serif;
font-size: 16px;
line-height: 1.8;
margin: 0 auto;
max-width: 100%;
}


{| style="width:100%; border:1px solid #a2a9b1; border-radius:16px; background-color:#f8f9fa; margin:0 0 18px 0;"
.mw-parser-output .fg-home *,
|-
.mw-parser-output .fg-home *::before,
| style="width:65%; padding:28px 24px; vertical-align:middle;" |
.mw-parser-output .fg-home *::after {
<div style="font-size:180%; font-weight:bold; color:#202122; margin-bottom:8px;">به «نام کسب‌وکار شما» خوش آمدید</div>
box-sizing: border-box;
<div style="font-size:110%; line-height:1.9;">مرجع تخصصی برنامه‌نویسی، راهکارهای نرم‌افزاری و معرفی خدمات «نام کسب‌وکار شما»</div>
}
<div style="margin-top:18px;">[[درباره ما|دربارهٔ ما]] &nbsp; [[خدمات|خدمات ما]] &nbsp; [[تماس با ما|تماس با ما]]</div>
| style="width:35%; padding:20px; text-align:center; vertical-align:middle;" |
[[File:لوگوی-کسب‌وکار.png|frameless|220px|alt=لوگوی کسب‌وکار شما|لوگوی کسب‌وکار شما]]
|}


{| style="width:100%; border:1px solid #c8ccd1; border-radius:12px; background-color:#ffffff; margin:0 0 18px 0;"
.mw-parser-output .fg-home a {
|-
color: inherit;
! style="padding:16px 20px; text-align:right; background-color:#eaecf0; font-size:130%;" | دربارهٔ ما
}
|-
| style="padding:18px 20px; line-height:2;" |
«نام کسب‌وکار شما» با هدف ارائهٔ راهکارهای قابل اعتماد در حوزهٔ برنامه‌نویسی، توسعهٔ وب و آموزش فناوری فعالیت می‌کند. ما تلاش می‌کنیم نیازهای پیچیده را به محصولاتی ساده، امن و قابل توسعه تبدیل کنیم؛ از ایدهٔ اولیه و طراحی تجربهٔ کاربری تا پیاده‌سازی، استقرار و پشتیبانی.


'''چشم‌انداز ما:''' ساختن راهکارهای دیجیتال باکیفیت و انتقال دانش فنی به زبان ساده و کاربردی.
.mw-parser-output .fg-home h1,
|}
.mw-parser-output .fg-home h2,
.mw-parser-output .fg-home h3,
.mw-parser-output .fg-home p {
margin-top: 0;
}


{| style="width:100%; border-collapse:separate; border-spacing:12px; margin:0 0 18px 0;"
.mw-parser-output .fg-home h2 {
|-
font-size: clamp(1.65rem, 3vw, 2.55rem);
| style="width:33.33%; vertical-align:top; border:1px solid #c8ccd1; border-radius:12px; padding:18px; background-color:#ffffff;" |
letter-spacing: -0.04em;
<div style="font-size:125%; font-weight:bold; margin-bottom:8px;">توسعهٔ نرم‌افزار</div>
line-height: 1.35;
توسعهٔ وب‌سایت، سامانه و ابزارهای اختصاصی با تمرکز بر کیفیت، امنیت و نگهداری آسان.
margin-bottom: 0.55rem;
}


* تحلیل نیازمندی
.mw-parser-output .fg-home h3 {
* طراحی و پیاده‌سازی
font-size: 1.18rem;
* آزمون و پشتیبانی
line-height: 1.5;
| style="width:33.33%; vertical-align:top; border:1px solid #c8ccd1; border-radius:12px; padding:18px; background-color:#ffffff;" |
margin-bottom: 0.55rem;
<div style="font-size:125%; font-weight:bold; margin-bottom:8px;">آموزش و محتوای فنی</div>
}
تهیهٔ آموزش‌ها و مطالب قابل فهم برای برنامه‌نویسان، مدیران و علاقه‌مندان فناوری.


* آموزش پروژه‌محور
.mw-parser-output .fg-shell {
* مقاله و مستندات
margin: 0 auto;
* بازبینی کد و رفع اشکال
max-width: 1240px;
| style="width:33.33%; vertical-align:top; border:1px solid #c8ccd1; border-radius:12px; padding:18px; background-color:#ffffff;" |
padding: 24px 18px 46px;
<div style="font-size:125%; font-weight:bold; margin-bottom:8px;">مشاوره و اتوماسیون</div>
}
کمک به کسب‌وکارها برای انتخاب فناوری مناسب، بهینه‌سازی فرایندها و کاهش کارهای تکراری.


* بررسی فنی محصول
.mw-parser-output .fg-hero {
* اتصال سرویس‌ها و APIها
background:
* اتوماسیون فرایندها
radial-gradient(circle at 80% 15%, rgba(6, 182, 212, 0.2), transparent 30%),
|}
linear-gradient(135deg, #1b1248 0%, #30206d 48%, #6d28d9 100%);
border-radius: 32px;
box-shadow: var(--fg-shadow);
color: #fff;
display: grid;
gap: 22px;
grid-template-columns: minmax(0, 1.07fr) minmax(330px, 0.93fr);
min-height: 540px;
overflow: hidden;
padding: clamp(30px, 5vw, 72px);
position: relative;
}


{| style="width:100%; border-collapse:separate; border-spacing:12px; margin:0 0 18px 0;"
.mw-parser-output .fg-hero::after {
|-
background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.08) 55%, transparent 55%);
| style="width:50%; vertical-align:top;" |
background-size: 28px 28px;
{| style="width:100%; height:100%; border:1px solid #c8ccd1; border-radius:12px; background-color:#ffffff;"
content: "";
|-
inset: 0;
! style="padding:14px 16px; text-align:right; background-color:#eaecf0; font-size:120%;" | ویدیوی معرفی
opacity: 0.25;
|-
pointer-events: none;
| style="padding:16px; text-align:center;" |
position: absolute;
[[File:ویدیوی-معرفی-کسب‌وکار.webm|500px|center|alt=ویدیوی معرفی کسب‌وکار|ویدیوی معرفی کسب‌وکار]]
}
|-
| style="padding:0 16px 16px 16px; line-height:1.8;" |
در این ویدیو با توانمندی‌ها، خدمات و مسیر کاری «نام کسب‌وکار شما» آشنا شوید.
|}
| style="width:50%; vertical-align:top;" |
{| style="width:100%; height:100%; border:1px solid #c8ccd1; border-radius:12px; background-color:#ffffff;"
|-
! style="padding:14px 16px; text-align:right; background-color:#eaecf0; font-size:120%;" | فایل صوتی
|-
| style="padding:28px 16px 18px 16px; text-align:center;" |
[[File:پیام-صوتی-معرفی.ogg|center|alt=پیام صوتی معرفی کسب‌وکار|پخش پیام صوتی معرفی کسب‌وکار]]
|-
| style="padding:0 16px 16px 16px; line-height:1.8;" |
پیام صوتی کوتاهی دربارهٔ داستان شکل‌گیری، ارزش‌ها و خدمات ما.
|}
|}


{| style="width:100%; border-collapse:separate; border-spacing:12px; margin:0 0 18px 0;"
.mw-parser-output .fg-hero__content,
|-
.mw-parser-output .fg-hero__visual {
| style="width:50%; vertical-align:top;" |
position: relative;
{| style="width:100%; border:1px solid #c8ccd1; border-radius:12px; background-color:#ffffff;"
z-index: 1;
|-
}
! style="padding:14px 16px; text-align:right; background-color:#eaecf0; font-size:120%;" | تصویر اصلی
|-
| style="padding:16px; text-align:center;" |
[[File:تصویر-معرفی-اصلی.jpg|500px|thumb|center|alt=تصویر معرفی کسب‌وکار|تصویر معرفی کسب‌وکار]]
|}
| style="width:50%; vertical-align:top;" |
{| style="width:100%; border:1px solid #c8ccd1; border-radius:12px; background-color:#ffffff;"
|-
! style="padding:14px 16px; text-align:right; background-color:#eaecf0; font-size:120%;" | اسلایدر تصاویر
|-
| style="padding:16px;" |
<gallery mode="slideshow" showthumbnails caption="تصاویر منتخب از فعالیت‌های ما">
File:اسلاید-۱.jpg|alt=تصویر اول از فعالیت‌های کسب‌وکار|شروع یک پروژهٔ جدید
File:اسلاید-۲.jpg|alt=تصویر دوم از فعالیت‌های کسب‌وکار|طراحی و توسعه
File:اسلاید-۳.jpg|alt=تصویر سوم از فعالیت‌های کسب‌وکار|همکاری با مشتریان
File:اسلاید-۴.jpg|alt=تصویر چهارم از فعالیت‌های کسب‌وکار|نتیجه و پشتیبانی
</gallery>
|}
|}


{| style="width:100%; border:1px solid #c8ccd1; border-radius:12px; background-color:#ffffff; margin:0 0 18px 0;"
.mw-parser-output .fg-hero__content {
|-
align-self: center;
! style="padding:16px 20px; text-align:right; background-color:#eaecf0; font-size:130%;" | فرایند همکاری
max-width: 680px;
|-
}
| style="padding:18px 20px; line-height:1.9;" |
{| style="width:100%; border-collapse:collapse; text-align:center;"
|-
! style="width:25%; padding:10px; border-bottom:2px solid #36c;" | ۱. شناخت
! style="width:25%; padding:10px; border-bottom:2px solid #36c;" | ۲. طراحی
! style="width:25%; padding:10px; border-bottom:2px solid #36c;" | ۳. اجرا
! style="width:25%; padding:10px; border-bottom:2px solid #36c;" | ۴. پشتیبانی
|-
| style="padding:10px; vertical-align:top;" | بررسی هدف‌ها و نیازها
| style="padding:10px; vertical-align:top;" | انتخاب راهکار و برنامهٔ اجرا
| style="padding:10px; vertical-align:top;" | پیاده‌سازی و آزمون
| style="padding:10px; vertical-align:top;" | بهبود مستمر و پاسخ‌گویی
|}
|}


{| style="width:100%; border-collapse:separate; border-spacing:12px; margin:0 0 18px 0;"
.mw-parser-output .fg-eyebrow,
|-
.mw-parser-output .fg-kicker {
| style="width:50%; vertical-align:top; border:1px solid #c8ccd1; border-radius:12px; padding:18px; background-color:#f8f9fa;" |
color: var(--fg-cyan);
<div style="font-size:125%; font-weight:bold; margin-bottom:8px;">صفحات مهم</div>
display: inline-flex;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}


* [[خدمات|خدمات ما]]
.mw-parser-output .fg-eyebrow {
* [[پروژه‌ها|پروژه‌ها و نمونه‌کارها]]
align-items: center;
* [[آموزش‌ها|آموزش‌ها و مقالات]]
color: var(--fg-lime);
* [[درباره ما|دربارهٔ ما]]
gap: 9px;
| style="width:50%; vertical-align:top; border:1px solid #c8ccd1; border-radius:12px; padding:18px; background-color:#f8f9fa;" |
margin-bottom: 18px;
<div style="font-size:125%; font-weight:bold; margin-bottom:8px;">ارتباط با ما</div>
}


برای دریافت مشاوره یا شروع یک پروژه، به [[تماس با ما|صفحهٔ تماس با ما]] بروید.
.mw-parser-output .fg-eyebrow__dot,
.mw-parser-output .fg-status-dot {
background: var(--fg-lime);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(183, 243, 74, 0.16);
display: inline-block;
height: 8px;
width: 8px;
}


'''ایمیل:''' info@example.com 
.mw-parser-output .fg-hero__title {
'''ساعات پاسخ‌گویی:''' شنبه تا چهارشنبه، ۹ تا ۱۷
font-size: clamp(2.55rem, 6vw, 5.6rem);
|}
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1.05;
margin: 0 0 22px;
max-width: 750px;
}


{| style="width:100%; border:1px solid #36c; border-radius:12px; background-color:#eef3ff; margin:0 0 18px 0;"
.mw-parser-output .fg-hero__lead {
|-
color: rgba(255, 255, 255, 0.78);
| style="padding:20px; text-align:center; line-height:1.9;" |
font-size: clamp(1rem, 1.5vw, 1.18rem);
<div style="font-size:130%; font-weight:bold;">ایده‌ای برای ساخت یا بهبود یک محصول دارید؟</div>
line-height: 2;
[[تماس با ما|همین حالا با «نام کسب‌وکار شما» در تماس شوید.]]
margin-bottom: 26px;
|}
max-width: 650px;
}


<small>این صفحه با ویکی‌متن استاندارد MediaWiki نوشته شده و برای نمایش صحیح در حالت راست‌به‌چپ طراحی شده است.</small>
.mw-parser-output .fg-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
}


</div>
.mw-parser-output .fg-button {
align-items: center;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
font-size: 0.95rem;
font-weight: 800;
gap: 10px;
justify-content: center;
min-height: 48px;
padding: 9px 19px;
text-decoration: none;
transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
 
.mw-parser-output .fg-button:hover,
.mw-parser-output .fg-button:focus-visible {
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.16);
transform: translateY(-2px);
text-decoration: none;
}
 
.mw-parser-output .fg-button:focus-visible,
.mw-parser-output .fg-text-link:focus-visible,
.mw-parser-output .fg-contact__email:focus-visible,
.mw-parser-output .fg-service-card__link:focus-visible,
.mw-parser-output .fg-footer a:focus-visible {
outline: 3px solid var(--fg-lime);
outline-offset: 3px;
}
 
.mw-parser-output .fg-button--primary {
background: var(--fg-lime);
color: #18220c;
}
 
.mw-parser-output .fg-button--ghost {
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
 
.mw-parser-output .fg-button--ghost:hover,
.mw-parser-output .fg-button--ghost:focus-visible {
background: rgba(255, 255, 255, 0.12);
}
 
.mw-parser-output .fg-button--light {
background: #fff;
color: var(--fg-primary-dark);
}
 
.mw-parser-output .fg-trust-row {
color: rgba(255, 255, 255, 0.66);
display: flex;
flex-wrap: wrap;
font-size: 0.83rem;
gap: 15px 22px;
margin-top: 26px;
}
 
.mw-parser-output .fg-trust-row__item {
align-items: center;
display: inline-flex;
gap: 7px;
}
 
.mw-parser-output .fg-check {
color: var(--fg-lime);
font-weight: 900;
}
 
.mw-parser-output .fg-hero__visual {
align-items: center;
display: flex;
justify-content: center;
min-height: 360px;
}
 
.mw-parser-output .fg-orbit {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
height: 350px;
position: absolute;
width: 350px;
}
 
.mw-parser-output .fg-orbit--one {
transform: rotate(28deg) scaleX(0.55);
}
 
.mw-parser-output .fg-orbit--two {
border-color: rgba(183, 243, 74, 0.42);
height: 270px;
transform: rotate(-36deg) scaleX(0.5);
width: 270px;
}
 
.mw-parser-output .fg-code-window {
background: rgba(13, 12, 37, 0.8);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(3, 3, 16, 0.35);
max-width: 440px;
overflow: hidden;
position: relative;
transform: rotate(4deg);
width: 100%;
}
 
.mw-parser-output .fg-code-window__bar {
align-items: center;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
display: flex;
font-size: 0.72rem;
gap: 6px;
padding: 12px 15px;
}
 
.mw-parser-output .fg-code-window__bar span {
background: #ff6b6b;
border-radius: 50%;
height: 7px;
width: 7px;
}
 
.mw-parser-output .fg-code-window__bar span:nth-child(2) {
background: #ffd166;
}
 
.mw-parser-output .fg-code-window__bar span:nth-child(3) {
background: #7be495;
}
 
.mw-parser-output .fg-code-window__bar b {
font-weight: 600;
margin-right: auto;
}
 
.mw-parser-output .fg-code-window__body {
color: #d7d5ff;
direction: ltr;
font-family: Consolas, "Courier New", monospace;
font-size: clamp(0.72rem, 1.2vw, 0.88rem);
line-height: 1.9;
margin: 0;
overflow: auto;
padding: 23px 20px;
text-align: left;
white-space: pre;
}
 
.mw-parser-output .fg-code-keyword {
color: #c084fc;
}
 
.mw-parser-output .fg-code-property {
color: #67e8f9;
}
 
.mw-parser-output .fg-code-string {
color: #bef264;
}
 
.mw-parser-output .fg-code-boolean {
color: #fbbf24;
}
 
.mw-parser-output .fg-code-window__status {
align-items: center;
background: rgba(183, 243, 74, 0.08);
color: rgba(255, 255, 255, 0.72);
display: flex;
font-size: 0.75rem;
gap: 9px;
padding: 11px 15px;
}
 
.mw-parser-output .fg-status-dot {
height: 6px;
width: 6px;
}
 
.mw-parser-output .fg-stats {
display: grid;
gap: 12px;
grid-template-columns: repeat(4, 1fr);
margin: -34px auto 76px;
max-width: 1060px;
position: relative;
z-index: 3;
}
 
.mw-parser-output .fg-stat {
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--fg-border);
border-radius: 18px;
box-shadow: 0 18px 46px rgba(30, 27, 75, 0.1);
padding: 22px 16px;
text-align: center;
}
 
.mw-parser-output .fg-stat__number {
color: var(--fg-primary);
display: block;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 900;
line-height: 1.2;
}
 
.mw-parser-output .fg-stat__label {
color: var(--fg-muted);
display: block;
font-size: 0.82rem;
margin-top: 6px;
}
 
.mw-parser-output .fg-section-heading {
align-items: end;
display: flex;
gap: 36px;
justify-content: space-between;
margin: 0 0 28px;
}
 
.mw-parser-output .fg-section-heading > div {
max-width: 680px;
}
 
.mw-parser-output .fg-section-heading > p {
color: var(--fg-muted);
font-size: 0.95rem;
margin-bottom: 4px;
max-width: 430px;
}
 
.mw-parser-output .fg-kicker {
color: var(--fg-primary);
margin-bottom: 9px;
}
 
.mw-parser-output .fg-service-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 92px;
}
 
.mw-parser-output .fg-service-card {
background: var(--fg-white);
border: 1px solid var(--fg-border);
border-radius: 22px;
box-shadow: 0 10px 30px rgba(30, 27, 75, 0.04);
display: flex;
flex-direction: column;
min-height: 315px;
padding: 24px;
position: relative;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
 
.mw-parser-output .fg-service-card:hover {
border-color: rgba(109, 40, 217, 0.38);
box-shadow: 0 20px 42px rgba(30, 27, 75, 0.1);
transform: translateY(-6px);
}
 
.mw-parser-output .fg-service-card--featured {
background: linear-gradient(160deg, #6d28d9, #4c1d95);
color: #fff;
}
 
.mw-parser-output .fg-service-card__number {
color: var(--fg-primary);
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
}
 
.mw-parser-output .fg-service-card--featured .fg-service-card__number {
color: var(--fg-lime);
}
 
.mw-parser-output .fg-service-card__icon {
align-items: center;
background: rgba(109, 40, 217, 0.1);
border-radius: 12px;
color: var(--fg-primary);
display: flex;
font-family: Consolas, monospace;
font-size: 0.78rem;
font-weight: 900;
height: 46px;
justify-content: center;
margin: 21px 0 18px;
width: 46px;
}
 
.mw-parser-output .fg-service-card--featured .fg-service-card__icon {
background: rgba(255, 255, 255, 0.14);
color: var(--fg-lime);
}
 
.mw-parser-output .fg-service-card p {
color: var(--fg-muted);
font-size: 0.9rem;
line-height: 1.9;
margin-bottom: 19px;
}
 
.mw-parser-output .fg-service-card--featured p {
color: rgba(255, 255, 255, 0.74);
}
 
.mw-parser-output .fg-service-card__link,
.mw-parser-output .fg-text-link {
align-items: center;
color: var(--fg-primary);
display: inline-flex;
font-size: 0.85rem;
font-weight: 900;
gap: 8px;
margin-top: auto;
text-decoration: none;
}
 
.mw-parser-output .fg-service-card--featured .fg-service-card__link {
color: var(--fg-lime);
}
 
.mw-parser-output .fg-service-card__link:hover,
.mw-parser-output .fg-text-link:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
 
.mw-parser-output .fg-story {
align-items: center;
background: var(--fg-soft);
border: 1px solid var(--fg-border);
border-radius: 28px;
display: grid;
gap: clamp(28px, 5vw, 72px);
grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
margin-bottom: 90px;
overflow: hidden;
padding: clamp(20px, 4vw, 42px);
}
 
.mw-parser-output .fg-story__media {
height: 360px;
min-height: 360px;
position: relative;
}
 
.mw-parser-output .fg-story__media > .mw-file-element,
.mw-parser-output .fg-story__media img {
border-radius: 20px;
height: 100%;
object-fit: cover;
width: 100%;
}
 
.mw-parser-output .fg-story__media .image,
.mw-parser-output .fg-story__media .thumb,
.mw-parser-output .fg-story__media .mw-file-description {
display: block;
height: 100%;
}
 
.mw-parser-output .fg-story__media .thumbinner {
background: transparent;
border: 0;
padding: 0;
width: 100% !important;
}
 
.mw-parser-output .fg-story__media .thumbcaption {
display: none;
}
 
.mw-parser-output .fg-story__badge {
background: var(--fg-lime);
border-radius: 16px;
bottom: 18px;
box-shadow: 0 12px 30px rgba(16, 24, 40, 0.18);
display: flex;
flex-direction: column;
left: 18px;
line-height: 1.4;
padding: 13px 16px;
position: absolute;
}
 
.mw-parser-output .fg-story__badge strong {
font-size: 1.1rem;
}
 
.mw-parser-output .fg-story__badge span {
font-size: 0.75rem;
}
 
.mw-parser-output .fg-story__content {
max-width: 620px;
}
 
.mw-parser-output .fg-story__content p {
color: var(--fg-muted);
font-size: 0.96rem;
line-height: 2;
}
 
.mw-parser-output .fg-story__points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 23px 0;
}
 
.mw-parser-output .fg-story__points span {
align-items: center;
background: #fff;
border: 1px solid var(--fg-border);
border-radius: 999px;
color: var(--fg-muted);
display: inline-flex;
font-size: 0.78rem;
gap: 7px;
padding: 7px 11px;
}
 
.mw-parser-output .fg-story__points b {
align-items: center;
background: rgba(109, 40, 217, 0.1);
border-radius: 50%;
color: var(--fg-primary);
display: inline-flex;
font-size: 0.7rem;
height: 22px;
justify-content: center;
width: 22px;
}
 
.mw-parser-output .fg-media-section {
margin-bottom: 92px;
}
 
.mw-parser-output .fg-media-grid {
display: grid;
gap: 15px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
 
.mw-parser-output .fg-media-card {
background: var(--fg-white);
border: 1px solid var(--fg-border);
border-radius: 22px;
box-shadow: 0 10px 30px rgba(30, 27, 75, 0.04);
overflow: hidden;
padding: 24px;
}
 
.mw-parser-output .fg-media-card__heading {
margin-bottom: 18px;
}
 
.mw-parser-output .fg-media-card__label {
color: var(--fg-primary);
display: block;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
margin-bottom: 4px;
text-transform: uppercase;
}
 
.mw-parser-output .fg-media-card__heading h3 {
margin-bottom: 0;
}
 
.mw-parser-output .fg-media-frame {
align-items: center;
background: #16122d;
border-radius: 16px;
display: flex;
justify-content: center;
min-height: 240px;
overflow: hidden;
}
 
.mw-parser-output .fg-media-frame .image,
.mw-parser-output .fg-media-frame .thumb,
.mw-parser-output .fg-media-frame .mw-file-description {
display: block;
max-width: 100%;
width: 100%;
}
 
.mw-parser-output .fg-media-frame img {
display: block;
height: auto;
max-height: 390px;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
width: auto;
}
 
.mw-parser-output .fg-media-frame .thumbinner {
background: transparent;
border: 0;
padding: 0;
width: 100% !important;
}
 
.mw-parser-output .fg-media-frame .thumbcaption {
display: none;
}
 
.mw-parser-output .fg-media-frame--audio {
background:
radial-gradient(circle at 22% 30%, rgba(183, 243, 74, 0.16), transparent 23%),
linear-gradient(135deg, #171238, #3a1e76);
min-height: 240px;
}
 
.mw-parser-output .fg-media-card > p {
color: var(--fg-muted);
font-size: 0.88rem;
margin: 15px 0 0;
}
 
.mw-parser-output .fg-slider-section {
margin-bottom: 92px;
}
 
.mw-parser-output .fg-slider {
background: #15102f;
border-radius: 28px;
box-shadow: var(--fg-shadow);
color: #fff;
overflow: hidden;
}
 
.mw-parser-output .fg-slider__viewport {
min-height: 430px;
position: relative;
}
 
.mw-parser-output .fg-slide {
align-items: stretch;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
min-height: 430px;
padding: clamp(20px, 4vw, 44px);
}
 
.mw-parser-output .fg-slider--ready .fg-slide {
display: none;
}
 
.mw-parser-output .fg-slider--ready .fg-slide.is-active {
display: flex;
}
 
.mw-parser-output .fg-slide > .image,
.mw-parser-output .fg-slide > .thumb,
.mw-parser-output .fg-slide > .mw-file-description {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
min-height: 260px;
}
 
.mw-parser-output .fg-slide .thumbinner {
background: transparent;
border: 0;
padding: 0;
width: 100% !important;
}
 
.mw-parser-output .fg-slide .thumbcaption {
display: none;
}
 
.mw-parser-output .fg-slide img {
border-radius: 17px;
display: block;
height: 285px;
margin: 0 auto;
max-width: 100%;
object-fit: cover;
width: min(760px, 100%);
}
 
.mw-parser-output .fg-slide__caption {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 20px;
}
 
.mw-parser-output .fg-slide__caption strong {
font-size: 1.25rem;
}
 
.mw-parser-output .fg-slide__caption span {
color: rgba(255, 255, 255, 0.62);
font-size: 0.86rem;
}
 
.mw-parser-output .fg-slider__controls {
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
gap: 15px;
justify-content: space-between;
padding: 16px 22px;
}
 
.mw-parser-output .fg-slider__button,
.mw-parser-output .fg-slider__dot {
appearance: none;
border: 0;
cursor: pointer;
}
 
.mw-parser-output .fg-slider__button {
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
font-size: 1.1rem;
height: 38px;
line-height: 1;
width: 38px;
}
 
.mw-parser-output .fg-slider__button:hover,
.mw-parser-output .fg-slider__button:focus-visible {
background: var(--fg-primary);
}
 
.mw-parser-output .fg-slider__dots {
display: flex;
gap: 8px;
}
 
.mw-parser-output .fg-slider__dot {
background: rgba(255, 255, 255, 0.25);
border-radius: 999px;
height: 7px;
padding: 0;
transition: background-color 180ms ease, width 180ms ease;
width: 22px;
}
 
.mw-parser-output .fg-slider__dot.is-active {
background: var(--fg-lime);
width: 42px;
}
 
.mw-parser-output .fg-slider__button:focus-visible,
.mw-parser-output .fg-slider__dot:focus-visible {
outline: 3px solid var(--fg-lime);
outline-offset: 3px;
}
 
.mw-parser-output .fg-process {
margin-bottom: 92px;
}
 
.mw-parser-output .fg-process__grid {
border-bottom: 1px solid var(--fg-border);
border-top: 1px solid var(--fg-border);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
 
.mw-parser-output .fg-process__item {
border-left: 1px solid var(--fg-border);
padding: 25px 22px;
}
 
.mw-parser-output .fg-process__item:first-child {
border-left: 0;
}
 
.mw-parser-output .fg-process__item > span {
color: var(--fg-primary);
font-size: 0.82rem;
font-weight: 900;
}
 
.mw-parser-output .fg-process__item h3 {
margin: 18px 0 6px;
}
 
.mw-parser-output .fg-process__item p {
color: var(--fg-muted);
font-size: 0.86rem;
line-height: 1.8;
margin: 0;
}
 
.mw-parser-output .fg-contact {
align-items: center;
background:
radial-gradient(circle at 20% 20%, rgba(183, 243, 74, 0.2), transparent 25%),
linear-gradient(135deg, #4c1d95, #6d28d9);
border-radius: 28px;
color: #fff;
display: flex;
gap: 30px;
justify-content: space-between;
margin-bottom: 22px;
overflow: hidden;
padding: clamp(28px, 5vw, 55px);
position: relative;
}
 
.mw-parser-output .fg-contact__content {
max-width: 780px;
position: relative;
z-index: 1;
}
 
.mw-parser-output .fg-contact .fg-kicker {
color: var(--fg-lime);
}
 
.mw-parser-output .fg-contact h2 {
font-size: clamp(1.75rem, 4vw, 3.3rem);
margin-bottom: 14px;
}
 
.mw-parser-output .fg-contact p {
color: rgba(255, 255, 255, 0.72);
margin-bottom: 24px;
max-width: 680px;
}
 
.mw-parser-output .fg-contact__email {
color: rgba(255, 255, 255, 0.78);
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
}
 
.mw-parser-output .fg-contact__email:hover {
color: var(--fg-lime);
text-decoration: underline;
}
 
.mw-parser-output .fg-contact__mark {
color: rgba(255, 255, 255, 0.11);
font-size: 20rem;
font-weight: 900;
line-height: 0.7;
position: absolute;
left: 1%;
top: 27%;
transform: rotate(-10deg);
}
 
.mw-parser-output .fg-footer {
align-items: center;
color: var(--fg-muted);
display: flex;
font-size: 0.78rem;
justify-content: space-between;
padding: 12px 4px;
}
 
.mw-parser-output .fg-footer a {
color: var(--fg-primary);
font-weight: 800;
text-decoration: none;
}
 
.mw-parser-output .fg-footer a:hover {
text-decoration: underline;
}
 
.mw-parser-output .fg-reveal {
opacity: 1;
transform: none;
}
 
.mw-parser-output .fg-reveal.fg-reveal--pending {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms ease, transform 600ms ease;
}
 
.mw-parser-output .fg-reveal.fg-reveal--visible {
opacity: 1;
transform: translateY(0);
}
 
@media (max-width: 1050px) {
.mw-parser-output .fg-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
 
.mw-parser-output .fg-service-card {
min-height: 270px;
}
}
 
@media (max-width: 820px) {
.mw-parser-output .fg-hero {
grid-template-columns: 1fr;
min-height: auto;
padding: 34px 25px 26px;
}
 
.mw-parser-output .fg-hero__visual {
min-height: 310px;
}
 
.mw-parser-output .fg-stats {
margin-top: -18px;
}
 
.mw-parser-output .fg-story {
grid-template-columns: 1fr;
}
 
.mw-parser-output .fg-story__media {
height: 300px;
min-height: 300px;
}
 
.mw-parser-output .fg-process__grid {
grid-template-columns: repeat(2, 1fr);
}
 
.mw-parser-output .fg-process__item:nth-child(odd) {
border-left: 0;
}
 
.mw-parser-output .fg-process__item:nth-child(-n + 2) {
border-bottom: 1px solid var(--fg-border);
}
}
 
@media (max-width: 620px) {
.mw-parser-output .fg-shell {
padding: 12px 10px 30px;
}
 
.mw-parser-output .fg-hero,
.mw-parser-output .fg-contact {
border-radius: 22px;
}
 
.mw-parser-output .fg-hero__title {
font-size: clamp(2.35rem, 12vw, 3.4rem);
}
 
.mw-parser-output .fg-hero__lead {
line-height: 1.9;
}
 
.mw-parser-output .fg-code-window {
transform: rotate(0);
}
 
.mw-parser-output .fg-orbit {
height: 280px;
width: 280px;
}
 
.mw-parser-output .fg-stats,
.mw-parser-output .fg-service-grid,
.mw-parser-output .fg-media-grid {
grid-template-columns: 1fr 1fr;
}
 
.mw-parser-output .fg-stat {
padding: 16px 8px;
}
 
.mw-parser-output .fg-stat__label {
font-size: 0.7rem;
}
 
.mw-parser-output .fg-section-heading {
align-items: start;
flex-direction: column;
gap: 3px;
}
 
.mw-parser-output .fg-service-card {
min-height: 0;
padding: 18px;
}
 
.mw-parser-output .fg-story,
.mw-parser-output .fg-media-card {
border-radius: 20px;
padding: 18px;
}
 
.mw-parser-output .fg-story__media {
height: 230px;
min-height: 230px;
}
 
.mw-parser-output .fg-story__badge {
bottom: 10px;
left: 10px;
}
 
.mw-parser-output .fg-process__grid {
grid-template-columns: 1fr;
}
 
.mw-parser-output .fg-process__item,
.mw-parser-output .fg-process__item:nth-child(odd) {
border-bottom: 1px solid var(--fg-border);
border-left: 0;
}
 
.mw-parser-output .fg-process__item:last-child {
border-bottom: 0;
}
 
.mw-parser-output .fg-contact {
align-items: flex-start;
flex-direction: column;
}
 
.mw-parser-output .fg-contact__mark {
font-size: 12rem;
left: 8%;
top: 56%;
}
 
.mw-parser-output .fg-footer {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
}
 
@media (prefers-reduced-motion: reduce) {
.mw-parser-output .fg-home *,
.mw-parser-output .fg-home *::before,
.mw-parser-output .fg-home *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
برگرفته از «https://fa.faraghaib.ir/wiki/تست5»