مدیاویکی:Common.css: تفاوت میان نسخه‌ها

بدون خلاصۀ ویرایش
برچسب: واگردانی دستی
بدون خلاصۀ ویرایش
 
(۶ نسخهٔ میانی ویرایش شده توسط ۲ کاربر نشان داده نشد)
خط ۵٬۱۵۷: خط ۵٬۱۵۷:
===================================================================
===================================================================


/*=====================================================
  Deniz Door Products Section
  Version : 2.0
  Responsive + SEO + Accessibility
======================================================*/
@charset "UTF-8";
/*-------------------------
    IRANSans Font
--------------------------*/
@font-face{
    font-family:'IRANSans';
    src:url('/fonts/IRANSans.woff2') format('woff2'),
        url('/fonts/IRANSans.woff') format('woff');
    font-display:swap;
    font-weight:normal;
}
@font-face{
    font-family:'IRANSans';
    src:url('/fonts/IRANSans-Bold.woff2') format('woff2'),
        url('/fonts/IRANSans-Bold.woff') format('woff');
    font-display:swap;
    font-weight:bold;
}
/*-------------------------
    Variables
--------------------------*/
:root{
--primary:#222222;
--secondary:#666666;
--border:#ececec;
--bg:#ffffff;
--hover:#fafafa;
--radius:22px;
--shadow:
0 8px 20px rgba(0,0,0,.06);
--shadow-hover:
0 18px 40px rgba(0,0,0,.12);
--transition:.35s ease;
}
/*-------------------------
    Reset
--------------------------*/
*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
font-size:16px;
scroll-behavior:smooth;
}
body{
font-family:'IRANSans',Tahoma,sans-serif;
direction:rtl;
background:#fff;
color:var(--primary);
line-height:2;
overflow-x:hidden;
text-rendering:optimizeLegibility;
}
img{
display:block;
max-width:100%;
height:auto;
}
a{
text-decoration:none;
color:inherit;
}
ul{
list-style:none;
}
/*==================================================
            PRODUCTS SECTION
===================================================*/
.deniz-products{
padding:90px 20px;
background:#fff;
position:relative;
}
.deniz-products .container{
max-width:1320px;
margin:auto;
}
/*=========================
      Heading
==========================*/
.deniz-heading{
text-align:center;
margin-bottom:70px;
}
.deniz-heading h2{
font-size:46px;
font-weight:700;
color:#111;
line-height:1.3;
}
.deniz-heading::after{
content:"";
display:block;
width:90px;
height:2px;
background:#d9d9d9;
margin:22px auto 0;
}
/*=========================
      Grid
==========================*/
.deniz-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(240px,1fr));
gap:42px;
align-items:start;
}
/*=========================
      Card
==========================*/
.deniz-card{
position:relative;
padding:0;
text-align:center;
transition:var(--transition);
}
.deniz-card:hover{
transform:translateY(-10px);
}
.deniz-card a{
display:block;
padding:10px;
border-radius:var(--radius);
transition:var(--transition);
}
.deniz-card:hover a{
background:var(--hover);
box-shadow:var(--shadow-hover);
}
/*=========================
      Image Area
==========================*/
.deniz-card .image-box{
position:relative;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-radius:var(--radius);
background:#f7f7f7;
margin-bottom:22px;
}
.deniz-card .image-box img{
width:100%;
height:100%;
object-fit:cover;
transition:var(--transition);
}
.deniz-card:hover .image-box img{
transform:scale(1.08);
}
/*=========================
      Product Title
==========================*/
.deniz-card h3{
font-size:22px;
font-weight:700;
color:#111;
line-height:1.8;
margin-bottom:12px;
transition:var(--transition);
}
.deniz-card:hover h3{
color:#444;
}
/*=========================
      Description
==========================*/
.deniz-card p{
font-size:15px;
color:var(--secondary);
line-height:2;
max-width:280px;
margin:0 auto;
}
/*=========================
      Read More
==========================*/
.deniz-card .read-more{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:18px;
font-size:14px;
font-weight:bold;
color:#555;
transition:var(--transition);
}
.deniz-card .read-more::after{
content:"←";
font-size:18px;
transition:var(--transition);
}
.deniz-card:hover .read-more{
color:#111;
}
.deniz-card:hover .read-more::after{
transform:translateX(-6px);
}
/*=========================
      Accessibility Focus
==========================*/
.deniz-card a:focus-visible{
outline:3px solid #777;
outline-offset:5px;
}
/*==================================================
            TABLET RESPONSIVE
===================================================*/
@media(max-width:1100px){
.deniz-products{
padding:70px 20px;
}
.deniz-heading h2{
font-size:38px;
}
.deniz-grid{
grid-template-columns:
repeat(2,minmax(240px,1fr));
gap:35px;
}
.deniz-card h3{
font-size:20px;
}
}
/*==================================================
            MOBILE RESPONSIVE
===================================================*/
@media(max-width:600px){
.deniz-products{
padding:45px 15px;
}
.deniz-heading{
margin-bottom:40px;
}
.deniz-heading h2{
font-size:28px;
}
.deniz-heading::after{
width:60px;
}
.deniz-grid{
grid-template-columns:1fr;
gap:28px;
}
.deniz-card a{
padding:8px;
}
.deniz-card .image-box{
border-radius:18px;
}
.deniz-card h3{
font-size:18px;
}
.deniz-card p{
font-size:14px;
}
.deniz-card:hover{
transform:none;
}
}
/*==================================================
            SMALL MOBILE
===================================================*/
@media(max-width:380px){
.deniz-heading h2{
font-size:24px;
}
.deniz-card h3{
font-size:17px;
}
.deniz-card p{
font-size:13px;
}
}
/*==================================================
      SEO + PERFORMANCE OPTIMIZATION
===================================================*/
/* جلوگیری از پرش محتوا هنگام لود تصاویر */
.deniz-card .image-box{
contain:layout paint;
}
/* بهینه سازی رندر متن */
.deniz-products,
.deniz-products *{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/*==================================================
      IMAGE SEO SUPPORT
===================================================*/
.deniz-card img{
loading:lazy;
object-fit:cover;
}
/*==================================================
      HIGH CONTRAST SUPPORT
===================================================*/
@media (prefers-contrast:high){
.deniz-card h3{
color:#000;
}
.deniz-card p{
color:#222;
}
.deniz-card a{
border:1px solid #333;
}
}
/*==================================================
      REDUCED MOTION ACCESSIBILITY
===================================================*/
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}
/*==================================================
      DARK MODE SUPPORT
===================================================*/
@media(prefers-color-scheme:dark){
.deniz-products{
background:#111;
}
.deniz-heading h2{
color:#fff;
}
.deniz-heading::after{
background:#444;
}
.deniz-card:hover a{
background:#1b1b1b;
}
.deniz-card h3{
color:#fff;
}
.deniz-card p{
color:#bbb;
}
.deniz-card .image-box{
background:#1c1c1c;
}
.deniz-card .read-more{
color:#ddd;
}
}
/*==================================================
      LARGE DESKTOP OPTIMIZATION
===================================================*/
@media(min-width:1400px){
.deniz-products .container{
max-width:1450px;
}
.deniz-grid{
gap:50px;
}
.deniz-card h3{
font-size:24px;
}
}
/*==================================================
      PRINT OPTIMIZATION
===================================================*/
@media print{
.deniz-products{
padding:20px;
}
.deniz-card:hover{
transform:none;
}
.deniz-card a{
box-shadow:none!important;
background:none!important;
}
.deniz-card .read-more{
display:none;
}
}
/*==================================================
      PRODUCT BADGE
      (ویژگی / جدید / پرفروش)
===================================================*/
.deniz-card .product-badge{
position:absolute;
top:18px;
right:18px;
z-index:5;
background:#111;
color:#fff;
font-size:13px;
padding:6px 14px;
border-radius:30px;
font-weight:bold;
line-height:1.5;
}
/* رنگ‌های مختلف Badge */
.deniz-card .product-badge.new{
background:#2ecc71;
}
.deniz-card .product-badge.sale{
background:#e74c3c;
}
.deniz-card .product-badge.best{
background:#f39c12;
}
/*==================================================
      PRODUCT FEATURE LIST
===================================================*/
.deniz-features{
margin-top:18px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
}
.deniz-features span{
background:#f6f6f6;
border-radius:20px;
padding:5px 12px;
font-size:12px;
color:#555;
transition:var(--transition);
}
.deniz-card:hover .deniz-features span{
background:#fff;
box-shadow:0 5px 15px rgba(0,0,0,.06);
}
/*==================================================
      PRODUCT BUTTON
===================================================*/
.deniz-card .product-btn{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:22px;
padding:10px 28px;
border-radius:30px;
background:#111;
color:#fff;
font-size:14px;
font-weight:bold;
transition:var(--transition);
}
.deniz-card .product-btn:hover{
background:#333;
transform:translateY(-3px);
}
/*==================================================
      FEATURED PRODUCT CARD
===================================================*/
.deniz-card.featured a{
background:#fafafa;
box-shadow:
0 10px 30px rgba(0,0,0,.08);
}
.deniz-card.featured:hover a{
box-shadow:
0 20px 45px rgba(0,0,0,.15);
}
/*==================================================
      PRODUCT IMAGE OVERLAY
===================================================*/
.deniz-card .image-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.35),
transparent 60%
);
opacity:0;
transition:var(--transition);
}
.deniz-card:hover .image-overlay{
opacity:1;
}
/*==================================================
      ICON SUPPORT
===================================================*/
.deniz-icon{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 15px;
border-radius:50%;
background:#f4f4f4;
color:#222;
font-size:20px;
transition:var(--transition);
}
.deniz-card:hover .deniz-icon{
transform:translateY(-5px);
background:#111;
color:#fff;
}
/*==================================================
      MOBILE CARD IMPROVEMENT
===================================================*/
@media(max-width:600px){
.deniz-card .product-badge{
top:12px;
right:12px;
font-size:11px;
padding:5px 10px;
}
.deniz-features span{
font-size:11px;
padding:4px 9px;
}
.deniz-card .product-btn{
width:100%;
padding:9px 20px;
}
}
/*==================================================
      SEO STRUCTURE SUPPORT
      Breadcrumb + Schema Layout
===================================================*/
.deniz-breadcrumb{
width:100%;
max-width:1320px;
margin:0 auto 35px;
padding:12px 20px;
background:#fafafa;
border-radius:15px;
font-size:14px;
color:#777;
}
.deniz-breadcrumb a{
color:#555;
transition:var(--transition);
}
.deniz-breadcrumb a:hover{
color:#111;
}
/*==================================================
      SEO INTRO BOX
===================================================*/
.deniz-intro{
max-width:1000px;
margin:0 auto 60px;
text-align:center;
font-size:16px;
color:#555;
line-height:2.2;
}
.deniz-intro strong{
color:#111;
font-weight:bold;
}
/*==================================================
      FAQ SECTION SEO
===================================================*/
.deniz-faq{
max-width:1000px;
margin:80px auto 0;
}
.deniz-faq-item{
border-bottom:1px solid var(--border);
padding:20px 0;
}
.deniz-faq-question{
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
font-size:18px;
font-weight:bold;
color:#111;
}
.deniz-faq-answer{
margin-top:12px;
font-size:15px;
color:#666;
line-height:2;
}
/*==================================================
      CTA SEO BOX
===================================================*/
.deniz-cta{
margin-top:80px;
padding:45px 35px;
background:#111;
color:#fff;
border-radius:25px;
text-align:center;
}
.deniz-cta h3{
font-size:28px;
margin-bottom:15px;
}
.deniz-cta p{
font-size:16px;
color:#ddd;
margin-bottom:25px;
}
.deniz-cta a{
display:inline-flex;
padding:12px 35px;
background:#fff;
color:#111;
border-radius:30px;
font-weight:bold;
transition:var(--transition);
}
.deniz-cta a:hover{
transform:translateY(-4px);
}
/*==================================================
      SEO KEYWORD HIGHLIGHT
===================================================*/
.deniz-keyword{
font-weight:bold;
color:#111;
}
/*==================================================
      RESPONSIVE SEO ELEMENTS
===================================================*/
@media(max-width:768px){
.deniz-breadcrumb{
font-size:12px;
padding:10px 14px;
}
.deniz-intro{
font-size:14px;
padding:0 10px;
}
.deniz-faq-question{
font-size:16px;
}
.deniz-faq-answer{
font-size:14px;
}
.deniz-cta{
padding:30px 20px;
}
.deniz-cta h3{
font-size:22px;
}
}
/*==================================================
      PERFORMANCE + CORE WEB VITALS
===================================================*/
.deniz-products{
content-visibility:auto;
}
.deniz-card{
will-change:transform;
}
.deniz-card .image-box img{
backface-visibility:hidden;
}
/*==================================================
      LOADING PLACEHOLDER
===================================================*/
.deniz-card .image-box.loading{
background:
linear-gradient(
90deg,
#f3f3f3 25%,
#fafafa 50%,
#f3f3f3 75%
);
background-size:200% 100%;
animation:deniz-loading 1.5s infinite;
}
@keyframes deniz-loading{
0%{
background-position:200% 0;
}
100%{
background-position:-200% 0;
}
}
/*==================================================
      PREMIUM CARD STYLE
===================================================*/
.deniz-card.premium a{
border:1px solid #ededed;
background:#fff;
}
.deniz-card.premium:hover a{
border-color:#ddd;
}
/*==================================================
      PRODUCT PRICE AREA
===================================================*/
.deniz-price{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-top:15px;
}
.deniz-price .old-price{
font-size:14px;
color:#999;
text-decoration:line-through;
}
.deniz-price .new-price{
font-size:20px;
font-weight:bold;
color:#111;
}
/*==================================================
      TRUST BADGES
===================================================*/
.deniz-trust{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-top:30px;
}
.deniz-trust-item{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:#555;
}
.deniz-trust-item i{
font-size:18px;
color:#222;
}
/*==================================================
      HOVER MICRO INTERACTIONS
===================================================*/
.deniz-card:hover .deniz-trust-item i{
transform:scale(1.1);
}
.deniz-trust-item i{
transition:var(--transition);
}
/*==================================================
      PRODUCT CATEGORY FILTER
===================================================*/
.deniz-filter{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:50px;
}
.deniz-filter button{
border:1px solid #ddd;
background:#fff;
padding:10px 25px;
border-radius:30px;
font-family:inherit;
cursor:pointer;
font-size:14px;
transition:var(--transition);
}
.deniz-filter button:hover,
.deniz-filter button.active{
background:#111;
color:#fff;
border-color:#111;
}
/*==================================================
      MOBILE FINAL OPTIMIZATION
===================================================*/
@media(max-width:600px){
.deniz-price .new-price{
font-size:18px;
}
.deniz-trust{
gap:10px;
}
.deniz-trust-item{
font-size:12px;
}
.deniz-filter{
margin-bottom:30px;
}
.deniz-filter button{
padding:8px 16px;
font-size:12px;
}
}
/*==================================================
      PROFESSIONAL SHOP STYLE
      Product Actions
===================================================*/
.deniz-actions{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:25px;
}
/* دکمه مشاهده محصول */
.deniz-view-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:11px 28px;
border-radius:30px;
background:#111;
color:#fff;
font-size:14px;
font-weight:bold;
transition:var(--transition);
}
.deniz-view-btn:hover{
background:#333;
transform:translateY(-3px);
}
/* دکمه تماس */
.deniz-call-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:11px 22px;
border-radius:30px;
background:#f5f5f5;
color:#111;
font-size:14px;
font-weight:bold;
border:1px solid #ddd;
transition:var(--transition);
}
.deniz-call-btn:hover{
background:#111;
color:#fff;
border-color:#111;
}
/*==================================================
      TRUST SECTION
===================================================*/
.deniz-trust-box{
margin-top:70px;
padding:35px 25px;
background:#fafafa;
border-radius:25px;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:25px;
text-align:center;
}
.deniz-trust-box .item{
padding:15px;
}
.deniz-trust-box .icon{
width:55px;
height:55px;
margin:0 auto 15px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#111;
color:#fff;
font-size:22px;
}
.deniz-trust-box h4{
font-size:17px;
color:#111;
margin-bottom:8px;
}
.deniz-trust-box p{
font-size:13px;
color:#666;
line-height:1.9;
}
/*==================================================
      PRODUCT HOVER BORDER EFFECT
===================================================*/
.deniz-card a::before{
content:"";
position:absolute;
inset:0;
border-radius:var(--radius);
border:1px solid transparent;
transition:var(--transition);
pointer-events:none;
}
.deniz-card:hover a::before{
border-color:#ddd;
}
/*==================================================
      IMAGE ZOOM BUTTON
===================================================*/
.deniz-image-btn{
position:absolute;
bottom:20px;
left:20px;
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#111;
opacity:0;
transform:translateY(15px);
transition:var(--transition);
box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.deniz-card:hover .deniz-image-btn{
opacity:1;
transform:translateY(0);
}
/*==================================================
      BRAND HIGHLIGHT
===================================================*/
.deniz-brand{
font-weight:bold;
color:#111;
position:relative;
}
.deniz-brand::after{
content:"";
position:absolute;
height:2px;
width:100%;
bottom:-5px;
right:0;
background:#111;
}
/*==================================================
      RESPONSIVE TRUST BOX
===================================================*/
@media(max-width:992px){
.deniz-trust-box{
grid-template-columns:
repeat(2,1fr);
}
}
@media(max-width:600px){
.deniz-actions{
flex-direction:column;
}
.deniz-view-btn,
.deniz-call-btn{
width:100%;
}
.deniz-trust-box{
grid-template-columns:1fr;
padding:25px 15px;
}
.deniz-trust-box h4{
font-size:15px;
}
}
/*==================================================
      PRODUCT DETAIL SECTION
      مشخصات صفحه محصول
===================================================*/
.deniz-product-detail{
max-width:1200px;
margin:80px auto;
padding:0 20px;
}
/* عنوان محصول */
.deniz-product-title{
font-size:36px;
font-weight:700;
color:#111;
line-height:1.5;
margin-bottom:25px;
}
/* توضیحات محصول */
.deniz-product-description{
font-size:16px;
color:#555;
line-height:2.3;
margin-bottom:40px;
}
/*==================================================
      SPECIFICATIONS TABLE
===================================================*/
.deniz-specs{
width:100%;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.deniz-specs tr{
background:#fff;
}
.deniz-specs tr:nth-child(even){
background:#fafafa;
}
.deniz-specs td{
padding:16px 22px;
border-bottom:1px solid #eee;
font-size:15px;
}
.deniz-specs td:first-child{
font-weight:bold;
color:#111;
width:35%;
}
.deniz-specs tr:last-child td{
border-bottom:none;
}
/*==================================================
      PRODUCT ADVANTAGES
===================================================*/
.deniz-advantages{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:25px;
margin-top:50px;
}
.deniz-advantage-item{
padding:30px 20px;
background:#fff;
border-radius:22px;
text-align:center;
box-shadow:var(--shadow);
transition:var(--transition);
}
.deniz-advantage-item:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-hover);
}
.deniz-advantage-item .icon{
font-size:35px;
margin-bottom:15px;
color:#111;
}
.deniz-advantage-item h4{
font-size:18px;
margin-bottom:10px;
color:#111;
}
.deniz-advantage-item p{
font-size:14px;
color:#666;
line-height:2;
}
/*==================================================
      CUSTOMER REVIEWS
===================================================*/
.deniz-reviews{
margin-top:80px;
}
.deniz-review-item{
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:var(--shadow);
margin-bottom:20px;
}
.deniz-review-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:15px;
}
.deniz-review-name{
font-size:16px;
font-weight:bold;
color:#111;
}
.deniz-stars{
color:#555;
font-size:18px;
letter-spacing:3px;
}
.deniz-review-text{
font-size:14px;
color:#666;
line-height:2;
}
/*==================================================
      RELATED PRODUCTS
===================================================*/
.deniz-related{
margin-top:90px;
}
.deniz-related-title{
text-align:center;
font-size:30px;
font-weight:bold;
margin-bottom:45px;
color:#111;
}
.deniz-related-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:25px;
}
.deniz-related-item{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
transition:var(--transition);
}
.deniz-related-item:hover{
transform:translateY(-7px);
}
.deniz-related-item img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
}
.deniz-related-item h5{
padding:15px;
font-size:16px;
text-align:center;
color:#111;
}
/*==================================================
      RESPONSIVE PRODUCT DETAIL
===================================================*/
@media(max-width:992px){
.deniz-product-title{
font-size:30px;
}
.deniz-advantages{
grid-template-columns:repeat(2,1fr);
}
.deniz-related-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.deniz-product-detail{
margin:50px auto;
padding:0 15px;
}
.deniz-product-title{
font-size:24px;
}
.deniz-product-description{
font-size:14px;
}
.deniz-specs td{
padding:12px;
font-size:13px;
}
.deniz-specs td:first-child{
width:40%;
}
.deniz-advantages{
grid-template-columns:1fr;
}
.deniz-related-grid{
grid-template-columns:1fr;
}
.deniz-related-title{
font-size:24px;
}
}
/*==================================================
      FINAL SEO COMPONENTS
      FAQ + SHARE + SCHEMA SUPPORT
===================================================*/
/*=========================
      FAQ ACCORDION
==========================*/
.deniz-faq-wrapper{
max-width:1100px;
margin:80px auto;
padding:0 20px;
}
.deniz-faq-title{
text-align:center;
font-size:32px;
font-weight:700;
color:#111;
margin-bottom:40px;
}
.deniz-faq-item{
border:1px solid #ececec;
border-radius:18px;
margin-bottom:15px;
overflow:hidden;
background:#fff;
transition:var(--transition);
}
.deniz-faq-item:hover{
box-shadow:var(--shadow);
}
.deniz-faq-item summary{
cursor:pointer;
padding:20px 25px;
font-size:17px;
font-weight:bold;
color:#111;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
}
.deniz-faq-item summary::-webkit-details-marker{
display:none;
}
.deniz-faq-item summary::after{
content:"+";
font-size:25px;
font-weight:bold;
}
.deniz-faq-item[open] summary::after{
content:"−";
}
.deniz-faq-content{
padding:0 25px 25px;
font-size:15px;
color:#666;
line-height:2.2;
}
/*==================================================
      SOCIAL SHARE
===================================================*/
.deniz-share{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin:50px auto;
}
.deniz-share a{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f5f5f5;
color:#222;
font-size:18px;
transition:var(--transition);
}
.deniz-share a:hover{
background:#111;
color:#fff;
transform:translateY(-5px);
}
/*==================================================
      CONTACT CTA FINAL
===================================================*/
.deniz-final-contact{
margin:90px auto;
max-width:1200px;
padding:45px 30px;
border-radius:30px;
background:#111;
color:#fff;
text-align:center;
}
.deniz-final-contact h2{
font-size:32px;
margin-bottom:15px;
}
.deniz-final-contact p{
font-size:16px;
color:#ddd;
line-height:2;
margin-bottom:30px;
}
.deniz-final-contact a{
display:inline-flex;
padding:13px 40px;
background:#fff;
color:#111;
border-radius:35px;
font-weight:bold;
transition:var(--transition);
}
.deniz-final-contact a:hover{
transform:translateY(-4px);
}
/*==================================================
      FOOTER PRODUCT LINKS
===================================================*/
.deniz-footer-links{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:25px;
margin-top:70px;
}
.deniz-footer-links h4{
font-size:17px;
margin-bottom:15px;
color:#111;
}
.deniz-footer-links a{
display:block;
font-size:14px;
color:#666;
margin-bottom:8px;
transition:var(--transition);
}
.deniz-footer-links a:hover{
color:#111;
padding-right:5px;
}
/*==================================================
      FINAL RESPONSIVE SETTINGS
===================================================*/
@media(max-width:992px){
.deniz-footer-links{
grid-template-columns:repeat(2,1fr);
}
.deniz-final-contact h2{
font-size:26px;
}
}
@media(max-width:600px){
.deniz-faq-wrapper{
padding:0 15px;
}
.deniz-faq-title{
font-size:24px;
}
.deniz-faq-item summary{
font-size:14px;
padding:16px;
}
.deniz-faq-content{
font-size:13px;
padding:0 16px 18px;
}
.deniz-share a{
width:38px;
height:38px;
}
.deniz-final-contact{
margin:60px 15px;
padding:30px 20px;
}
.deniz-final-contact h2{
font-size:22px;
}
.deniz-footer-links{
grid-template-columns:1fr;
}
}
/*==================================================
      END OF DENIZ PRODUCTS CSS
      Version 2.0 COMPLETE
===================================================*/


/*    محصولات دایره ای */
/*    محصولات دایره ای */
خط ۶٬۶۱۲: خط ۵٬۲۵۰:
     margin:0 auto 25px;
     margin:0 auto 25px;


     border-radius:50%;
     border-radius:0%;


     overflow:hidden;
     overflow:hidden;
خط ۶٬۷۲۷: خط ۵٬۳۶۵:


}
}
/*  پایان محصولات دایره ای            */


/*  دکمه شیشه ای*/
/*  دکمه شیشه ای*/
خط ۷٬۵۶۲: خط ۶٬۲۰۲:
     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;
}
}
}