مدیاویکی:Common.css: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش برچسب: واگردانی دستی |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۷٬۵۶۲: | خط ۷٬۵۶۲: | ||
padding: 20px; | padding: 20px; | ||
box-sizing: border-box; | 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; | |||
--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, | |||
.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; | |||
} | |||
.mw-parser-output .fg-home h3 { | |||
font-size: 1.18rem; | |||
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); | |||
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); | |||
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; | |||
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 { | |||
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; | |||
} | |||
} | } | ||