فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
/*
<!--
  Faraghaib / فراغیب
صفحهٔ اصلی مدرن برند «فراغیب» برای MediaWiki و پوستهٔ Vector 2022
  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");
۲) فایل MediaWiki-Common.css را در MediaWiki:Common.css قرار دهید.
font-style: normal;
۳) فایل MediaWiki-Common.js را در MediaWiki:Common.js قرار دهید.
font-weight: 100 900;
۴) نام فایل‌های رسانه‌ای را با فایل‌های واقعی ویکی خود جایگزین کنید.
font-display: swap;
۵) مسیر فایل‌های اختیاری سرور دانلود در CSS برابر است با:
}
  https://dl.faraghaib.ir/mediawiki/faraghaib/
-->
__NOTOC__
__NOEDITSECTION__


.mw-parser-output .fg-home {
<div class="fg-home" dir="rtl" lang="fa">
--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%;
}


.mw-parser-output .fg-home *,
<div class="fg-shell">
.mw-parser-output .fg-home *::before,
<div class="fg-hero" id="fg-top">
.mw-parser-output .fg-home *::after {
<div class="fg-hero__content">
box-sizing: border-box;
<div class="fg-eyebrow"><span class="fg-eyebrow__dot"></span> فراغیب؛ مهندسی ایده‌های دیجیتال</div>
}
<h1 class="fg-hero__title">ساختن آینده، با کدهای دقیق و خلاقانه</h1>
<p class="fg-hero__lead">فراغیب یک مجموعهٔ فناوری برای طراحی، توسعه و رشد محصولات دیجیتال است؛ از اولین ایده تا یک تجربهٔ سریع، امن و ماندگار.</p>
<div class="fg-actions">
[[#fg-services|<span class="fg-button fg-button--primary">مشاهدهٔ خدمات <span aria-hidden="true">←</span></span>]]
[[#fg-contact|<span class="fg-button fg-button--ghost">شروع گفتگو</span>]]
</div>
<div class="fg-trust-row">
<span class="fg-trust-row__item"><span class="fg-check" aria-hidden="true">✓</span> طراحی انسان‌محور</span>
<span class="fg-trust-row__item"><span class="fg-check" aria-hidden="true">✓</span> معماری قابل توسعه</span>
<span class="fg-trust-row__item"><span class="fg-check" aria-hidden="true">✓</span> همراهی بلندمدت</span>
</div>
</div>


.mw-parser-output .fg-home a {
<div class="fg-hero__visual" aria-label="نمونه‌ای از فضای کاری فراغیب">
color: inherit;
<div class="fg-orbit fg-orbit--one"></div>
}
<div class="fg-orbit fg-orbit--two"></div>
<div class="fg-code-window">
<div class="fg-code-window__bar"><span></span><span></span><span></span><b>faraghaib.dev</b></div>
<pre class="fg-code-window__body"><code><span class="fg-code-keyword">const</span> vision = {
  <span class="fg-code-property">brand</span>: <span class="fg-code-string">"فراغیب"</span>,
  <span class="fg-code-property">focus</span>: [<span class="fg-code-string">"web"</span>, <span class="fg-code-string">"software"</span>],
  <span class="fg-code-property">quality</span>: <span class="fg-code-boolean">true</span>,
  <span class="fg-code-property">future</span>: <span class="fg-code-string">"in progress"</span>
};</code></pre>
<div class="fg-code-window__status"><span class="fg-status-dot"></span> محصول شما آمادهٔ شروع است</div>
</div>
</div>
</div>


.mw-parser-output .fg-home h1,
<div class="fg-stats" aria-label="آمار فراغیب">
.mw-parser-output .fg-home h2,
<div class="fg-stat">
.mw-parser-output .fg-home h3,
<strong class="fg-stat__number" data-fg-count="7">۰</strong>
.mw-parser-output .fg-home p {
<span class="fg-stat__label">سال تجربهٔ فنی</span>
margin-top: 0;
</div>
}
<div class="fg-stat">
<strong class="fg-stat__number" data-fg-count="42">۰</strong>
<span class="fg-stat__label">پروژه و راهکار دیجیتال</span>
</div>
<div class="fg-stat">
<strong class="fg-stat__number" data-fg-count="18">۰</strong>
<span class="fg-stat__label">فناوری در جعبه‌ابزار</span>
</div>
<div class="fg-stat">
<strong class="fg-stat__number" data-fg-count="100" data-fg-suffix="%">۰</strong>
<span class="fg-stat__label">تعهد به کیفیت</span>
</div>
</div>


.mw-parser-output .fg-home h2 {
<div class="fg-section-heading" id="fg-services">
font-size: clamp(1.65rem, 3vw, 2.55rem);
<div>
letter-spacing: -0.04em;
<span class="fg-kicker">توانمندی‌های فراغیب</span>
line-height: 1.35;
<h2>هر چیزی که یک محصول دیجیتال برای رشد نیاز دارد</h2>
margin-bottom: 0.55rem;
</div>
}
<p>ترکیبی از استراتژی، طراحی و مهندسی نرم‌افزار برای ساختن تجربه‌ای که هم زیباست و هم نتیجه می‌دهد.</p>
</div>


.mw-parser-output .fg-home h3 {
<div class="fg-service-grid">
font-size: 1.18rem;
<div class="fg-service-card fg-service-card--featured">
line-height: 1.5;
<div class="fg-service-card__number">۰۱</div>
margin-bottom: 0.55rem;
<div class="fg-service-card__icon" aria-hidden="true">&lt;/&gt;</div>
}
<h3>توسعهٔ وب و نرم‌افزار</h3>
<p>ساخت وب‌سایت‌ها، پنل‌ها و سامانه‌های اختصاصی با کد تمیز، امنیت مناسب و معماری قابل نگهداری.</p>
[[خدمات#توسعه-نرم‌افزار|<span class="fg-service-card__link">جزئیات خدمت <span aria-hidden="true">←</span></span>]]
</div>
<div class="fg-service-card">
<div class="fg-service-card__number">۰۲</div>
<div class="fg-service-card__icon" aria-hidden="true">UX</div>
<h3>طراحی تجربه و رابط کاربری</h3>
<p>تبدیل نیازهای واقعی کاربران به مسیرهای ساده، رابط‌های چشم‌نواز و تجربه‌ای که اعتماد می‌سازد.</p>
[[خدمات#طراحی-رابط-کاربری|<span class="fg-service-card__link">جزئیات خدمت <span aria-hidden="true">←</span></span>]]
</div>
<div class="fg-service-card">
<div class="fg-service-card__number">۰۳</div>
<div class="fg-service-card__icon" aria-hidden="true">API</div>
<h3>اتصال سرویس و اتوماسیون</h3>
<p>یکپارچه‌سازی APIها، خودکارسازی فرایندها و حذف کارهای تکراری برای سرعت بیشتر کسب‌وکار.</p>
[[خدمات#اتوماسیون|<span class="fg-service-card__link">جزئیات خدمت <span aria-hidden="true">←</span></span>]]
</div>
<div class="fg-service-card">
<div class="fg-service-card__number">۰۴</div>
<div class="fg-service-card__icon" aria-hidden="true">+</div>
<h3>مشاوره و پشتیبانی فنی</h3>
<p>از انتخاب فناوری تا بازبینی کد و بهبود محصول، در تصمیم‌های فنی مهم کنار تیم شما هستیم.</p>
[[تماس با ما|<span class="fg-service-card__link">دریافت مشاوره <span aria-hidden="true">←</span></span>]]
</div>
</div>


.mw-parser-output .fg-shell {
<div class="fg-story fg-reveal" id="fg-about">
margin: 0 auto;
<div class="fg-story__media">
max-width: 1240px;
[[File:فراغیب-تصویر-تیم.webp|frameless|alt=تیم و فضای کاری فراغیب|تصویر تیم و فضای کاری فراغیب]]
padding: 24px 18px 46px;
<div class="fg-story__badge"><strong>از ایده</strong><span>تا اثر واقعی</span></div>
}
</div>
<div class="fg-story__content">
<span class="fg-kicker">دربارهٔ فراغیب</span>
<h2>فناوری وقتی ارزشمند است که مسئله‌ای واقعی را حل کند</h2>
<p>ما در فراغیب باور داریم یک محصول خوب فقط با انتخاب زبان برنامه‌نویسی ساخته نمی‌شود؛ نتیجهٔ خوب از شناخت مسئله، تصمیم‌های درست، اجرای دقیق و یادگیری مداوم به‌وجود می‌آید.</p>
<p>به همین دلیل، پروژه‌ها را از نگاه کسب‌وکار و کاربر بررسی می‌کنیم و بعد راهکاری می‌سازیم که بتواند همراه رشد شما تغییر کند.</p>
<div class="fg-story__points">
<span><b>الف</b> گفت‌وگوی شفاف</span>
<span><b>ب</b> تحویل مرحله‌ای</span>
<span><b>ج</b> مستندسازی فنی</span>
</div>
[[درباره ما|<span class="fg-text-link">بیشتر دربارهٔ فراغیب <span aria-hidden="true">←</span></span>]]
</div>
</div>


.mw-parser-output .fg-hero {
<div class="fg-media-section" id="fg-media">
background:
<div class="fg-section-heading">
radial-gradient(circle at 80% 15%, rgba(6, 182, 212, 0.2), transparent 30%),
<div>
linear-gradient(135deg, #1b1248 0%, #30206d 48%, #6d28d9 100%);
<span class="fg-kicker">فراغیب را ببینید و بشنوید</span>
border-radius: 32px;
<h2>یک معرفی کوتاه، یک تصویر روشن</h2>
box-shadow: var(--fg-shadow);
</div>
color: #fff;
<p>رسانه‌های زیر را با فایل‌های واقعی خود جایگزین کنید. فایل‌های صوتی و ویدیویی با افزونهٔ رسمی TimedMediaHandler نمایش داده می‌شوند.</p>
display: grid;
</div>
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;
}


.mw-parser-output .fg-hero::after {
<div class="fg-media-grid">
background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.08) 55%, transparent 55%);
<div class="fg-media-card fg-media-card--video">
background-size: 28px 28px;
<div class="fg-media-card__heading"><span class="fg-media-card__label">ویدیو</span><h3>داستان فراغیب در چند دقیقه</h3></div>
content: "";
<div class="fg-media-frame">
inset: 0;
[[File:فراغیب-ویدیوی-معرفی.webm|frameless|center|alt=ویدیوی معرفی فراغیب|ویدیوی معرفی فراغیب]]
opacity: 0.25;
</div>
pointer-events: none;
<p>با مسیر، نگاه و توانمندی‌های فراغیب آشنا شوید.</p>
position: absolute;
</div>
}
<div class="fg-media-card fg-media-card--audio">
<div class="fg-media-card__heading"><span class="fg-media-card__label">صوت</span><h3>پیام صوتی بنیان‌گذار</h3></div>
<div class="fg-media-frame fg-media-frame--audio">
[[File:فراغیب-پیام-صوتی.ogg|frameless|center|alt=پیام صوتی معرفی فراغیب|پخش پیام صوتی معرفی فراغیب]]
</div>
<p>چرا فراغیب شکل گرفت و قرار است چه مسئله‌ای را حل کند؟</p>
</div>
</div>
</div>


.mw-parser-output .fg-hero__content,
<div class="fg-slider-section fg-reveal" id="fg-projects">
.mw-parser-output .fg-hero__visual {
<div class="fg-section-heading">
position: relative;
<div>
z-index: 1;
<span class="fg-kicker">نمونه‌هایی از مسیر ما</span>
}
<h2>هر پروژه، یک روایت تازه</h2>
</div>
<p>تصاویر نمونه‌کار، جلسات یا فرایند تولید را در اسلایدر زیر نمایش دهید.</p>
</div>


.mw-parser-output .fg-hero__content {
<div class="fg-slider" aria-label="اسلایدر تصاویر فراغیب">
align-self: center;
<div class="fg-slider__viewport">
max-width: 680px;
<div class="fg-slide is-active" id="fg-slide-1">
}
[[File:فراغیب-اسلاید-۱.webp|frameless|center|alt=تصویر اول از فعالیت فراغیب|شناخت مسئله و کشف فرصت]]
<div class="fg-slide__caption"><strong>شناخت مسئله و کشف فرصت</strong><span>شروع هر راهکار از یک سؤال درست است.</span></div>
</div>
<div class="fg-slide" id="fg-slide-2">
[[File:فراغیب-اسلاید-۲.webp|frameless|center|alt=تصویر دوم از فعالیت فراغیب|طراحی مسیر تجربه]]
<div class="fg-slide__caption"><strong>طراحی مسیر تجربه</strong><span>پیچیدگی را به تجربه‌ای ساده تبدیل می‌کنیم.</span></div>
</div>
<div class="fg-slide" id="fg-slide-3">
[[File:فراغیب-اسلاید-۳.webp|frameless|center|alt=تصویر سوم از فعالیت فراغیب|ساخت با مهندسی دقیق]]
<div class="fg-slide__caption"><strong>ساخت با مهندسی دقیق</strong><span>کدی که امروز خوب کار کند و فردا هم قابل توسعه بماند.</span></div>
</div>
<div class="fg-slide" id="fg-slide-4">
[[File:فراغیب-اسلاید-۴.webp|frameless|center|alt=تصویر چهارم از فعالیت فراغیب|تحویل و رشد مستمر]]
<div class="fg-slide__caption"><strong>تحویل و رشد مستمر</strong><span>پایان پروژه، آغاز مرحلهٔ بعدی رشد است.</span></div>
</div>
</div>
<div class="fg-slider__controls">
<button type="button" class="fg-slider__button fg-slider__button--prev" aria-label="تصویر قبلی">→</button>
<div class="fg-slider__dots" role="tablist" aria-label="انتخاب تصویر">
<button type="button" class="fg-slider__dot is-active" role="tab" aria-selected="true" aria-controls="fg-slide-1" aria-label="تصویر ۱"></button>
<button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-2" aria-label="تصویر ۲"></button>
<button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-3" aria-label="تصویر ۳"></button>
<button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-4" aria-label="تصویر ۴"></button>
</div>
<button type="button" class="fg-slider__button fg-slider__button--next" aria-label="تصویر بعدی">←</button>
</div>
</div>
</div>


.mw-parser-output .fg-eyebrow,
<div class="fg-process" id="fg-process">
.mw-parser-output .fg-kicker {
<div class="fg-section-heading">
color: var(--fg-cyan);
<div>
display: inline-flex;
<span class="fg-kicker">روش همکاری</span>
font-size: 0.82rem;
<h2>چهار گام تا یک نتیجهٔ قابل اتکا</h2>
font-weight: 800;
</div>
letter-spacing: 0.08em;
</div>
line-height: 1.4;
<div class="fg-process__grid">
text-transform: uppercase;
<div class="fg-process__item"><span>۰۱</span><h3>شناخت</h3><p>هدف، مخاطب و مسئله را دقیق می‌کنیم.</p></div>
}
<div class="fg-process__item"><span>۰۲</span><h3>طراحی</h3><p>راهکار و مسیر اجرای قابل سنجش می‌سازیم.</p></div>
<div class="fg-process__item"><span>۰۳</span><h3>اجرا</h3><p>محصول را مرحله‌ای، شفاف و قابل آزمون توسعه می‌دهیم.</p></div>
<div class="fg-process__item"><span>۰۴</span><h3>رشد</h3><p>با داده و بازخورد، محصول را بهتر می‌کنیم.</p></div>
</div>
</div>


.mw-parser-output .fg-eyebrow {
<div class="fg-contact" id="fg-contact">
align-items: center;
<div class="fg-contact__content">
color: var(--fg-lime);
<span class="fg-kicker">آمادهٔ شروع هستید؟</span>
gap: 9px;
<h2>بیایید ایدهٔ شما را به یک تجربهٔ دیجیتال ماندگار تبدیل کنیم.</h2>
margin-bottom: 18px;
<p>برای مشاوره، همکاری یا دریافت برآورد اولیه، از طریق صفحهٔ تماس با ما پیام بفرستید.</p>
}
<div class="fg-actions">
[[تماس با ما|<span class="fg-button fg-button--light">تماس با فراغیب <span aria-hidden="true">←</span></span>]]
<a class="fg-contact__email" href="mailto:info@faraghaib.ir">info@faraghaib.ir</a>
</div>
</div>
<div class="fg-contact__mark" aria-hidden="true">ف</div>
</div>


.mw-parser-output .fg-eyebrow__dot,
<div class="fg-footer">
.mw-parser-output .fg-status-dot {
<span>© فراغیب — مهندسی ایده‌های دیجیتال</span>
background: var(--fg-lime);
<span>[[#fg-top|بازگشت به بالا ↑]]</span>
border-radius: 50%;
</div>
box-shadow: 0 0 0 5px rgba(183, 243, 74, 0.16);
</div>
display: inline-block;
</div>
height: 8px;
width: 8px;
}
 
.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;
}
 
.mw-parser-output .fg-hero__lead {
color: rgba(255, 255, 255, 0.78);
font-size: clamp(1rem, 1.5vw, 1.18rem);
line-height: 2;
margin-bottom: 26px;
max-width: 650px;
}
 
.mw-parser-output .fg-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
 
.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»