مدیاویکی:Common.css: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش برچسب: واگردانی دستی |
||
| (۳۵ نسخهٔ میانی ویرایش شده توسط ۲ کاربر نشان داده نشد) | |||
| خط ۳٬۶۷۷: | خط ۳٬۶۷۷: | ||
position: absolute; | position: absolute; | ||
background-color: #ffffff; | background-color: #ffffff; | ||
min-width: 180 | |||
box-shadow: 0px 8px 16px rgba(0,0,0,0.1); | box-shadow: 0px 8px 16px rgba(0,0,0,0.1); | ||
z-index: 1000; | z-index: 1000; | ||
| خط ۳٬۷۲۲: | خط ۳٬۷۲۲: | ||
} | } | ||
} | } | ||
/* مخفی کردن کامل منو در موبایل */ | |||
@media (max-width: 768px) { | |||
.poly-menu-container, | |||
.poly-nav, | |||
.poly-nav ul, | |||
.poly-nav li, | |||
.poly-nav a { | |||
display: none !important; | |||
} | |||
} | |||
/* کانتینر 3ردیف در 2 ستون کادر شامل متن و عکس */ | /* کانتینر 3ردیف در 2 ستون کادر شامل متن و عکس */ | ||
| خط ۵٬۱۴۳: | خط ۵٬۱۵۷: | ||
=================================================================== | =================================================================== | ||
/* | |||
/* محصولات دایره ای */ | |||
.products-section{ | |||
padding:70px 15px; | |||
background:#fff; | |||
} | } | ||
.container{ | |||
max-width:1300px; | |||
margin:auto; | |||
} | } | ||
.section-header{ | |||
text-align:center; | |||
- | margin-bottom:55px; | ||
- | |||
} | } | ||
.section-header h2{ | |||
- | |||
font-size:42px; | |||
font-weight:700; | |||
color:#111; | |||
position:relative; | |||
display:inline-block; | |||
} | } | ||
.section-header h2::after{ | |||
content:""; | |||
display:block; | |||
width:80px; | |||
height:3px; | |||
background:#e6e6e6; | |||
margin:15px auto 0; | |||
} | } | ||
.products-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(4,1fr); | |||
gap:40px; | |||
} | } | ||
.product-card{ | |||
text-align:center; | |||
transition:.35s; | |||
} | } | ||
a{ | |||
text-decoration:none; | .product-card a{ | ||
color:#333; | |||
text-decoration:none; | |||
display:block; | |||
} | } | ||
.product-card figure{ | |||
width:190px; | |||
height:190px; | |||
. | |||
margin:0 auto 25px; | |||
border-radius:0%; | |||
overflow:hidden; | |||
transition:.4s; | |||
. | |||
} | } | ||
. | |||
.product-card img{ | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
transition:.5s; | |||
} | } | ||
. | |||
.product-card h3{ | |||
font-size:29px; | |||
margin-bottom:18px; | |||
color:#222; | |||
} | } | ||
.product-card p{ | |||
. | line-height:2; | ||
color:#666; | |||
font-size:17px; | |||
} | } | ||
. | |||
transform:translateY(- | .product-card:hover figure{ | ||
transform:translateY(-8px); | |||
box-shadow:0 18px 40px rgba(0,0,0,.18); | |||
} | } | ||
. | |||
.product-card:hover img{ | |||
transform:scale(1.08); | |||
} | } | ||
. | |||
.product-card:hover h3{ | |||
color:#b48b45; | |||
} | } | ||
@media(max-width:1100px){ | |||
. | .products-grid{ | ||
grid-template-columns:repeat(2,1fr); | |||
} | } | ||
} | } | ||
@media(max-width:650px){ | |||
.products-section{ | |||
padding:45px 15px; | |||
} | } | ||
.section-header h2{ | |||
. | font-size:34px; | ||
font-size: | |||
} | } | ||
. | |||
.products-grid{ | |||
grid-template-columns:1fr; | |||
gap:35px; | |||
} | } | ||
.product-card figure{ | |||
. | width:170px; | ||
height:170px; | |||
} | } | ||
. | |||
.product-card h3{ | |||
font-size: | |||
font-size:25px; | |||
} | } | ||
. | |||
.product-card p{ | |||
font-size:16px; | |||
line-height:1.9; | |||
} | } | ||
} | } | ||
/* | /* پایان محصولات دایره ای */ | ||
. | /* دکمه شیشه ای*/ | ||
:root { | |||
/* استخراج پالت رنگی از تصویر */ | |||
--primary-pink: #f8c8d3; | |||
--glass-bg: rgba(255, 255, 255, 0.25); | |||
--glass-border: rgba(255, 255, 255, 0.4); | |||
--shadow-color: rgba(248, 200, 211, 0.5); | |||
--text-color: #7a5c66; | |||
} | } | ||
.button-container { | |||
display: flex; | |||
justify-content: center; | |||
. | align-items: center; | ||
padding: 20px; | |||
} | } | ||
. | |||
.glass-button { | |||
/* ایجاد ساختار دایرهای و ریسپانسیو */ | |||
width: 15vw; /* اندازه بر اساس عرض صفحه نمایش */ | |||
min-width: 100px; | |||
max-width: 200px; | |||
aspect-ratio: 1 / 1; /* تضمین دایره ماندن در هر شرایطی */ | |||
border-radius: 50%; | |||
/* | /* افکت شیشهای (Glassmorphism) */ | ||
background: var(--glass-bg); | |||
backdrop-filter: blur(12px); | |||
-webkit-backdrop-filter: blur(12px); | |||
border: 2px solid var(--glass-border); | |||
/* افکت سهبعدی و سایهها */ | |||
box-shadow: | |||
0 8px 32px 0 var(--shadow-color), | |||
inset 0 4px 4px rgba(255, 255, 255, 0.3), | |||
. | inset 0 -4px 6px rgba(0, 0, 0, 0.05); | ||
/* تایپوگرافی */ | |||
color: var(--text-color); | |||
font-family: 'Tahoma', sans-serif; /* یا فونت فارسی مورد نظر شما */ | |||
font-weight: bold; | |||
font-size: 1.2rem; | |||
cursor: pointer; | |||
/* انیمیشن و تعامل */ | |||
. | transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | ||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
outline: none; | |||
} | } | ||
. | |||
/* افکت هنگام نگه داشتن موس (Hover) */ | |||
.glass-button:hover { | |||
transform: translateY(-5px) scale(1.05); | |||
background: rgba(255, 255, 255, 0.4); | |||
box-shadow: | |||
0 15px 45px 0 var(--shadow-color), | |||
inset 0 2px 2px rgba(255, 255, 255, 0.5); | |||
color: #4a343c; | |||
} | } | ||
. | |||
transform: | /* افکت هنگام کلیک (Active) */ | ||
.glass-button:active { | |||
transform: translateY(2px) scale(0.98); | |||
box-shadow: 0 5px 15px 0 var(--shadow-color); | |||
} | } | ||
====================================================== | |||
#city-search-wrapper { margin: 20px 0; } | |||
#search-input { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } | |||
.province-section { margin-top: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } | |||
.province-title { font-weight: bold; color: #007bff; margin-bottom: 5px; } | |||
.city-list { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; } | |||
.city-list li { background: #f0f0f0; padding: 3px 10px; border-radius: 10px; font-size: 0.9em; } | |||
/* 4 کارت اهدا بخشنده*/ | |||
/* ------------------------- | |||
Medical Categories | |||
-------------------------*/ | |||
.medical-categories{ | |||
width:100%; | |||
max-width:1200px; | |||
margin:auto; | |||
padding:20px; | |||
direction:rtl; | |||
} | } | ||
.category-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(4,1fr); | |||
gap:22px; | |||
} | } | ||
. | |||
.category-card{ | |||
. | background:#f5f5f5; | ||
border-radius:18px; | |||
padding:35px 20px; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
text-align:center; | |||
text-decoration:none; | |||
transition:.35s ease; | |||
border:1px solid transparent; | |||
min-height:220px; | |||
} | } | ||
.category-card:hover{ | |||
transform:translateY(-8px); | |||
box-shadow:0 18px 40px rgba(0,0,0,.08); | |||
border-color:#3b82f6; | |||
background:#fff; | |||
} | } | ||
.category-card .icon{ | |||
width:85px; | |||
. | height:85px; | ||
border-radius:50%; | |||
background:#ffffff; | |||
- | display:flex; | ||
- | justify-content:center; | ||
align-items:center; | |||
margin-bottom:22px; | |||
box-shadow:0 8px 18px rgba(0,0,0,.05); | |||
} | } | ||
.category-card .icon i{ | |||
. | font-size:42px; | ||
color:#14B8A6; | |||
transition:.35s; | |||
} | } | ||
.category-card:hover .icon i{ | |||
. | transform:scale(1.12); | ||
color:# | |||
color:#0F9E90; | |||
} | } | ||
. | |||
color:# | |||
.category-card h3{ | |||
margin:0; | |||
color:#F97316; | |||
font-size:23px; | |||
line-height:1.8; | |||
font-weight:700; | |||
} | } | ||
/* رنگ حاشیه هنگام هاور */ | |||
.category-card:hover{ | |||
/* | transform:translateY(-8px); | ||
box-shadow:0 18px 40px rgba(0,0,0,.08); | |||
border-color:#14B8A6; | |||
background:#fff; | |||
/* دسترسی برای موتورهای جستجو */ | |||
.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; | |||
} | } | ||
. | |||
/* =========================== | |||
Tablet | |||
=========================== */ | |||
@media(max-width:992px){ | |||
.category-grid{ | |||
grid-template-columns:repeat(2,1fr); | |||
} | } | ||
. | |||
.category-card{ | |||
min-height:200px; | |||
} | } | ||
} | } | ||
/* =========================== | |||
Mobile | |||
=========================== */ | |||
@media(max-width:576px){ | |||
.category-grid{ | |||
grid-template-columns:repeat(2,1fr); | |||
gap:15px; | |||
} | } | ||
.category-card{ | |||
padding:25px 15px; | |||
min-height:170px; | |||
border-radius:15px; | |||
} | } | ||
. | |||
.category-card .icon{ | |||
width:65px; | |||
height:65px; | |||
margin-bottom:15px; | |||
} | } | ||
.category-card .icon i{ | |||
font-size:32px; | |||
} | } | ||
.category-card h3{ | |||
font-size:18px; | |||
. | |||
} | } | ||
} | } | ||
/*============================= | |||
General | |||
=============================*/ | |||
*{ | |||
margin:0; | |||
padding:0; | |||
box-sizing:border-box; | |||
} | } | ||
. | |||
.medical-categories{ | |||
max-width:1200px; | |||
margin:auto; | |||
padding:20px; | |||
direction:rtl; | |||
} | } | ||
/*============================= | |||
Grid | |||
=============================*/ | |||
.category-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(4,1fr); | |||
gap:22px; | |||
} | } | ||
/*============================= | |||
/*============================= | |||
Card | |||
=============================*/ | |||
. | |||
.category-card{ | |||
background:#f3f3f3; | |||
border-radius:18px; | |||
text-decoration:none; | |||
padding: | display:flex; | ||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
padding:35px 20px; | |||
min-height:210px; | |||
transition:.35s ease; | |||
border:1px solid #ececec; | |||
box-shadow:0 4px 12px rgba(0,0,0,.03); | |||
} | } | ||
. | .category-card:hover{ | ||
background:# | |||
background:#ffffff; | |||
transform:translateY(-8px); | |||
box-shadow:0 18px 40px rgba(0,0,0,.08); | |||
border-color:#14B8A6; | |||
} | } | ||
. | |||
/*============================= | |||
Icon | |||
=============================*/ | |||
.card-icon{ | |||
transition: | |||
font-size:62px; | |||
color:#14B8A6; | |||
margin-bottom:20px; | |||
transition:.35s; | |||
} | } | ||
. | |||
.category-card:hover .card-icon{ | |||
color:#0F9D8E; | |||
transform:scale(1.1); | |||
} | } | ||
/* | |||
/*============================= | |||
Title | |||
. | =============================*/ | ||
align | .category-card h3{ | ||
color:#F97316; | |||
text-align:center; | |||
font-size:24px; | |||
font-weight: | line-height:1.9; | ||
font-weight:700; | |||
} | } | ||
/*============================= | |||
Tablet | |||
=============================*/ | |||
@media(max-width:992px){ | |||
.category-grid{ | |||
grid-template-columns:repeat(2,1fr); | |||
} | } | ||
} | } | ||
/*============================= | |||
Mobile | |||
=============================*/ | |||
/* | |||
@media(max-width:576px){ | |||
.category-grid{ | |||
grid-template-columns:repeat(2,1fr); | |||
gap:15px; | |||
); | |||
} | } | ||
.category-card{ | |||
. | min-height:165px; | ||
height: | padding:25px 15px; | ||
border-radius:16px; | |||
border-radius: | |||
} | } | ||
. | |||
.card-icon{ | |||
font-size:45px; | |||
margin-bottom:15px; | |||
} | } | ||
.category-card h3{ | |||
font-size:18px; | |||
. | |||
line-height:1.7; | |||
font-size: | |||
. | |||
} | } | ||
} | } | ||
/* | |||
/* کانتینر کادرهای زیر هم دماوندپلیمر */ | |||
*{ | |||
margin:0; | |||
padding:0; | |||
box-sizing:border-box; | |||
margin:0 | |||
padding: | |||
border- | |||
} | } | ||
body{ | |||
font-family:'Vazirmatn',sans-serif; | |||
background:#f2f6fb; | |||
display:flex; | |||
justify-content:center; | |||
padding:40px 15px; | |||
} | } | ||
. | |||
.production{ | |||
width:100%; | |||
max-width:550px; | |||
} | } | ||
.container{ | |||
. | |||
background:linear-gradient(180deg,#1f3f97,#6cbcff); | |||
border-radius:35px; | |||
padding:35px 25px 0; | |||
position:relative; | |||
overflow:hidden; | |||
box-shadow:0 15px 40px rgba(0,0,0,.15); | |||
} | } | ||
h1{ | |||
color:#fff; | color:#fff; | ||
font-size:34px; | |||
font-weight:700; | |||
text-align:center; | text-align:center; | ||
margin-bottom:35px; | |||
} | } | ||
. | |||
.steps{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:18px; | |||
} | } | ||
. | |||
font-size: | .step{ | ||
background:rgba(255,255,255,.12); | |||
border:2px solid rgba(255,255,255,.8); | |||
border-radius:18px; | |||
padding:18px; | |||
text-align:center; | |||
color:#fff; | |||
font-size:21px; | |||
transition:.3s; | |||
backdrop-filter:blur(4px); | |||
} | } | ||
. | |||
.step:hover{ | |||
background:#fff; | background:#fff; | ||
color:# | |||
color:#1d4ca1; | |||
transform:translateY(-4px); | transform:translateY(-4px); | ||
} | } | ||
.image-box{ | |||
. | |||
margin-top:35px; | |||
display:flex; | |||
justify-content:center; | |||
} | } | ||
.image-box img{ | |||
width:65%; | |||
max-width:280px; | |||
display:block; | |||
} | } | ||
. | |||
.logo{ | |||
display:flex; | |||
justify-content:center; | |||
margin-top:25px; | |||
} | } | ||
. | |||
.logo img{ | |||
width:120px; | |||
background:white; | |||
padding:12px; | |||
border-radius:18px 18px 0 0; | |||
} | } | ||
/* ---------- Tablet ---------- */ | |||
@media(max-width:768px){ | |||
.container{ | |||
padding:30px 18px 0; | |||
} | } | ||
h1{ | |||
font-size:28px; | |||
} | } | ||
. | |||
font-size: | .step{ | ||
font-size:18px; | |||
padding:15px; | |||
} | } | ||
.image-box img{ | |||
width:72%; | |||
} | } | ||
} | } | ||
/* ---------- Mobile ---------- */ | |||
@media(max-width:480px){ | |||
body{ | |||
padding:15px; | |||
} | } | ||
. | |||
.container{ | |||
border-radius:25px; | |||
padding:22px 15px 0; | |||
} | } | ||
h1{ | |||
font-size:22px; | |||
} | } | ||
.step{ | |||
font-size:15px; | |||
padding:13px; | |||
border-radius:14px; | |||
} | } | ||
.logo img{ | |||
width:90px; | |||
} | } | ||
.image-box img{ | |||
width:80%; | |||
} | } | ||
} | } | ||
/* ---------- Large Screen ---------- */ | |||
@media(min-width:1400px){ | |||
.production{ | |||
max-width:650px; | |||
} | } | ||
h1{ | |||
font-size:40px; | |||
} | } | ||
. | |||
font-size: | .step{ | ||
font-size:23px; | |||
} | } | ||
} | } | ||
/* | /* کانتینر اصلی */ | ||
.category-grid { | |||
display: grid; | |||
. | gap: 10px; | ||
display: | margin: 15px auto; | ||
max-width: 800px; | |||
padding: 5px; | |||
/* این خط باعث میشود در همه حالتها پایه روی 2 ستون باشد */ | |||
grid-template-columns: repeat(2, 1fr); | |||
} | } | ||
/* در دسکتاپ (صفحههای بزرگتر از 769 پیکسل) تبدیل به 4 ستون میشود */ | |||
@media (min-width: 769px) { | |||
.category-grid { | |||
grid-template-columns: repeat(4, 1fr); | |||
} | |||
} | } | ||
. | |||
/* استایل باکسها */ | |||
.category-card { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
. | height: 45px; | ||
padding: 5px 10px; | |||
border-radius: 8px; | |||
text-decoration: none !important; | |||
transition: transform 0.2s ease; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.08); | |||
font-weight: 600; | |||
font-size: 0.85em; | |||
color: #ffffff !important; | |||
} | } | ||
. | |||
.category-card:hover { | |||
transform: translateY(-2px); | |||
} | } | ||
/* | |||
/* کانتینر اصلی - وسطچین و محدود شده */ | |||
. | .social-section-container { | ||
display:flex; | width: 100%; | ||
justify-content:center; | display: flex; | ||
justify-content: center; | |||
margin: 20px 0; | |||
margin | |||
} | } | ||
. | |||
/* نگهدارنده آیکونها - برای جلوگیری از پخش شدن در کل صفحه */ | |||
.social-icons-wrapper { | |||
display: flex; | |||
flex-direction: row; | |||
gap: 15px; /* فاصله بین آیکونها */ | |||
padding: 10px; | |||
align-items: center; | |||
justify-content: center; | |||
} | } | ||
. | |||
/* استایل لینکها */ | |||
.social-link-item { | |||
display: inline-block; | |||
text-decoration: none !important; | |||
transition: transform 0.2s ease; | |||
} | } | ||
/* | |||
/* استایل تصاویر آیکون - اندازه دقیق در اینجا تعیین میشود */ | |||
.social-link-item img { | |||
width: 35px !important; /* اندازه آیکونها (میتوانی با تغییر این عدد اندازه را کم یا زیاد کنی) */ | |||
height: 35px !important; | |||
display: block; | |||
border-radius: 4px; /* اگر میخواهی گوشهها کمی گرد باشد */ | |||
} | } | ||
. | |||
/* افکت هاور برای زیبایی */ | |||
.social-link-item:hover { | |||
transform: scale(1.15); /* کمی بزرگ شدن هنگام نگه داشتن موس */ | |||
} | } | ||
. | |||
/* کانتینر اصلی برای جلوگیری از هرگونه تداخل */ | |||
.fgb-social-container { | |||
display: flex !important; | |||
justify-content: center !important; | |||
align-items: center !important; | |||
width: 100% !important; | |||
margin: 10px 0 !important; | |||
clear: both !important; /* برای جلوگیری از تداخل با فلوتهای سایت */ | |||
} | } | ||
. | |||
.fgb-social-box { | |||
display: flex !important; | |||
flex-direction: row !important; | |||
gap: 15px !important; | |||
justify-content: center !important; | |||
align-items: center !important; | |||
} | } | ||
. | |||
.fgb-social-icon { | |||
display: inline-block !important; | |||
width: 35px !important; /* اندازه ثابت */ | |||
height: 35px !important; /* اندازه ثابت */ | |||
text-decoration: none !important; | |||
transition: transform 0.2s ease !important; | |||
} | } | ||
.fgb-social-icon img { | |||
width: 35px !important; /* اجبار به اندازه ۳۵ پیکسل */ | |||
height: 35px !important; /* اجبار به اندازه ۳۵ پیکسل */ | |||
max-width: 35px !important; /* جلوگیری از بزرگ شدن توسط دستورات سایت */ | |||
min-width: 35px !important; /* جلوگیری از کوچک شدن */ | |||
display: block !important; | |||
object-fit: contain !important; | |||
} | } | ||
.fgb-social-icon:hover { | |||
transform: scale(1.2) !important; | |||
. | |||
} | } | ||
/* | |||
. | |||
/* پس زمینه تکرار شونده*/ | |||
.vertical-pattern { | |||
background-image: url("https://dl.faraghaib.ir/m/260022/26002222.jpg"); | |||
background:# | background-repeat: repeat-y; | ||
background-position: top center; | |||
background-size: auto; | |||
background-color: #ffffff; | |||
min-height: 100vh; | |||
width: 100%; | |||
padding: 20px; | |||
box-sizing: border-box; | |||
} | } | ||
. | |||
/* | |||
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; | |||
font-display: swap; | |||
} | } | ||
. | .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; | |||
border | --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 *, | |||
.mw-parser-output .fg-home *::before, | |||
border- | .mw-parser-output .fg-home *::after { | ||
box-sizing: border-box; | |||
} | } | ||
.mw-parser-output .fg-home a { | |||
color: inherit; | |||
. | |||
} | } | ||
. | |||
.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; | |||
} | } | ||
. | |||
.mw-parser-output .fg-home h2 { | |||
font-size: clamp(1.65rem, 3vw, 2.55rem); | |||
letter-spacing: -0.04em; | |||
line-height: 1.35; | |||
margin-bottom: 0.55rem; | |||
} | } | ||
. | |||
font-size: | .mw-parser-output .fg-home h3 { | ||
font-size: 1.18rem; | |||
margin-bottom: | line-height: 1.5; | ||
margin-bottom: 0.55rem; | |||
} | } | ||
. | |||
.mw-parser-output .fg-shell { | |||
margin: 0 auto; | |||
max-width: 1240px; | |||
padding: 24px 18px 46px; | |||
} | } | ||
.mw-parser-output .fg-hero { | |||
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); | |||
border-radius:var(-- | 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; | |||
} | } | ||
. | |||
.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%); | |||
background-size: 28px 28px; | |||
content: ""; | |||
inset: 0; | |||
opacity: 0.25; | |||
pointer-events: none; | |||
position: absolute; | |||
} | } | ||
.mw-parser-output .fg-hero__content, | |||
.mw-parser-output .fg-hero__visual { | |||
. | position: relative; | ||
z-index: 1; | |||
} | } | ||
. | |||
.mw-parser-output .fg-hero__content { | |||
align-self: center; | |||
max-width: 680px; | |||
} | } | ||
.mw-parser-output .fg-eyebrow, | |||
.mw-parser-output .fg-kicker { | |||
. | color: var(--fg-cyan); | ||
font-weight: | 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; | |||
bottom: | margin-bottom: 18px; | ||
} | } | ||
.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; | |||
} | } | ||
.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 { | |||
padding: | 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; | |||
color:# | |||
} | } | ||
. | .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- | font-weight: 900; | ||
} | } | ||
. | |||
.mw-parser-output .fg-hero__visual { | |||
align-items: center; | |||
display: flex; | |||
justify-content: center; | |||
min-height: 360px; | |||
} | } | ||
. | |||
border- | .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); | |||
border- | height: 270px; | ||
transform: rotate(-36deg) scaleX(0.5); | |||
width: 270px; | |||
} | } | ||
. | |||
.mw-parser-output .fg-code-window { | |||
box-shadow: | 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%; | |||
} | } | ||
. | |||
font-size: | .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; | |||
margin- | |||
} | } | ||
. | |||
.mw-parser-output .fg-code-window__body { | |||
color: #d7d5ff; | |||
direction: ltr; | |||
margin- | 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; | |||
color:# | |||
} | } | ||
. | |||
color:# | .mw-parser-output .fg-code-property { | ||
color: #67e8f9; | |||
} | } | ||
. | |||
.mw-parser-output .fg-code-string { | |||
color:# | color: #bef264; | ||
} | } | ||
.mw-parser-output .fg-code-boolean { | |||
color: #fbbf24; | |||
. | |||
} | } | ||
. | |||
.mw-parser-output .fg-code-window__status { | |||
align-items: center; | |||
font- | 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 { | |||
font-size: | 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); | |||
. | |||
} | } | ||
. | |||
text-align:center; | .mw-parser-output .fg-service-card__link, | ||
font-size: | .mw-parser-output .fg-text-link { | ||
font-weight: | align-items: center; | ||
color: var(--fg-primary); | |||
margin- | 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; | |||
. | |||
display: | |||
} | } | ||
. | |||
.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; | |||
} | } | ||
. | |||
font-size: | .mw-parser-output .fg-story__content p { | ||
color: var(--fg-muted); | |||
line-height:2 | font-size: 0.96rem; | ||
line-height: 2; | |||
} | } | ||
. | |||
display: | .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: | margin-bottom: 92px; | ||
} | } | ||
. | |||
.mw-parser-output .fg-media-grid { | |||
display: grid; | |||
gap: 15px; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
. | |||
grid-template-columns:repeat(2,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; | |||
width: | 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; | |||
font-size | |||
} | } | ||
.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: | 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; | |||
} | |||
} | } | ||