/*
Theme Name: Parlasonic Child
Theme URI: https://parlatellshop.ir
Description: Child Theme for Kadence
Author: Parlatell
Template: kadence
Version: 1.0
Text Domain: parlasonic-child
*/

/* از اینجا به بعد تمام CSS اختصاصی سایت را قرار می‌دهیم */
/*======================================================
PARLASONIC UI v2
PART 1
ROOT + RESET + BODY + BUTTONS
======================================================*/

:root{

--gold:#D4AF37;
--gold-light:#F2D77A;
--silver:#C9CDD2;
--blue:#2A74FF;

--bg:#080808;
--bg2:#111111;
--card:#171717;

--text:#ffffff;
--muted:#bdbdbd;

--radius:28px;

--shadow:
0 18px 50px rgba(0,0,0,.30);

--transition:.35s ease;

}



*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:var(--bg);

color:var(--text);

font-family:
Vazirmatn,
IRANSans,
Tahoma,
sans-serif;

overflow-x:hidden;

line-height:1.8;

}



img{

display:block;

max-width:100%;

}



a{

text-decoration:none;

color:inherit;

}



.ps-wrap{

width:min(1320px,92%);

margin:auto;

}



/*=========================
BUTTONS
=========================*/

.ps-btn-main{

display:inline-flex;

justify-content:center;

align-items:center;

padding:16px 34px;

border-radius:999px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:#111;

font-weight:800;

transition:var(--transition);

box-shadow:

0 10px 28px rgba(216,178,74,.22);

}



.ps-btn-main:hover{

transform:translateY(-4px);

letter-spacing:.3px;

text-transform:none;

box-shadow:

0 20px 45px rgba(212,175,55,.40);

filter:brightness(1.05);

}



.ps-btn-outline{

display:inline-flex;

justify-content:center;

align-items:center;

padding:16px 34px;

border-radius:999px;

border:1px solid rgba(216,178,74,.45);

background:rgba(255,255,255,.03);

backdrop-filter:blur(8px);

transition:var(--transition);

}



.ps-btn-outline:hover{

background:rgba(216,178,74,.10);

color:#FFFFFF;

border-color:var(--gold);

transform:translateY(-4px);

}



/*=========================
SECTION TITLE
=========================*/

.ps-title{

font-size:46px;

font-weight:900;

color:#FFFFFF;

letter-spacing:-0.5px;

margin-bottom:18px;

text-shadow:0 2px 10px rgba(0,0,0,.35);

}



.ps-subtitle{

font-size:18px;

color:#CFCFCF;

line-height:2;

max-width:760px;

}



/*=========================
CARDS
=========================*/

.ps-card{

background:linear-gradient(
180deg,
#1A1A1A,
#121212
);

border-radius:var(--radius);

border:1px solid rgba(255,255,255,.05);

box-shadow:var(--shadow);

transition:var(--transition);

}



.ps-card:hover{

transform:translateY(-8px);

border-color:rgba(216,178,74,.45);

}



/*=========================
SECTION SPACE
=========================*/

section{

padding:120px 0;

}
/*======================================================
PARLASONIC UI v2
PART 2
HERO
======================================================*/

.ps-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

background:

radial-gradient(circle at 80% 40%,rgba(212,175,55,.16),transparent 22%),

radial-gradient(circle at 15% 75%,rgba(216,178,74,.08),transparent 35%),

linear-gradient(135deg,#060606,#111,#181818);

}



.ps-hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);

background-size:42px 42px;

opacity:.25;

}



.ps-hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.05fr .95fr;

gap:90px;

align-items:center;

}



.ps-mini-logo{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:rgba(216,178,74,.15);

border:1px solid rgba(216,178,74,.35);

color:var(--gold);

font-weight:800;

letter-spacing:2px;

margin-bottom:24px;

}



.ps-hero-tag{

display:block;

letter-spacing:4px;

font-size:13px;

color:#BEBEBE;

margin-bottom:18px;

}



.ps-hero h1{

font-size:72px;

line-height:1.1;

font-weight:900;

color:#FFFFFF;

text-shadow:0 2px 12px rgba(0,0,0,.35);

margin-bottom:26px;

}



.ps-hero p{

font-size:20px;

line-height:2;

color:#E2E2E2;

max-width:600px;

margin-bottom:42px;

}



.ps-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}



.ps-hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}



.ps-glow{

position:absolute;

width:560px;

height:560px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(216,178,74,.35),

rgba(216,178,74,.12),

transparent 72%);

filter:blur(35px);

}



.ps-hero-image img{

position:relative;

width:560px;

transition:.45s;

filter:drop-shadow(0 35px 70px rgba(0,0,0,.55));

}



.ps-hero-image:hover img{

transform:translateY(-10px) scale(1.05);

}



.ps-scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

}



.ps-scroll-indicator span{

display:block;

width:2px;

height:60px;

background:linear-gradient(var(--gold),transparent);

animation:scrollMove 2s infinite;

}



