html, body{
scroll-behavior:smooth;
}
@keyframes highlightTarget{
0%{
background: rgba(9, 9, 121, 0.534);
}
100%{
background: transparent;
box-shadow: none;
}
}
#about{
scroll-margin-top:60px;
}
#taghdir{
scroll-margin-top:60px;
}
#mojavez{
scroll-margin-top:60px;
}
#mojavez1{
scroll-margin-top:60px;
}
#taze{
scroll-margin-top:60px;
}
#sazeman{
scroll-margin-top:60px;
}
#about:target{
animation: highlightTarget 2.5s ease;
}
#taghdir:target{
animation: highlightTarget 2.5s ease;
}
#mojavez:target{
animation: highlightTarget 2.5s ease;
}
#mojavez1:target{
animation: highlightTarget 2.5s ease;
}
#taze:target{
animation: highlightTarget 2.5s ease;
}
#sazeman:target{
animation: highlightTarget 2.5s ease;
}
.anchor-section{
scroll-margin-top:60px;
}
.anchor-section:target{
animation: highlightTarget 5.5s ease;
}
/* هایلایت مخصوص کارتهای تقدیرنامهی جابهجاشده */
.cert-frame.highlight-frame{
animation: highlightCertFrame 7.5s ease;
}
@keyframes highlightCertFrame{
0%{
background: rgba(158, 253, 250, 0.147);
box-shadow:
0 0 0 4px rgba(9, 9, 121, 0.866),
0 16px 30px rgba(0,0,0,.16);
}
100%{
background: #fff;
box-shadow:
0 6px 16px rgba(0,0,0,.10),
0 2px 6px rgba(0,0,0,.06);
}
}
body{
min-height:100vh;
margin:0;
font-size:clamp(16px,2vw,18px);
font-family: Vazirmatn, system-ui, sans-serif;
background-color:rgb(242, 241, 235);
display:flex;
flex-direction:column;
user-select:none;
}
/* ====================================================================
PDF + VIDEO FILES
==================================================================== */
.files-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
gap: 20px;
width: 100%;
direction: ltr;
box-sizing: border-box;
}
/* =========================================
کارت PDF
========================================= */
.card_sabet-title2 {
width: clamp(90px, 16vw, 140px);
flex: 0 1 clamp(90px, 16vw, 140px);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
/* =========================================
کارت VIDEO (بزرگتر از PDF)
========================================= */
.card_sabet-title2-has-video {
width: clamp(180px, 30vw, 280px); /* بزرگتر از کارت PDF */
flex: 0 1 clamp(180px, 30vw, 280px);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
/* =========================================
VIDEO
========================================= */
.card_sabet-title2-has-video video {
display: block;
width: 100%;
aspect-ratio: 12 / 9;
object-fit: contain;
background: #000;
border-radius: 8px;
}
/* =========================================
PDF
========================================= */
.pdf-link {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
text-decoration: none;
}
.pdf-icon {
display: block;
width: 100%;
height: 100%;
background-image: url('/static/myapp01/img/icon/pdf-icon.JPG');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 8px;
cursor: pointer;
transition: transform .2s ease, opacity .2s ease;
}
.pdf-icon:hover {
transform: scale(1.03);
opacity: .9;
}
/* =========================================
عنوان PDF و Video
========================================= */
.pdf-name,
.video-name {
width: 100%;
min-height: 40px;
margin: 10px 0 0;
padding: 0;
display: flex;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
text-align: center;
direction: rtl;
color: #2f2f2f;
font-size: clamp(12px, 2.5vw, 14px);
}
/* =========================================
حالت نبودن فایل
========================================= */
.files-row p {
margin: 0;
text-align: center;
color: #666;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 480px) {
.files-row {
display: grid;
grid-template-columns: repeat(1, 1fr);
justify-content: center;
justify-items: center;
gap: 10px;
padding: 0 5px;
box-sizing: border-box;
}
/* PDF در موبایل */
.card_sabet-title2 {
width: 42vw;
max-width: 200px;
min-width: 0;
}
.pdf-link {
width: 42vw;
height: 42vw;
max-width: 200px;
max-height: 200px;
}
.pdf-icon {
width: 100%;
height: 100%;
}
/* VIDEO در موبایل — بزرگتر از PDF */
.card_sabet-title2-has-video {
width: 60vw;
max-width: 280px;
min-width: 0;
}
.card_sabet-title2-has-video video {
width: 100%;
aspect-ratio: 12 / 9;
height: auto;
}
}
/* =========================================
گوشیهای خیلی کوچک
========================================= */
@media (max-width: 360px) {
.files-row {
gap: 8px;
}
.card_sabet-title2 {
width: 43vw;
}
.pdf-link,
.pdf-icon {
width: 43vw;
height: 43vw;
}
.card_sabet-title2-has-video {
width: 62vw;
max-width: 260px;
}
.card_sabet-title2-has-video video {
width: 100%;
aspect-ratio: 12 / 9;
height: auto;
}
}
/* HEADER */
.header{
position:fixed;
top:0;
right:0;
width:100%;
height:60px;
display:flex;
align-items:center;
padding:0 20px;
color:#fff;
z-index:1000;
justify-content:space-between;
background: rgba(255, 255, 255, 0.23);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.3px);
-webkit-backdrop-filter: blur(3.3px);
border-bottom: 1px solid rgba(255, 255, 255, 0.47);
}
.header__toggle{
cursor:pointer;
margin-left:20px;
font-size:30px;
color: #2c3e50;
}
.server3d{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:430px;
overflow:hidden;
background: url('/static/myapp01/img/zamine11.png') center/cover no-repeat;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.server3d model-viewer{
position:relative;
width:100%;
height:100%;
background:transparent;
z-index:2;
}
.server3d::after{
content:"";
position:absolute;
left:50%;
bottom:55px;
transform:translateX(-50%);
width:280px;
height:55px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(0,185,255,.55) 0%,
rgba(0,185,255,.30) 35%,
rgba(0,185,255,.12) 70%,
transparent 100%);
filter:blur(28px);
z-index:1;
animation:glowFloor 4s ease-in-out infinite;
}
@keyframes glowFloor{
0%{
transform:translateX(-50%) scale(.95);
opacity:.55;
}
50%{
transform:translateX(-50%) scale(1.08);
opacity:.9;
}
100%{
transform:translateX(-50%) scale(.95);
opacity:.55;
}
}
@media(max-width:768px){
.server3d{
height:320px;
background: url('/static/myapp01/img/zamine3.png') center/cover no-repeat;
border-radius:5px;
}
.server3d::after{
width:190px;
height:40px;
bottom:38px;
}
}
@media(max-width:480px){
.server3d{
height:200px;
background: url('/static/myapp01/img/zamine3.png') center/cover no-repeat;
border-radius: 5px;
}
.server3d::after{
width:140px;
height:28px;
bottom:28px;
}
}
.overlay-text5-wrapper{
position:absolute;
top:30%;
right:25%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
z-index:5;
}
.overlay-text4-wrapper{
position:absolute;
top:30%;
left:25%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
z-index:5;
}
.overlay-title-4-5{
font-family:Vazirmatn,system-ui,sans-serif;
font-size:clamp(24px,3vw,34px);
font-weight:500;
letter-spacing:.8px;
margin:0;
place-self: center;
background: linear-gradient(90deg, #fde7a5a3, rgb(249, 250, 250), rgb(150, 150, 150)) -100%/ 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(0 1px 0 rgba(255,255,255,.55))
drop-shadow(0 -1px 0 rgba(0,0,0,.35))
drop-shadow(0 2px 2px rgba(0,0,0,.3));
animation: shimmer-title-4-5 5s linear infinite;
}
@keyframes shimmer-title-4-5 {
to { background-position: 100%; }
}
@media (forced-colors: active) {
.overlay-title-4-5 {
background: #212121;
color: aquamarine;
}
}
@media (max-width:768px){
.overlay-text4-wrapper{
left:10vw;
top: 90%;
}
.overlay-text5-wrapper{
right:10vw;
top: 90%;
}
.overlay-title-4-5{
font-size:22px;
}
}
@media (max-width:480px){
.overlay-text4-wrapper{
left:5vw;
top: 90%;
}
.overlay-text5-wrapper{
right:5vw;
top: 90%;
}
.overlay-title-4-5{
font-size:16px;
}
}
@media (min-width:769px) and (max-width:1200px){
.server3d{
height:350px;
background: url('/static/myapp01/img/zamine3.png') center/cover no-repeat;
border-radius:5px;
}
.overlay-text4-wrapper{
left:15vw;
top: 90%;
}
.overlay-text5-wrapper{
right:15vw;
top: 90%;
}
.overlay-title-4-5{
font-size:24px;
}
}
/* ✅ SEARCH BOX */
/* SEARCH */
.search-container{
position:relative;
display:flex;
align-items:center;
margin-left:50px;
}
.search-input{
width:0;
padding:8px;
border:1px solid #ccc;
border-radius:20px;
outline:none;
transition: width 0.4s ease, opacity 0.4s ease;
opacity:0;
pointer-events: none;
}
.search-container.active .search-input{
width:200px;
opacity:1;
margin-left:8px;
pointer-events: auto;
}
.search-btn {
background: #2c3e50;
color: white;
border: none;
outline: none;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
line-height: 1;
box-sizing: border-box;
flex-shrink: 0; /* مهم: چون داخل یه flex container (search-container) هست */
display: flex;
align-items: center;
justify-content: center;
}
/* SIDEBAR */
/* SIDEBAR */
/* سایدبار */
.l-navbar{
position: fixed;
top: 60px;
right: 0;
width: 220px;
max-height: 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.23);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 0 12px;
border-left: 1px solid rgba(255, 255, 255, 0.47);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
transition: max-height .35s ease, padding .25s ease;
z-index: 999;
border-bottom-left-radius: 18px;
}
.l-navbar a:hover{
background: rgba(255, 255, 255, 0.35);
}
.l-navbar img{
width: auto;
height: 20px;
display: block;
}
/* هنگام باز شدن */
.l-navbar.open{
max-height: 500px;
padding: 15px 10px;
}
/* لینکها */
.nav_link{
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-radius: 10px;
color: #2b2b2b;
text-decoration: none;
margin-bottom: 8px;
font-weight: 500;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
opacity: 0;
transform: translateY(-8px);
transition:
opacity .25s ease,
transform .25s ease,
background .2s ease,
border-color .2s ease;
}
.nav_link:hover{
border-color: rgba(255, 255, 255, 0.5);
}
/* وقتی سایدبار باز شد آیتمها دیده شوند */
.l-navbar.open .nav_link{
opacity: 1;
transform: translateY(0);
}
/* تأخیر پلکانی برای لینکها (افکت آبشاری) */
.l-navbar.open .nav_link:nth-child(1){ transition-delay: .05s; }
.l-navbar.open .nav_link:nth-child(2){ transition-delay: .10s; }
.l-navbar.open .nav_link:nth-child(3){ transition-delay: .15s; }
.l-navbar.open .nav_link:nth-child(4){ transition-delay: .20s; }
.l-navbar.open .nav_link:nth-child(5){ transition-delay: .25s; }
.l-navbar.open .nav_link:nth-child(6){ transition-delay: .30s; }
/* آیکون منو */
#header-toggle{
cursor: pointer;
transition: transform .3s ease;
}
#header-toggle.rotate{
transform: rotate(90deg);
}
/*✅ LOGIN & SIGNUP BUTTONS */
.header__auth{
display:flex;
gap:10px;
margin-left:30px;
}
.auth-btn{
color:#fff;
text-decoration:none;
transition:.25s;
white-space:nowrap;
}
.auth-btn:hover{
background:#79797981;
border-radius:25%;
}
.article-content *{
font-family: Vazirmatn, system-ui, sans-serif !important;
font-size:clamp(16px,2vw,18px);
color:#131313 ;
}
.article-content {
direction: rtl;
text-align: justify;
line-height: 1.7;
padding-right: 2%;
padding-left: 2%;
}
.article-special {
position: relative;
height: 500px;
width: 90%;
margin: 0 auto;
overflow: hidden;
border-radius: 8px;
border: 3px solid transparent;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(143deg, rgb(17, 11, 147) 0%, rgb(1, 112, 134) 40%, rgba(0, 212, 255, 1) 100%) border-box;
}
.bg-img{
position:absolute;
width:70%;
opacity:.20;
pointer-events:none;
user-select:none;
}
.img1{
top: -10%;
left: -5%;
height: auto !important;
}
.img2{
bottom: -10%;
right: -5%;
height: auto;
}
.spotlight{
position:absolute;
width:800px;
height:300px;
border-radius:5px;
z-index:2;
box-shadow:
0 0 0 9999px rgba(255,255,255,1),
inset 0 0 30px rgba(255,255,255,.70);
pointer-events:none;
left:10px;
top:10px;
transition:
left 12s ease-in-out,
top 12s ease-in-out;
}
/*===========================================card3-glass=========================*/
.card3-glass{
background:rgba(255,255,255,.82);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.4);
box-shadow:
0 8px 25px rgba(0,0,0,.08);
}
.card3-wide{
width:100%;
max-width:900px;
margin:auto;
}
.article-bg{
position:absolute;
inset:0;
overflow:hidden;
}
.article-scroll{
position:relative;
z-index:2;
overflow-y:auto;
height:100%;
scrollbar-color:#7fa4c9 transparent;
}
/* ckeditor*/
/*--------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------*/
.article-content img {
width: 45% !important;
height: auto !important;
display: block;
margin: 10px 0;
border-radius: 6px;
opacity: 0;
will-change: transform, opacity;
transition:
transform 1.1s cubic-bezier(.16,.84,.32,1),
opacity 1.1s ease-out,
box-shadow .4s ease;
background: #fff;
padding: 8px;
box-shadow:
0 10px 20px rgba(0,0,0,.18),
0 25px 45px rgba(0,0,0,.14),
0 2px 6px rgba(0,0,0,.10);
}
.article-content img:hover{
box-shadow:
0 14px 28px rgba(0,0,0,.22),
0 35px 60px rgba(0,0,0,.16),
0 3px 8px rgba(0,0,0,.12);
transform: translateY(-4px);
}
.certificates-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 24px;
padding: 10px;
}
.cert-frame{
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 10px;
border: 1px solid #e2e2e2;
background: #fff;
padding: 10px;
box-shadow:
0 6px 16px rgba(0,0,0,.10),
0 2px 6px rgba(0,0,0,.06);
cursor: pointer;
transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.cert-frame.in-view{
opacity: 1;
transform: translateY(0);
}
.cert-frame.in-view img{
opacity: 1;
transform: scale(1);
}
.cert-frame img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 6px;
display: block;
opacity: .45;
transform: scale(.8);
transition:
transform 1s cubic-bezier(.22,.61,.36,1),
opacity 1s ease-out;
}
.cert-frame:hover{
border-color: #1a3c6e;
box-shadow:
0 16px 30px rgba(0,0,0,.16),
0 4px 10px rgba(0,0,0,.08);
transform: translateY(-3px);
}
.cert-frame:hover img{
transform: scale(1.08);
}
.cert-frame::after{
content:"مشاهده ";
position:absolute;
inset: 10px;
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:14px;
background: linear-gradient(to top, rgba(9, 9, 121, 0.866), transparent 55%);
color:#fff;
font-size:14px;
border-radius:6px;
opacity:0;
transition: opacity .3s ease;
pointer-events:none;
}
.cert-frame:hover::after{
opacity:1;
}
.cert-lightbox{
position:fixed;
inset:0;
background: rgba(0,0,0,.85);
display:none;
align-items:center;
justify-content:center;
z-index:2000;
padding: 30px;
}
.cert-lightbox.active{
display:flex;
}
.cert-lightbox img{
max-width:90%;
max-height:90%;
border-radius:8px;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cert-lightbox-close{
position:absolute;
top:10px;
right:30px;
font-size:36px;
color:#fff;
cursor:pointer;
}
.certificates-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 900px;
margin: 40px auto;
padding: 0 16px;
}
.cert-frame {
position: relative;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 4 / 3;
border: 1px solid #e2e2e2;
background: #f6f8fb;
padding: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
.cert-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 6px;
transition: transform 0.4s ease;
}
.cert-frame:hover {
border-color: #1a3c6e;
box-shadow: 0 8px 24px rgba(26, 60, 110, 0.12);
transform: translateY(-3px);
}
.cert-frame:hover img {
transform: scale(1.04);
}
/* استایل دادن به لیستهای نشانکدار که در ادیتور میسازید */
/* pagination*/
.pagination{
margin-top:40px;
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
}
.pagination a,
.pagination span{
padding:8px 14px;
border:1px solid #ddd;
text-decoration:none;
border-radius:5px;
color:#909090;
}
.pagination a:hover{
background:#f1f1f1;
}
.pagination .active{
background:#007bff;
color:white;
border-color:#007bff;
}
.pagination .disabled{
color:#999;
background:#f9f9f9;
cursor:not-allowed;
}
/* CONTENT */
.content{
margin-top:60px;
margin-right:0px;
padding:5px;
transition:.3s;
}
/* CARDS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin:10px;
box-sizing: border-box;
max-width: 100%;
}
.cards2{
display:grid;
gap:5px;
margin-bottom:10px;
}
.cards3{
display:grid;
gap:5px;
margin-bottom:0px;
}
.card{
background:white;
padding:10px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
transition:0.3s;
}
.cardimg{
background:white;
border-radius:8px;
}
.cardimg img {
width: 100%;
height: auto;
border-radius:8px;
object-fit: cover;
}
/*===========================================uptodate1======================*/
.card3{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
margin-bottom:5px;
margin-top:10px;
text-align:center;
box-sizing: border-box; /* این خط اضافه بشه */
max-width: 100%; /* این هم برای اطمینان بیشتر */
}
.card3 img {
width: 100%;
height: 200px;
border-radius:8px;
object-fit: cover;
}
.card3 video {
width: 100%;
height: 200px;
border-radius:8px;
object-fit: cover;
}
.card:hover{
transform:translateY(-3px);
box-shadow:0 6px 15px rgba(0,0,0,0.12);
}
.card-title{
color:#383838;
margin-bottom:8px;
direction: rtl;
text-align: right;
display: inline-block; /* باعث میشود کادر فقط دور متن باشد نه کل عرض */
padding: 4px 12px; /* فاصله متن از کادر (بالا-پایین، چپ-راست) */
border-radius: 6px;
}
.card2-title{
font-weight: bold;
color:#383838;
margin-bottom:8px;
}
.card3-title{
color:#383838;
margin-bottom:8px;
opacity: 0.5;
}
.card-value{
color: rgb(60, 60, 60);
line-height: 1.2;
}
.cards_sabet{
display:grid;
gap:5px;
margin-bottom:0px;
}
.card_sabet{
background:white;
padding:20px;
border: 3px solid rgb(232, 246, 250);
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
margin-bottom:5px;
text-align:center;
gap:3px;
overflow:hidden;
}
.card_sabet-title{
font-weight: bold;
color:#383838;
margin-bottom:8px;
}
.card_sabet-title2{
font-weight:normal;
color:#767575;
margin-bottom:8px;
}
.card_sabet img {
width: 90%;
height:300px;
border-radius:8px;
object-fit: cover;
}
.card-sabet-image{
width:90%;
height:200px;
overflow:hidden;
border-radius:8px;
margin:auto;
}
.card-sabet-image img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.15);
transition:transform 1s ease;
}
.card-sabet-image:hover img{
transform:scale(1);
}
@media (max-width:768px){
.card-sabet-image{
width:92%;
height:160px;
}
}
@media (max-width:480px){
.card-sabet-image{
width:95%;
height:100px;
}
}
/*.card_sabet-title video {
width: 50%;
height:auto;
border-radius:8px;
object-fit: cover;
}*/
/* =========================
HORIZONTAL SCROLL CARDS
========================= */
.cards-wrapper{
position:relative;
padding:5px;
margin-top:20px;
margin-bottom:20px;
border-radius:3px;
background: linear-gradient(180deg, #15082e 0.000%, #113b67 20.000%, #206aa1 40.000%, #4295d2 60.000%, #76bbf3 80.000%, #bbdcff 100.000%);
overflow:hidden;
border:1px solid #e4edf7;
}
/* افکت محو شدن دو طرف */
/* کانتینر اسکرول */
.cards-container{
display:flex;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:auto;
scroll-snap-type:x mandatory;
padding:5px;
flex-wrap:nowrap;
scrollbar-width:none;
scrollbar-color:rgba(0,180,255,.35) transparent;
-webkit-overflow-scrolling:touch;
}
/* اسکرول بار */
.cards-container::-webkit-scrollbar{
display:none;
}
.cards-container::-webkit-scrollbar-track{
background:transparent;
}
.cards-container::-webkit-scrollbar-thumb{
background:rgba(0,180,255,.35);
border-radius:20px;
}
/* آیتم اسکرول */
.card{
flex-shrink:0;
scroll-snap-align:start;
}
/* محتوای کارت */
.carticle-content{
padding:1px;
text-align:center;
flex-grow:1;
display:flex;
align-items:center;
justify-content:center;
}
/* کارت */
.card3.card{
flex:0 0 180px;
height:150px;
display:flex;
align-items:center;
justify-content:center;
padding:15px;
background:#fff;
border:1px solid #e5eef8;
border-radius:10px;
padding:20px;
transition:.3s;
box-shadow:
0 2px 8px rgba(0,0,0,.04);
}
/* هاور */
.card3.card:hover{
transform:translateY(-4px);
box-shadow:
0 10px 25px rgba(44,62,80,.10);
}
/* تصویر */
.card3.card img{
width:100%;
height:120px;
object-fit:contain;
object-position:center;
filter:grayscale(100%);
opacity:.85;
transition:.3s;
}
.card3.card:hover img{
filter:none;
opacity:1;
transform:scale(1.08);
}
/* دکمه های اسکرول */
.scroll-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;
height:58px;
border:none;
border-radius:3px;
background:#faf5f8;
color:#fff;
cursor:pointer;
z-index:10;
transition:.25s;
opacity: 50%;
}
.scroll-btn:hover{
opacity: 50%;
background:rgba(0,0,0,.75);
}
.scroll-btn.left{
left:1px;
}
.scroll-btn.right{
right:1px;
}
.content_footer{
color:#2c3e50;
padding-right:20px;
text-align:right;
background-color:rgb(232, 246, 250);
padding-right: 50px;
}
.cards_footer{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.content_footer_too{
display: grid;
align-items: center;
gap:20px;
padding:5px;
}
.content_footer_too img{
width:30px;
height:30px;
padding:6px;
background:
radial-gradient(
circle at 30% 25%,
rgba(255,255,255,.95),
rgba(255,255,255,.25) 35%,
transparent 45%
);
box-shadow:
inset 0 2px 4px rgba(255,255,255,.8),
inset 0 -3px 6px rgba(0,0,0,.08),
0 2px 6px rgba(0,0,0,.15);
transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.content_footer_too img:hover{
transform: scale(1.08);
}
.content_footer_too a{
display: flex;
align-items: center;
gap:15px;
text-decoration:none;
color:#2c3e50;
cursor:pointer;
}
.content_footer_too span{
cursor:pointer;
}
.content_footer_toooo{
display: grid;
align-items: center;
gap:15px;
padding-top:50px;
padding-right: 30px;
}
.glass-btn-down{
width:70%;
font-family: Vazirmatn, system-ui, sans-serif;
font-size: clamp(16px, 1.5vw, 18px);
padding:12px 18px;
position:relative;
overflow:hidden;
border:none;
border-radius:5px;
background:#ffffff;
color:#2c3e50;
cursor:pointer;
z-index:1;
transition:
color .3s ease,
transform .25s ease,
box-shadow .25s ease;
box-shadow:
0 1px 3px rgba(0,0,0,.06);
}
/* لایه رنگی */
.glass-btn-down::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
#fceec4 0%,
#fddc79 35%,
#fbc82f 70%,
#f9bb01 100%
);
transform:scaleY(0);
transform-origin:bottom;
transition:transform .35s ease;
z-index:-1;
}
/* هاور */
.glass-btn-down:hover{
color:white;
transform:translateY(-2px);
box-shadow:
0 8px 18px rgba(251,206,1,.25);
}
.glass-btn-down:hover::before{
transform:scaleY(1);
}
/* کلیک */
.glass-btn-down:active{
transform:translateY(0);
}
/*footer*/
.footer{
background:#faf5f8; /* همان رنگ header */
color:#2c3e50;
text-align:center;
padding:15px 10px;
margin-top: auto;
}
.footer p{
margin:0;
}
.content_footer a{
color: inherit;
text-decoration: none;
transition: color .2s ease;
}
.content_footer a:hover{
color:rgb(2, 144, 205);
}
/* pagination*/
.pagination{
margin-top:40px;
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
}
.pagination a,
.pagination span{
padding:8px 14px;
border:1px solid #ddd;
text-decoration:none;
border-radius:5px;
color:#909090;
}
.pagination a:hover{
background:#f1f1f1;
}
.pagination .active{
background:#007bff;
color:white;
border-color:#007bff;
}
.pagination .disabled{
color:#999;
background:#f9f9f9;
cursor:not-allowed;
}
/*open_pic*/
.gallery{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
margin-top: 10px;
}
.gallery img{
width:80px;
height:auto;
object-fit:cover;
border-radius:6px;
cursor:pointer;
}
.thumb{
width:80px;
height:80px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
transition:0.3s;
flex-shrink: 0;
}
.thumb:hover{
transform:scale(1.05);
}
/* modal */
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:1000;
}
.modal-img{
max-width:90%;
max-height:85%;
border-radius:10px;
animation:zoom 0.3s;
}
@keyframes zoom{
from{transform:scale(0.7);}
to{transform:scale(1);}
}
.close{
position:absolute;
top:20px;
right:30px;
font-size:40px;
color:white;
cursor:pointer;
}
.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
color:white;
cursor:pointer;
padding:10px;
}
.prev{
left:30px;
}
.next{
right:30px;
}
/*for_gif*/
/* کانتینر اصلی ویدیو background: linear-gradient(135deg, #021d55 0%, #17076f 50%, #3f9cbf 100%);
background: linear-gradient(0deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 0.866) 20%, rgba(0, 213, 255, 0) 85%); */
.card-video-container {
position: relative;
width: 100%;
aspect-ratio: 22 / 9;
border-radius: 5px;
background: linear-gradient(345deg, rgb(1, 1, 20) 0%, rgb(8, 8, 114) 40%, rgb(1, 1, 20) 100%);
margin-bottom:10px;
margin-top: -65px;
}
.hero-wave {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: clamp(45px, 8vw, 120px);
display: block;
}
.main-video-gif {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
mix-blend-mode: plus-lighter;
}
/* ============================
برند: لوگو + سه حرف + سه کلمه
============================ */
.brand-overlay {
position: absolute;
top: calc(clamp(12px, 3vw, 60px) + 60px);
left: clamp(10px, 3vw, 40px);
z-index: 10;
display: grid;
grid-template-columns: auto auto auto;
align-items: center;
column-gap: clamp(4px, 1vw, 10px);
row-gap: clamp(2px, 0.6vw, 4px);
direction: ltr;
}
.overlay-logo-wrapper {
grid-column: 1;
grid-row: 1 / span 3;
width: clamp(50px, 9vw, 120px);
}
.overlay-h-wrapper { grid-column: 2; grid-row: 1; width: clamp(12px, 2vw, 25px); }
.overlay-r-wrapper { grid-column: 2; grid-row: 2; width: clamp(12px, 2vw, 25px); }
.overlay-s-wrapper { grid-column: 2; grid-row: 3; width: clamp(12px, 2vw, 25px); }
.overlay-hooshmand-wrapper { grid-column: 3; grid-row: 1; width: clamp(60px, 10vw, 140px); opacity: .8; }
.overlay-rayane-wrapper { grid-column: 3; grid-row: 2; width: clamp(38px, 6vw, 85px); opacity: .8; }
.overlay-shargh-wrapper { grid-column: 3; grid-row: 3; width: clamp(38px, 6vw, 85px); opacity: .8; }
.overlay-hooshmand-wrapper,
.overlay-rayane-wrapper,
.overlay-shargh-wrapper {
margin-left: clamp(-12px, -1.5vw, -12px);
}
.overlay-logo-wrapper img,
.overlay-h-wrapper img,
.overlay-r-wrapper img,
.overlay-s-wrapper img,
.overlay-hooshmand-wrapper img,
.overlay-rayane-wrapper img,
.overlay-shargh-wrapper img {
width: 100%;
height: auto;
display: block;
}
/* ============================
متون قدیمی (اگه فعال بشن)
============================ */
.overlay-text1-wrapper {
position: absolute;
top: 10%;
left: 50%;
z-index: 5;
color: #faf5f8;
font-family: Poppins;
font-weight: normal;
font-size: clamp(20px, 3vw, 34px);
line-height: 1.4;
}
.overlay-text2-wrapper {
width: auto;
max-width: 80%;
position: absolute;
top: 20%;
left: 40%;
z-index: 5;
}
.overlay-text3-wrapper {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
color: #faf5f8;
font-weight: normal;
font-size: clamp(13px, 2vw, 24px);
}
/* ============================
دکمهها
============================ */
.overlay-btn-wrapper {
position: absolute;
top: calc(65% + 20px);
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: clamp(4px, 1.2vw, 8px);
align-items: center;
justify-content: center;
width: max-content;
max-width: 95vw;
}
.glass-btn-top {
font-family: Tahoma, Verdana, sans-serif;
width: clamp(70px, 15vw, 150px);
height: clamp(28px, 5vw, 70px);
position: relative;
overflow: hidden;
border-radius: 12px;
padding: clamp(2px, 1vw, 4px) clamp(6px, 2vw, 12px);
color:#f8f8f8;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.831);
cursor: pointer;
white-space: nowrap;
font-size: clamp(16px, 1.5vw, 18px);
transition: all .35s ease;
background: rgba(255, 255, 255, 0.16);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.5px);
-webkit-backdrop-filter: blur(4.5px);
border: 1px solid rgba(255, 255, 255, 0.63);
}
/* ============================
کادر مرکزی عنوان
============================ */
.overlay-content-wrapper {
position: absolute;
top: calc(10% + 50px);
left: 50%;
transform: translateX(-50%);
z-index: 5;
width: min(90%, 700px);
text-align: center;
padding: clamp(10px, 2vw, 20px);
background: rgba(255, 255, 255, 0.16);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.5px);
-webkit-backdrop-filter: blur(4.5px);
border: 1px solid rgba(255, 255, 255, 0.63);
}
.overlay-title {
color: #f2f2f2;
font-weight: normal;
font-size: clamp(18px, 3vw, 34px);
margin-bottom: clamp(8px, 2vw, 20px);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.typing-text {
color: #f2f2f2;
font-weight: normal;
font-size: clamp(6px, 2vw, 24px);
display: inline-block;
white-space: nowrap;
overflow: hidden;
line-height: 1.4;
min-width: min(300px, 100%);
text-align: center;
transition: all .25s ease;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.overlay-subtitle {
color: #f2f2f2;
font-weight: normal;
font-size: clamp(6px, 2vw, 24px);
margin-top: clamp(8px, 2vw, 20px);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* خودِ حرف H و انیمیشن آن */
.h-animated {
width: 100%;
height: auto;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
transform-origin: center;
display: block;
will-change: transform; /* بهینه سازی برای مرورگر */
}
.b-animated {
width: 100%;
height: auto;
transform-origin: center;
display: block;
will-change: transform; /* بهینه سازی برای مرورگر */
}
/* افکت هنگام رفتن موس (کدی که فرستادی با کمی بهبود) */
.h-animated:hover {
transform: scale(1.4) translateY(-5px);
filter: drop-shadow(0 12px 20px rgba(251, 248, 156, 0.87));
}
/*button*/
.glass-btn {
width: clamp(90px, 20vw, 150px);
height: clamp(34px, 5vw, 50px);
font-family: Vazirmatn, system-ui, sans-serif;
position: relative;
overflow: hidden;
border-radius: 20px;
padding: 4px 12px;
color: #fff;
cursor: pointer;
white-space: nowrap;
margin-top: 20px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.22),
rgba(255,255,255,.05)
);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid transparent;
background-clip: padding-box;
transition: transform .3s ease, background .3s ease;
}
/* خط نئونی نرم دور لبه */
/* خط نئونی نرم دور لبه */
/* خط نئونی نرم دور لبه - رنگهای فیبر نوری */
.glass-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(
120deg,
rgba(0,255,255,0) 0%,
rgba(0,200,255,.9) 20%,
rgba(90,60,255,.9) 40%,
rgba(190,50,255,.9) 60%,
rgba(255,60,180,.9) 80%,
rgba(0,255,255,0) 100%
);
background-size: 250% 250%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: neon-flow 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes neon-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass-btn::after {
content: "";
position: absolute;
top: 2px;
left: 6px;
right: 6px;
height: 40%;
border-radius: 10px;
background: linear-gradient(
180deg,
rgba(255,255,255,.30),
transparent
);
pointer-events: none;
}
.glass-btn:hover {
transform: translateY(-2px);
background:
linear-gradient(
180deg,
rgba(255,255,255,.28),
rgba(255,255,255,.08)
);
}
.glass-btn:active {
transform: translateY(-1px);
}
/*glass-btn-top*/
.glass-btn-top::after{
content:"";
position:absolute;
top:2px;
left:6px;
right:6px;
height:40%;
border-radius:10px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.45),
transparent
);
pointer-events:none;
}
/* Hover */
.glass-btn-top:hover{
transform:
translateY(-3px)
scale(1.02);
background:
linear-gradient(
180deg,
rgba(255,255,255,.28),
rgba(255,255,255,.08)
);
box-shadow:
0 15px 30px rgba(0,0,0,.22),
inset 0 1px 1px rgba(255,255,255,.45),
0 0 18px rgba(255,255,255,.15),
0 0 25px rgba(0,255,255,.10);
}
/* نور عبوری */
.glass-btn-top::before{
content:"";
position:absolute;
top:0;
left:-180%;
width:70%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.glass-btn-top:hover::before{
left:180%;
}
/* کلیک */
.glass-btn-top:active{
transform:
translateY(-1px)
scale(.99);
}
/* =========================
MOBILE
========================= */
@media (max-width:480px){
.cards {
grid-template-columns: 1fr;
gap: 12px;
margin: 0;
padding-left: 5px;
padding-right: 5px;
}
.cards_footer{ grid-template-columns:1fr; }
.glass-btn{ width:85px; height:30px; font-size:10px; padding:2px 6px; border-radius:20px; }
.card3.card img {height: clamp(80px, 26vw, 110px); }
.card3.card {
flex: 0 0 clamp(130px, 40vw, 165px);
height: clamp(110px, 32vw, 145px);
padding: 12px;
}
.card img { width: 100%; height: 100px; object-fit:cover; }
.card3 video { width: 100%; height:auto; }
.card_sabet-title video { width: 100%; height:auto; }
.card2 img { width: 100%; height: 100px; object-fit:cover; }
.card3 img { width: 100%; height: 100px; object-fit:cover; }
.card_sabet img { width: 100%; height:auto; object-fit:cover; }
.thumb{ width:80px; height:80px; }
.modal-img{ max-width:95%; max-height:80vh; }
.search-container.active .search-input { width: 150px; }
.search-btn{ width: 34px; height: 34px; }
.l-navbar{ width: 150px; }
.nav_link{ padding: 12px; }
.content{ padding: 5px 1px; }
.article-content{ padding-inline: 3%; line-height: 1.8; }
.article-content img{ max-width: 100%; }
.spotlight{ width: clamp(140px, 45vw, 200px);
height: clamp(70px, 22vw, 100px);}
}
@media (max-width:768px){
.cards-wrapper::before,
.cards-wrapper::after{
width:25px;
}
.scroll-btn{
display:none;
}
.header__search{
max-width:250px;
}
.glass-btn{
padding:8px 18px;
border-radius:20px;
}
.cards_footer{
grid-template-columns:1fr;
}
}
/* ============================================================
موبایل کوچیک و متوسط (تا 480px) - portrait
============================================================ */
@media (max-width: 480px) and (orientation: portrait) {
.card-video-container {
aspect-ratio: 9/ 18; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
}
.overlay-content-wrapper {
top: 50%;
width: 90%;
min-height: 180px;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay-title {
font-size: clamp(26px, 4vw, 40px);
margin-bottom: clamp(8px, 2vw, 20px);
}
.typing-text {
font-size: clamp(16px, 2.8vw, 32px);
min-width: 220px;
}
.overlay-subtitle {
font-size: clamp(20px, 2.5vw, 32px);
margin-top: clamp(8px, 2vw, 20px);
}
.overlay-btn-wrapper {
top: 70%;
}
.brand-overlay {
position: absolute;
top: clamp(150px, 8vw, 160px);
left: 50%;
transform: translateX(-50%) scale(2.1);
z-index: 10;
}
.overlay-hooshmand-wrapper,
.overlay-rayane-wrapper,
.overlay-shargh-wrapper {
margin-left: clamp(-6px, -0.8vw, -8px);
margin-top: 1px;
}
.glass-btn-top {
height: 60px;
width: 110px;
}
}
/* ============================================================
موبایل بزرگ portrait (481px تا 767px)
شکاف قبلی 481-539 اینجا رفع شد
============================================================ */
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
.card-video-container {
aspect-ratio: 4 / 5;
}
.overlay-content-wrapper {
top: 50%;
width: 90%;
transform: translate(-50%, -50%);
}
.overlay-title {
font-size: clamp(22px, 2.2vw, 28px);
margin-bottom: 10px;
}
.typing-text {
min-width: 300px;
font-size: clamp(16px, 1.6vw, 20px);
}
.overlay-subtitle {
margin-top: 10px;
font-size: clamp(16px, 1.6vw, 20px);
}
.brand-overlay {
position: absolute;
top: clamp(80px, 8vw, 110px);
left: 50%;
transform: translateX(-50%) scale(1.4);
z-index: 10;
}
.glass-btn-top {
height: 60px;
width: 100px;
}
.overlay-hooshmand-wrapper,
.overlay-rayane-wrapper,
.overlay-shargh-wrapper {
margin-left: clamp(-8px, -0.8vw, -10px);
margin-top: 2px;
}
}
/* ============================================================
تبلت portrait (768px تا 1366px)
این بازه الان آیپد پرو 12.9 (عرض 1024) رو هم پوشش میده
============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
.card-video-container {
aspect-ratio: 14 / 9;
}
.overlay-content-wrapper {
width: 80%;
}
.brand-overlay {
top: calc(65px + 70px);
left: 75px;
}
.overlay-title {
font-size: clamp(26px, 2.2vw, 28px);
margin-bottom: 10px;
}
.typing-text {
min-width: 300px;
font-size: clamp(16px, 1.6vw, 20px);
}
.overlay-subtitle {
margin-top: 10px;
font-size: clamp(18px, 1.6vw, 20px);
}
.glass-btn-top {
height: 70px;
}
.overlay-hooshmand-wrapper,
.overlay-rayane-wrapper,
.overlay-shargh-wrapper {
margin-left: clamp(-8px, -0.8vw, -10px);
margin-top: 2px;
}
}
/* ============================================================
تبلت/صفحههوشمند landscape (768px تا 1366px عرض + ارتفاع نسبتاً بلند)
شامل: Nest Hub، Nest Hub Max، iPad Pro 11 و 12.9 در حالت افقی
min-height باعث میشه گوشیهای افقی (که کوتاهن) وارد این بلوک نشن
============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (min-height: 520px) and (orientation: landscape) {
.card-video-container {
aspect-ratio: 17 / 9;
}
.overlay-content-wrapper {
top: 40%;
width: 80%;
transform: translate(-50%, -50%);
padding: clamp(12px, 1.5vw, 20px);
}
.brand-overlay {
top: 160px;
left: 90px;
transform: scale(.85);
}
.overlay-title {
font-size: clamp(22px, 2.2vw, 28px);
margin-bottom: 10px;
}
.typing-text {
min-width: 300px;
font-size: clamp(16px, 1.6vw, 20px);
}
.overlay-subtitle {
margin-top: 10px;
font-size: clamp(16px, 1.6vw, 20px);
}
.overlay-btn-wrapper {
top: 60%;
}
.glass-btn-top {
height: 80px;
}
}
/* ============================================================
موبایل landscape (هر عرضی، ولی ارتفاع کوتاه زیر 500px)
این بلوک دیگه به عرض گوشی وابسته نیست، پس هیچ گوشیای جا نمیمونه
============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
.card-video-container {
aspect-ratio: 12 / 9;
}
.brand-overlay {
transform: scale(0.6);
top: calc(5px + 70px);
left: 5px;
}
.overlay-content-wrapper {
top: 50%;
transform: translate(-50%, -50%);
padding: 8px 14px;
}
.overlay-title {
font-size: clamp(22px, 2.2vw, 28px);
margin-bottom: 10px;
}
.typing-text {
min-width: 300px;
font-size: clamp(16px, 1.6vw, 20px);
}
.overlay-subtitle {
margin-top: 10px;
font-size: clamp(16px, 1.6vw, 20px);
}
.overlay-btn-wrapper {
top: 85%;
}
}
/*=======size for big monitor=======*/
@media (min-width: 1500px) and (max-width: 2000px) and (hover: hover) and (pointer: fine) {
.header{
height:80px;
}
.nav_link{
font-weight: 600;
}
.l-navbar{
top: 80px;
width: 300px;
}
.l-navbar img{
height: 40px;
}
.l-navbar.open{
max-height: 700px;
padding: 20px 15px;
}
.search-btn {
width: 60px;
height: 60px;
}
.cards-wrapper{
padding:20px;
margin-top:40px;
margin-bottom:40px;
}
.card3.card img {height: clamp(110px, 26vw, 120px); }
.card3.card {
flex:0 0 200px;
height: clamp(200px, 32vw, 220px);
}
.content{
font-size:clamp(20px,2vw,20px);
}
.article-content *{
font-size:clamp(20px,2vw,22px);
}
.article-content {
line-height: 2.1;
padding-right: 6%;
padding-left: 6%;
}
.card2-title{
font-size:clamp(24px,2vw,26px);
}
.card-video-container {
aspect-ratio: 18 / 9;
}
.brand-overlay {
top: 280px;
left: 280px;
transform: scale(1.2);
}
.overlay-content-wrapper {
top: 20%;
height: 380px;
width:1500px ;
padding: 22px;
}
.overlay-title {
font-size: 50px;
margin-bottom: 10px;
}
.typing-text {
font-size: 28px;
min-width: 340px;
margin-top: 60px;
}
.overlay-subtitle {
font-size: 30px;
margin-top: 60px;
}
.overlay-btn-wrapper {
top: 68%;
}
.glass-btn-top {
width: 250px;
height: 100px;
font-size: 24px;
}
.glass-btn-down{
width:80%;
height:60px;
padding:12px 12px;
}
.content_footer_too{
gap:40px;
padding:5px;
}
.content_footer_too img{
width:50px;
height:50px;
}
.cards {
padding: 20px;
}
.card-sabet-image{
border-radius:15px;
height:250px;
}
.glass-btn {
width: clamp(94px, 20vw, 154px);
height: clamp(38px, 5vw, 54px);
font-size: 15px;
}
.overlay-text4-wrapper{
top:23%;
}
.overlay-text5-wrapper{
top:23%;
}
.overlay-title-4-5{
font-family:Vazirmatn,system-ui,sans-serif;
font-size:clamp(26px,3vw,36px);
font-weight:500;
}
.server3d{
height:530px;
}
.card_sabet img {
height:400px;
}
.gallery{
gap: 50px;
margin-right: 90px;
}
.gallery img{
width:120px;
height:auto;
}
}
/*=================*/
.update-showcase{
width:100%;
height:500px;
padding:80px 0;
background: #020024;
margin-bottom: 10px;
background: linear-gradient(0deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 0.866) 20%, rgb(242, 241, 235) 85%);
aspect-ratio: 3/2;
/* update the 85% to control the curvature */
clip-path: ellipse(85% 50%);
position: relative;
overflow: hidden;
}
.update-stage{
width:100%;
height:500px;
position:relative;
perspective:1800px;
overflow:visible;
}
.carousel-card{
display: flex;
flex-direction: column;
position:absolute;
left:50%;
top:50%;
width:340px;
height:420px;
overflow:visible;
align-items: center;
text-align: center;
transform-style:preserve-3d;
transition:
transform .9s cubic-bezier(.22,.61,.36,1),
opacity .8s,
filter .8s;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.509);
margin-bottom:60px;
}
.card-reflection{
position:absolute;
left:0;
top:100%;
width:100%;
height:50px;
object-fit:cover;
transform: scaleY(-1);
opacity:.50;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
pointer-events:none;
z-index:0;
}
.carousel-card img{
width:90%;
height:250px;
aspect-ratio: auto;
border-radius:8px;
}
.carousel-card h3{
padding:10px;
color:#2c3e50;
}
.carousel-card .glass-btn{
margin-top:20px;
align-self: center;
}
.carousel-card.center{
transform:
translate(-50%, -50%)
translateY(-20px)
scale(1.08);
z-index:10;
opacity:1;
filter:none;
}
.carousel-card.left{
transform:
translate(-50%, -50%)
translateX(-320px)
rotateY(30deg)
scale(.82);
opacity:.7;
z-index:5;
}
.carousel-card.right{
transform:
translate(-50%, -50%)
translateX(320px)
rotateY(-30deg)
scale(.82);
opacity:.7;
z-index:5;
}
.carousel-card.far-left{
transform:
translate(-50%, -50%)
translateX(-565px)
rotateY(35deg)
scale(.6);
opacity:.4;
z-index:2;
filter: blur(1px);
}
.carousel-card.far-right{
transform:
translate(-50%, -50%)
translateX(565px)
rotateY(-35deg)
scale(.6);
opacity:.4;
z-index:2;
filter: blur(1px);
}
/* ===================== تبلت (تا 1024px) ===================== */
@media (max-width:1024px){
.update-showcase{
height:460px;
}
.update-stage{
height:460px;
}
.carousel-card{
width:280px;
height:380px;
}
.carousel-card img{
height:170px;
}
.carousel-card.left{
transform:
translate(-50%, -50%)
translateX(-230px)
rotateY(30deg)
scale(.78);
}
.carousel-card.right{
transform:
translate(-50%, -50%)
translateX(230px)
rotateY(-30deg)
scale(.78);
}
.carousel-card.far-left{
transform:
translate(-50%, -50%)
translateX(-400px)
rotateY(35deg)
scale(.55);
}
.carousel-card.far-right{
transform:
translate(-50%, -50%)
translateX(400px)
rotateY(-35deg)
scale(.55);
}
}
/* ===================== موبایل بزرگ (تا 768px) ===================== */
@media (max-width:768px){
.update-showcase{
height:400px;
padding:50px 0;
clip-path: ellipse(95% 50%);
}
.update-stage{
height:400px;
}
.carousel-card{
width:230px;
height:330px;
border-radius:12px;
}
.carousel-card img{
height:140px;
}
.carousel-card h3{
font-size:16px;
padding:6px;
}
.carousel-card.center{
transform:
translate(-50%, -50%)
translateY(-10px)
scale(1.05);
}
.carousel-card.left{
transform:
translate(-50%, -50%)
translateX(-160px)
rotateY(28deg)
scale(.72);
opacity:.6;
}
.carousel-card.right{
transform:
translate(-50%, -50%)
translateX(160px)
rotateY(-28deg)
scale(.72);
opacity:.6;
}
/* در موبایل، کارتهای far رو مخفی میکنیم تا شلوغ نشه */
.carousel-card.far-left,
.carousel-card.far-right{
opacity:0;
pointer-events:none;
}
}
/* ===================== موبایل کوچک (تا 480px) ===================== */
@media (max-width:480px){
.update-showcase{
height:340px;
padding:35px 0;
clip-path: ellipse(100% 50%);
}
.update-stage{
height:340px;
}
.carousel-card{
width:190px;
height:280px;
}
.carousel-card img{
height:110px;
}
.carousel-card h3{
font-size:14px;
}
.carousel-card .glass-btn{
font-size:12px;
margin-bottom:12px;
}
.carousel-card.left{
transform:
translate(-50%, -50%)
translateX(-115px)
rotateY(25deg)
scale(.68);
opacity:.5;
}
.carousel-card.right{
transform:
translate(-50%, -50%)
translateX(115px)
rotateY(-25deg)
scale(.68);
opacity:.5;
}
}
/*========size for big monitor======*/
@media (min-width: 1500px) and (max-width: 2000px) and (hover: hover) and (pointer: fine) {
.update-showcase{
height:600px;
clip-path: ellipse(95% 50%);
overflow: hidden;
}
.update-stage{
height:600px;
}
.carousel-card{
width:440px;
height:520px;
}
.carousel-card img{
width: 90%;
height:300px;
}
.carousel-card.left{
transform:
translate(-50%, -50%)
translateX(-415px)
rotateY(30deg)
scale(.82);
}
.carousel-card.right{
transform:
translate(-50%, -50%)
translateX(415px)
rotateY(-30deg)
scale(.82);
}
.carousel-card.far-left{
transform:
translate(-50%, -50%)
translateX(-745px)
rotateY(35deg)
scale(.6);
}
.carousel-card.far-right{
transform:
translate(-50%, -50%)
translateX(745px)
rotateY(-35deg)
scale(.6);
}
}
/*==============*/
/* =====================تصاویر مجوزها ===================== */
.certificates-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 900px;
margin: 40px auto;
padding: 0 16px;
}
.license-intro {
max-width: 800px;
margin: 3rem auto;
padding: 2rem 2.5rem;
background: #f6f8fb;
border: 1px solid #e2e2e2;
border-radius: 12px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.license-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #eef3f9;
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 16px;
}
.license-title {
font-size: 20px;
font-weight: 700;
color: #2f2f2f;
margin: 0 0 12px;
}
.license-text {
font-size: 15px;
line-height: 2;
color: #2f2f2f;
margin: 0;
}
@media (max-width:480px){
.certificates-grid{
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap:14px;
}
}
@media (max-width: 480px) {
.license-intro {
padding: 1.5rem 1.25rem;
margin: 2rem auto;
}
.license-text {
font-size: 14px;
line-height: 1.9;
}
.hero-wave {
height: 45px;
bottom: -2px;
}
}
@media (max-width: 600px) {
.certificates-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
.alert-box {
position: absolute;
top: 70px; /* فاصله از بالا (زیر هدر) */
left: 50%;
transform: translateX(-50%);
z-index: 2000;
width: min(90%, 500px); /* عرض محدود تا خیلی کشیده نشه */
}
.hero-wave-stroke {
stroke-width: 5;
}
/* تبلت (768px تا 1366px) */
@media (min-width: 768px) and (max-width: 1366px) {
.hero-wave-stroke {
stroke-width: 7;
}
}
/* موبایل بزرگ portrait (481px تا 767px) */
@media (min-width: 481px) and (max-width: 767px) {
.hero-wave-stroke {
stroke-width: 8;
}
}
/* موبایل کوچیک (تا 480px) */
@media (max-width: 480px) {
.hero-wave-stroke {
stroke-width: 10;
}
}
@media (max-width: 480px) {
.cards {
grid-template-columns: 1fr;
gap: 12px;
margin: 0;
}
}
@media (min-width: 344px) and (max-width: 375px){
.cards {
grid-template-columns: 1fr;
gap: 12px;
margin: 0;
padding-left: 0;
padding-right: 0;
}
}