/* P_Occasions/Occasions.html */
/* =========================================================
IMAGE BANNER
========================================================= */
body.page-p-occasions-occasions .occasion-banner{
position:
relative;
overflow:
hidden;
isolation:
isolate;
width:
min(100%, 960px);
height:
clamp(
230px,
34vw,
430px
);
margin:
10px auto 45px;
border-radius:
30px;
background:
linear-gradient(
135deg,
rgba(255,230,237,0.78),
rgba(255,255,255,0.70),
rgba(218,255,243,0.74)
);
border:
1.5px solid
rgba(255,255,255,0.82);
box-shadow:
0 16px 40px
rgba(0,8,117,0.10),
inset 0 1px 0
rgba(255,255,255,0.88);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
animation:
fadeInUp
.8s
ease-out
both;
}
body.page-p-occasions-occasions .occasion-banner::before{
content:
"";
position:
absolute;
z-index:
1;
inset:
0;
pointer-events:
none;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.13),
transparent 38%,
rgba(127,255,212,0.08)
);
}
body.page-p-occasions-occasions .occasion-banner-image{
position:
absolute;
inset:
0;
z-index:
0;
width:
100%;
height:
100%;
display:
block;
object-fit:
cover;
object-position:
center;
}
body.page-p-occasions-occasions .occasion-banner-placeholder{
position:
absolute;
inset:
0;
z-index:
0;
display:
flex;
align-items:
center;
justify-content:
center;
flex-direction:
column;
gap:
12px;
text-align:
center;
padding:
24px;
background:
radial-gradient(
circle at 25% 30%,
rgba(255,179,198,0.28),
transparent 34%
),
radial-gradient(
circle at 80% 70%,
rgba(127,255,212,0.22),
transparent 36%
),
linear-gradient(
135deg,
#ffe8ee,
#f7fffc
);
}
body.page-p-occasions-occasions .occasion-banner-placeholder img{
width:
92px;
height:
92px;
object-fit:
contain;
opacity:
.88;
filter:
drop-shadow(
0 8px 14px
rgba(0,0,0,0.08)
);
}
body.page-p-occasions-occasions .occasion-banner-placeholder strong{
color:
var(--text);
font-size:
15px;
font-weight:
900;
}
body.page-p-occasions-occasions .occasion-banner-placeholder span{
color:
var(--text-soft);
font-size:
10.5px;
line-height:
1.8;
}
/* =========================================================
SECTION HEADING
========================================================= */
body.page-p-occasions-occasions .section-heading{
width:
min(100%, 1000px);
margin:
0 auto 25px;
text-align:
center;
animation:
fadeInUp
.75s
ease-out
.15s
both;
}
body.page-p-occasions-occasions .section-heading h2{
margin:
0 0 8px;
font-size:
1.65rem;
font-weight:
900;
}
body.page-p-occasions-occasions .section-heading p{
margin:
0;
color:
var(--text-soft);
font-size:
12px;
}
/* =========================================================
GRID
========================================================= */
body.page-p-occasions-occasions .occasion-grid{
width:
min(100%, 980px);
margin:
0 auto;
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap:
20px;
}
/* =========================================================
OCCASION CARD
========================================================= */
body.page-p-occasions-occasions .occasion-card{
--delay:
0s;
position:
relative;
overflow:
hidden;
isolation:
isolate;
min-height:
205px;
display:
flex;
align-items:
center;
justify-content:
center;
padding:
24px;
text-align:
center;
border-radius:
24px;
color:
var(--text);
border:
1.5px solid
rgba(255,255,255,0.76);
box-shadow:
0 8px 24px
rgba(0,0,0,0.09),
inset 0 1px 0
rgba(255,255,255,0.76);
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
opacity:
0;
animation:
cardEntrance
.7s
cubic-bezier(
.25,
.46,
.45,
.94
)
var(--delay)
both;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
body.page-p-occasions-occasions .occasion-card::before{
content:
"";
position:
absolute;
width:
105px;
height:
105px;
top:
-40px;
right:
-26px;
border-radius:
50%;
background:
rgba(255,255,255,0.38);
filter:
blur(8px);
opacity:
.74;
animation:
orbFloat
7s
ease-in-out
infinite;
pointer-events:
none;
}
body.page-p-occasions-occasions .occasion-card::after{
content:
"";
position:
absolute;
z-index:
1;
width:
42px;
height:
180%;
top:
-40%;
right:
-60%;
background:
linear-gradient(
to left,
transparent,
rgba(255,255,255,0.30),
transparent
);
transform:
rotate(18deg);
opacity:
.0;
pointer-events:
none;
}
body.page-p-occasions-occasions .occasion-card:hover::after{
opacity:
1;
animation:
shineMove
.8s ease;
}
body.page-p-occasions-occasions .occasion-card:hover{
transform:
translateY(-8px)
scale(1.015);
border-color:
rgba(255,255,255,0.94);
box-shadow:
0 18px 36px
rgba(0,0,0,0.13),
inset 0 1px 0
rgba(255,255,255,0.92);
}
/* =========================================================
CARD COLORS
========================================================= */
body.page-p-occasions-occasions .occasion-card.pink{
background:
linear-gradient(
145deg,
rgba(255,218,228,0.92),
rgba(255,246,248,0.84)
);
}
body.page-p-occasions-occasions .occasion-card.blue{
background:
linear-gradient(
145deg,
rgba(220,236,255,0.92),
rgba(247,251,255,0.86)
);
}
body.page-p-occasions-occasions .occasion-card.purple{
background:
linear-gradient(
145deg,
rgba(234,223,255,0.92),
rgba(250,248,255,0.86)
);
}
body.page-p-occasions-occasions .occasion-card.orange{
background:
linear-gradient(
145deg,
rgba(255,225,204,0.92),
rgba(255,248,242,0.86)
);
}
body.page-p-occasions-occasions .occasion-card.green{
background:
linear-gradient(
145deg,
rgba(222,246,219,0.92),
rgba(248,255,246,0.86)
);
}
body.page-p-occasions-occasions .occasion-card.mint{
background:
linear-gradient(
145deg,
rgba(204,255,237,0.92),
rgba(244,255,251,0.86)
);
}
body.page-p-occasions-occasions .occasion-card.yellow{
background:
linear-gradient(
145deg,
rgba(255,240,200,0.92),
rgba(255,251,239,0.86)
);
}
body.page-p-occasions-occasions .occasion-card.rgb-card{
background:
linear-gradient(
120deg,
rgba(211,255,240,0.90),
rgba(255,230,236,0.88),
rgba(230,239,255,0.88),
rgba(234,223,255,0.88),
rgba(211,255,240,0.90)
);
background-size:
320% 320%;
animation:
cardEntrance
.7s
cubic-bezier(.25,.46,.45,.94)
var(--delay)
both,
softRgb
14s
ease-in-out
infinite;
}
/* =========================================================
CONTENT
========================================================= */
body.page-p-occasions-occasions .occasion-content{
position:
relative;
z-index:
3;
display:
flex;
flex-direction:
column;
align-items:
center;
}
body.page-p-occasions-occasions .occasion-icon{
width:
68px;
height:
68px;
margin:
0 auto 14px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
20px;
background:
rgba(255,255,255,0.58);
border:
1px solid
rgba(255,255,255,0.80);
box-shadow:
0 7px 17px
rgba(0,0,0,0.08);
font-size:
31px;
animation:
occasionFloat
5s
ease-in-out
infinite;
transition:
transform .35s ease,
box-shadow .35s ease;
}
body.page-p-occasions-occasions .occasion-card:hover
.occasion-icon{
transform:
translateY(-3px)
scale(1.06);
box-shadow:
0 11px 23px
rgba(0,0,0,0.11);
}
body.page-p-occasions-occasions .occasion-title{
margin:
0 0 8px;
font-size:
1.12rem;
line-height:
1.7;
font-weight:
900;
}
body.page-p-occasions-occasions .occasion-description{
max-width:
315px;
margin:
0;
color:
rgba(0,8,117,0.67);
font-size:
11.5px;
line-height:
1.9;
}
body.page-p-occasions-occasions .occasion-action{
display:
inline-flex;
align-items:
center;
justify-content:
center;
min-width:
116px;
min-height:
38px;
margin-top:
15px;
padding:
0 16px;
border-radius:
12px;
background:
rgba(255,255,255,0.72);
border:
1px solid
rgba(255,255,255,0.86);
color:
var(--text);
font-size:
10.5px;
font-weight:
800;
box-shadow:
0 4px 11px
rgba(0,0,0,0.07);
transition:
all .25s ease;
}
body.page-p-occasions-occasions .occasion-card:hover
.occasion-action{
background:
rgba(255,255,255,0.94);
transform:
translateY(-2px);
box-shadow:
0 7px 15px
rgba(0,0,0,0.10);
}
/* =========================================================
DELAYS
========================================================= */
body.page-p-occasions-occasions .occasion-card:nth-child(1){ --delay: .08s; }
body.page-p-occasions-occasions .occasion-card:nth-child(2){ --delay: .14s; }
body.page-p-occasions-occasions .occasion-card:nth-child(3){ --delay: .20s; }
body.page-p-occasions-occasions .occasion-card:nth-child(4){ --delay: .26s; }
body.page-p-occasions-occasions .occasion-card:nth-child(5){ --delay: .32s; }
body.page-p-occasions-occasions .occasion-card:nth-child(6){ --delay: .38s; }
body.page-p-occasions-occasions .occasion-card:nth-child(7){ --delay: .44s; }
body.page-p-occasions-occasions .occasion-card:nth-child(8){ --delay: .50s; }
body.page-p-occasions-occasions .occasion-card:nth-child(9){ --delay: .56s; }
body.page-p-occasions-occasions .occasion-card:nth-child(10){ --delay: .62s; }
body.page-p-occasions-occasions .occasion-card:nth-child(11){ --delay: .68s; }
body.page-p-occasions-occasions .occasion-card:nth-child(12){ --delay: .74s; }
body.page-p-occasions-occasions .occasion-card:nth-child(13){ --delay: .80s; }
body.page-p-occasions-occasions .occasion-card:nth-child(14){ --delay: .86s; }
/* =========================================================
MOBILE
مثل صفحه داستان و انیمیشن:
کارتها تک ستونه میشوند
========================================================= */
@media (max-width: 700px) {body.page-p-occasions-occasions .occasion-banner{
width:
calc(100% - 6px);
height:
clamp(
190px,
55vw,
290px
);
margin-bottom:
34px;
border-radius:
23px;
}
body.page-p-occasions-occasions .occasion-banner-placeholder img{
width:
70px;
height:
70px;
}
body.page-p-occasions-occasions .occasion-banner-placeholder strong{
font-size:
13px;
}
body.page-p-occasions-occasions .occasion-banner-placeholder span{
font-size:
9px;
}
body.page-p-occasions-occasions .section-heading{
margin-bottom:
18px;
}
body.page-p-occasions-occasions .section-heading h2{
font-size:
1.35rem;
}
body.page-p-occasions-occasions .section-heading p{
font-size:
10px;
}
body.page-p-occasions-occasions .occasion-grid{
width:
calc(100% - 4px);
grid-template-columns:
1fr;
gap:
14px;
}
body.page-p-occasions-occasions .occasion-card{
min-height:
178px;
padding:
20px 15px;
border-radius:
20px;
}
body.page-p-occasions-occasions .occasion-icon{
width:
58px;
height:
58px;
margin-bottom:
11px;
border-radius:
17px;
font-size:
27px;
}
body.page-p-occasions-occasions .occasion-title{
font-size:
1rem;
}
body.page-p-occasions-occasions .occasion-description{
font-size:
10.5px;
}
body.page-p-occasions-occasions .occasion-action{
min-height:
35px;
margin-top:
12px;
font-size:
9.5px;
}}