@keyframes scrollMove{

0%{

opacity:0;

transform:translateY(-15px);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(15px);

}

}



@media(max-width:992px){

.ps-hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}



.ps-buttons{

justify-content:center;

}



.ps-hero h1{

font-size:52px;

}



.ps-hero p{

margin:auto auto 42px;

}



.ps-glow{

width:420px;

height:420px;

}



.ps-hero-image img{

width:420px;

}

}
/*======================================================
PARLASONIC UI v2
PART 3
FEATURES + CATEGORIES
======================================================*/

/*=========================
FEATURES
=========================*/

.ps-features{

background:#0d0d0d;

padding:90px 0;

}



.ps-features-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

}



.ps-feature{

background:linear-gradient(180deg,#191919,#111111);

border:1px solid rgba(255,255,255,.05);

border-radius:26px;

padding:38px 28px;

text-align:center;

transition:.35s;

box-shadow:0 15px 40px rgba(0,0,0,.18);

}



.ps-feature:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,.25);

box-shadow:

0 20px 45px rgba(0,0,0,.35),

0 0 25px rgba(212,175,55,.12);

}



.ps-feature i{

font-size:42px;

color:var(--gold);

margin-bottom:22px;

}



.ps-feature h3{

font-size:22px;

margin-bottom:14px;

font-weight:800;

}



.ps-feature p{

color:var(--muted);

font-size:15px;

line-height:1.9;

}



/*=========================
CATEGORIES
=========================*/

.ps-categories{

background:#080808;

}



.ps-category-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:55px;

}



.ps-category{

position:relative;

overflow:hidden;

border-radius:30px;

height:330px;

background:#141414;

transition:.45s;

border:1px solid rgba(255,255,255,.05);

}



.ps-category img{

width:100%;

height:100%;

object-fit:cover;

transition:.55s;

}



.ps-category::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

180deg,

transparent,

rgba(0,0,0,.82)

);

}



.ps-category-content{

position:absolute;

left:28px;

bottom:28px;

z-index:2;

}



.ps-category h3{

font-size:28px;

font-weight:900;

margin-bottom:8px;

}



.ps-category span{

color:#d7d7d7;

font-size:15px;

}



.ps-category:hover{

transform:translateY(-12px);

border-color:rgba(212,175,55,.25);

}



.ps-category:hover img{

transform:scale(1.08);

}



/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.ps-features-grid{

grid-template-columns:repeat(2,1fr);

}



.ps-category-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:768px){

.ps-features-grid{

grid-template-columns:1fr;

}



.ps-category-grid{

grid-template-columns:1fr;

}

}
/*======================================================
PARLASONIC UI v2
PART 4
PRODUCTS
======================================================*/

.ps-products{

background:#0b0b0b;

}



.ps-products-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:34px;

margin-top:60px;

}



