/* =======================================================================
overrides-clean.css
Author: ChatGPT (for Hamid Hekmat)
Date: 2025-10-12
Notes:
- Single :root variable block (colors, spacing, typography, components)
- Sections clearly separated; no duplicate class definitions
- Tailwind/PostCSS-only directives removed (@apply, etc.)
- Mobile/desktop differences handled via media queries inside each section
- Safe defaults added for variables referenced elsewhere in site
======================================================================= */
/* =======================================================================
0) Fonts (load first)
======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');
/* =======================================================================
1) Base Variables (single source of truth)
======================================================================= */
:root{
/* --- Brand palette --- */
--c-bg: #000000;
--c-text: #EAEAF1;
--c-muted: #C8CCDF;
--c-border: #2A2E3A;
/* Luxury gradient accents used across hero/buttons/cards */
--c-accent: #7C4DFF;
--c-accent-2: #5863F8;
--c-accent-3: #18B5FF;
--c-accent-4: #8E24AA;
/* Neons used in banner/cta */
--c-cyan: #0DCAF0;
--c-cyan-weak: #0dcaf077;
/* Surfaces & shadows */
--surface-1: #100E22;
--surface-2: #191A3A;
--shadow-soft: 0 6px 24px rgba(0,0,0,.22);
--shadow-strong: 0 16px 48px rgba(0,0,0,.35);
/* Typography scale */
--fs-body: 16px;
--fs-h1: clamp(42px, 7.5vw, 90px);
--fs-h2: clamp(12px, 2.2vw, 10px);
/* Rhythm & layout */
--space-1: clamp(6px, 1.2vw, 12px);
--space-2: clamp(10px, 2vw, 20px);
--space-3: clamp(16px, 3vw, 32px);
--section-pt: 72px;
--section-pb: 88px;
--container-max: 1120px;
--container-pad: 16px;
--radius: clamp(10px, 1.2vw, 18px);
--radius-round: 1000px;
/* Buttons */
--btn-fw: 700;
--btn-h-sm: 36px; --btn-fs-sm: 0.94rem; --btn-pad-sm: 0 14px;
--btn-h-md: 46px; --btn-fs-md: 1.02rem; --btn-pad-md: 0 18px;
--btn-h-lg: 56px; --btn-fs-lg: 1.08rem; --btn-pad-lg: 0 22px;
/* Hero specific */
--hero-min-h: clamp(640px, 100vh, 1080px);
--hero-max-w: 1180px;
--content-top: 21vh;
--lux-grad-a: #9B5BFF;
--lux-grad-b: #C77DFF;
--lux-grad-c: #FFD36E;
--lux-fg-soft: rgba(240,240,255,.88);
--lux-shadow-strong: rgba(155,91,255,.25);
--lux-shadow-soft: rgba(199,125,255,.18);
/* Hero logos marquee */
--logos-top: 85%;
--logos-gap: 55px;
--logos-speed: 25s; /* lower = faster */
--logos-size: 96px;
--logos-opacity: .5;
--logos-bright: 1;
--logos-sat: 0;
/* Marquee edge fade (asymmetric mask) */
--fade-left: 15%;
--fade-right: 40%;
/* CTA circle */
--cta-size: 120px; --cta-bg: #D500F9;
--cta-right-sm: 20px; --cta-bottom-sm: 40px;
/* Misc */
--brand-top: 40%; /* historical var, kept for compatibility */
}
/* =======================================================================
2) Base & Utilities
======================================================================= */
html,body{margin:0;background:var(--c-bg);color:var(--c-text);
font-size:var(--fs-body);line-height:1.6}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.section{padding:var(--section-pt) 0 var(--section-pb)}
@media (max-width:900px){ .section{padding:48px 0 56px} }
h1{font-size:var(--fs-h1);line-height:1.05;margin:0 0 var(--space-2)}
h2{font-size:var(--fs-h2);line-height:1.15;margin:var(--space-2) 0 var(--space-1)}
p{margin:0 0 var(--space-2)}
img,video{width:100%;height:auto;display:block}
.media-16x9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius)}
/* Progressive grid helpers */
.grid-auto{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 42vw, 340px), 1fr));
gap: var(--space-2);
}
/* Container queries (opt-in) */
.section-cq{container-type:inline-size}
@container (max-width:680px){
.section-cq .layout{grid-template-columns:1fr}
.section-cq .media-16x9{aspect-ratio:4/3}
}
@container (min-width:681px){
.section-cq .layout{grid-template-columns:1.2fr 1fr;gap:var(--space-2)}
}
/* Utilities */
.text--md{font-size:1.05rem}
.rotate{transform:rotate(0.0001deg)} /* subpixel fix */
/* Tighten first/last child spacing within sections (mobile pack uses same) */
.section > *:first-child{ margin-top: 0 !important; }
.section > *:last-child { margin-bottom: 0 !important; }
/* =======================================================================
3) Buttons (unified)
======================================================================= */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-weight:var(--btn-fw);text-decoration:none;border:1px solid transparent;
transition:.2s ease; box-shadow:var(--shadow-soft); border-radius:var(--radius-round);
}
.btn--sm{height:var(--btn-h-sm);padding:var(--btn-pad-sm);font-size:var(--btn-fs-sm)}
.btn--md{height:var(--btn-h-md);padding:var(--btn-pad-md);font-size:var(--btn-fs-md)}
.btn--lg{height:var(--btn-h-lg);padding:var(--btn-pad-lg);font-size:var(--btn-fs-lg)}
.btn--accent{
background:linear-gradient(90deg,var(--c-accent) 0%, var(--c-accent-3) 100%);color:#fff
}
.btn--accent:hover{
transform:translateY(-1px);
background:linear-gradient(90deg,var(--c-accent-3) 15%, var(--c-accent) 100%)
}
.btn--outline{background:transparent;color:#fff;border-color:var(--c-border)}
.btn--outline:hover{border-color:var(--c-accent);color:#fff}
/* Backwards-compat for legacy buttons */
.button-custom,.case-card__link{
display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--radius); font-weight:var(--btn-fw);
min-width:140px;padding:12px 24px;font-size:1.03rem;
color:#fff; text-decoration:underline; text-underline-offset:3px;
letter-spacing:0.01em; border:none; cursor:pointer;
background:linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-2) 60%, var(--c-accent-3) 100%);
box-shadow: 0 2px 10px rgba(124,77,255,0.13), 0 1px 3px rgba(24,181,255,0.13);
transition: color .2s, background .3s, transform .14s;
}
.button-custom:hover,.case-card__link:hover{
background:linear-gradient(90deg, var(--c-accent-4) 0%, #536dfe 50%, #26c6da 100%);
transform: translateY(-2px) scale(1.026);
}
/* =======================================================================
4) Hero (ink + title + subtitle + brand back) + Logos marquee + CTA
======================================================================= */
/* Halo scope (only if you use JS to set --mouse-x/--mouse-y) */
.halo-scope{ position:absolute; inset:0; z-index:5; isolation:isolate; }
/* Background brand word "DU FIRST" — single definition with responsive tweaks */
.hero-brand-back{
position:absolute; inset:0; z-index:0; display:flex; justify-content:center; align-items:center;
font-weight: 900; line-height:1; letter-spacing:.02em; white-space:nowrap;
color: rgba(255,255,255,0.85); user-select:none;
transform: scaleX(1.15);
font-size: clamp(78px, 17vw, 380px);
/* Light mask that follows pointer (requires JS set of --mouse-x/--mouse-y) */
-webkit-mask-image: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
mask-image: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
opacity: 0; transition: opacity .6s ease-out;
}
.hero-ink:not(.is-idle) .hero-brand-back{ opacity:1; }
@media (max-width:1024px){
.hero-brand-back{
transform: scaleX(1.08);
-webkit-mask-image: radial-gradient(circle 240px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
mask-image: radial-gradient(circle 240px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
font-size: clamp(60px, 15vw, 200px);
}
}
@media (max-width:768px){
.hero-brand-back{
transform: none; font-weight: 800;
-webkit-mask-image: radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
mask-image: radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
font-size: clamp(42px, 14vw, 90px);
}
}
/* CTA circle (rotates on hover) */
.hero-cta-circle{
position:absolute; right:5vw; bottom:10vh; z-index:20;
width:var(--cta-size); height:var(--cta-size); border-radius:50%;
display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none;
background:var(--cta-bg); color:#fff; font-weight:700;
transition: transform .7s ease-in-out;
}
.hero-cta-circle:hover{ transform: rotate(360deg) }
@media (max-width:768px){
:root{ --content-top: 22vh }
.hero-cta-circle{
width: calc(var(--cta-size) - 25px); height: calc(var(--cta-size) - 25px);
right: var(--cta-right-sm); bottom: var(--cta-bottom-sm); transform:none;
}
}
/* =======================================================================
5) Cases (Splide slider + cards)
======================================================================= */
.cases.section{ padding:60px 0 80px; background: linear-gradient(135deg, #19173a 78%, #1c2155 100%) }
.section_nav-title{
color:#fff; font-size:2.1rem; font-weight:700; letter-spacing:.03em; display:flex; align-items:center; gap:18px; margin-bottom:36px;
}
.section_nav-title i{ color:#8e24aa; font-size:2rem }
.cases-slider{ position:relative }
.splide__track{ padding-bottom:32px }
.splide__list{ display:flex; gap:32px }
.splide__slide{
min-width:350px; max-width:400px; flex:0 0 auto; display:flex; align-items:stretch;
}
.case-card{
background: rgba(30, 22, 55, 0.95);
box-shadow: 0 7px 30px rgba(124,77,255,0.13);
border-radius: 26px; overflow:hidden; transition: transform .29s, box-shadow .29s;
display:flex; flex-direction:column; height:100%;
border:1.5px solid rgba(124,77,255,0.10); backface-visibility:hidden;
}
.case-card:hover{ transform: translateY(-12px) scale(1.035);
box-shadow: 0 12px 35px rgba(124,77,255,0.23), 0 4px 30px rgba(88,99,248,0.17);
border-color: var(--c-accent);
}
.case-card__media{ width:100%; aspect-ratio:16/9; overflow:hidden; background: var(--surface-2) }
.case-card__media img{
width:100%; height:100%; object-fit:cover; transition: filter .30s;
filter: brightness(.97) saturate(1.11) drop-shadow(0 3px 16px #7c4dff66);
}
.case-card:hover .case-card__media img{ filter: brightness(1.07) saturate(1.15) }
.case-card__body{ padding: 28px 24px 22px; display:flex; flex-direction:column; gap:12px; flex-grow:1 }
.case-card__title{ color: var(--c-accent); font-size:1.18rem; font-weight:600; margin-bottom:8px; line-height:1.2; letter-spacing:.01em }
.case-card__tags{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.case-card__tags span{
color:#fff; background: linear-gradient(90deg, var(--c-accent-2) 50%, var(--c-accent-4) 100%);
font-size:.96rem; padding:2px 12px 2px 10px; border-radius:12px; font-weight:500; opacity:.89; box-shadow: 0 1px 7px #7c4dff19;
}
.case-card__kpis{ margin:10px 0 16px; display:flex; gap:18px; font-size:1rem }
.case-card__kpis li{
color:#fff; font-weight:400; background: linear-gradient(95deg, rgba(88,99,248,.23) 0%, rgba(124,77,255,.28) 100%);
border-radius:10px; padding:4px 14px; min-width:90px; text-align:center; box-shadow: 0 1px 4px #7c4dff0d;
}
.case-card__kpis strong{ color:#fff; font-size:1.13rem; font-weight:700 }
.splide__pagination{ display:flex; justify-content:center; gap:14px; margin-top:10px }
.splide__pagination .splide__pagination__page{
background: var(--c-accent); opacity:.36; border:none; width:15px; height:7px; border-radius:7px; transition: opacity .22s;
}
.splide__pagination .splide__pagination__page.is-active{ opacity:1; background: var(--c-accent-3) }
@media (max-width:900px){
.splide__slide{ min-width:90vw; max-width:375px }
.cases.section{ padding:32px 0 60px }
.case-card__body{ padding:20px 14px 14px }
}
/* =======================================================================
6) Banner CTA (full-width)
======================================================================= */
.banner.section{
padding: 55px 0 65px; background: linear-gradient(90deg, #081b35 60%, var(--c-cyan) 120%);
display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 44px -18px var(--c-cyan-weak);
position:relative; overflow:hidden;
}
.banner.section::after{
content:""; position:absolute; inset:0;
background: radial-gradient(ellipse at 80% 10%, #fff2 0%, transparent 55%);
pointer-events:none; opacity:.22;
}
.banner .container{ text-align:center; z-index:2; position:relative }
.banner_content{
color:#fff; font-size: 2.19rem; font-weight: 700; line-height:1.17; margin-bottom:28px; letter-spacing:.03em;
text-shadow: 0 3px 18px #081b3552, 0 1px 1px #0dcaf022;
animation: banner-fadeup 1.1s cubic-bezier(.4,1.19,.33,.98) .09s both;
}
@keyframes banner-fadeup{ 0%{opacity:0;transform:translateY(56px) scale(.94)} 89%{opacity:1} 100%{transform:none} }
.banner_content strong{ color: var(--c-cyan); font-weight:900; letter-spacing:.01em; text-shadow: 0 7px 12px #0dcaf044, 0 1px 0 #fff3 }
@media (max-width:800px){
.banner_content{ font-size:1.24rem }
.banner.section{ padding: 28px 0 36px }
}
/* =======================================================================
7) CTA Premium (two-column text + video)
======================================================================= */
.cta-premium .container{
display:grid; grid-template-columns:1fr minmax(340px,480px); gap:55px; align-items:start;
min-height:420px; padding: 0 6vw;
}
.cta-premium_main{ max-width:690px; z-index:4; margin-top:12px }
.cta-premium_main-title{ font-size:3.25rem; color:#fff; font-weight:950; margin-bottom:18px; line-height:1.10; text-shadow: 0 4px 21px #0dcaf055; }
.features_main-text{ font-size:1.23rem; color:#eaf4fc; text-shadow: 0 2px 7px #7c4dff14; margin-bottom:35px; max-width:88% }
.cta-premium_main-action{ display:flex; gap:22px; margin-top:18px; flex-wrap:wrap }
.cta-premium_media{ display:flex; flex-direction:column; align-items:flex-end; z-index:3; gap:18px }
.cta-premium_media-item--main{ width:99%; background: rgba(13,202,240,.09); border-radius:36px; box-shadow: 0 14px 55px #0dcaf066; overflow:hidden }
.cta-premium_media-item--main video{
width:100%; aspect-ratio:16/10; border-radius:36px; object-fit:cover;
box-shadow: 0 3px 29px #7c4dff33, 0 9px 46px #0dcaf066;
background:#181b25; transition: box-shadow .28s, filter .27s, transform .16s; filter: brightness(1.11) saturate(1.28);
}
.cta-premium_media-item--main video:hover{
box-shadow: 0 18px 110px #0dcaf0df, 0 14px 44px #7c4dff60;
filter: brightness(1.22) saturate(1.4) blur(.1px);
transform: scale(1.03) rotate(-.5deg);
}
.cta-premium_media-item--secondary img{ width:110px; border-radius:15px; box-shadow: 0 2px 16px #7c4dff44, 0 4px 18px #0dcaf044; margin-top:7px; margin-right:13px }
@media (max-width:1000px){
.cta-premium .container{
grid-template-columns:1fr; gap:42px; padding:0 4vw; justify-items:center; align-items:center; text-align:center;
}
.cta-premium_main,.features_main-text,.cta-premium_main-action,.cta-premium_media,.cta-premium_media-item--main{
margin-inline:auto !important; text-align:center; justify-content:center; align-items:center; display:flex; flex-direction:column;
}
}
/* =======================================================================
8) Creative (3D flip cards)
======================================================================= */
.creative.section{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh; padding:4rem 2rem; background:#000; overflow:hidden }
.creative_header{ text-align:center; margin-bottom:4rem }
.creative_title.h1.outlined{
font-size:3.5rem; font-weight:900; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.8); text-stroke:1px rgba(255,255,255,.8);
text-transform:uppercase;
}
.creative_sub{ font-size:1.1rem; color:#c0c0c0; max-width:700px; margin:1rem auto 0 }
.creative_grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4rem; width:100%; max-width:1200px; margin:0 auto }
.creative_card{ width:290px; height:290px; perspective:1000px; background:transparent; justify-self:center; cursor:pointer }
.creative_link{ display:block; width:100%; height:100%; text-decoration:none; color:inherit }
.card_inner{ position:relative; width:100%; height:100%; transition: transform .8s cubic-bezier(.76,0,.24,1); transform-style:preserve-3d }
.card_front,.card_back{
position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:2rem;
}
.card_front{ background: radial-gradient(circle at center, #1a0a4f, #10052e); border:1px solid rgba(187,133,255,.4); box-shadow: 0 0 25px rgba(187,133,255,.5) }
.creative_card-title{ font-weight:700; font-size:1.1rem; color:#e7d2ff; text-shadow: 0 0 5px #9b4dff }
.card_back{ background: radial-gradient(circle at center, #3c178c, #290a65); border:1px solid rgba(209,186,255,.6); box-shadow: 0 0 35px rgba(209,186,255,.6); color:#e7d2ff; transform: rotateY(180deg) }
.creative_card-text{ font-size:.9rem; margin-bottom:1.5rem }
.creative_cta{ font-size:1rem; color:#fff; font-weight:700; text-transform:uppercase; background:#8A4DFF; padding:.6rem 1.2rem; border-radius:25px; box-shadow: 0 0 15px rgba(138,77,255,.8) }
.creative_card.is-flipped .card_inner{ transform: rotateY(180deg) }
@media (hover:hover){ .creative_card:hover .card_inner{ transform: rotateY(180deg) } }
@media (max-width:992px){ .creative_grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){
.creative_grid{ grid-template-columns:1fr }
.creative_title.h1.outlined{ font-size:2.5rem }
}
/* =======================================================================
9) Highlights (Brutalism style on dark/purple theme)
======================================================================= */
:root{
--brutal-dark-bg:#0F0F0F;
--brutal-purple-accent:#6A0DAD;
--brutal-white:#FFFFFF;
--brutal-border-color: var(--brutal-white);
--brutal-border: 3px solid var(--brutal-border-color);
}
.highlights.section{ background:var(--brutal-dark-bg); padding:5rem 1rem; border-top:var(--brutal-border); border-bottom:var(--brutal-border) }
.highlights .container{ display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:center }
.highlights_media{ display:flex; flex-wrap:wrap; gap:2rem; position:relative; align-items:center; justify-content:center }
.highlights_media-item{
border:var(--brutal-border); position:relative; box-shadow: 8px 8px 0 var(--brutal-border-color);
width:250px; transition:none; cursor:grab;
}
.highlights_media-item:active{ cursor:grabbing; box-shadow: 4px 4px 0 var(--brutal-border-color); transform: translate(4px,4px) }
.highlights_media-item img{ width:100%; height:auto; filter: grayscale(100%) contrast(1.2) }
.highlights_media-item:hover img{ filter: grayscale(0%) }
.highlights_main{ text-align:left }
.highlights_main-title{
font-family:'Roboto Mono',monospace; font-size:2.8rem; font-weight:700; line-height:1.2;
color: var(--brutal-dark-bg); background: var(--brutal-purple-accent); padding:.5rem 1rem; display:inline-block; border:var(--brutal-border); margin-bottom:1rem;
}
.highlights_main-subtitle{ font-size:1.5rem; font-weight:700; color:var(--brutal-white); margin-bottom:1.5rem }
.highlights_main-text{ font-size:1rem; line-height:1.7; color:var(--brutal-white); opacity:.9 }
.highlights_main-wrapper{ margin-top:2.5rem; display:flex; gap:1rem }
.highlights .btn{ font-family:'Roboto Mono',monospace; font-weight:700; border:var(--brutal-border); box-shadow:4px 4px 0 var(--brutal-border-color); background:transparent; color:var(--brutal-white) }
.highlights .btn:hover{ transform:translate(4px,4px); box-shadow:none }
.highlights .btn--accent{ background:var(--brutal-purple-accent); color:var(--brutal-white) }
@media (max-width:992px){
.highlights .container{ grid-template-columns:1fr; gap:3rem }
.highlights_main{ text-align:center }
.highlights_main-wrapper{ justify-content:center }
}
/* =======================================================================
10) Standalone Ticker (angled, safe edges)
======================================================================= */
.ticker-body-wrapper{ overflow-x:hidden; position:relative; background:#000; padding:5rem 0 }
.angled-ticker-section{ position:relative; width:100%; height:120px; overflow:hidden }
.ticker-content{
position:absolute; top:50%; left:50%; width: 120vw; background:#e8ff3c;
display:flex; align-items:center; transform: translate(-50%,-50%) rotate(-3deg);
}
.ticker-wrapper{ display:flex; flex-shrink:0; animation: scroll-left 25s linear infinite }
.ticker-item{ color:#000; font-size:1.5rem; font-weight:600; white-space:nowrap; padding:0 40px }
@keyframes scroll-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Also keep the older ticker yellow helper (compat) */
.ticker-section{ overflow:hidden; padding:0; position:relative; width:100% }
.ticker.yellow{
background:#EFFF00; color:#000; padding:25px 0; position:absolute; width:150vw; left:50%;
transform: translateX(-50%) rotate(-3.5deg);
}
/* =======================================================================
11) Final Mosaic (geometric, clip-path)
======================================================================= */
.final-mosaic{ padding:100px 0; background:#000; color:#fff; overflow:hidden; position:relative; z-index:1 }
.final-mosaic__header{ text-align:center; margin-bottom:80px }
.final-mosaic__title{ margin-bottom:15px; color:#fff; -webkit-text-stroke-color:#fff }
.final-mosaic__sub{ font-size:1.25rem; max-width:600px; margin:0 auto 30px; color:#ccc }
.mosaic-stage{ position:relative; width:100%; max-width:1200px; margin:0 auto; padding-top:45%; cursor:pointer }
.mosaic-piece{ position:absolute; top:0; height:100%; overflow:hidden }
.mosaic-piece img,.mosaic-piece video{ width:100%; height:100%; object-fit:cover }
/* Center */
.piece-3{ left:35%; width:30% }
/* Left pair */
.piece-1,.piece-2{ left:0; width:35% }
.piece-1{ clip-path: polygon(0 0, 100% 0, 0 100%) }
.piece-2{ clip-path: polygon(100% 0, 100% 100%, 0 100%) }
/* Right pair */
.piece-4,.piece-5{ left:65%; width:35% }
.piece-4{ clip-path: polygon(0 0, 100% 0, 0 100%) }
.piece-5{ clip-path: polygon(100% 0, 100% 100%, 0 100%) }
@media (max-width:768px){ .mosaic-stage{ padding-top:135% } }
/* =======================================================================
12) Features Media (hover on desktop, touch with .is-touch)
======================================================================= */
.features_media{ position:relative; perspective:800px }
.features_media-item{ transition: transform .35s ease, box-shadow .35s ease; will-change: transform; transform: translate3d(0,0,0) }
@media (min-width:992px){
.features_media:hover .features_media-item:nth-child(1){ transform: translate(-12px,-6px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,.32) }
.features_media:hover .features_media-item:nth-child(2){ transform: translate(10px, 8px) scale(1.05); box-shadow: 0 14px 34px rgba(0,0,0,.36) }
.features_media:hover .features_media-item:nth-child(3){ transform: translate(-6px, 10px) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,.28) }
}
@media (max-width:991.98px){
.features_media.is-touch .features_media-item:nth-child(1){ transform: translate(-10px,-6px) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,.28) }
.features_media.is-touch .features_media-item:nth-child(2){ transform: translate( 12px, 8px) scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,.32) }
.features_media.is-touch .features_media-item:nth-child(3){ transform: translate( -6px,10px) scale(1.02); box-shadow: 0 10px 22px rgba(0,0,0,.26) }
}
/* =======================================================================
13) Mobile Top Control Pack (≤ 1169.97px)
======================================================================= */
@media (max-width:1169.97px){
:root{
--hdr-h: 60px;
--hdr-pad: 12px;
--hero-pt: 50px;
--hero-y: -6px;
--h1-y: -8px;
--h2-y: -4px;
--logos-y: -10px;
--brand-y: -12px;
--hamb-y: 2px;
--logo-y: 8px;
}
.section{ padding-top: var(--section-pt); padding-bottom: var(--section-pb) }
.features,.features_media,.cases,.cards,.grid,.stack{ row-gap: var(--space-2) }
}
/* === متغیرهای اصلی رنگ === */
:root {
--purple-primary: #8A2BE2; /* بنفش اصلی */
--purple-glow: rgba(138, 43, 226, 0.6);
--navy-dark: #0D0E1C; /* پس زمینه اصلی سایت */
--card-bg: rgba(22, 24, 48, 0.45); /* پس زمینه کارتها با شفافیت */
--border-color: rgba(138, 43, 226, 0.25);
--text-primary: #F0F2F5;
--text-secondary: #A8B2C2;
}
/* === استایل کلی بخشها === */
.section {
padding: 80px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* === استایل جدید و جذاب برای تیترها === */
/* === استایل جدید و جذاب برای تیترها (نسخه اصلاح شده و خوانا) === */
.section-title {
font-size: 3.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
/* گرادینت اصلی برای متن */
background: linear-gradient(90deg, #EAD6FF, #C77DFF 50%, #B562FF);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* مهم: اضافه کردن یک سایه تیره و ظریف برای ایجاد لبه و وضوح */
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
/* یک رنگ جایگزین برای مرورگرهای قدیمی */
color: #C77DFF;
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 4rem auto;
line-height: 1.6; /* بهبود فاصله خطوط برای خوانایی بهتر */
}
/* === بازطراحی کارتهای آمار === */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.stat-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
backdrop-filter: blur(12px);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.stat-card:hover {
transform: translateY(-10px);
border-color: rgba(138, 43, 226, 0.8);
box-shadow: 0 20px 40px rgba(138, 43, 226, 0.15);
}
.stat-value {
font-size: 4rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
text-shadow: 0 0 15px var(--purple-glow);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1.125rem;
color: var(--text-secondary);
}
/* === بخش نظرات کاملاً جدید === */
.reviews-layout {
display: grid;
gap: 3rem;
}
.review-card-dynamic {
display: flex;
align-items: center;
gap: 3rem;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(10px);
overflow: hidden;
transition: all 0.4s ease;
}
.review-card-dynamic:hover {
transform: scale(1.03);
border-color: var(--purple-primary);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
.review-image {
flex-shrink: 0;
width: 180px;
height: 240px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.review-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.review-card-dynamic:hover .review-image img {
transform: scale(1.1);
}
.review-content {
flex-grow: 1;
}
.review-text {
font-size: 1.5rem;
font-style: italic;
line-height: 1.6;
color: var(--text-primary);
margin-bottom: 2rem;
position: relative;
padding-left: 2rem;
}
.review-text::before {
content: '“';
position: absolute;
left: -0.5rem;
top: -1rem;
font-size: 4rem;
color: var(--purple-primary);
opacity: 0.5;
font-family: Georgia, serif;
}
.review-author {
text-align: left;
}
.author-name {
display: block;
font-weight: 700;
color: #fff;
font-size: 1.2rem;
}
.author-title {
display: block;
font-size: 1rem;
color: var(--text-secondary);
}
/* چیدمان متناوب برای کارت دوم */
.review-card-dynamic.alt-layout {
flex-direction: row-reverse;
}
.review-card-dynamic.alt-layout .review-text::before {
left: auto;
right: -0.5rem;
content: '”';
}
.review-card-dynamic.alt-layout .review-text {
padding-left: 0;
padding-right: 2rem;
}
/* === کلاسهای انیمیشن اسکرول === */
.reveal-on-scroll {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ایجاد تاخیر برای کارتهای مختلف */
.stat-card:nth-child(2) { transition-delay: 0.1s; }
.stat-card:nth-child(3) { transition-delay: 0.2s; }
.review-card-dynamic:nth-child(2) { transition-delay: 0.15s; }
.review-card-dynamic:nth-child(3) { transition-delay: 0.25s; }
/* === طراحی واکنشگرا (Responsive) === */
@media (max-width: 992px) {
.section-title { font-size: 3rem; }
.review-card-dynamic { flex-direction: column; text-align: center; }
.review-card-dynamic.alt-layout { flex-direction: column; }
.review-author { text-align: center; }
.review-text { padding: 0; margin-top: 1.5rem; }
.review-text::before { display: none; }
}
@media (max-width: 768px) {
.section-title { font-size: 2.5rem; } .section-title { font-size: 2.5rem; }
.stats-grid { grid-template-columns: 1fr; }
.review-image { width: 150px; height: 150px; border-radius: 50%; }
.review-text { font-size: 1.2rem; }
}
/* اندازه دوخطی داخل همان H1 */
.hero-title{ margin:0; text-align:center; }
.hero-title .big{
display:block; line-height:.9;
font-size:clamp(50px,6vw,140px) !important; font-weight:900;
}
.hero-title .small{
display:block; line-height:1;
font-size:clamp(22px,4vw,48px) !important; font-weight:500;
margin-top:6px;
}
/* H2 زیرعنوان */
.hero-sub{
margin-top:12px; text-align:center;
font-size:clamp(12px,1.8vw,16px); letter-spacing:.1em; text-transform:uppercase;
}
/* فاصله و جابهجایی خطهای H1 */
/* ===== HERO H1 Sizing (no-break desktop) ===== */
:root{
/* سایز خط اول (بزرگ) */
--h1-big-min: 36px;
--h1-big-vw: 9vw;
--h1-big-max: 120px;
--h1-big-line: 0.9;
/* سایز خط دوم (کوچکتر) */
--h1-small-min: 20px;
--h1-small-vw: 4.2vw;
--h1-small-max: 56px;
--h1-small-line: 1.05;
/* فاصله بین دو خط */
--h1-gap: 12px;
}
.hero-title{ margin:0; text-align:center; }
/* خط اول: بزرگ */
.hero-title .big{
display:block;
font-weight: 900;
font-size: clamp(var(--h1-big-min), var(--h1-big-vw), var(--h1-big-max)) !important;
line-height: var(--h1-big-line) !important;
letter-spacing: -0.02em;
margin-bottom: var(--h1-gap) !important;
white-space: nowrap; /* دسکتاپ: نشکنه */
}
/* خط دوم: کوچکتر */
.hero-title .small{
display:block;
font-weight: 700;
font-size: clamp(var(--h1-small-min), var(--h1-small-vw), var(--h1-small-max)) !important;
line-height: var(--h1-small-line) !important;
letter-spacing: -0.01em;
white-space: nowrap; /* دسکتاپ: نشکنه */
margin-top: 0 !important;
}
/* موبایل: اجازهی شکست بالانسشده برای هر دو خط */
@media (max-width: 900px){
.hero-title .big,
.hero-title .small{
white-space: normal;
text-wrap: balance;
overflow-wrap: anywhere;
}
}
/* احترام به کاهش موشن کاربر */
@media (prefers-reduced-motion: reduce) {
.blur-reveal, .alt-blur-a, .alt-blur-b { animation: none !important; filter: none !important; opacity: 1 !important; }
}
/* ---------- تنظیمات سریع ---------- */
:root{
/* شدت محو */
--blur-max: 10px; /* بیشتر = محوتر */
/* سرعتها */
--reveal-dur: 1.8s; /* یکبار محو→واضح (بزرگتر = آرومتر) */
--pulse-dur: 6s; /* لوپ آلترنیت (بزرگتر = آرومتر) */
/* تاخیرها برای استیج کردن */
--reveal-delay-h1: .10s;
--reveal-delay-h2: .35s;
}
/* بهبود رندر متن */
.hero-title, .hero-sub{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
will-change: filter, opacity;
}
/* ---------- 1) یکبار محو→واضح ---------- */
/* احترام به کاهش موشن */
@media (prefers-reduced-motion: reduce){
.hero-title, .hero-sub { animation: none !important; filter: none !important; opacity: 1 !important; }
}
/* ---------- تنظیمات سریع ---------- */
:root{
--blur-max: 10px; /* شدت محو (بیشتر = محوتر) */
--cycle: 12s; /* مدت چرخه کامل (بیشتر = آهستهتر)؛ دقیقاً 6 فاز = هر فاز 2s */
--ease: ease-in-out; /* نوع ease */
--clear-op: 1; /* شفافیت وقتی واضحه */
--blur-op: .85; /* شفافیت وقتی محوه */
}
/* هر دو متن با رندر نرمتر */
.hero-title, .hero-sub{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
will-change: filter, opacity;
}
/* H1 = مسیر A (از محو → واضح → محو) */
.hero-title{
animation: A var(--cycle) var(--ease) infinite;
}
/* H2 = مسیر B (دقیقاً مکمل A) */
.hero-sub{
animation: B var(--cycle) var(--ease) infinite;
}
/* ====== 6 فاز با درصدهای دقیق (هر فاز = 16.6667%) ======
فازها: 0% | 16.6667% | 33.3333% | 50% | 66.6667% | 83.3333% | 100%
A وقتی محوه، B واضحه و برعکس.
*/
/* A: محو→محو→واضح→واضح→محو→محو→(لوپ) */
@keyframes A{
0% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
16.6667% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
33.3333% { filter: blur(0); opacity: var(--clear-op); }
50% { filter: blur(0); opacity: var(--clear-op); }
66.6667% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
83.3333% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
100% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
}
/* B: واضح→واضح→محو→محو→واضح→واضح→(لوپ) */
@keyframes B{
0% { filter: blur(0); opacity: var(--clear-op); }
16.6667% { filter: blur(0); opacity: var(--clear-op); }
33.3333% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
50% { filter: blur(var(--blur-max)); opacity: var(--blur-op); }
66.6667% { filter: blur(0); opacity: var(--clear-op); }
83.3333% { filter: blur(0); opacity: var(--clear-op); }
100% { filter: blur(0); opacity: var(--clear-op); }
}
.hero-cta-circle {
background: linear-gradient(90deg, #9B5BFF 0%, #7A3BFF 100%) !important;
color: #fff !important;
}
/* Creative title: smaller + subtle outline */
#creative .creative_title{
font-size: clamp(1.4rem, 2.4vw + 0.2rem, 2.8rem) !important; /* کوچیکتر از قبل */
line-height: 1.15 !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
color: transparent !important;
-webkit-text-stroke: 1.5px rgba(255,255,255,0.9) !important; /* نازکتر */
text-stroke: 1.5px rgba(255,255,255,0.9) !important;
margin-bottom: 0.6rem !important;
}
/* even smaller on mobile */
@media (max-width: 768px){
#creative .creative_title{
font-size: clamp(1.2rem, 4.4vw + 0.2rem, 2rem) !important;
-webkit-text-stroke: 1.2px rgba(255,255,255,0.9) !important;
text-stroke: 1.2px rgba(255,255,255,0.9) !important;
}
}
/* sub text a tad smaller to match */
#creative .creative_sub{
font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.05rem) !important;
line-height: 1.55 !important;
margin-top: 0.3rem !important;
}
/* Creative title – nur Farbe, kein weißer Stroke */
#creative .creative_title {
font-size: clamp(1.4rem, 2vw + 0.5rem, 2.6rem) !important;
line-height: 1.2 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
/* رنگ مستقیم متن */
color: #9B5BFF !important;
/* حذف کامل استروک */
-webkit-text-stroke: 0 !important;
text-stroke: 0 !important;
/* افکت Glow بنفش */
text-shadow:
0 0 12px rgba(155, 91, 255, 0.6),
0 0 24px rgba(155, 91, 255, 0.35) !important;
margin-bottom: 0.8rem !important;
text-align: center !important;
}
/* متن زیر عنوان */
#creative .creative_sub {
font-size: clamp(0.95rem, 0.6vw + 0.7rem, 1.1rem) !important;
line-height: 1.55 !important;
color: rgba(240,240,247,0.9) !important;
text-align: center !important;
max-width: 880px !important;
margin: 0.5rem auto 2rem !important;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* --- DFX Case Studies Section --- */
/* ===================== du first — CASES (Swiper) ===================== */
/* رنگها و توکنها */
:root{
--dfx-bg: #0f1117;
--dfx-text: #ffffff;
--dfx-text-muted: #b0b8c4;
--dfx-border: #1b2230;
--dfx-shadow: 0 10px 25px rgba(0,0,0,.35);
--dfx-radius: 16px;
/* گرادینت پیشفرض بدنه کارت (بنفش/آبی برند) */
--dfx-body-grad: linear-gradient(135deg, #6d37ff 0%, #3aa3ff 100%);
--dfx-body-glow: 0 12px 40px rgba(61, 119, 255, .35);
/* گرادینتهای انتخابی برای تنوع (اختیاری با کلاسهای مادیفایر) */
--g-seo: linear-gradient(135deg, #0bbd87 0%, #00a3ff 100%);
--g-ads: linear-gradient(135deg, #ff5d6c 0%, #ff944d 100%);
--g-brand: linear-gradient(135deg, #0d0d0d 0%, #3a3a3a 100%);
--g-ai: linear-gradient(135deg, #8a2be2 0%, #00e0ff 100%);
--g-yt: linear-gradient(135deg, #ff0033 0%, #ff6a00 100%);
}
/* 1) Header */
.dfx-cases__header{
text-align:center;
max-width:750px;
margin:0 auto 50px auto;
}
.dfx-cases__title{
font-size:2.5rem;
font-weight:700;
color:var(--dfx-text);
line-height:1.2;
margin:0 0 1rem 0;
text-wrap:balance;
}
.dfx-cases__subtitle{
font-size:1.1rem;
color:var(--dfx-text-muted);
line-height:1.6;
}
/* 2) Carousel Container */
.dfx-cases .dfx-carousel{
width:100%;
padding-top: 10px;
padding-bottom:80px;
/* overflow:hidden; درصورت نیاز به حذف اسکرول افقی موبایل */
}
/* 3) Slide/Card */
.dfx-cases .swiper-slide.dfx-card{
width:320px;
height:auto;
transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .45s ease;
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004);
will-change: transform, opacity;
border-radius: var(--dfx-radius);
overflow: hidden; /* برای اتصال نرم تصویر و بدنه */
background: #0c0f16; /* فیلر پشت تصویر در لود */
box-shadow: var(--dfx-shadow);
border:1px solid var(--dfx-border);
display:block;
}
/* تصویر کارت */
.dfx-cases .dfx-card__media img{
display:block;
width:100%;
height:auto;
aspect-ratio: 16/10;
object-fit: cover;
}
/* 4) بدنهٔ کارت (رنگی + حس 3D) */
.dfx-cases .dfx-card__body{
position: relative;
padding: 16px 16px 18px 16px;
background: var(--dfx-body-grad);
color:#fff;
border-top: 1px solid rgba(255,255,255,.08);
box-shadow: var(--dfx-body-glow) inset, 0 1px 0 rgba(255,255,255,.08) inset;
/* شیشهای ملایم؛ اگر سازگاری کامل میخواهی میتوانی حذف کنی */
backdrop-filter: saturate(120%) blur(6px);
}
/* نوار هایلایت کوچک بالا برای حس لایه */
.dfx-cases .dfx-card__body::before{
content:"";
position:absolute;
top:0; left:0; right:0;
height:3px;
background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
opacity:.55;
}
/* عنوان */
.dfx-cases .dfx-card__title{
font-size:1.05rem;
font-weight:700;
line-height:1.35;
margin: 2px 0 10px 0;
letter-spacing:.2px;
}
/* KPI ها */
.dfx-cases .dfx-card__kpis{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:0 0 10px 0;
padding:0;
list-style:none;
}
.dfx-cases .dfx-card__kpis li{
font-size:.86rem;
line-height:1;
padding:8px 10px;
border-radius:12px;
border:1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.08);
backdrop-filter: blur(4px);
white-space:nowrap;
}
/* CTA */
.dfx-cases .dfx-card__cta{
display:inline-block;
margin-top:2px;
font-size:.92rem;
font-weight:600;
letter-spacing:.2px;
padding:10px 12px;
border-radius:12px;
background: rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.22);
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
box-shadow: 0 6px 18px rgba(0,0,0,.25) inset;
}
/* لینک کارت کل مساحت را کلیکپذیر کند */
.dfx-cases .dfx-card__link{
display:block;
text-decoration:none;
color:inherit;
}
/* Hover/Focus تعاملات */
.dfx-cases .dfx-card:hover{
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.dfx-cases .dfx-card:hover .dfx-card__cta{
transform: translateY(-2px);
background: rgba(0,0,0,.28);
box-shadow: 0 10px 22px rgba(0,0,0,.35) inset, 0 8px 20px rgba(61, 119, 255, .25);
}
/* 5) Pagination */
.dfx-cases .swiper-pagination-bullet{
background-color:#fff;
opacity:.7;
width:10px; height:10px;
transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}
.dfx-cases .swiper-pagination-bullet-active{
background-color:#00aaff;
opacity:1;
transform: scale(1.28);
}
/* 6) مادیفایرهای رنگی بدنه (اختیاری: به article کلاس اضافه کن) */
.dfx-cases .dfx-card.is-seo .dfx-card__body{ background: var(--g-seo); }
.dfx-cases .dfx-card.is-ads .dfx-card__body{ background: var(--g-ads); }
.dfx-cases .dfx-card.is-brand .dfx-card__body{ background: var(--g-brand); }
.dfx-cases .dfx-card.is-ai .dfx-card__body{ background: var(--g-ai); }
.dfx-cases .dfx-card.is-yt .dfx-card__body{ background: var(--g-yt); }
/* 7) ریسپانسیو */
@media (max-width: 992px){
.dfx-cases .swiper-slide.dfx-card{ width:300px; }
}
@media (max-width: 768px){
.dfx-cases__title{ font-size:2rem; }
.dfx-cases__subtitle{ font-size:1rem; }
.dfx-cases .swiper-slide.dfx-card{ width:280px; }
}
@media (max-width: 420px){
.dfx-cases .swiper-slide.dfx-card{ width:260px; }
.dfx-cases .dfx-card__title{ font-size:1rem; }
.dfx-cases .dfx-card__kpis li{ font-size:.8rem; }
}
/* 8) Prefers-reduced-motion احترام به دسترسی */
@media (prefers-reduced-motion: reduce){
.dfx-cases .swiper-slide.dfx-card,
.dfx-cases .dfx-card__cta{
transition: none !important;
}
}
/* ===== Cases — spacing + typography overrides ===== */
:root{
/* اگر قبلاً داری، همینها را نگه دار */
--dfx-heading-font: "Space Grotesk", "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--dfx-body-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.dfx-cases{
/* سکشن کمی پایینتر بیاد */
padding-top: 72px; /* قبلاً 10px بود؛ شد 72px */
padding-bottom: 90px; /* فاصله تا سکشن بعدی */
}
.dfx-cases__header{
margin: 0 auto 48px auto; /* فاصله منطقی تا کاروسل */
max-width: 920px; /* تیتر و زیرتیتر بازتر تنفس کنن */
}
/* تیتر اصلی */
.dfx-cases__title{
font-family: var(--dfx-heading-font);
font-weight: 800;
font-size: clamp(2.2rem, 4vw, 3rem); /* ریسپانسیو تمیز */
line-height: 1.12;
letter-spacing: .2px;
margin: 0 0 14px 0;
text-transform: uppercase; /* هماستایل با بقیهی سایت */
text-wrap: balance;
}
/* زیرتیتر */
.dfx-cases__subtitle{
font-family: var(--dfx-body-font);
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
line-height: 1.7;
color: var(--dfx-text-muted);
max-width: 820px;
margin: 0 auto;
text-wrap: balance;
}
/* فاصلهی بیشتر از خط جداکنندهی بالای سکشن (اگر داری) */
.dfx-cases .dfx-divider-top{ margin-bottom: 28px; }
/* موبایل کمی جمعوجورتر */
@media (max-width: 768px){
.dfx-cases{ padding-top: 56px; padding-bottom: 80px; }
.dfx-cases__header{ margin-bottom: 40px; }
}
/* کمک به محاسبهٔ صحیح عرضها */
.dfx-cases .swiper { overflow: visible; }
.dfx-cases .swiper-wrapper { align-items: stretch; }
/* فقط اگر هنوز گیر داشت: اثر hover را روی کارت کمی ملایمتر کن که با Coverflow تداخل نکند */
/*
.dfx-cases .dfx-card:hover { transform: translateY(-4px) scale(1.01); }
*/
/* قبلی که روی خود اسلاید transform میداد را حذف/غیرفعال کن */
.dfx-cases .dfx-card:hover{
/* transform: translateY(-6px) scale(1.02); <- بردار */
box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
/* به لینک داخلی افکت بده، نه خود اسلاید */
.dfx-cases .dfx-card__link{
display:block;
transform: translateZ(0); /* برای GPU compositing */
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
/* حالا هنگام هاور روی کارت، فقط محتوای داخلی حرکت کند */
.dfx-cases .swiper-slide.dfx-card:hover .dfx-card__link{
transform: translateY(-6px) scale(1.02);
}
/* CTA هم مثل قبل */
.dfx-cases .dfx-card:hover .dfx-card__cta{
transform: translateY(-2px);
background: rgba(0,0,0,.28);
box-shadow: 0 10px 22px rgba(0,0,0,.35) inset, 0 8px 20px rgba(61, 119, 255, .25);
}
/* بذار Swiper مالک transform اسلاید بماند */
.dfx-cases .swiper-slide.dfx-card{
transform: translateZ(0); /* فقط لایهسازی؛ نه حرکت دستی */
}
/* کارت را ستونکن تا تصویر بالا و بدنه همیشه کف بچسبد */
.dfx-cases .swiper-slide.dfx-card{
display: flex;
flex-direction: column;
background: transparent; /* تا بدنهٔ آبی دیده شود */
}
/* تصویر با نسبت ثابت */
.dfx-cases .dfx-card__media{
flex: 0 0 auto;
}
.dfx-cases .dfx-card__media img{
display:block;
width:100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-top-left-radius: var(--dfx-radius);
border-top-right-radius: var(--dfx-radius);
}
/* بدنه همیشه یکتکه و آبی با گوشهٔ پایین گرد */
.dfx-cases .dfx-card__body{
flex: 1 1 auto;
min-height: 150px; /* اگر کم بود، 160–180 تست کن */
background: var(--dfx-body-grad);
border-bottom-left-radius: var(--dfx-radius);
border-bottom-right-radius: var(--dfx-radius);
background-clip: padding-box;
isolation: isolate; /* سایههای داخلی تمیزتر */
}
/* اگر کارتهای خاص گرادیان اختصاصی دارند، همین رادیوس را نگهدار */
.dfx-cases .dfx-card.is-seo .dfx-card__body,
.dfx-cases .dfx-card.is-ads .dfx-card__body,
.dfx-cases .dfx-card.is-brand .dfx-card__body,
.dfx-cases .dfx-card.is-ai .dfx-card__body,
.dfx-cases .dfx-card.is-yt .dfx-card__body{
border-bottom-left-radius: var(--dfx-radius);
border-bottom-right-radius: var(--dfx-radius);
}
/* بازتاب عمیقتر با فاصلهی 10px */
.dfx-cases .swiper-slide.dfx-card{
-webkit-box-reflect: below 10px
linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,.18) 70%,
rgba(0,0,0,.45) 100%
);
}
/* کمی فاصله تا کف سکشن تا آینه جا داشته باشد */
.dfx-cases .dfx-carousel{
padding-bottom: 110px; /* قبلاً 80px؛ اگر زیاد شد 100 تست کن */
}
/* برای محاسبه صحیح در حالت slidesPerView:auto */
.dfx-cases .swiper{ overflow: visible; }
.dfx-cases .swiper-wrapper{ align-items: stretch; }
/* === FIX: بدنه همیشه تا کف کارت پر شود و یکتکه آبی بماند === */
/* 1) کل کارت داخل یک لینکِ فلکسی؛ خودش ارتفاع کارت را پر کند */
.dfx-cases .dfx-card__link{
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--dfx-radius);
overflow: hidden; /* گوشهها تمیز */
background: transparent !important;
}
/* 2) تصویر همیشه بالا، بدون فاصلهی اضافه */
.dfx-cases .dfx-card__media{
flex: 0 0 auto;
margin: 0;
}
.dfx-cases .dfx-card__media img{
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
/* 3) بدنه آبی، کشسان تا کف */
.dfx-cases .dfx-card__body{
flex: 1 1 auto; /* این خط مهمه */
min-height: 170px; /* اگر هنوز کوتاه بود 180–190 کن */
margin: 0;
background: var(--dfx-body-grad);
border-top: 0; /* نوار تیره بین تصویر و بدنه را حذف کن */
border-bottom-left-radius: var(--dfx-radius);
border-bottom-right-radius: var(--dfx-radius);
background-clip: padding-box;
box-shadow: var(--dfx-body-glow) inset;
}
/* 4) خود اسلاید هیچ پسزمینهای نداشته باشد */
.dfx-cases .swiper-slide.dfx-card{
display: block; /* اجازه بده لینک داخلی فلکس مدیریت کند */
background: transparent !important;
border: 1px solid var(--dfx-border);
border-radius: var(--dfx-radius);
overflow: visible;
}
/* 5) رفلکشن عمیقتر (اختیاری) */
.dfx-cases .swiper-slide.dfx-card{
-webkit-box-reflect: below 12px
linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.4) 100%);
}
/* جا برای آینه */
.dfx-cases .dfx-carousel{ padding-bottom: 110px; }
/* 6) جلوگیری از تداخل hover با ترنسفورم Swiper */
.dfx-cases .dfx-card:hover{ box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.dfx-cases .dfx-card__link{
transform: translateZ(0);
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.dfx-cases .swiper-slide.dfx-card:hover .dfx-card__link{
transform: translateY(-6px) scale(1.02);
}
/* کمک به محاسبه در slidesPerView:auto */
.dfx-cases .swiper{ overflow: visible; }
.dfx-cases .swiper-wrapper{ align-items: stretch; }
/* ===================================== */
/* === DF STATS SECTION - COMPLETE STYLES === */
/* ===================================== */
/* Base Section Container Styling */
.df-stats-section {
background-color: #0d0d1a; /* Dark background for the entire section */
color: #f0f0f0; /* Default light text color */
padding: 100px 0; /* Generous vertical padding */
text-align: center; /* Center align all content */
position: relative;
overflow: hidden; /* Important for containing animations */
/* Add a subtle background pattern or gradient for depth */
background: linear-gradient(180deg, #0d0d1a 0%, #1a0a33 100%);
}
.df-stats-section::before {
content: '';
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background: radial-gradient(circle at 10% 20%, rgba(167, 139, 250, 0.05) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(224, 242, 254, 0.05) 0%, transparent 40%);
opacity: 0.8;
pointer-events: none;
z-index: 0;
}
/* Inner Container for Max Width */
.df-stats-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative; /* Ensure content is above pseudo-elements */
z-index: 1;
}
/* Section Title Styling: "Zufriedene Kund:innen" */
.df-stats-title {
font-family: 'Poppins', sans-serif; /* A strong, modern font */
font-size: 4.2em; /* Extra large and impactful */
font-weight: 800; /* Super bold */
color: #a78bfa; /* Vibrant purple - a key brand color */
margin-bottom: 25px; /* Space below title */
line-height: 1.1; /* Tighter line height */
letter-spacing: -0.05em; /* Tighter letter spacing for impact */
text-transform: uppercase; /* All caps for emphasis */
text-shadow: 0 8px 25px rgba(167, 139, 250, 0.4), 0 0 10px rgba(255, 255, 255, 0.15); /* More prominent glow/shadow */
opacity: 0; /* Start hidden for animation */
animation: dfTextFadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Custom easing for animation */
}
/* Section Subtitle Styling: "Unsere Arbeit wird messbar geschätzt..." */
.df-stats-subtitle {
font-family: 'Poppins', sans-serif; /* Consistent font */
font-size: 1.6em; /* Readable yet significant */
font-weight: 400; /* Regular weight for clarity */
color: #c9c9d9; /* Light grey for contrast and elegance */
margin-bottom: 70px; /* More space below subtitle to separate from cards */
max-width: 800px; /* Control line length for readability */
margin-left: auto;
margin-right: auto;
line-height: 1.8; /* Generous line height for comfort */
letter-spacing: 0.02em; /* Slight letter spacing */
opacity: 0; /* Start hidden for animation */
animation: dfTextFadeIn 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Custom easing for animation */
animation-delay: 0.3s; /* Delay slightly after title animation */
}
/* Stats Grid Layout */
.df-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid columns */
gap: 40px; /* Increased gap between cards */
justify-content: center;
align-items: flex-start;
}
/* Stat Card Styling */
.df-stat-card {
background: linear-gradient(145deg, #1f104d 0%, #0a041f 100%); /* Deep gradient for cards */
border-radius: 25px; /* More rounded corners */
padding: 50px 30px; /* More padding inside cards */
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(167, 139, 250, 0.2); /* Stronger shadow with subtle border */
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 250px; /* Minimum height for consistent card size */
opacity: 0; /* Start hidden for animation */
animation: dfCardFadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Card animation */
}
/* Individual card animation delays */
.df-stat-card:nth-child(1) { animation-delay: 0.5s; }
.df-stat-card:nth-child(2) { animation-delay: 0.7s; }
.df-stat-card:nth-child(3) { animation-delay: 0.9s; }
/* Card hover effect */
.df-stat-card:hover {
transform: translateY(-15px) scale(1.04); /* Lift and slightly enlarge more on hover */
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 3px #d8b4fe; /* More prominent shadow and purple border */
}
/* Stat Value (The big number) */
.df-stat-value {
font-family: 'Poppins', sans-serif;
font-size: 6em; /* Even larger number */
font-weight: 900; /* Ultra bold */
color: #e0f2fe; /* Light blue for numbers */
margin-bottom: 15px;
line-height: 1;
position: relative;
z-index: 2;
text-shadow: 0 0 20px rgba(167, 139, 250, 0.6), 0 0 40px rgba(224, 242, 254, 0.3); /* Enhanced glow effect */
}
/* Stat Label (Description below the number) */
.df-stat-label {
font-family: 'Poppins', sans-serif;
font-size: 1.25em; /* Slightly larger label */
color: #b0b0cc;
font-weight: 500;
line-height: 1.5;
max-width: 220px; /* Slightly increased max-width */
text-align: center;
position: relative;
z-index: 2;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.df-stats-section {
padding: 80px 0;
}
.df-stats-title {
font-size: 3.5em;
margin-bottom: 20px;
}
.df-stats-subtitle {
font-size: 1.4em;
margin-bottom: 50px;
max-width: 700px;
}
.df-stats-grid {
gap: 30px;
}
.df-stat-card {
padding: 40px 25px;
min-height: 220px;
}
.df-stat-value {
font-size: 5em;
}
.df-stat-label {
font-size: 1.1em;
}
}
@media (max-width: 768px) {
.df-stats-section {
padding: 60px 0;
}
.df-stats-title {
font-size: 2.8em;
letter-spacing: -0.03em;
}
.df-stats-subtitle {
font-size: 1.2em;
margin-bottom: 40px;
max-width: 90%;
}
.df-stats-grid {
grid-template-columns: 1fr; /* Stack cards on small screens */
}
.df-stat-card {
min-height: auto; /* Allow height to adjust */
}
.df-stat-value {
font-size: 4em;
}
.df-stat-label {
font-size: 1em;
}
}
@media (max-width: 480px) {
.df-stats-section {
padding: 40px 0;
}
.df-stats-container {
padding: 0 15px;
}
.df-stats-title {
font-size: 2.2em;
margin-bottom: 15px;
}
.df-stats-subtitle {
font-size: 1em;
margin-bottom: 30px;
}
.df-stat-card {
padding: 30px 20px;
}
.df-stat-value {
font-size: 3.5em;
}
.df-stat-label {
font-size: 0.9em;
}
}
/* Keyframe Animations */
@keyframes dfTextFadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dfTextFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dfCardFadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Reviews – ساده، وسطچین، بدون پشت کارت ===== */
#dfx-reviews .dfx-reviews__swiper{max-width: 900px; margin: 0 auto; padding: 12px 12px 56px;}
#dfx-reviews .swiper-slide{display:flex; justify-content:center; width: min(760px, 92vw);}
.dfx-review__card{
position: relative; width:100%; height:520px; border-radius:24px;
background: linear-gradient(145deg,#1a1038,#0a041f);
box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(167,139,250,.15);
overflow:hidden;
}
/* مدیا: ویدئو تمامکارت */
.dfx-review__media{position:absolute; inset:0; z-index:0}
.dfx-review__video{width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:.9}
/* اوورلی برای خوانایی متن */
.dfx-review__card::after{
content:""; position:absolute; inset:0; z-index:1;
background: linear-gradient(180deg, rgba(3,4,10,0.15) 0%, rgba(5,6,12,0.48) 60%, rgba(5,6,12,0.68) 100%);
}
/* محتوا: دقیقاً وسط کارت */
.dfx-review__content{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; padding:28px; text-align:center;
}
/* متن تایپ: ضخیم و خوانا */
.dfx-review__quote{
font:600 22px/1.45 Inter,system-ui; color:#e6f0ff;
text-shadow:0 6px 20px rgba(0,0,0,.35);
}
.dfx-cursor{display:inline-block; margin-left:2px; opacity:.9; animation: blink 1s steps(1,end) infinite;}
@keyframes blink{50%{opacity:0;}}
.dfx-review__meta{margin-top:6px; color:#cbd5e1; display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.dfx-badges{margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.dfx-badge{padding:6px 10px; font:500 12px/1 Inter,system-ui; color:#eaeaff; border:1px solid rgba(167,139,250,.35); border-radius:999px; background:rgba(13,13,26,.45); backdrop-filter:blur(6px)}
/* ناوبری */
.dfx-nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:999px;
border:1px solid rgba(167,139,250,.35); background:rgba(13,13,26,.55); z-index:3; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.dfx-prev{left:10px} .dfx-next{right:10px}
/* تیترها بالا */
.dfx-reviews__title{margin-bottom:6px}
.dfx-reviews__subtitle{margin-bottom:18px}
/* رسپانسیو */
@media (max-width: 992px){ .dfx-review__card{height:500px} }
@media (max-width: 768px){
#dfx-reviews .swiper-slide{ width: min(640px, 94vw); }
.dfx-review__card{height:480px}
}
@media (max-width: 520px){
#dfx-reviews .swiper-slide{ width: min(480px, 96vw); }
.dfx-review__card{height:440px}
.dfx-review__quote{font-size:20px}
}
/* === CLEAN HEADINGS for #dfx-reviews (reset pills) === */
#dfx-reviews .dfx-reviews__container{
position: relative; z-index: 5; text-align: center;
max-width: 1100px; margin: 0 auto;
padding-top: 8px;
}
/* ریست کامل استایلهای قبلی */
#dfx-reviews .dfx-reviews__title,
#dfx-reviews .dfx-reviews__subtitle{
background: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: block !important;
}
/* تیتر: سفید، تمیز، بدون قاب */
#dfx-reviews .dfx-reviews__title{
color: #fff !important;
font-weight: 800 !important;
letter-spacing: .2px !important;
margin: 0 auto 12px !important;
text-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
line-height: 1.2 !important;
width: fit-content;
position: relative;
}
/* خطِ تاکید زیر تیتر */
#dfx-reviews .dfx-reviews__title::after{
content: "";
position: absolute; left: 50%; transform: translateX(-50%);
bottom: -8px;
width: clamp(84px, 14vw, 180px);
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg,#8b5cf6, #7c3aed 60%, rgba(124,58,237,0));
box-shadow: 0 0 14px rgba(124,58,237,.6);
}
/* زیرتیتر: متن ساده، بدون قاب/پسزمینه */
#dfx-reviews .dfx-reviews__subtitle{
color: #e6f0ff !important;
opacity: .95 !important;
font-weight: 500 !important;
margin: 18px auto 0 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}
/* فاصله تا اسلایدر */
#dfx-reviews .dfx-reviews__swiper{ margin-top: 20px !important; }
/* موبایل */
@media (max-width: 540px){
#dfx-reviews .dfx-reviews__title{ font-size: 22px !important; }
#dfx-reviews .dfx-reviews__title::after{ height: 3px; bottom: -6px; }
#dfx-reviews .dfx-reviews__subtitle{ font-size: 14px !important; }
}
/* === Compact mode for Reviews cards (only sizing/spacing) === */
#dfx-reviews .dfx-reviews__swiper{ margin-top:16px !important; padding-bottom:32px !important; }
.dfx-review__card{
height: 380px !important; /* قبلاً ~520px بود */
border-radius: 18px !important;
}
.dfx-review__content{ padding: 20px !important; gap: 10px !important; }
.dfx-review__quote{ font-size: 19px !important; line-height: 1.4 !important; }
.dfx-review__meta{ font-size: 13.5px !important; }
.dfx-badge{ font-size: 11px !important; padding: 5px 8px !important; }
/* کمی کوچکتر کردن دکمههای ناوبری */
#dfx-reviews .dfx-nav{ width:34px !important; height:34px !important; }
/* فاصله تیتر و زیرتیتر جمعتر */
#dfx-reviews .dfx-reviews__title{ margin-bottom: 8px !important; }
#dfx-reviews .dfx-reviews__subtitle{ margin-top: 12px !important; }
/* ریسپانسیو: باز هم کوتاهتر روی نمایشگر کوچکتر */
@media (max-width: 1200px){
.dfx-review__card{ height: 360px !important; }
}
@media (max-width: 992px){
.dfx-review__card{ height: 340px !important; }
}
@media (max-width: 560px){
.dfx-review__card{ height: 320px !important; }
.dfx-review__quote{ font-size: 18px !important; }
}
/* === Du First Brands Section === */
.brands-section.dark {
background-color: #081b35;
padding: 120px 0 100px 0;
position: relative;
overflow: visible;
}
.brands-container {
max-width: 1400px;
margin: 0 auto;
text-align: center;
}
.brands-title {
color: #0dcaf0;
font-size: 2.2rem;
letter-spacing: 1.5px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 60px;
font-family: 'Poppins', sans-serif;
}
.brand-marquee {
position: relative;
overflow: hidden;
width: 100%;
min-height: 220px;
display: flex;
align-items: center;
padding: 40px 0;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: 100px;
animation: scrollLoop 50s linear infinite;
}
/* حالت عادی: رنگی و عادی */
.brand-logo {
height: 95px;
max-width: 210px;
width: auto;
display: block;
margin: 0 auto;
opacity: 0.8;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: brightness(1);
-webkit-filter: brightness(1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
}
/* انیمیشن اسکرول */
@keyframes scrollLoop {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* Responsive */
@media (max-width: 900px) {
.brands-section.dark {
padding: 70px 0 50px 0;
}
.brands-title {
font-size: 1.4rem;
margin-bottom: 35px;
}
.brand-marquee {
min-height: 160px;
padding: 30px 0;
}
.marquee-track {
gap: 60px;
animation-duration: 35s;
}
.brand-logo {
height: 50px;
}
.brand-logo:hover {
transform: translateY(-10px) scale(1.06);
}
}
/* ===== Legal Pages - Simple & Minimal ===== */
.legal-page {
padding: 120px 0 80px;
background: #ffffff;
}
.legal-page .container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography */
.legal-page h1 {
font-size: 2.5rem;
color: #1a1a1a;
margin-bottom: 10px;
font-weight: 700;
line-height: 1.2;
}
.legal-page .lead {
font-size: 1rem;
color: #666;
margin-bottom: 50px;
font-weight: 400;
}
.legal-page h2 {
font-size: 1.6rem;
color: #1a1a1a;
margin: 50px 0 20px;
font-weight: 600;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.legal-page h2:first-of-type {
border-top: none;
padding-top: 0;
}
.legal-page h3 {
font-size: 1.25rem;
color: #2a2a2a;
margin: 30px 0 15px;
font-weight: 600;
}
.legal-page h4 {
font-size: 1.1rem;
color: #333;
margin: 25px 0 12px;
font-weight: 600;
}
/* Content */
.legal-page p {
font-size: 1rem;
line-height: 1.8;
color: #444;
margin-bottom: 20px;
}
.legal-page ul,
.legal-page ol {
font-size: 1rem;
line-height: 1.8;
color: #444;
margin: 20px 0 20px 25px;
padding-left: 0;
}
.legal-page li {
margin-bottom: 10px;
}
.legal-page address {
font-style: normal;
line-height: 1.8;
color: #444;
margin: 20px 0;
padding-left: 0;
}
.legal-page strong {
color: #1a1a1a;
font-weight: 600;
}
/* Links */
.legal-page a {
color: #0dcaf0;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.legal-page a:hover {
border-bottom-color: #0dcaf0;
}
/* Sections */
.legal-page section {
margin-bottom: 40px;
}
/* Footer Note */
.text-muted {
color: #999 !important;
font-size: 0.9rem;
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid #e0e0e0;
}
/* Responsive */
@media (max-width: 768px) {
.legal-page {
padding: 100px 0 60px;
}
.legal-page .container {
padding: 0 20px;
}
.legal-page h1 {
font-size: 2rem;
}
.legal-page h2 {
font-size: 1.4rem;
margin: 40px 0 15px;
}
.legal-page h3 {
font-size: 1.15rem;
}
.legal-page p,
.legal-page ul,
.legal-page ol {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.legal-page h1 {
font-size: 1.75rem;
}
.legal-page h2 {
font-size: 1.3rem;
}
}
/* ===== Legal Pages - Light Text on Dark Background ===== */
.legal-page {
padding: 120px 0 80px;
background: #000000;
min-height: 100vh;
}
.legal-page .container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography - Light Colors */
.legal-page h1 {
font-size: 2.5rem;
color: #ffffff;
margin-bottom: 10px;
font-weight: 700;
line-height: 1.2;
}
.legal-page .lead {
font-size: 1rem;
color: #aaaaaa;
margin-bottom: 50px;
font-weight: 400;
}
.legal-page h2 {
font-size: 1.6rem;
color: #ffffff;
margin: 50px 0 20px;
font-weight: 600;
padding-top: 20px;
border-top: 1px solid #333333;
}
.legal-page h2:first-of-type {
border-top: none;
padding-top: 0;
}
.legal-page h3 {
font-size: 1.25rem;
color: #f0f0f0;
margin: 30px 0 15px;
font-weight: 600;
}
.legal-page h4 {
font-size: 1.1rem;
color: #e0e0e0;
margin: 25px 0 12px;
font-weight: 600;
}
/* Content - Light Gray Text */
.legal-page p {
font-size: 1rem;
line-height: 1.8;
color: #cccccc;
margin-bottom: 20px;
}
.legal-page ul,
.legal-page ol {
font-size: 1rem;
line-height: 1.8;
color: #cccccc;
margin: 20px 0 20px 25px;
padding-left: 0;
}
.legal-page li {
margin-bottom: 10px;
}
.legal-page address {
font-style: normal;
line-height: 1.8;
color: #cccccc;
margin: 20px 0;
padding-left: 0;
}
.legal-page strong {
color: #ffffff;
font-weight: 600;
}
/* Links - Cyan/Turquoise */
.legal-page a {
color: #0dcaf0;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
.legal-page a:hover {
color: #3dd5f3;
border-bottom-color: #0dcaf0;
}
/* Sections */
.legal-page section {
margin-bottom: 40px;
}
/* Footer Note */
.text-muted {
color: #666666 !important;
font-size: 0.9rem;
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid #333333;
}
/* Responsive */
@media (max-width: 768px) {
.legal-page {
padding: 100px 0 60px;
}
.legal-page .container {
padding: 0 20px;
}
.legal-page h1 {
font-size: 2rem;
}
.legal-page h2 {
font-size: 1.4rem;
margin: 40px 0 15px;
}
.legal-page h3 {
font-size: 1.15rem;
}
.legal-page p,
.legal-page ul,
.legal-page ol {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.legal-page h1 {
font-size: 1.75rem;
}
.legal-page h2 {
font-size: 1.3rem;
}
}
html {
scroll-behavior: smooth;
}
html {
--mxp: 0;
--myp: 0;
}
body {
background: radial-gradient(circle at calc(var(--mxp,0) * 100%) calc(var(--myp,0) * 100%), #9B5BFF, #121212);
transition: background 0.1s linear;
}
/* === Custom Cursor (Purple Circle) === */
/* === Custom Cursor (Du First) === */
/* === Custom Cursor (Du First) === */
:root {
--cursor-size: 50px;
--cursor-size-active: 72px;
--cursor-lagoon: #11998e;
--cursor-purple: #7f52ff;
}
@media (hover: hover) and (pointer: fine) {
html, body { cursor: none !important; }
.custom-cursor {
position: fixed;
top: 0;
left: 0;
width: var(--cursor-size);
height: var(--cursor-size);
margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
border-radius: 50%;
pointer-events: none;
z-index: 999999;
/* رنگ سبز لاجانی یکدست */
background: #11998e !important;
box-shadow:
0 0 18px rgba(17,153,142,.8) !important,
0 0 35px rgba(17,153,142,.55) !important,
0 0 65px rgba(56,239,125,.45) !important;
transform: translate3d(-9999px, -9999px, 0);
transition:
width .2s ease,
height .2s ease,
margin .2s ease,
box-shadow .25s ease,
background .25s ease,
filter .25s ease,
transform .06s linear,
opacity .15s ease;
opacity: 1;
will-change: transform, width, height, margin, box-shadow, background;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2px;
}
/* روی المنتهای کلیکپذیر - بدون گرادیانت */
.custom-cursor.is-active {
width: var(--cursor-size-active);
height: var(--cursor-size-active);
margin: calc(var(--cursor-size-active) / -2) 0 0 calc(var(--cursor-size-active) / -2);
/* رنگ یکدست بدون گرادیانت نورانی */
background: #11998e !important;
box-shadow:
0 0 22px rgba(17,153,142,.85) !important,
0 0 48px rgba(17,153,142,.65) !important,
0 0 100px rgba(127,82,255,.5) !important;
filter: saturate(1.2) brightness(1.1) !important;
}
/* هنگام نگه داشتن کلیک */
.custom-cursor.is-down {
transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.9);
background: #0e8174 !important;
}
/* لوگو Du First - همیشه نمایش داده میشه */
.custom-cursor__logo {
position: relative;
font: 700 16px/1 'Arial Black', Arial, sans-serif;
letter-spacing: -0.5px;
color: #fff !important;
text-shadow:
0 2px 5px rgba(0,0,0,.7),
0 0 10px rgba(0,0,0,.5);
opacity: 1;
transition: opacity .2s ease, transform .2s ease, font-size .2s ease;
pointer-events: none;
}
.custom-cursor.is-active .custom-cursor__logo {
font-size: 14px;
opacity: 0.9;
}
/* متن Hier klicken - فقط روی clickable ها */
.custom-cursor__label {
position: relative;
font: 700 9.5px/1.2 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial;
letter-spacing: 0.5px;
color: #fff !important;
text-align: center;
white-space: nowrap;
text-shadow:
0 1px 4px rgba(0,0,0,.7),
0 0 8px rgba(0,0,0,.5);
text-transform: uppercase;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
transform: scale(0.85);
max-height: 0;
overflow: hidden;
}
.custom-cursor.is-active .custom-cursor__label {
opacity: 1;
transform: scale(1);
max-height: 20px;
}
input, textarea { cursor: text !important; }
button, a, [role="button"], [tabindex]:not([tabindex="-1"]) { cursor: none !important; }
}
/* ===== Highlights Touch: Color on Click ===== */
/* دسکتاپ: hover رنگی میکنه (همون قبلی) */
@media (hover: hover) {
.highlights_media-item:hover img {
filter: grayscale(0%) !important;
}
}
/* موبایل: کلیک اول رنگی میکنه */
.highlights_media-item.is-colored img {
filter: grayscale(0%) !important;
}
/* ترنزیشن نرم برای تغییر رنگ */
#final-mosaic-section .final-mosaictitle {
background: linear-gradient(92deg, #9B5BFF 0%, #C77DFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
color: transparent !important;
text-align: center;
font-weight: 900;
line-height: 1.04;
letter-spacing: .01em;
text-shadow: 0 0 14px #9B5BFF40, 0 0 30px #C77DFF35;
margin: 0 auto 12px;
display: inline-block;
white-space: pre-line;
}
#final-mosaic-section .final-mosaictitle {
background: linear-gradient(92deg, #9B5BFF 0%, #C77DFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
color: transparent !important;
text-align: center;
font-weight: 900;
text-shadow: 0 0 14px #9B5BFF44, 0 0 30px #C77DFF44;
font-size: clamp(2.3rem, 8vw, 5rem); /* متناسب با اندازه صفحه */
max-width: 100vw; /* بیشترین عرض صفحه */
white-space: pre-line; /* تضمین فقط سر خط با
*/
overflow-wrap: normal; /* حذف شکستن خودکار */
word-break: normal; /* حذف شکست بین کلمات */
line-height: 0.95;
margin: 0 auto 12px;
}
#final-mosaic-section .final-mosaictitle {
display: block;
text-align: center;
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 900;
line-height: 1; /* یا کمتر اگر فاصله زیاد است: 0.95 */
letter-spacing: 0.01em;
margin: 0 auto 12px;
background: linear-gradient(92deg, #9B5BFF 0%, #C77DFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent !important;
text-shadow: 0 0 14px #9B5BFF44, 0 0 30px #C77DFF44;
white-space: pre-line; /* بشکن فقط سر
*/
}
/* PROCESS SECTION */
.process-section {
padding: 5rem 1.5rem;
}
.process-inner {
max-width: 900px;
margin: 0 auto;
}
.process-title {
font-size: clamp(2rem, 3vw, 2.6rem);
margin-bottom: 3rem;
font-weight: 700;
}
/* TIMELINE */
.process-timeline {
border-left: 2px solid rgba(255, 255, 255, 0.15);
padding-left: 2rem;
position: relative;
}
.process-step {
position: relative;
margin-bottom: 3rem;
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease-out, transform .6s ease-out;
}
.process-step.visible {
opacity: 1;
transform: translateY(0);
}
/* DOT */
.process-step .dot {
width: 14px;
height: 14px;
background: #8f66ff; /* بنفش du-first */
border-radius: 50%;
position: absolute;
left: -2.9rem;
top: 5px;
box-shadow: 0 0 14px rgba(143,102,255,0.6);
}
/* STEP CONTENT */
.process-step h3 {
margin: 0 0 .4rem;
font-size: 1.2rem;
}
.process-step p {
margin: 0;
opacity: 0.8;
}
/* SIMPLE 16:9 VIDEO BLOCK */
.section-3d-video {
padding: 3rem 1.5rem;
display: flex;
justify-content: center;
}
.video-3d-shell {
width: 100%;
max-width: 820px; /* اینجا سایز نمایش کنترل میشه – کوچیکترش کردی */
border-radius: 16px;
overflow: hidden;
}
.video-3d {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
/* بنر شفاف و وسطچین (Desktop + Responsive) */
.banner-plain,
.banner-plain .container{
background: transparent !important;
box-shadow: none !important;
}
.banner-plain::before,
.banner-plain::after,
.banner-plain .container::before,
.banner-plain .container::after{
content: none !important;
}
.banner-plain{
padding: clamp(40px, 6vw, 80px) 0;
position: relative;
z-index: 1;
}
.banner-plain .container{
/* سنتر کامل */
display: flex;
flex-direction: column;
align-items: center; /* افقی وسط */
justify-content: center; /* عمودی وسط اگر height داشت */
text-align: center; /* متن وسط */
gap: clamp(16px, 3vw, 28px);
max-width: min(1100px, 92vw);
margin-inline: auto;
}
/* تیتر */
.banner-plain .banner_content{
margin: 0;
font-weight: 800;
line-height: 1.1;
font-size: clamp(24px, 4.2vw, 48px);
letter-spacing: .01em;
/* اختیاری: افکت گرادیان روی strong */
}
.banner-plain .banner_content strong{
background: linear-gradient(90deg, #66e0ff 0%, #6f5bff 50%, #66e0ff 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 6px 24px rgba(120, 80, 255, .25);
}
/* دکمه */
.banner-plain .btn{
align-self: center; /* تضمین میکنه دقیقاً وسط بمونه */
padding: clamp(10px, 2.2vw, 14px) clamp(16px, 3vw, 22px);
border-radius: 14px;
font-weight: 700;
white-space: nowrap;
}
/* فواصل پایین/بالا در موبایل کمی بیشتر برای تنفس */
@media (max-width: 640px){
.banner-plain{ padding: 56px 0; }
}
/* کوچیک کردن لوگو داخل سکشن SEO */
.highlights--1 .highlights_main-icon {
width: 70px; /* اندازهی خود دایره / هولدر */
height: 70px;
}
.highlights--1 .highlights_main-icon img {
width: 100%;
height: 100%;
object-fit: contain; /* مطمئن میشه لوگو له نشه */
}
/* چرخش لوگو – از keyframes rotating که بالا تعریف کردیم استفاده میکنیم */
.highlights--1 .highlights_main-icon.rotate {
animation: rotating 12s linear infinite;
}
/* چرخش لوگو در جای خودش */
.highlights_main-icon.rotate img {
animation: rotating 12s linear infinite;
transform-origin: center center;
}
/* اگر لوگو خیلی بزرگه، اندازهاش رو کوچیک کن */
.highlights_main-icon {
width: 70px;
height: 70px;
}
.highlights_main-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
@-webkit-keyframes rotating {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotating {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ردیف دکمههای SEO روبروی هم */
.highlights--1 .seo-cta-row {
display: flex;
flex-direction: row; /* کنار هم */
align-items: center; /* تراز عمودی */
gap: 18px;
flex-wrap: nowrap; /* اجازه نده زیر هم بره! */
}
/* استایل دکمهها (جدا از قالب) */
.highlights--1 .seo-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
height: 52px; /* همارتفاع */
border-radius: 999px;
font-weight: 600;
font-size: 15px;
border: 2px solid #fff;
gap: 10px;
white-space: nowrap; /* نشکنه */
transition: .25s ease;
}
/* دکمه بنفش – دقیقاً بنفش SEO کارت */
.highlights--1 .seo-cta-btn--primary {
background-color: #b200ff;
color: #fff;
box-shadow: 0 0 40px rgba(178,0,255,.5);
}
/* دکمه outline */
.highlights--1 .seo-cta-btn--secondary {
background: transparent;
color: #fff;
}
/* hover */
.highlights--1 .seo-cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 60px rgba(178,0,255,.7);
}
.highlights--1 .seo-cta-btn--secondary:hover {
background: #fff;
color: #000;
transform: translateY(-2px);
}
#services {
overflow: hidden;
}
/* ================= du-first services v2 (fixed orb) ================ */
.df-services {
background: #000;
}
.df-services .container {
position: relative;
overflow: visible;
}
/* Grid – موبایل: ۱ ستون */
.df-services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
position: relative;
z-index: 1;
}
/* کارتها */
.df-service-card {
position: relative;
background: #ffffff;
color: #111111;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
transition: transform .25s ease, box-shadow .25s ease;
}
.df-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
/* دو لایهی کارت: cover + content */
.df-service-face {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.df-service-face--cover {
position: absolute;
inset: 0;
padding: 40px 30px;
z-index: 2;
background: #ffffff;
transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
}
.df-service-face--content {
position: relative;
z-index: 1;
padding: 42px 32px 48px;
}
/* افکت هاور فقط روی دسکتاپ حس میشود ولی اینجا پایهاش هست */
.df-service-card:hover .df-service-face--cover,
.df-service-card:focus-within .df-service-face--cover {
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
}
/* آیکن و تیتر کاور */
.df-service-icon {
max-height: 110px;
margin-bottom: 18px;
}
.df-service-icon img {
max-height: 100%;
width: auto;
object-fit: contain;
}
.df-service-title {
font-size: 1.18rem;
font-weight: 700;
color: #111111;
}
.df-service-title .linebreak {
display: block;
}
/* متن داخل کارت */
.df-service-content-title {
font-size: 1.08rem;
font-weight: 700;
margin-bottom: 12px;
}
.df-service-text {
font-size: .98rem;
line-height: 1.6;
color: #444444;
margin-bottom: 22px;
}
/* دکمه داخل کارت (از btn خودت) */
.df-service-face .content_main-btn {
width: auto;
}
/* ================= ORB – موبایل: آیتم وسط گرید ================= */
.df-services-orb {
width: 210px;
height: 210px;
border-radius: 50%;
pointer-events: none;
margin: 10px auto 14px; /* بین کارت سوم و چهارم، وسط ستون */
order: 4; /* در گرید، بعد از ۳اُم میآید */
}
.df-orb-core {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: #050505;
box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
border: 2px solid rgba(255, 255, 255, .18);
display: flex;
align-items: center;
justify-content: center;
animation: df-orb-spin 18s linear infinite;
}
.df-orb-ring {
position: absolute;
inset: 14%;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .75);
}
.df-orb-logo-wrap {
position: relative;
width: 46%;
aspect-ratio: 1 / 1;
}
.df-orb-logo {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
animation: df-orb-spin 18s linear infinite reverse;
}
@keyframes df-orb-spin {
to { transform: rotate(360deg); }
}
/* روی هاور سکشن، کمی سریعتر بچرخد (اختیاری) */
.df-services:hover .df-orb-core,
.df-services:hover .df-orb-logo {
animation-duration: 10s;
}
/* ================= Breakpoints ================= */
/* تبلت: دو ستون */
@media (min-width: 700px) {
.df-services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* دسکتاپ: سه ستون + اورب وسط گرید (بین ۲ و ۵) */
@media (min-width: 1100px) {
.df-services-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.df-services-orb {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: 260px;
height: 260px;
}
}
/* دکمه "Mehr erfahren" در همه کارتها در یک خط عمودی */
.df-service-card {
min-height: 380px; /* قدِ یکسان برای همه کارتها */
}
/* داخل کارت – عنوان + متن بالا، دکمه پایین */
.df-service-face--content {
display: flex;
flex-direction: column;
justify-content: space-between; /* فاصله مساوی بین بالا و دکمه */
align-items: center;
text-align: center;
height: 100%;
}
/* متنها عرض کامل بگیرن تا وسطچین بمونن */
.df-service-content-title,
.df-service-text {
width: 100%;
}
/* === DFX Cases – Performance Lite Overrides === */
/* 1) رفلکشن (box-reflect) رو حذف کن – خیلی سنگینه روی GPU */
.dfx-cases .swiper-slide.dfx-card{
-webkit-box-reflect: none !important;
}
/* 2) سایهها رو سبکتر کن */
.dfx-cases .swiper-slide.dfx-card{
box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
}
/* 3) blur شیشهای قوی رو کم کنیم */
.dfx-cases .dfx-card__body{
backdrop-filter: blur(3px) saturate(115%) !important;
}
/* 4) خود transition روی اسلاید کوتاهتر و سادهتر */
.dfx-cases .swiper-slide.dfx-card{
transition: transform .3s ease-out, opacity .3s ease-out, box-shadow .3s ease-out !important;
}
/* 5) هاور داخلی خیلی اغراق نکند که با coverflow دعوا نکند */
.dfx-cases .swiper-slide.dfx-card:hover .dfx-card__link{
transform: translateY(-4px) scale(1.01) !important;
}
/* ========== DU FIRST – CASES COVERFLOW LITE ========== */
.dfc-cases{
padding-block: clamp(60px, 10vh, 90px);
}
.dfc-cases__container{
max-width: 1120px;
margin: 0 auto;
padding-inline: 16px;
}
.dfc-cases__header{
text-align: center;
margin-bottom: 32px;
}
.dfc-cases__title{
font-size: clamp(1.8rem, 2.4vw, 2.2rem);
font-weight: 700;
margin-bottom: 10px;
}
.dfc-cases__subtitle{
max-width: 720px;
margin: 0 auto;
color: #bfbfbf;
font-size: .98rem;
}
/* Swiper wrapper */
.dfc-carousel{
padding-block: 18px 36px;
}
.dfc-carousel .swiper-wrapper{
align-items: stretch;
}
/* اسلایدها – عرض ثابت و سبک */
.dfc-carousel .swiper-slide{
width: min(340px, 80vw);
}
/* کارت اصلی */
.dfc-card{
height: 100%;
border-radius: 18px;
overflow: hidden;
background: radial-gradient(circle at top, rgba(155,91,255,0.18), rgba(14,14,14,1));
box-shadow: 0 14px 34px rgba(0,0,0,.55);
transition: transform .3s ease-out, box-shadow .3s ease-out, opacity .3s ease-out;
}
.dfc-card__link{
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
/* تصویر */
.dfc-card__media{
position: relative;
overflow: hidden;
flex: 0 0 auto;
}
.dfc-card__media img{
display: block;
width: 100%;
height: auto;
transform-origin: center;
transition: transform .4s ease-out;
}
/* بدنه کارت */
.dfc-card__body{
flex: 1 1 auto;
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
backdrop-filter: blur(4px) saturate(120%);
}
.dfc-card__title{
font-size: 1.02rem;
font-weight: 600;
}
.dfc-card__kpis{
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
font-size: .88rem;
color: #cbd5ff;
padding: 0;
margin: 0;
list-style: none;
}
.dfc-card__cta{
margin-top: 4px;
font-size: .9rem;
color: #9B5BFF;
}
/* حالت active مرکزی را کمی بزرگتر نشان بده */
.dfc-carousel .swiper-slide-active .dfc-card{
transform: translateY(-6px) scale(1.03);
box-shadow: 0 18px 40px rgba(0,0,0,.7);
}
.dfc-carousel .swiper-slide-active .dfc-card__media img{
transform: scale(1.03);
}
/* دکمههای زیر (pagination) */
.dfc-cases .swiper-pagination-bullet{
width: 7px;
height: 7px;
background: rgba(155,91,255,.5);
opacity: 1;
}
.dfc-cases .swiper-pagination-bullet-active{
width: 18px;
border-radius: 999px;
background: #9B5BFF;
}
/* ریسپانسیو */
@media (max-width: 768px){
.dfc-cases__title{
font-size: 1.6rem;
}
}
/* === SEO Highlights – mobile center fix === */
@media (max-width: 768px) {
/* خود بلوک متن */
#seo-highlights .highlights_main{
margin: 24px auto 0 !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* آیکون گرد وسط */
#seo-highlights .highlights_main-icon{
margin: 0 auto 16px !important;
}
/* تیتر، سابتیتر، متن */
#seo-highlights .highlights_main-title,
#seo-highlights .highlights_main-subtitle,
#seo-highlights .highlights_main-text{
width: 100% !important;
text-align: center !important;
}
/* ردیف دکمهها */
#seo-highlights .seo-cta-row{
margin-top: 18px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
text-align: center !important;
}
#seo-highlights .seo-cta-row .seo-cta-btn{
max-width: 280px !important;
width: 100% !important;
}
}
/* === Highlights – compact desktop layout & CTA closer === */
.highlights.section{
background:var(--brutal-dark-bg);
padding:4rem 1rem; /* قبلاً 5rem بود */
border-top:var(--brutal-border);
border-bottom:var(--brutal-border);
}
.highlights .container{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
gap:3rem; /* فاصله کمتر، همه چیز جمعتر */
align-items:flex-start;
}
/* تصاویر سمت چپ هم جمعوجورتر */
.highlights_media{
display:flex;
flex-wrap:wrap;
gap:1.5rem;
align-items:center;
justify-content:center;
}
.highlights_media-item{
border:var(--brutal-border);
position:relative;
box-shadow:8px 8px 0 var(--brutal-border-color);
width:230px; /* کمی کوچکتر از قبل */
}
/* محتوای اصلی (کارت بنفش + متن + CTA) */
.highlights_main{
text-align:left;
max-width:520px; /* کارت بنفش و متن محدود بشن */
}
.highlights_main-title{
font-family:'Roboto Mono',monospace;
font-size:clamp(2.1rem,2.6vw,2.6rem); /* فونت کوچیکتر */
font-weight:700;
line-height:1.15;
color:var(--brutal-dark-bg);
background:var(--brutal-purple-accent);
padding:.65rem 1.2rem; /* padding کمتر */
display:inline-block;
border:var(--brutal-border);
margin-bottom:.9rem;
}
.highlights_main-subtitle{
font-size:1.35rem;
font-weight:700;
color:var(--brutal-white);
margin-bottom:1rem; /* نزدیکتر به تیتر */
}
.highlights_main-text{
font-size:1.02rem;
line-height:1.7;
color:var(--brutal-white);
opacity:.9;
}
/* ردیف CTA ها – بیاد بالاتر و فشردهتر بشه */
.highlights_main-wrapper{
margin-top:1.6rem; /* قبلاً حدود 2.5rem بود */
display:flex;
flex-wrap:wrap;
gap:.85rem;
}
.seo-cta-row .seo-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.8rem 1.6rem;
font-size:.98rem;
border-radius:999px;
white-space:nowrap;
}
/* موبایل: همون حالت وسطچین قشنگ قبلی */
@media (max-width:992px){
.highlights.section{
padding:3.5rem 1.2rem;
}
.highlights .container{
grid-template-columns:1fr;
gap:3rem;
}
.highlights_main{
max-width:none;
text-align:center;
margin:0 auto;
}
.highlights_main-wrapper{
justify-content:center;
}
}
/* === HOTFIX: SEO Highlights compact layout === */
.highlights.section{
padding:3.5rem 0 3.8rem; /* بالا و پایین سکشن کمتر بشه */
}
.highlights .container{
grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
gap:2.5rem;
align-items:flex-start;
}
/* خود کارت بنفش + متن */
.highlights_main{
max-width:520px; /* متن از کادر نزنه بیرون */
}
.highlights_main-title{
font-size:clamp(2rem,2.2vw,2.3rem);
line-height:1.1;
padding:0.9rem 1.4rem; /* نفس کشیدن متن تو کارت */
max-width:32rem; /* طول کارت کنترلشده */
}
/* CTAها بیان بالاتر و فشردهتر */
.highlights_main-wrapper{
margin-top:1.4rem;
}
/* SEO Highlights – align media cards with purple card (desktop only) */
@media (min-width: 992px){
.highlights_media{
margin-top: 5.8rem; /* هرچی لازم بود بعداً این عدد رو کمی کم/زیاد کن */
}
}
/* === SEO Highlights – mobile fix (stack & center) === */
@media (max-width: 768px){
.highlights.section{
padding: 3rem 0 3.4rem;
}
.highlights .container{
display: block; /* ستونها زیر هم */
}
/* کارتهای تصویر بالا – وسط و جمعوجور */
.highlights_media{
max-width: 320px;
margin: 0 auto 2rem;
gap: 1rem;
justify-content: center;
}
.highlights_media-item{
width: 48%;
min-width: 145px;
}
/* کارت سوم بیاد وسط سطر خودش */
.highlights_media-item:nth-child(3){
margin-left: auto;
margin-right: auto;
}
/* متنها و کارت بنفش وسطچین */
.highlights_main{
max-width: 480px;
margin: 0 auto;
text-align: center;
}
.highlights_main-title{
display: block;
margin: 0 auto 1rem;
}
.highlights_main-subtitle,
.highlights_main-text{
text-align: center;
}
.highlights_main-wrapper{
justify-content: center;
}
}
/* === Touch Active Effect for Highlights Cards (Mobile) === */
@media (max-width: 992px){
.highlights_media-item:active img{
filter: grayscale(0%) contrast(1.1) brightness(1.05);
transform: scale(0.97);
}
.highlights_media-item:active{
box-shadow: 4px 4px 0 var(--brutal-border-color);
transform: translate(4px,4px);
}
}
/* === Mobile Tap Effect for Highlights (FINAL FIX) === */
@media (max-width: 992px){
/* وقتی لمس میکنی */
.highlights_media-item:active{
box-shadow: 4px 4px 0 var(--brutal-border-color);
transform: translate(4px,4px) scale(0.96);
}
/* عکس هم رنگی بشه */
.highlights_media-item:active img{
filter: grayscale(0%) contrast(1.15) brightness(1.08);
}
}
/* === SEO Highlights – universal hover/tap effect for cards === */
/* حالت عادی: سیاهسفید */
.highlights_media-item img{
filter: grayscale(100%) contrast(1.1);
transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* دسکتاپ + موبایل: هم hover هم tap (active) رنگی بشه */
.highlights_media-item:hover img,
.highlights_media-item:active img{
filter: grayscale(0%) contrast(1.2) brightness(1.06);
}
/* خود کارت هم یه کم حرکت کنه */
.highlights_media-item:hover,
.highlights_media-item:active{
transform: translate(4px,4px);
box-shadow: 4px 4px 0 var(--brutal-border-color);
cursor: pointer;
}
/* === SEO Highlights – always colored on mobile === */
@media (max-width: 768px){
#seo-highlights .highlights_media-item img{
filter: grayscale(0%) contrast(1.1) brightness(1.05) !important;
}
}
/* === FIX: remove extra gap under fixed header on all responsive sizes === */
/* موبایل و تبلت */
@media (max-width: 992px){
/* 1) حذف فاصلهٔ اضافی از headerSpacer */
#headerSpacer{
height: 0 !important;
}
/* 2) هیرو بیاد بالاتر */
.df-hero,
.hero,
.hero-section{
margin-top: 0 !important;
padding-top: 4rem !important; /* اگر زیاد بود → 3rem کن */
}
/* 3) منوی سفید (Startseite…) بیاد بالاتر */
.df-services-nav,
.df-tabs,
.df-scroller{
margin-top: 1.5rem !important;
}
}
/* دسکتاپ – فقط کمی جمعوجورتر */
@media (min-width: 993px){
.df-hero,
.hero,
.hero-section{
margin-top: 0 !important;
padding-top: 6rem !important; /* بسته به هدر */
}
.df-services-nav,
.df-tabs,
.df-scroller{
margin-top: 2rem !important;
}
}
/* ============================================
Floating CTA: "Jetzt Starten"
کنترل کامل اندازه و جایگیری
============================================ */
/* 📌 حالت دسکتاپ (پیشفرض) */
.df-float-cta{
position: fixed;
right: 2.4rem; /* فاصله از راست در دسکتاپ */
bottom: 2.4rem; /* فاصله از پایین در دسکتاپ */
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.2rem; /* اندازه متن دسکتاپ */
line-height: 1.2;
font-weight: 700;
min-width: 108px; /* حداقل عرض دکمه */
min-height: 108px; /* حداقل ارتفاع دکمه */
padding: 0.45rem 0.6rem; /* فضای داخلی */
border-radius: 999px;
z-index: 9999;
/* اگر رنگ/پسزمینه از قبل داری، این دوتا رو میتونی برداری */
background: #7b3dff;
color: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,.35);
transition:
opacity .25s ease,
transform .25s ease,
box-shadow .25s ease;
}
.df-float-cta:hover{
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
/* 😶🌫️ کلاس محوشدن (اگر خواستی با JS کنترلش کنی) */
.df-float-cta.is-hidden{
opacity: 0;
transform: scale(.9) translateY(8px);
pointer-events: none;
}
/* 📱 تبلت و موبایل – کمی کوچیکتر و نزدیکتر به گوشه */
@media (max-width: 992px){
.df-float-cta{
right: 1.6rem; /* فاصله از راست در تبلت/موبایل */
bottom: 1.8rem; /* فاصله از پایین در تبلت/موبایل */
font-size: 0.8rem; /* متن کوچیکتر */
min-width: 60px;
min-height: 60px;
padding: 0.4rem 0.55rem;
}
}
/* 📱 موبایلهای خیلی کوچک */
@media (max-width: 576px){
.df-float-cta{
right: 1.0rem; /* نزدیکتر به گوشه برای موبایل خیلی کوچیک */
bottom: 1.5rem;
font-size: 0.72rem;
min-width: 52px;
min-height: 52px;
padding: 0.35rem 0.45rem;
}
}
/* ==== Hero / فاصلهی ثابت از هدر در همهی سایزها ==== */
/* این سه تا مقدار رو فقط کموزیاد میکنی: */
:root {
--hero-gap-desktop: 140px; /* فاصلهی بالای هیرو روی دسکتاپ */
--hero-gap-tablet: 120px; /* فاصله روی تبلتها (تا عرض 1169px) */
--hero-gap-mobile: 100px; /* فاصله روی موبایلها (تا عرض 768px) */
}
/* ============================================================
HERO SPACING ENGINE — Clean, Stable, Responsive
============================================================ */
/* فقط این سه تا مقدار رو کنترل میکنی */
:root {
--hero-space-desktop: 160px; /* دسکتاپ */
--hero-space-tablet: 140px; /* تبلت */
--hero-space-mobile: 120px; /* موبایل */
}
/* ===== تنظیمات کلی (جایی مثل :root یا body) ===== */
:root{
/* فاصله نوار لوگوها از بالا (نسبت به hero) */
--logos-top: 72%; /* هرچی بیشتر کنی میره پایینتر */
/* فاصله افقی بین خود لوگوها */
--logos-gap: 36px; /* اینو کم/زیاد کن برای فاصله بین لوگوها */
/* اندازه خود لوگوها */
--logos-size: 80px; /* هم عرض هم ارتفاع img */
/* ارتفاع کلی نوار لوگوها */
--logos-strip-height: 110px; /* برای بیشتر/کمتر کردن ضخامت نوار */
/* شفافیت و روشنایی لوگوها */
--logos-opacity: .7;
--logos-bright: 1.1;
--logos-sat: 1.1;
/* سرعت و فید دو طرف */
--logos-speed: 28s;
--fade-left: 80px;
--fade-right: 80px;
}
/* ===== Logos marquee (two lines loop) ===== */
.hero-logos{
position: absolute;
left: 0;
right: 0;
top: var(--logos-top); /* فاصله از بالا – فقط همین متغیر رو تغییر بده */
width: 100%;
max-width: none;
height: var(--logos-strip-height); /* ارتفاع نوار کامل */
display: flex;
align-items: center; /* لوگوها رو وسط ارتفاع نوار نگه میداره */
overflow: hidden;
z-index: 2;
/* فید دو طرف */
transform: translateY(-40%);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black var(--fade-left),
black calc(100% - var(--fade-right)),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black var(--fade-left),
black calc(100% - var(--fade-right)),
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
mask-type: luminance;
}
/* ریل متحرک */
.hero-logos_track{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0;
width: max-content;
will-change: transform;
animation: logos-marquee var(--logos-speed) linear infinite;
}
/* یک "خط" از لوگوها (برای لوپ دو خطه) */
.hero-logos_line{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--logos-gap); /* فاصله بین لوگوها رو از اینجا کنترل میکنی */
}
/* خود لوگوها */
.hero-logos_line img{
width: var(--logos-size); /* کنترل عرض */
height: var(--logos-size); /* کنترل ارتفاع */
flex: 0 0 auto;
object-fit: contain;
object-position: center;
opacity: var(--logos-opacity);
filter: brightness(var(--logos-bright)) saturate(var(--logos-sat));
transition:
transform .3s ease,
opacity .3s ease,
filter .3s ease;
cursor: pointer;
}
/* Hover effect */
.hero-logos_line img:hover{
transform: translateY(-8px) scale(1.08);
opacity: 1;
filter: brightness(1.45) saturate(1);
}
/* فاصله بین دو لوپ پشتسرهم */
.hero-logos_line:first-child{
margin-right: var(--logos-gap);
}
/* انیمیشن لوپ */
@keyframes logos-marquee{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* اگر کاربر reduced motion داشته باشه */
@media (prefers-reduced-motion: reduce){
.hero-logos_track{ animation: none; }
}
/* ===== نسخه ریسپانسیو (اختیاری) ===== */
@media (max-width: 767.98px){
:root{
--logos-gap: 20px; /* فاصله کمتر روی موبایل */
--logos-size: 56px; /* لوگوی کوچیکتر روی موبایل */
--logos-strip-height: 90px;/* نوار باریکتر */
--logos-top: 78%; /* اگر خواستی پایینتر یا بالاتر باشه */
}
}
/* Base style برای موبایل */
.hero-ink {
margin-top: 60px;
}
/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-ink {
margin-top: 80px;
}
}
/* دسکتاپ */
@media (min-width: 1024px) {
.hero-ink {
margin-top: 100px;
}
}
.hero-title .big,
.hero-title .small {
background: linear-gradient(90deg, #7C4DFF 0%, #9B5BFF 50%, #C77DFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
/* یا سادهتر: */
.hero-title {
color: #9B5BFF !important;
}
.hero-sub {
color: #C77DFF !important;
}
/* فاصله hero section از بالا */
.hero-ink {
margin-top: clamp(80px, 10vw, 140px);
padding-top: clamp(40px, 6vw, 60px);
}
/* فاصله لوگوها از یکدیگر - بیشتر کردن gap */
.hero-logos .hero-logosline {
gap: clamp(60px, 8vw, 100px); /* قبلاً 36px-55px بود */
}
/* یا به صورت مستقیم در root variables */
:root {
--logos-gap: clamp(60px, 8vw, 100px); /* افزایش فاصله لوگوها */
--hero-gap-desktop: 160px; /* فاصله hero از header در دسکتاپ */
--hero-gap-tablet: 140px;
--hero-gap-mobile: 100px;
}
/* Responsive */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-ink {
margin-top: var(--hero-gap-tablet);
padding-top: 50px;
}
}
@media (min-width: 1024px) {
.hero-ink {
margin-top: var(--hero-gap-desktop);
padding-top: 70px;
}
}
/* موبایل */
@media (max-width: 767px) {
.hero-ink {
margin-top: var(--hero-gap-mobile);
padding-top: 40px;
}
:root {
--logos-gap: clamp(40px, 6vw, 60px);
}
}
/* سفید و بزرگتر کردن H2 - یک خطی */
.hero-sub {
color: #FFFFFF !important; /* سفید کامل */
font-size: clamp(16px, 2.2vw, 22px) !important; /* افزایش سایز از 12px-16px به 16px-22px */
font-weight: 500 !important; /* کمی boldتر */
letter-spacing: 0.08em !important; /* کمتر از قبل برای خوانایی بهتر */
line-height: 1.4 !important;
white-space: nowrap !important; /* یک خطی نگه داشتن */
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* موبایل - اجازه wrap */
@media (max-width: 900px) {
.hero-sub {
white-space: normal !important; /* در موبایل اجازه چند خطی */
text-wrap: balance !important;
font-size: clamp(14px, 3.5vw, 18px) !important;
}
}
/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-sub {
font-size: clamp(15px, 2.8vw, 20px) !important;
}
}
/* دسکتاپ بزرگ */
@media (min-width: 1280px) {
.hero-sub {
font-size: clamp(18px, 2vw, 24px) !important;
}
}
/* فاصله دادن به بخش لوگوها از بالا (header) */
.hero-logos-section {
margin-top: clamp(40px, 6vw, 80px); /* فاصله از header */
padding-top: clamp(40px, 6vw, 80px);
position: relative;
}
/* یا اگر فقط .hero-logos استفاده میکنی */
.hero-logos {
position: absolute;
top: clamp(85%, 12vw, 72%); /* پایینتر آوردن */
width: 100%;
height: var(--logos-strip-height);
overflow: hidden;
z-index: 2;
}
/* افزایش فاصله بین لوگوها */
.hero-logos_line {
display: flex;
gap: clamp(60px, 8vw, 100px); /* قبلاً 36px بود */
flex-wrap: nowrap;
align-items: center;
}
/* Responsive - موبایل */
@media (max-width: 767px) {
.hero-logos-section {
margin-top: clamp(60px, 10vw, 100px);
padding-top: clamp(30px, 5vw, 50px);
}
.hero-logos_line {
gap: clamp(40px, 6vw, 60px);
}
}
/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-logos-section {
margin-top: clamp(100px, 11vw, 140px);
}
}
/* پنهان کردن کامل تا موس حرکت نکرده */
.hero-brand-back{
position:absolute; inset:0; z-index:0; display:flex; justify-content:center; align-items:center;
font-weight: 900; line-height:1; letter-spacing:.02em; white-space:nowrap;
color: rgba(255,255,255,0.85); user-select:none;
transform: scaleX(1.15);
font-size: clamp(78px, 17vw, 380px);
-webkit-mask-image: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
mask-image: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), black 40%, transparent 80%);
/* از اول پنهان */
opacity: 0 !important;
visibility: hidden;
transition: opacity .6s ease-out, visibility 0s linear .6s;
}
/* فقط بعد از حرکت موس */
.hero-ink.mouse-moved .hero-brand-back{
opacity:1 !important;
visibility: visible;
transition: opacity .6s ease-out, visibility 0s linear 0s;
}
/* ========== Custom Scrollbar - Dark با رنگ بنفش ========== */
/* روش 1: استاندارد (Firefox و مرورگرهای جدید) */
html {
scrollbar-color: #9B5BFF #1a1a1a; /* thumb (بنفش) و track (تیره) */
scrollbar-width: thin; /* باریک کردن scrollbar */
}
/* روش 2: WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px; /* عرض scrollbar عمودی */
height: 12px; /* ارتفاع scrollbar افقی */
}
/* پسزمینه scrollbar (track) - تیره */
::-webkit-scrollbar-track {
background: #0d0d0d; /* مشکی تیره */
border-radius: 10px;
}
/* دستگیره scrollbar (thumb) - بنفش */
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #9B5BFF 0%, #7C4DFF 100%); /* گرادینت بنفش */
border-radius: 10px;
border: 2px solid #0d0d0d; /* حاشیه برای جدا شدن از track */
transition: background 0.3s ease;
}
/* حالت hover روی دستگیره */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #B88CFF 0%, #9B5BFF 100%); /* روشنتر */
box-shadow: 0 0 8px rgba(155, 91, 255, 0.5); /* glow effect */
}
/* حالت فشرده شدن */
::-webkit-scrollbar-thumb:active {
background: #7C4DFF; /* بنفش تیرهتر */
}
/* گوشهها (اگر هم scrollbar عمودی و هم افقی وجود داشته باشد) */
::-webkit-scrollbar-corner {
background: #0d0d0d;
}
/* ========== Scrollbar باریکتر برای موبایل/تبلت ========== */
@media (max-width: 768px) {
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
}
/* ========================================= */
/* محتوای index.min.css که به overrides اضافه شد */
/* ========================================= */
/* ==== Global base / reset ==== */
:root {
--bg: #121212;
--fg: #ffffff;
--accent: #9B5BFF;
--radius: 16px;
--transition-fast: .2s ease-in-out;
--transition: .3s ease-in-out;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* اسکرول نرم */
html {
scroll-behavior: smooth;
}
/* تنظیمات پایهی بدنه */
body {
min-height: 100vh;
background: var(--bg);
color: var(--fg);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* جلوگیری از اسکرول افقی */
html,
body {
overflow-x: hidden;
}
/* لیستها بدون bullet – خودت بعداً استایل میدی */
ol,
ul {
list-style: none;
}
/* لینکها مینیمال، بدون underline */
a {
color: inherit;
text-decoration: none;
transition: opacity var(--transition-fast);
}
a:hover {
opacity: .8;
}
/* دکمه / اینپوت / textarea استاندارد */
button,
input,
textarea,
select {
font: inherit;
color: inherit;
background: transparent;
border: none;
}
/* فقط دکمهها pointer بشن، نه همهچی */
button,
[role="button"],
input[type="submit"],
input[type="button"] {
cursor: pointer;
}
/* textarea بدون resize (اگر خواستی آزاد بذاری اینو حذف کن) */
textarea {
resize: none;
}
/* placeholder یکدست */
input::placeholder,
textarea::placeholder {
color: rgba(255,255,255,.6);
}
/* مدیا – همیشه توی کانتینر جا بشه */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* فوکوس واضح برای کیبورد (دسترسی) */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* کلاس کمکى براى مخفىکردن متن ولى قابلخواندن براى اسکرینریدر */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.services_list {
display:grid;
grid-template-columns:1fr;
grid-gap:20px
}
.services_list-item {
position:relative;
text-align:center;
overflow:hidden
}
.services_list-item.visible .cover,.services_list-item:focus .cover,.services_list-item:hover .cover {
opacity:0;
visibility:hidden
}
.services_list-item .cover {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
border:3px solid #1E1E1E;
background:#121212;
z-index:3;
padding:30px;
-webkit-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out
}
.services_list-item .cover_shape {
max-height:100px;
margin-bottom:15px;
height:100%
}
.services_list-item .cover_shape img {
height:100%;
width:auto;
-o-object-fit:contain;
object-fit:contain
}
.services_list-item .content {
position:relative;
height:100%
}
.services_list-item .content_bg,.services_list-item .content_bg-overlay {
position:absolute;
top:0;
right:0;
bottom:0;
left:0
}
.services_list-item .content_bg {
z-index:1
}
.services_list-item .content_bg img {
height:100%
}
.services_list-item .content_bg-overlay {
background:rgba(33,33,34,.7)
}
.services_list-item .content_main {
position:relative;
height:100%;
z-index:2;
padding:40px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.services_list-item .content_main-title {
color:#FFFFFF
}
.services_list-item .content_main-text {
color:#eee;
margin:10px 0 20px
}
.services_list-item .content_main-btn {
width:100%
}
@media screen and (min-width:567.98px) {
.services_list-item .cover_title {
max-width:240px
}
.services_list-item .content_main {
padding:60px
}
.services_list-item .content_main-btn {
width:-webkit-fit-content;
width:-moz-fit-content;
width:fit-content
}
}
@media screen and (min-width:767.98px) {
.services_list {
grid-template-columns:repeat(2,1fr);
grid-gap:20px
}
.services_list-item .content_main {
padding:40px
}
}
@media screen and (min-width:1023.98px) {
.services_list-item {
height:400px
}
.services_list-item .cover_title {
max-width:320px
}
}
@media screen and (min-width:1169.98px) {
.services_list {
grid-gap:30px 0;
grid-template-columns:repeat(3,1fr)
}
.services_list-item:nth-of-type(2) .cover,.services_list-item:nth-of-type(5) .cover {
border-left:none;
border-right:none
}
.services_list-item .cover_title {
max-width:300px
}
}
@media screen and (min-width:1599.98px) {
.services_list-item {
height:500px
}
}
.brands.gradient {
position:relative
}
.brands.gradient .brands_bg {
background:#f9f9f9;
overflow:hidden;
position:absolute;
right:0;
bottom:0;
left:0;
opacity:.31;
z-index:1;
top:-40px
}
.brands.gradient .brands_bg img {
height:100%;
min-height:800px
}
.brands .brands_list,.brands .container {
position:relative;
z-index:2
}
.brands_header {
margin-bottom:30px
}
.brands_header-icon {
margin-bottom:10px
}
.brands_list-row:first-of-type {
margin-bottom:15px
}
.brands_list-row .ticker-component {
height:100px!important
}
.brands_list-row img {
width:auto;
max-height:80px;
margin:0 15px
}
@media screen and (min-width:1023.98px) {
.brands_header {
margin-bottom:60px
}
.brands_list-row:first-of-type {
margin-bottom:30px
}
.brands_list-row img {
margin:0 30px
}
}
@media screen and (min-width:1169.98px) {
.brands.gradient {
padding-top:0;
margin-top:35px
}
.brands.gradient .brands_bg {
height:calc(100% - 35px);
top:unset
}
.brands.gradient .brands_header {
margin-top:-35px
}
}
/*# sourceMappingURL=../sourcemaps/index.css.map */
/*== du-first dark theme overrides v1 ==*/
html,body{background:#121212;color:#FFFFFF;}
/* Header */
/*== du-first services white test ==*/
.services_list-item .cover{
background:#FFFFFF !important;
border-color:#E5E5E5 !important; /* مرز لطیفتر روی سفید */
}
.services_list-item .cover_title{ color:#212122 !important; }
.services_list-item .content{
background:#FFFFFF !important;
}
.services_list-item .content_bg{ display:none !important; } /* عکس پسزمینه کارت رو موقت خاموش کن */
.services_list-item .content_bg-overlay{ background:transparent !important; }
.services_list-item .content_main{
color:#212122 !important;
}
.services_list-item .content_main-title{
color:#212122 !important;
}
.services_list-item .content_main-text{
color:#4A4A4A !important;
}
/* دکمه داخل کارت روی زمینه سفید */
.services_list-item .content_main-btn{
background:#9B5BFF !important; /* همون بنفش نئونی */
border-color:#9B5BFF !important;
color:#FFFFFF !important;
}
.services_list-item .content_main-btn:hover,
.services_list-item .content_main-btn:focus{
filter:brightness(1.05) !important;
}
/*== end services white test ==*/
/*== services hover: dark overlay + emphasis on CTA ==*/
.services_list-item {
position: relative;
overflow: hidden;
}
.services_list-item .content {
position: relative;
}
.services_list-item .content::after{
content:"";
position:absolute; inset:0;
background: transparent;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
pointer-events:none;
}
.services_list-item:hover .content::after{
/* لایه تیره؛ اگر بخوای کمی بنفشگونه باشه مقدار آخر رو 0.55 نگه دار */
background: rgba(0,0,0,.55); /* میتونی تست کنی: background: rgba(65,0,130,.45) */
}
.services_list-item .content_main-btn{
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.services_list-item:hover .content_main-btn{
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(155,91,255,.35);
filter: brightness(1.05);
}
/* کمی برجستهسازی کارت روی هاور */
.services_list-item:hover .cover,
.services_list-item:hover .content{
box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
/*== scroll-to-top: simple neon purple ==*/
#scrollTrigger,
.scrollTrigger{
background:#9B5BFF !important; /* بنفش نئونی */
border-color:#9B5BFF !important;
color:#FFFFFF !important; /* رنگ فلش */
box-shadow:none !important; /* حذف هاله */
}
.scrollTrigger:hover{
filter: brightness(1.1) !important; /* روی هاور کمی روشنتر */
}
.scrollTrigger .icon-to-top:before {
color:#FFFFFF !important;
}
/* brands visibility fixes */
.brands.gradient .brands_bg{opacity:1!important;background:linear-gradient(180deg,rgba(142,63,255,.25) 0%,rgba(18,18,18,0) 70%)!important}
.brands.gradient .brands_bg img{display:none!important}
.brands_list-row img{opacity:1!important;filter:none!important}
/* Brands: remove dark overlay */
.brands.gradient .brands_bg,
.brands.gradient .brands_bg:before,
.brands.gradient .brands_bg-overlay{background:transparent!important;opacity:1!important}
/* Brands: make logos visible on dark bg */
.brands_list-row img{filter:brightness(0) invert(1)!important;opacity:1!important}
/* اگر بعضی لوگوها SVG هستند */
.brands_list-row svg *{fill:#fff!important;stroke:#fff!important}
.cta_main .accent{
background: linear-gradient(90deg,#C77DFF 0%, #7C3AED 50%, #5A189A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* برای مرورگرهای غیر-وبکیت هم اجباراً شفاف شه */
}
.header_nav-list_item .dropdown-menu,
.header_nav-list_item .dropdown-list {
background: linear-gradient(
180deg,
#6A4DFF 0%, /* بنفش روشنتر */
#9B5BFF 100% /* بنفش اصلی */
) !important;
border: 1px solid #9B5BFF !important; /* کادر ظریف */
border-radius: 8px !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important; /* سایهی نرم */
}
/* آیتمها هم سفید بمونن */
.header_nav-list_item .dropdown-list .nav-item {
color: #fff !important;
}
.header_nav-list_item .dropdown-list .nav-item:hover,
.header_nav-list_item .dropdown-list .nav-item:focus {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
/* صاف کردن بالای دراپداون + مرتبسازی آیتمها */
.header_nav-list_item .dropdown-menu{
padding-top: 0 !important; /* اون فضای اضافه بالای منو */
margin-top: 10px !important; /* فاصلهی منطقی از نوار ناوبری */
border-radius: 8px !important;
overflow: hidden !important; /* گوشهها تمیز */
box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}
/* بعضی تمپلیتها یه مثلث/دایره تزئینی قبل از منو میسازن */
.header_nav-list_item .dropdown-menu::before,
.header_nav-list_item .dropdown-menu::after{
display: none !important;
}
/* خود لیست و آیتمها */
.header_nav-list_item .dropdown-list{
border: none !important; /* کادر کلی لیست حذف */
background: transparent !important; /* گرادیان قبلی منو رو نگه میداریم */
}
.header_nav-list_item .dropdown-list .list-item{
width: 100% !important;
background: transparent !important;
}
/* هر آیتم: ارتفاع ثابت، بدون کادرهای اضافی */
.header_nav-list_item .dropdown-list .nav-item{
display: block !important;
height: 48px !important;
line-height: 48px !important;
padding: 0 16px !important;
border: none !important;
color: #fff !important;
}
/* مرز ظریف بین آیتمها، بجز آیتم اول */
.header_nav-list_item .dropdown-list .nav-item + .nav-item{
border-top: 1px solid rgba(255,255,255,.12) !important;
}
/* هاور تمیز روی آیتمها */
.header_nav-list_item .dropdown-list .nav-item:hover,
.header_nav-list_item .dropdown-list .nav-item:focus{
background: rgba(255,255,255,.10) !important;
color: #fff !important;
}
/* اگر تمپلیت اولین آیتمِ «اصلی» را به عنوان هدینگ میگذارد، حذفش کن */
.header_nav-list_item .dropdown-menu .list-item[data-main="true"]{
display: none !important;
}
/* =================== HAMBURGER / HEADER OPENED =================== */
/* آیکن همبرگر روی هدر تیره */
.header_trigger,
.header_trigger .icon,
.header_trigger [class^="icon-"],
.header_trigger [class*=" icon-"]{
color:#9B5BFF !important;
}
.header_trigger svg path,
.header_trigger svg line,
.header_trigger svg rect{
stroke:#9B5BFF !important;
fill:#9B5BFF !important;
}
.header_trigger{
width:38px;height:38px;
border:1px solid #9B5BFF !important;
border-radius:6px;
background:transparent !important;
}
.header_trigger:hover,
.header_trigger:focus{
color:#B88CFF !important;
border-color:#B88CFF !important;
}
/* وقتی منو باز یا استیکی است، همون رنگها بماند */
.header.sticky .header_trigger,
.header.opened .header_trigger,
.header.sticky .header_trigger .icon,
.header.opened .header_trigger .icon{
color:#9B5BFF !important;
border-color:#9B5BFF !important;
}
/* اگر با span ساخته شده */
.header_trigger span,
.header_trigger span::before,
.header_trigger span::after{
background:#9B5BFF !important;
}
/* ----------- نسخهی نهایی و یکتا برای .header.opened ----------- */
.header.opened{
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
overflow: hidden !important;
/* یک گرادیان بنفش ملایم (شیشهای نمیکنیم اینجا تا شفاف و خوانا بماند) */
background: linear-gradient(180deg, #2A1750 0%, #6E42C1 40%, #1C0E33 100%) !important;
}
/* لایهی تاریک + بلور زیر محتوا (زیر منو قرار بگیرد) */
.header.opened::before{
content:"";
position: fixed; inset: 0;
z-index: 0; /* مهم: زیر لیست منو */
background: rgba(0,0,0,0.45);
backdrop-filter: blur(6px) saturate(1);
-webkit-backdrop-filter: blur(6px) saturate(1);
}
/* خود لیست منو روی لایهی تاریک باشد */
.header.opened .header_nav-list{
position: relative; z-index: 1;
max-width: 340px !important;
margin: 0 auto !important;
padding: 24px 16px 32px !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* آیتمها خواناتر */
.header.opened .header_nav-list .nav-item,
.header.opened .header_nav-list .nav-link{
color:#FFF !important;
background:transparent !important;
border:none !important;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
letter-spacing:.3px;
line-height:1.35;
}
.header.opened .header_nav-list .nav-link:hover,
.header.opened .header_nav-list .nav-link:focus{
background: rgba(255,255,255,0.08) !important;
border-radius:6px;
}
/* =================== DROPDOWN (مثل "Leistungen") =================== */
/* حذف فاصله/تزئین اضافهٔ بالای کارت */
.header_nav-list_item .dropdown-menu::before,
.header_nav-list_item .dropdown-menu::after{
display:none !important;
}
/* موبایل: کارت جمعوجور، دقیقاً زیر آیتم والد و وسطچین */
.header.opened .header_nav-list_item .dropdown-menu{
position: static !important;
transform: none !important;
left:auto !important; top:auto !important;
width: 280px !important;
margin: 10px auto 0 !important; /* فاصلهٔ منطقی زیر «Leistungen» */
padding-top: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
background: linear-gradient(180deg, #5B2BCF 0%, #8B63FF 100%) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}
.cursor--normal {
background-color: rgba(155, 91, 255, 0.7) !important; /* بنفش همون کدی که داری */
border: 1px solid #9B5BFF !important;
}
//* === Banner: center + responsive + CTA pulse === */
.banner {
padding: 56px 0;
padding-right: 0 !important; /* override قدیمی که بنر رو به راست میزد */
}
.banner .container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.banner_content{
max-width: 920px;
margin: 0 auto 18px;
font-weight: 800;
line-height: 1.15;
letter-spacing: .2px;
/* سایز واکنشگرا */
font-size: clamp(22px, 4vw, 42px);
}
/* دکمه CTA: پالس ملایم + وسطچین */
.banner .btn{
margin: 0 auto; /* وسطچین شدن دکمه */
transform: translateZ(0);
animation: ctaPulse 2.2s ease-in-out infinite;
}
.banner .btn i{ margin-left: 8px; }
/* روی هاور پالس کمتر و کمی بالا بیاد */
.banner .btn:hover{
animation-duration: 3.2s;
transform: translateY(-2px);
}
/* انیمیشن پالس (نه خیلی تند که تو ذوق بزنه) */
@keyframes ctaPulse{
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .42); }
70% { box-shadow: 0 0 0 16px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
/* احترام به کاربران حساس به انیمیشن */
@media (prefers-reduced-motion: reduce){
.banner .btn{ animation: none; }
}
/* ========= CTA: تم تیره + حذف گرادیانهای پسزمینه ========= */
.cta{
background:#111 !important; /* مشکی سایت */
position:relative; overflow:hidden;
}
/* کلاً شکلهای گرادیانی را پنهان کن */
.cta_bg, .cta_bg-shape{ display:none !important; }
/* متن و CTA وسطچین در موبایل */
.cta_main{
padding:64px 0;
color:#fff;
text-align:center;
}
.cta_main .cta_main-action{ margin-top:24px; gap:16px; }
/* مدیای CTA (ویدئو/عکس) در موبایل زیرِ متن بیاید */
.cta_media{ margin:24px 0 0; }
.cta_media-item--main{ height:300px; border-radius:14px; overflow:hidden; }
.cta_media-item--main video,
.cta_media-item--main img{ width:100%; height:100%; object-fit:cover; }
/* دسکتاپ: چینش دو ستونه مرتب و وسطچین کلی */
@media (min-width: 1200px){
.cta_main{ padding:96px 0; text-align:left; }
.cta .container{
max-width:1280px; margin:0 auto; padding:0 20px;
display:grid; grid-template-columns:minmax(0,1fr) 560px;
align-items:center; gap:64px;
}
.cta_media{ margin:0; }
.cta_media-item--main{ height:520px; }
}
/* مانیتورهای بزرگتر کمی نفس بدهیم */
@media (min-width: 1600px){
.cta .container{ max-width:1400px; grid-template-columns:minmax(0,1fr) 640px; gap:80px; }
.cta_media-item--main{ height:600px; }
}
/* اگر تیکر با نما تداخل دارد: در دسکتاپ پنهان یا عقبتر */
.cta .ticker{ display:none; } /* اگر نمیخواهی نشان داده شود */
@media (min-width: 1760px){
/* یا اگر میخواهی باشد ولی مزاحم نشود: */
/* .cta .ticker{ display:block; position:absolute; right:-160px; bottom:-60px; z-index:0; opacity:.6; } */
}
/* دکمهها */
.cta .btn.btn--accent{ box-shadow:0 0 0 0 rgba(139,92,246,.35); }
.cta .btn.btn--accent:hover{ transform:translateY(-2px); }
/* سکشن: زمینه تیره و وسطچین */
/* ===== Vars ===== */
:root{
--gap: 28px;
--radius: 18px;
--card-min-h: 420px;
--orb-d: 260px; /* قطر اُرب */
--section-bg: #0c0c0c; /* پسزمینه سکشن */
}
/* ===== Layout ===== */
.services.section{ background: var(--section-bg); }
.services.section .container{ position: relative; }
.services_list{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: var(--gap);
list-style:none; margin:0; padding:0;
position: relative; z-index: 1;
}
.services_list-item{
position:relative;
background:#fff;
border-radius:var(--radius);
min-height:var(--card-min-h);
overflow:visible;
box-shadow:0 2px 10px rgba(0,0,0,.06);
}
/* ===== Orb (بالای همه) ===== */
.grid-orb{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:var(--orb-d); height:var(--orb-d);
border-radius:50%; pointer-events:none; z-index:4;
}
.grid-orb__core{
position:relative; width:100%; height:100%; border-radius:50%;
background:#111; box-shadow:0 18px 40px rgba(0,0,0,.35);
animation:spin360 18s linear infinite; will-change:transform;
}
.grid-orb__ring{ position:absolute; inset:10%; border-radius:50%;
box-shadow: inset 0 0 0 6px rgba(255,255,255,.9);
}
.grid-orb__logo{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:40%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
animation:spin360 18s linear infinite reverse; pointer-events:none; user-select:none; z-index:2;
}
.services.section:hover .grid-orb__core,
.services.section:hover .grid-orb__logo{ animation-duration:10s; }
@keyframes spin360 { to { transform: rotate(360deg); } }
/* ===== Safe-Zone همگانی (فقط روی متن اصلی) ===== */
.services_list-item{ --safe: calc( (var(--orb-d)/2) + (var(--gap)/2) + 20px ); }
/* ردیف بالا (1..3): فاصله از پایین */
.services_list-item:nth-child(-n+3) .content_main{
position:relative; z-index:1;
padding-bottom: var(--safe) !important;
}
/* ردیف پایین (4..6): فاصله از بالا */
.services_list-item:nth-child(n+4) .content_main{
position:relative; z-index:1;
padding-top: var(--safe) !important;
}
/* بکگراند کارت پشت متن بماند */
.content_main{ position:relative; z-index:1; }
.content_bg, .content_bg-overlay{ position:absolute; inset:0; z-index:0; }
/* ===== برش تمیز شکاف اُرب (فقط 2 و 5) ===== */
.services_list-item:nth-child(2)::after,
.services_list-item:nth-child(5)::before{
content:""; position:absolute; left:50%; transform:translateX(-50%);
width:var(--orb-d); height:var(--orb-d); border-radius:50%;
background:var(--section-bg); z-index:2; pointer-events:none;
}
.services_list-item:nth-child(2)::after{
bottom: calc(-1 * (var(--orb-d)/2 + var(--gap)/2));
}
.services_list-item:nth-child(5)::before{
top: calc(-1 * (var(--orb-d)/2 + var(--gap)/2));
}
/* ===== Responsive ===== */
@media (max-width:900px){
.services_list{ grid-template-columns:1fr; row-gap:var(--gap); }
.services_list-item{ min-height:260px; }
.grid-orb{ display:none; }
.services_list-item:nth-child(3)::after,
.services_list-item:nth-child(4)::before{ content:none !important; }
}
@media (max-width:1100px) and (min-width:901px){
.services_list{ grid-template-columns: repeat(2,1fr); }
}
.services_list-item{
position: relative;
background: #fff;
border-radius: var(--radius);
/* قبلاً فقط var(--card-min-h) بود؛ حالا همقد با Safe-Zone: */
--safe: calc( (var(--orb-d)/2) + (var(--gap)/2) + 20px );
min-height: calc( var(--card-min-h) + var(--safe) );
overflow: visible;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* اورب مثل قبل */
.grid-orb__core{ animation: spin360 18s linear infinite; perspective: 800px; }
@keyframes spin360 { to { transform: rotate(360deg); } }
/* لوگو را از انیمیشن قبلی آزاد کن (چرخش سادهاش را برمیداریم) */
.grid-orb__logo{ animation: none; transform: translate(-50%,-50%); }
.grid-orb__logo{ position:absolute; left:50%; top:50%; width:40%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); pointer-events:none; user-select:none; }
/* گیمبالها: سه محور با زمانبندی و easing متفاوت */
.gimbal{ position:absolute; inset:0; transform-style: preserve-3d; }
.yaw{
animation: yawSpin 23s linear infinite; /* گردش افقی کند */
}
.pitch{
animation: pitchWobble 11.5s ease-in-out infinite;/* نوسان عمودی */
}
.roll{
animation: rollDrift 7.75s cubic-bezier(.4,.0,.2,1) infinite; /* رول نامنظم */
}
/* کلیدفریمها؛ کمی نامتقارن تا «درهم» دیده شود */
@keyframes yawSpin{
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
@keyframes pitchWobble{
0% { transform: rotateX(-10deg); }
25% { transform: rotateX(6deg); }
50% { transform: rotateX(-4deg); }
75% { transform: rotateX(12deg); }
100% { transform: rotateX(-10deg); }
}
@keyframes rollDrift{
80% { transform: rotate(-20deg) translateZ(-1px); }
0% { transform: rotate(0deg) translateZ(0); }
20% { transform: rotate(18deg) translateZ(2px); }
40% { transform: rotate(-14deg) translateZ(-2px); }
60% { transform: rotate(26deg) translateZ(1px); }
100% { transform: rotate(0deg) translateZ(0); }
}
/* روی هاور میتونی تندترش کنی */
.services.section:hover .yaw { animation-duration: 16s; }
.services.section:hover .pitch { animation-duration: 8s; }
.services.section:hover .roll { animation-duration: 5.5s;}
/* اگر کاربر reduced-motion خواست، سادهاش کن */
@media (prefers-reduced-motion: reduce){
.yaw,.pitch,.roll,.grid-orb__core{ animation-duration: 0s !important; animation: none !important; }
}
/* ===== حالت Responsive ویژه اُرب ===== */
@media (max-width:900px){
/* اُرب مخفی نباشه → دوباره نشونش بده */
.grid-orb{ display:block; }
/* بیفته وسط کارت 3 و 4 → یعنی 100% بالا تقسیم بر دو */
.grid-orb{
top: 66.5%; /* وسط بین ردیف اول و دوم (تقریباً 2/3 ارتفاع) */
transform: translate(-50%,-50%);
width: 180px; /* کوچیکتر برای موبایل */
height: 180px;
}
/* کارتها کوتاهتر بشن */
.services_list-item{
min-height: 220px; /* قبلاً 260 بود */
}
/* Safe-zone رو پاک کنیم که متنها زیادی فاصله نگیرن */
.services_list-item .content_main{
padding-top: 16px !important;
padding-bottom: 16px !important;
}
/* نیمدایرههای ماسک غیرفعال بشن */
.services_list-item:nth-child(3)::after,
.services_list-item:nth-child(4)::before{ content:none !important; }
}
/* ===== Brands (با پسزمینهی قبلی شما) ===== */
.brands.gradient{ position:relative; }
.brands.gradient .brands_bg{
background:#f9f9f9; overflow:hidden; position:absolute;
right:0; bottom:0; left:0; top:-40px; opacity:.31; z-index:1;
}
.brands.gradient .brands_bg img{ height:100%; min-height:800px; }
.brands .container{ position:relative; z-index:2; }
.brands_header{ margin-bottom:30px; }
.brands_header-icon{ margin-bottom:10px; }
/* ارتفاع ردیف برندها جایگزین ticker قدیمی */
.brands_list-row{ margin-bottom:15px; }
.brands_list-row:last-child{ margin-bottom:0; }
/* ===== Marquee جدید ===== */
:root{
--brands-bg:#121212; /* پسزمینه سکشن تیره (پشت گرادیان) */
--logo-h:80px; /* ارتفاع لوگوها داخل این سکشن */
--gap:44px;
--fade-w:10%;
}
.brands.section{ background:var(--brands-bg); padding:28px 0; }
/* ظرف اسکرول با فید دوطرفه */
.brands_scroller{
position:relative; overflow:hidden; padding:12px 0; height:100px; /* هماهنگ با طرح قبلی */
}
.brands_scroller::before,
.brands_scroller::after{
content:""; position:absolute; top:0; bottom:0; width:var(--fade-w);
pointer-events:none; z-index:2;
}
.brands_scroller::before{
left:0; background:linear-gradient(to right, var(--brands-bg), rgba(18,18,18,0));
}
.brands_scroller::after{
right:0; background:linear-gradient(to left, var(--brands-bg), rgba(18,18,18,0));
}
/* ریل حرکت (CSS-only) */
.brands_scroller .track{
display:flex; align-items:center; gap:var(--gap);
width:max-content; will-change:transform;
}
.brands_scroller.is-left .track{ animation:marquee-left 26s linear infinite; }
.brands_scroller.is-right .track{ animation:marquee-right 30s linear infinite; }
.brands_scroller:hover .track{ animation-play-state:paused; }
/* خود لوگوها */
.logo{
height:var(--logo-h); width:auto; object-fit:contain; display:block;
flex:0 0 auto; image-rendering:auto; filter:none !important; mix-blend-mode:normal;
}
.logo.is-dark{ filter:invert(1) brightness(1.8) contrast(1); }
/* کلیدفریمها: چون لیست را دوبار تکرار میکنی، -50% بیدرز است */
@keyframes marquee-left { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes marquee-right { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
/* ریسپانسیو */
@media (max-width:1023.98px){
.brands_header{ margin-bottom:60px; }
}
@media (max-width:900px){
:root{ --logo-h:60px; --gap:28px; --fade-w:16%; }
.brands_scroller{ height:84px; }
.brands_scroller.is-left .track{ animation-duration:22s; }
.brands_scroller.is-right .track{ animation-duration:24s; }
}
/* دسترسپذیری */
@media (prefers-reduced-motion:reduce){
.brands_scroller .track{ animation:none !important; }
}
/* Footer (بدون تغییر) */
.footer{ background:#121212; color:#dbdbdb; padding:80px 0; position:relative; }
/* تغییرات layout قدیمی روی اسکرولر جدید اعمالشده؛ نیازی به .ticker-component نیست */
/* ===== Footer — Luxury Dark + Neon Accent ===== */
.footer{
position: relative;
background: #121212;
color: #e9e9e9;
padding: 88px 0 48px;
overflow: hidden;
}
.footer_bg picture, .footer_bg img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:.20; filter: contrast(1.05) saturate(1.1) blur(0.6px);
}
.footer::before{
/* وینیت خیلی لطیف */
content:""; position:absolute; inset:0;
background:
radial-gradient(1000px 600px at 75% 10%, rgba(149,76,255,.18), transparent 60%),
radial-gradient(900px 500px at 20% 90%, rgba(0,255,245,.10), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.55));
pointer-events:none; z-index:1;
}
.footer .container{ position:relative; z-index:2; }
/* CTA Headline + Badge */
.footer_about{
display:grid; gap:20px; margin-bottom:32px;
}
.footer_badge{
width:84px; height:84px; border-radius:20px;
display:grid; place-items:center;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 8px 24px rgba(0,0,0,.35),
0 0 24px rgba(149,76,255,.18);
backdrop-filter: blur(8px);
}
.footer_badge img{ width:58%; height:auto; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.footer_about-slogan_title{
font-weight:800; line-height:1.14; margin:12px 0 8px;
font-size: clamp(28px, 3.6vw, 44px);
letter-spacing:.2px;
}
.footer_about-slogan_title .linebreak{ display:block; }
.footer_about-slogan_text{ opacity:.85; margin:0 0 14px; }
/* Form — glassy + neon button */
.footer_about-form{
gap:12px; flex-wrap:wrap;
}
.footer_about-form .field{
flex:1 1 280px; min-height:48px; border-radius:14px;
background: rgba(255,255,255,.06);
color:#fff; border:1px solid rgba(255,255,255,.16);
padding:12px 16px; outline:none;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer_about-form .field::placeholder{ color:rgba(255,255,255,.55); }
.footer_about-form .field:focus{
border-color: rgba(149,76,255,.65);
box-shadow: 0 0 0 4px rgba(149,76,255,.18);
background: rgba(255,255,255,.085);
}
.btn.btn--accent{
min-height:48px; padding:12px 20px; border-radius:14px;
background: linear-gradient(90deg,#9B5BFF,#6A4DFF);
color:#fff; font-weight:700; letter-spacing:.3px; border:none;
box-shadow:
0 6px 24px rgba(107,77,255,.35),
inset 0 1px 0 rgba(255,255,255,.18);
transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn.btn--accent:hover{
transform: translateY(-1px);
box-shadow:
0 10px 28px rgba(107,77,255,.45),
0 0 18px rgba(155,91,255,.45);
filter: brightness(1.02);
}
/* Grid blocks */
.footer_main{
display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
gap: 28px; align-items:flex-start; margin-top: 26px;
}
.footer_main-block_title{
font-weight:700; margin:0 0 12px; color:#fff;
}
.footer_main-block_content, .footer_main-block_nav{ opacity:.92; }
.footer_main-block_nav.d-flex{ display:flex; flex-direction:column; gap:8px; }
/* Links */
.link--underline, .nav-link{
position:relative; text-decoration:none; color:#e9e9e9;
}
.link--underline::after, .nav-link::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
transform: scaleX(0); transform-origin:center; transition: transform .25s ease;
}
.link--underline:hover::after, .nav-link:hover::after{ transform: scaleX(1); }
/* Copy line */
.footer_copy{
margin: 36px auto 0;
text-align:center; opacity:.72; font-size:.95rem;
position:relative; z-index:2;
}
/* Responsive */
@media (max-width: 1100px){
.footer_main{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 780px){
.footer_main{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
.footer_main{ grid-template-columns: 1fr; }
.footer_about-form .field, .btn.btn--accent{ width:100%; }
}
/* ===== Force-Black Footer (hard override) ===== */
footer.footer{
background: #000 !important; /* مشکی کامل */
position: relative;
}
footer.footer .footer_bg,
footer.footer .footer_bg picture,
footer.footer .footer_bg img{
display: none !important; /* حذف تصویر پسزمینه */
}
footer.footer::before{
content: none !important; /* حذف وینیت/گرادینتهای تزئینی */
}
/* لینکها و متنها همان قبلی بمانند؛ نیازی به تغییر نیست */
/* ===== Mobile: Badge پایین کنار کارت بالا ===== */
/* ===== Force-Black Brands Section ===== */
section.brands{
background: #000 !important; /* مشکی کامل */
position: relative;
}
section.brands .brands_bg,
section.brands .brands_bg img{
display: none !important; /* حذف تصویر بکگراند */
}
section.brands.gradient{
background: #000 !important; /* باز هم مطمئن میشیم گرادینت override بشه */
}
/* ===== Force-Black Services Section ===== */
section.services{
background: #000 !important; /* مشکی کامل */
position: relative;
}
section.services .gradient,
section.services .services_bg,
section.services .services_bg img{
display: none !important; /* حذف هر گرادینت یا تصویر پشت */
}
section.services::before{
content: none !important; /* حذف pseudo-elements احتمالی */
}
/* حذف پسزمینههای سراسری بخشها */
.section, [class*="section"]{
background: transparent !important;
}
/* هر دو سکشن کاملاً مشکی */
section.services,
section.brands{
background: #000 !important;
}
/* جلوگیری از نوار بهخاطر margin collapse */
section.services{ margin-bottom: 0 !important; }
section.brands{ margin-top: 0 !important; }
/* اگر هنوز خطی میبینی، هر pseudo-element یا divider را خنثی کن */
section.services::before,
section.services::after,
section.brands::before,
section.brands::after{
content: none !important;
display: none !important;
}
/* اطمینان: بکگراندهای تصویری برندها خاموش */
section.brands .brands_bg,
section.brands .brands_bg img{ display:none !important; }
/* ===== Global Force Black Background ===== */
html, body {
background:#000 !important;
color:#fff; /* متن پیشفرض روشن */
}
/* همهی سکشنها و بلاکهای عمومی */
section, header, footer, main, .section, [class*="section"] {
background:#000 !important;
position:relative;
}
.gradient { background:#000 !important; }
/* خاموش کردن pseudoهای تزئینی */
section::before, section::after,
header::before, header::after,
footer::before, footer::after {
content:none !important;
display:none !important;
}
/* ===== Force-Black CTA Section ===== */
section.cta{
background: #000 !important; /* مشکی کامل */
position: relative;
}
section.cta .cta_bg,
section.cta .cta_bg-shape,
section.cta .cta_bg img{
display: none !important; /* حذف تصاویر گرادینتی */
}
section.cta::before,
section.cta::after{
content: none !important; /* غیرفعال کردن pseudo-elementها */
}
/* Scroll-to-top */
.scrollTrigger{
position: fixed; right: 20px; bottom: 20px;
width: 48px; height: 48px; border: 0; border-radius: 50%;
display: grid; place-items: center;
background: rgba(0,0,0,.6); color: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
opacity: 0; transform: translateY(10px);
pointer-events: none; transition: .22s ease; z-index: 5000;
}
.scrollTrigger i{ font-size: 18px; line-height: 1; }
.scrollTrigger.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.scrollTrigger:hover{ background: rgba(0,0,0,.8); }
.phones-stage {
position: relative;
width: 100vw;
height: 350px;
min-height: 200px;
overflow: visible;
display: block;
}
/* =========================================================
Mobile Showcase — FULL CSS
توضیحات فارسی جلو هر بلاک آمده تا دقیق بدانی هر بخش چه میکند
========================================================= */
/* سکشن اصلی: پسزمینه تیره، وسطچین، بستر کارتها */
.mobile-showcase{
position: relative; z-index: 3;
padding: clamp(60px, 8vw, 120px) 0;
background:#0f0f0f;
overflow: clip; /* جلوگیری از اسکرول افقی در حرکتها */
display:flex; justify-content:center; align-items:center;
}
/* استیج کارتها: محدودکنندهٔ عرض و سایهٔ کلی */
.phones-stage{
max-width: 1400px; margin:0 auto;
min-height: clamp(420px, 52vw, 680px);
position: relative;
display:flex; justify-content:center;
filter: drop-shadow(0 14px 54px #b97cff11);
overflow: hidden; /* مخصوص موبایل: خروج کارتها از دید */
}
/* قاب کلی هر گوشی (ظاهر بدنهٔ موبایل) */
.phone{
width: clamp(242px, 18vw, 360px);
aspect-ratio: 10 / 20; /* نسبت کلی بدنهٔ گوشی عمودی */
border: clamp(4px, .41vw, 9px) solid #b97cff;
border-radius: clamp(28px, 2.7vw, 45px);
padding: clamp(12px, 1vw, 18px);
background: linear-gradient(120deg, #201837 0%, #463796 100%);
display:flex; flex-direction:column; align-items:center;
box-shadow: 0 9px 28px #b97cff15;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
position: relative;
}
/* صفحهٔ داخل گوشی (پسزمینهٔ گرادیانی + گردی) */
.phone__screen{
width:100%; height:100%;
border-radius: clamp(20px, 2vw, 32px);
background: radial-gradient(120% 120% at 26% 18%, #a28fff 0%, #6144b7 63%, #201837 100%);
box-shadow: inset 0 0 12px #b97cff22;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
padding-top: 20px;
position: relative; overflow:hidden;
}
/* محتوای تیتر و توضیح بالای ویدئو */
.slide{
width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
color:#fff; text-align:center;
}
.slide h5{
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 900;
margin: 0 0 6px 0;
text-shadow: 0 2px 7px #3c276888;
}
.slide p{
font-size: clamp(14px, 1.9vw, 17px);
color: #ebdbfc; margin: 0 0 13px 0; opacity: .96;
text-shadow: 0 4px 10px #1c144288;
}
/* ویدئو: کاملاً داخل صفحه، گرد، و بدون مزاحمت برای کلیک روی کارت */
.slide video{
margin: 2px auto 0 auto;
width: 98%;
height: 88%;
max-height: 340px;
min-height: 120px;
aspect-ratio: 9 / 16;
object-fit: cover; /* همیشه داخل کادر تمیز */
border-radius: 16px;
box-shadow: 0 11px 38px #b97cff45;
background:#22203e;
display:block;
pointer-events: none; /* تا کلیک، به والد برسد و کارت «فوکوس» بگیرد */
}
/* بازیگر کارتها: موقعیت مطلق + انیمیشن؛ متغیرهای زمان و تأخیر با JS ست میشوند */
.phone-actor{
position:absolute; top:50%; left:50%;
transform: translate(-50%, -50%);
z-index:1; will-change: transform;
--dur: 28s; /* مدت حرکت: با JS شخصیسازی میشود */
--delay: 0s; /* تأخیر شروع: با JS شخصیسازی میشود */
}
/* حالت بالا آمدن کارت (روی بقیه) — هنگام hover/focus/کلاس دستی */
.phone-actor.is-top{ z-index: 9; }
.phone-actor.is-top .phone,
.phone-actor:hover .phone,
.phone-actor:focus-visible .phone{
transform: scale(1.06);
box-shadow: 0 22px 84px #beadff77, 0 0 2px #fff !important;
border-color:#e7dbff;
}
/* =========================
دسکتاپ: حرکت رفت-و-برگشتی نرم (unsynced)
همیشه B و C حوالی مرکز باشند؛ hover/focus کارت را میآورد بالا
========================= */
@media (min-width: 769px){
.phones-stage{ min-height: clamp(520px, 52vw, 680px); }
/* جایگذاری افقی پایه (B و C مرکزیتر) */
.phone-actor.a{ left: 18%; }
.phone-actor.b{ left: 42%; }
.phone-actor.c{ left: 58%; }
.phone-actor.d{ left: 82%; }
/* انیمیشن اصلی دسکتاپ */
.phone-actor{
animation: desktopDrift var(--dur) cubic-bezier(.77,.29,.41,1) var(--delay) infinite;
}
@keyframes desktopDrift{
0% { transform: translate(-50%, -50%) translateX(28vw) scale(.96); }
25% { transform: translate(-50%, -50%) translateX(0) scale(1.03); }
50% { transform: translate(-50%, -50%) translateX(-26vw) scale(.96); }
75% { transform: translate(-50%, -50%) translateX(0) scale(1.02); }
100% { transform: translate(-50%, -50%) translateX(28vw) scale(.96); }
}
/* وقتی کارت «فوکوس/گرفته» شد: انیمیشن متوقف + در همان وضعیت فریز */
.phone-actor:focus,
.phone-actor.is-held{
animation-play-state: paused !important; /* توقف نرم بدون پریدن */
}
}
/* =========================
موبایل: مارکی (چپ → راست) با loop
همیشه حداقل یک کارت در صحنه؛ ویدئو فیکس و تمیز نمایش داده میشود
========================= */
/* ===== موبایل: مارکیِ چپ→راست با همپوشانی کنترلشده ===== */
@media (max-width: 768px){
.phones-stage{
min-height: 67vh; /* ارتفاع صحنه */
overflow: hidden; /* خروج کارتها بیرون صفحه پنهان شود */
position: relative;
}
/* بدنه گوشیها (همون استایل خودت + کمی جمعوجور) */
.phone{ width: min(88vw, 340px); }
.phone__screen{ min-height: 263px; padding-top: 10px; }
.slide h5{ font-size: clamp(17px,5vw,23px); }
.slide p { font-size: clamp(13px,3.2vw,15px); }
.slide video{
/* ویدیو فیکس داخل کادر موبایل */
width: 100%; height: auto; aspect-ratio: 9/16;
min-height: 140px; max-height: 570px;
object-fit: cover; border-radius: 18px;
background: #181227; box-shadow: 0 7px 28px #b97cff36;
margin-top: 8px; display: block;
pointer-events: none; /* کلیک به والد برسد (فوکوس بگیرد) */
}
/* هر کارت: حالت حرکت مارکی، از چپ میآید و راست خارج میشود */
.phone-actor{
position: absolute; top: 52%; left: -60vw; /* شروع بیرونِ چپ */
transform: translate(0,-50%);
z-index: 1; /* لایهی پایه */
animation: mobileMarquee 20s linear infinite both; /* both=فریم اول/آخر ثابت */
/* نکته: delays پایین برای جلوگیری از «صفحه خالی» ست شده */
}
/* انیمیشن مارکی */
@keyframes mobileMarquee{
0% { transform: translate(-60vw, -50%); } /* کاملاً بیرون از چپ */
100% { transform: translate(120vw, -50%); } /* کاملاً بیرون از راست */
}
/* تا هیچوقت صحنه خالی نشود: تاخیرها stagger شدهاند */
.phones-stage .phone-actor:nth-child(1){ animation-delay: 0s; }
.phones-stage .phone-actor:nth-child(2){ animation-delay: -5s; }
.phones-stage .phone-actor:nth-child(3){ animation-delay: -10s; }
.phones-stage .phone-actor:nth-child(4){ animation-delay: -15s; }
/* اگر کارتهای بیشتری داری، به همین الگو ادامه بده (هر 5s منفیتر). */
/* اختلاف ارتفاع جزئی برای حس عمق و کاهش همپوشانی ناخوشایند */
.phone-actor.a{ top: 47%; }
.phone-actor.b{ top: 52%; }
.phone-actor.c{ top: 57%; }
.phone-actor.d{ top: 50%; }
/* ———— گرفتن/فریز کارت روی تاچ/کلیک ———— */
/* ۱) وقتی کارت فوکوس میگیرد: انیمیشنش Pause شود و به لایهی بالا برود */
.phone-actor:focus,
.phone-actor:focus-visible,
.phone-actor.is-held{ /* (در صورت استفاده از JS) */
animation-play-state: paused !important; /* توقف نرم در فریم جاری */
z-index: 9999 !important; /* بیاید روی همه */
}
/* ۲) وقتی یک کارت فوکوس است، بقیه قطعاً زیر آن باشند (نیازمند :has؛ در Chrome/Edge/Safari OK) */
.phones-stage:has(.phone-actor:focus) .phone-actor:not(:focus){
z-index: 1 !important; /* بقیه پایین بمانند */
}
.phones-stage:has(.phone-actor.is-held) .phone-actor:not(.is-held){
z-index: 1 !important; /* اگر با کلاس نگه داشتی */
}
/* ۳) افکت ظریف برای کارت فوکوس (بزرگنمایی و درخشش) */
.phone-actor:focus .phone,
.phone-actor:focus-visible .phone,
.phone-actor.is-held .phone{
transform: scale(1.06);
box-shadow: 0 22px 84px #beadff77, 0 0 2px #fff !important;
border-color: #e7dbff;
}
/* ۴) کاهش مزاحمت بصری کارتهای غیر فوکوس؛ اختیاری */
.phones-stage:has(.phone-actor:focus) .phone-actor:not(:focus) .phone{
filter: saturate(.85) brightness(.95);
}
/* ===== MOBILE — کارتها کامل داخل کادر باشند ===== */
@media (max-width: 768px){
/* استیج: قد کمی بلندتر برای جا شدن کامل کارت */
.phones-stage{
position: relative;
min-height: 78vh; /* قد صحنه؛ کارت کامل میگنجد */
overflow: hidden; /* جلوی اسکرول افقی */
}
/* بدنهی گوشی: ارتفاع بر اساس vh تا بریده نشود */
.phone{
/* 🔵 توضیح: ارتفاع کارت را محدود میکنیم تا همیشه کامل دیده شود */
height: min(72vh, 560px); /* اگر صفحه کوتاه باشد، باز هم جا میشود */
aspect-ratio: 10 / 20; /* نسبت بدنه موبایل */
width: auto; /* از aspect-ratio مشتق میشود */
max-width: 88vw; /* از عرض بیرون نزند */
}
.phone__screen{
min-height: unset;
padding-top: 10px;
}
/* متنها کمی جمعوجورتر */
.slide h5{ font-size: clamp(17px, 5vw, 22px); }
.slide p { font-size: clamp(13px, 3.2vw, 15px); }
/* ویدیو داخل قاب گوشی فیکس و تمیز */
.slide video{
width: 100%;
height: auto;
aspect-ratio: 9 / 16;
min-height: 140px;
max-height: calc(100% - 56px); /* 🔵 توضیح: بالاسری متن را حساب میکنیم تا از قاب نزند بیرون */
object-fit: cover;
border-radius: 18px;
background: #181227;
box-shadow: 0 7px 28px #b97cff36;
margin-top: 8px;
display: block;
pointer-events: none; /* کلیک به والد برسد تا فوکوس بگیرد */
}
/* 🔵 حرکت مارکی: از بیرونِ چپ → عبور کامل از صحنه → خروج کامل از راست */
.phone-actor{
position: absolute;
top: 50%;
left: 0; /* مبدأ حرکت از لبهٔ چپ استیج */
transform: translate(-110%, -50%); /* شروع: کل کارت بیرون از چپ (110% عرض خود کارت) */
z-index: 1;
animation: mobileMarquee var(--dur, 20s) linear var(--delay, 0s) infinite both;
}
/* 🔵 کل کارت قبل از خروج، کامل دیده میشود
از -110% (کامل بیرون چپ) تا calc(100vw + 10%) (کامل بیرون راست) */
@keyframes mobileMarquee{
0% { transform: translate(-110%, -50%); }
100% { transform: translate(calc(100vw + 10%), -50%); }
}
/* اختلاف ارتفاع بسیار ملایم برای عمق دید */
.phone-actor.a{ top: 46%; }
.phone-actor.b{ top: 50%; }
.phone-actor.c{ top: 54%; }
.phone-actor.d{ top: 48%; }
/* 🔵 تا صحنه هیچوقت خالی نشود: تاخیر پلهای */
.phones-stage .phone-actor:nth-child(1){ --delay: 0s; --dur: 20s; }
.phones-stage .phone-actor:nth-child(2){ --delay: -5s; --dur: 20s; }
.phones-stage .phone-actor:nth-child(3){ --delay: -10s; --dur: 20s; }
.phones-stage .phone-actor:nth-child(4){ --delay: -15s; --dur: 20s; }
/* 🔵 گرفتن/فریز کارت روی تاچ/کلیک */
.phone-actor:focus,
.phone-actor:focus-visible,
.phone-actor.is-held{
animation-play-state: paused !important; /* فریز در همان فریم */
z-index: 9999 !important; /* بیاید روی همه */
}
.phone-actor:focus .phone,
.phone-actor:focus-visible .phone,
.phone-actor.is-held .phone{
transform: scale(1.06);
box-shadow: 0 22px 84px #beadff77, 0 0 2px #fff !important;
border-color: #e7dbff;
}
/* 🔵 وقتی یک کارت فوکوس است، بقیه زیر آن بمانند (نیازمند :has) */
.phones-stage:has(.phone-actor:focus) .phone-actor:not(:focus){
z-index: 1 !important;
}
.phones-stage:has(.phone-actor.is-held) .phone-actor:not(.is-held){
z-index: 1 !important;
}
/* احترام به reduce motion */
@media (prefers-reduced-motion: reduce){
.phone-actor{ animation: none !important; }
}
}
/* ---- MOBILE tweaks: جلوگیری از افتادن زیر سکشن بعدی ---- */
@media (max-width: 768px){
/* 1) فضای پایهی بیشتر برای سکشن موبایل */
.mobile-showcase{
padding-bottom: max(10vh, 96px); /* فضای امن عمقی */
overflow-x: clip; /* فقط افقی را ببُر؛ عمودی آزاد بماند */
overflow-y: visible; /* اجازه بده رشد کارت دیده شود */
}
/* 2) وقتی کارت فوکوس است، قد صحنه کمی بیشتر شود */
.phones-stage:has(.phone-actor:focus),
.phones-stage:has(.phone-actor.is-held){
min-height: 95vh; /* از 78vh → 84vh (یا هر عددی که دوست داری) */
}
/* 3) موقع بزرگشدن، از پایین ثابت شود و به بالا رشد کند */
.phone-actor .phone{
transform-origin: center bottom; /* نقطهی رشد: پایین کارت */
}
/* 4) همان افکت بزرگشدن قبلی، ولی چون origin پایین است، به بالا رشد میکند */
.phone-actor:focus .phone,
.phone-actor:focus-visible .phone,
.phone-actor.is-held .phone{
transform: scale(1.06);
}
}
@media (max-width: 768px){
/* هالهٔ کلی صحنه را کمرنگ یا خاموش کن */
.phones-stage{ filter: drop-shadow(0 10px 28px rgba(185,124,255,0.06)); }
/* یا کامل خاموش: filter:none; */
/* هالهٔ دور گوشی */
.phone{ box-shadow: 0 2px 5px rgba(185,124,255,0.14); }
/* هالهٔ ویدیو داخل گوشی */
.slide video{ box-shadow: 0 6px 18px rgba(185,124,255,0.22); }
/* هالهٔ حالت فوکوس/کلیک (وقتی بزرگ میشه) */
.phone-actor:focus .phone,
.phone-actor.is-held .phone{
box-shadow: 0 12px 44px rgba(190,173,255,0.42), 0 0 1px rgba(255,255,255,0.9) !important;
}
}