.ps-product{

position:relative;

overflow:hidden;

background:linear-gradient(180deg,#1D1D1D,#131313);

border-radius:30px;

border:1px solid rgba(255,255,255,.05);

transition:.4s;

box-shadow:0 20px 45px rgba(0,0,0,.22);

}



.ps-product:hover{

transform:translateY(-8px);

border-color:rgba(216,178,74,.45);

box-shadow:

0 30px 60px rgba(0,0,0,.4),

0 0 30px rgba(212,175,55,.14);

}



.ps-product-badge{

position:absolute;

top:20px;

right:20px;

padding:8px 14px;

border-radius:999px;

background:linear-gradient(135deg,var(--gold),var(--gold-light));

color:#111;

font-size:13px;

font-weight:800;

z-index:3;

}



.ps-product-image{

height:340px;

display:flex;

justify-content:center;

align-items:center;

padding:35px;

background:

radial-gradient(circle,

rgba(212,175,55,.08),

transparent 70%);

}



.ps-product-image img{

max-height:270px;

transition:.45s;

filter:drop-shadow(0 22px 40px rgba(0,0,0,.50));

}



.ps-product:hover .ps-product-image img{

transform:scale(1.05);

}



.ps-product-content{

padding:30px;

}



.ps-product-title{

font-size:24px;

font-weight:900;

margin-bottom:12px;

color:#FFFFFF;

}



.ps-product-desc{

font-size:15px;

line-height:1.9;

color:#CFCFCF;

margin-bottom:22px;

}



.ps-product-bottom{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

}



.ps-price{

display:flex;

flex-direction:column;

}



.ps-price small{

font-size:13px;

color:#8d8d8d;

text-decoration:line-through;

}



.ps-price strong{

font-size:30px;

font-weight:900;

color:var(--gold);

letter-spacing:.2px;

}



.ps-buy{

display:inline-flex;

justify-content:center;

align-items:center;

padding:14px 26px;

border-radius:999px;

background:linear-gradient(135deg,var(--gold),var(--gold-light));

color:#111;

font-weight:800;

transition:.35s;

}



.ps-buy:hover{

transform:translateY(-3px);

filter:brightness(1.05);

box-shadow:0 10px 25px rgba(216,178,74,.30);

}


@media(max-width:992px){

.ps-products-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:768px){

.ps-products-grid{

grid-template-columns:1fr;

}

}
/*======================================================
PARLASONIC UI v2
PART 5
ABOUT + BRANDS + CTA + FOOTER
======================================================*/


/*=========================
ABOUT
=========================*/

.ps-about{

background:#101010;

}

.ps-about .ps-wrap{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:70px;

align-items:center;

}

.ps-small-title{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:rgba(212,175,55,.12);

border:1px solid rgba(212,175,55,.18);

color:var(--gold);

font-weight:700;

margin-bottom:22px;

}

.ps-about h2{

font-size:52px;

font-weight:900;

line-height:1.3;

color:#FFFFFF;

margin-bottom:26px;


}

.ps-about p{

font-size:18px;

line-height:2.1;

color:#D4D4D4;

margin-bottom:38px;

}

.ps-about-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.ps-about-right{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.ps-stat{

background:linear-gradient(180deg,#1C1C1C,#141414);

border-radius:24px;

padding:34px;

text-align:center;

border:1px solid rgba(255,255,255,.05);

transition:.35s;

}

.ps-stat:hover{

transform:translateY(-8px);

border-color:rgba(212,175,55,.25);

}

.ps-stat h3{

font-size:46px;

font-weight:900;

color:var(--gold);

margin-bottom:10px;

}

.ps-stat p{

font-size:15px;

color:#F1F1F1;

}



/*=========================
BRANDS
=========================*/

.ps-brands{

background:#080808;

}

.ps-brand-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:22px;

margin-top:55px;

}

.ps-brand{

height:120px;

display:flex;

justify-content:center;

align-items:center;

background:#181818;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.ps-brand:hover{

transform:translateY(-6px);

border-color:rgba(212,175,55,.25);

background:#202020;

}

.ps-brand img{

max-width:120px;

opacity:.90;

filter:grayscale(60%);

transition:.35s;

}

.ps-brand:hover img{

opacity:1;

filter:none;

transform:scale(1.08);

}



/*=========================
CTA
=========================*/

.ps-cta{

background:

linear-gradient(

135deg,

#111,

#1a1a1a

);

text-align:center;

}

.ps-cta h2{

font-size:54px;

font-weight:900;

margin-bottom:22px;

}

.ps-cta p{

max-width:700px;

margin:auto;

color:var(--muted);

font-size:18px;

line-height:2;

margin-bottom:40px;

}



/*=========================
FOOTER
=========================*/

footer{

background:#050505;

padding:70px 0 30px;

border-top:1px solid rgba(255,255,255,.05);

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:45px;

}

.footer-title{

font-size:20px;

font-weight:800;

margin-bottom:20px;

color:#fff;

}

.footer-grid p,

.footer-grid a{

color:#bfbfbf;

font-size:15px;

line-height:2;

transition:.3s;

}

.footer-grid a:hover{

color:var(--gold);

}

.footer-bottom{

margin-top:45px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.05);

text-align:center;

color:#888;

font-size:14px;

}



/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

.ps-about .ps-wrap{

grid-template-columns:1fr;

}

.ps-brand-grid{

grid-template-columns:repeat(3,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.ps-about-right{

grid-template-columns:1fr;

}

.ps-brand-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.ps-cta h2{

font-size:38px;

}

.ps-about h2{

font-size:38px;

}

}
/*======================================================
PARLASONIC UI v2
PART 6
FINAL POLISH
======================================================*/

/* Scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#0b0b0b;
}

::-webkit-scrollbar-thumb{
background:#D8B24A;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#E8C86B;
}


/* Selection */

::selection{
background:#D4AF37;
color:#111;
}


/* Smooth image animation */

img{
transition:.45s ease;
}


/* Hover animation */

a,
button,
.ps-btn-main,
.ps-btn-outline,
.ps-buy{
transition:all .35s ease;
}


/* Fade animation */

section{

animation:fadeSection .65s ease;

}

@keyframes fadeSection{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* Glass effect */

.ps-glass{

background:rgba(255,255,255,.03);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.08);

}


/* Gold divider */

.ps-divider{

width:90px;

height:3px;

border-radius:50px;

background:linear-gradient(
90deg,
transparent,
#D4AF37,
transparent
);

margin:20px auto 45px;

}


/* Floating animation */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.ps-floating{

animation:floating 4s ease-in-out infinite;

}


/* Hero image */

.ps-hero-image img{

animation:floating 5s ease-in-out infinite;

}


/* Product image */

.ps-product:hover img{

filter:drop-shadow(0 20px 45px rgba(212,175,55,.15));

}


/* Card glow */

.ps-card:hover,
.ps-product:hover,
.ps-feature:hover,
.ps-stat:hover{

box-shadow:

0 25px 60px rgba(0,0,0,.35),

0 0 30px rgba(216,178,74,.18);

}


/* Footer hover */

footer a{

position:relative;

}

footer a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#D4AF37;

transition:.35s;

}

footer a:hover::after{

width:100%;

}