:root {
--color-primary: #FF6F91;
--color-primary-dark: #E85577;
--color-secondary: #FFC93C;
--color-accent: #4ECDC4;
--color-accent-purple: #A78BFA;
--color-bg: #FFFDF7;
--color-surface: #FFFFFF;
--color-text: #33302E;
--color-text-light: #756F6A;
--color-border: #F0E9DD;
--color-success: #3FBF6F;
--color-danger: #E8493D;
--color-warning: #FFC93C;
--font-body: 'Vazirmatn', Tahoma, sans-serif;
--font-heading: 'Vazirmatn', Tahoma, sans-serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-pill: 999px;
--shadow-sm: 0 2px 8px rgba(51, 48, 46, 0.06);
--shadow-md: 0 8px 24px rgba(51, 48, 46, 0.10);
--shadow-lg: 0 16px 40px rgba(51, 48, 46, 0.14);
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--container-width: 1200px;
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
}
/*
* Vazirmatn used to be pulled in here via `@import` (render-blocking,
* serial fetch - the browser had to download+parse this whole file
* before it could even start fetching the font CSS). It's now loaded
* as a proper non-blocking in the of every layout that
* uses this stylesheet (header.php, admin-layout.php, admin/login.php)
* - see those files for the reasoning. Loading it there instead of
* here means it starts downloading in parallel with this file, not
* after it.
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
direction: rtl;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
font-size: 16px;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 12px 28px;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.95rem;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background-color: var(--color-primary);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-text);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.card {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.badge {
display: inline-block;
padding: 4px 14px;
border-radius: var(--radius-pill);
font-size: 0.8rem;
font-weight: 700;
background-color: var(--color-accent);
color: #fff;
}
.form-group {
margin-bottom: var(--space-sm);
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 700;
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface);
transition: border-color var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
}
.error-text {
color: var(--color-danger);
font-size: 0.85rem;
margin-top: 4px;
}
.alert {
padding: var(--space-sm);
border-radius: var(--radius-sm);
margin-bottom: var(--space-sm);
font-weight: 600;
}
.alert-success {
background-color: rgba(63, 191, 111, 0.12);
color: var(--color-success);
}
.alert-danger {
background-color: rgba(232, 73, 61, 0.12);
color: var(--color-danger);
}
.alert-warning {
background-color: rgba(255, 201, 60, 0.18);
color: #7A5B00;
}
.error-page {
min-height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-align: center;
}
.error-page h1 {
font-size: 4rem;
color: var(--color-primary);
}
*:focus-visible {
outline: 3px solid var(--color-accent-purple);
outline-offset: 2px;
}
@media (max-width: 768px) {
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
.container { padding: 0 var(--space-sm); }
}
.site-header {
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) 0;
gap: var(--space-md);
}
.site-header__logo img {
height: 48px;
width: 48px;
}
.site-nav {
display: flex;
align-items: center;
gap: var(--space-md);
list-style: none;
}
.site-nav a {
font-weight: 700;
color: var(--color-text);
padding: 8px 4px;
border-bottom: 3px solid transparent;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.site-nav a:hover {
color: var(--color-primary);
border-color: var(--color-secondary);
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.cart-icon {
position: relative;
}
.header-account-link {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background-color var(--transition-fast);
}
.header-account-link:hover {
background-color: var(--color-bg);
}
.cart-icon__count {
position: absolute;
top: -8px;
left: -8px;
background-color: var(--color-primary);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/*
* دکمهی نمایش منو در موبایل - همون سایز و شکل دایرهای دکمهی پروفایل
* (header-account-link) تا کنار سبد خرید/پروفایل یکدست دیده بشه، نه یک
* ایموجی/کاراکتر متنی کوچیک. سه خط با CSS بهجای آیکن آماده، تا موقع باز
* شدن منو (.nav-toggle.is-active) با transform به ضربدر تبدیل بشه.
*/
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 50%;
background-color: transparent;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.nav-toggle:hover {
background-color: var(--color-bg);
}
.nav-toggle__bar {
display: block;
width: 20px;
height: 2px;
border-radius: var(--radius-pill);
background-color: var(--color-text);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/*
* منوی کشویی (dropdown) هدر - زیرمجموعهی هر آیتم ناوبری (فعلاً
* "محصولات" با لیست دستهبندیها). فلش کوچیک کنار متن نشون میده که
* زیرمجموعه داره و با باز شدن منو میچرخه؛ خود منو با fade + کمی
* scale/translate و easing نرم (نه transition خطی معمولی) باز میشه،
* یه پیکان کوچیک بالای پنل به لینک والدش وصلش میکنه، و هر آیتم با
* هاور یه نقطهی رنگی و یه حرکت افقی ظریف میگیره - همه با رنگ/فاصله/
* گردی گوشههای همون تم سایت.
*/
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
}
.site-nav__caret {
color: var(--color-text-light);
transition: transform var(--transition-base) cubic-bezier(0.34, 1.56, 0.64, 1), color var(--transition-fast);
}
.site-nav__item--dropdown:hover .site-nav__caret,
.site-nav__item--dropdown:focus-within .site-nav__caret {
transform: rotate(180deg);
color: var(--color-primary);
}
.site-nav__item--dropdown {
position: relative;
}
.site-nav__dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 110;
min-width: 250px;
margin-top: 18px;
padding: 10px;
display: flex;
flex-direction: column;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 24px 48px -16px rgba(51, 48, 46, 0.22), 0 4px 14px rgba(51, 48, 46, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.97);
transform-origin: top right;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.25s;
}
/* پیکان کوچیک بالای پنل، دقیقاً زیر لینک والد - همون تکنیک استاندارد
یک مربع ۴۵ درجهچرخیده با همون رنگ/بوردر پنل. */
.site-nav__dropdown::after {
content: '';
position: absolute;
top: -6px;
right: 22px;
width: 12px;
height: 12px;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
transform: rotate(-45deg);
border-radius: 2px 0 0 0;
}
/* پل نامرئی بین لینک و دراپداون، تا موس موقع رد شدن از فاصلهی
بینشون (margin-top) دراپداون رو گم نکنه و زودتر از موعد بسته نشه. */
.site-nav__item--dropdown::before {
content: '';
position: absolute;
top: 100%;
right: 0;
left: 0;
height: 18px;
}
.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.site-nav__dropdown-eyebrow {
padding: 10px 12px 6px;
color: var(--color-text-light);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.site-nav__dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--color-text);
font-weight: 500;
white-space: nowrap;
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.site-nav__dropdown-link::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-border);
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
background-color: var(--color-bg);
color: var(--color-primary);
transform: translateX(-4px);
}
.site-nav__dropdown-link:hover::before,
.site-nav__dropdown-link:focus-visible::before {
background-color: var(--color-primary);
transform: scale(1.3);
}
.site-nav__dropdown-link--all {
margin-bottom: 6px;
padding-bottom: 12px;
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
font-weight: 700;
justify-content: center;
}
.site-nav__dropdown-link--all::before {
display: none;
}
.site-nav__dropdown-link--all:hover {
color: #fff;
transform: none;
filter: brightness(1.06);
}
@media (max-width: 900px) {
.site-nav {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-xs) var(--space-md);
background-color: var(--color-surface);
box-shadow: var(--shadow-md);
text-align: center;
}
.site-nav--open {
display: flex;
}
.nav-toggle {
display: flex;
}
/* فقط هدرهای سطح اول (خانه/محصولات/بلاگ/...) اول باز شدن منو دیده
میشن، وسطچین. آیتمهایی که زیرمجموعه دارن همون فلش دسکتاپ رو
نشون میدن؛ زیرمجموعه فقط با کلیک روی خودشون باز/بسته میشه
(`.site-nav__item--dropdown.is-open`، کنترل با جاوااسکریپت در
main.js) - نه هاور که روی موبایل اصلاً معنا نداره، و نه همیشه-باز
که باعث میشد کل منو شلوغ و بههمریخته دیده بشه. */
.site-nav > li {
width: 100%;
}
.site-nav a {
text-align: center;
}
.site-nav__link {
justify-content: center;
width: 100%;
padding: 12px 4px;
}
.site-nav__caret {
transition: transform var(--transition-base) cubic-bezier(0.34, 1.56, 0.64, 1), color var(--transition-fast);
}
.site-nav__item--dropdown.is-open .site-nav__caret {
transform: rotate(180deg);
color: var(--color-primary);
}
.site-nav__item--dropdown::before {
display: none;
}
.site-nav__dropdown {
display: none;
position: static;
align-items: center;
margin-top: 0;
margin-bottom: 8px;
padding: 0;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: none;
}
.site-nav__item--dropdown.is-open .site-nav__dropdown {
display: flex;
}
.site-nav__dropdown::after {
display: none;
}
.site-nav__dropdown-eyebrow {
padding: 6px 0;
}
.site-nav__dropdown-link,
.site-nav__dropdown-link--all {
justify-content: center;
width: 100%;
}
}
.site-footer {
background-color: var(--color-text);
color: #fff;
margin-top: var(--space-xl);
padding: var(--space-lg) 0 var(--space-md);
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.site-footer h4 {
color: var(--color-secondary);
margin-bottom: var(--space-xs);
}
.site-footer__contact-line {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 4px;
}
.site-footer a {
color: rgba(255, 255, 255, 0.8);
display: block;
margin-bottom: 6px;
transition: color var(--transition-fast);
}
.site-footer a:hover {
color: var(--color-secondary);
}
.site-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: var(--space-sm);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
}
.site-footer__trust-seals {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.site-footer__trust-seals a {
display: flex;
width: 80px;
height: 100px;
background-color: #fff;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
padding: 4px;
}
.site-footer__trust-seals img {
max-width: 100%;
max-height: 100%;
}
.site-footer__trust-seal-empty {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 600px) {
.site-footer__bottom {
justify-content: center;
text-align: center;
}
}
.admin-layout {
display: flex;
min-height: 100vh;
}
.admin-sidebar {
width: 240px;
background-color: var(--color-text);
color: #fff;
padding: var(--space-md);
}
.admin-sidebar a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.85);
margin-bottom: 4px;
font-weight: 600;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
background-color: var(--color-primary);
color: #fff;
}
.admin-sidebar__group {
margin-bottom: 4px;
}
.admin-sidebar__group summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.admin-sidebar__group summary::-webkit-details-marker {
display: none;
}
.admin-sidebar__group summary::after {
content: "\25BE";
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.admin-sidebar__group[open] summary::after {
transform: rotate(180deg);
}
.admin-sidebar__group summary:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.admin-sidebar__group a {
padding-right: 28px;
font-weight: 500;
font-size: 0.92rem;
}
.admin-content {
flex: 1;
padding: var(--space-lg);
}
/* Logout button style */
.admin-sidebar__logout-form {
margin: 0;
}
.admin-sidebar__logout-btn {
display: block;
width: 100%;
text-align: right;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.85);
margin-bottom: 4px;
font-weight: 600;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
.admin-sidebar__logout-btn:hover {
background-color: var(--color-primary);
color: #fff;
}
/*
* حداقل ریسپانسیو برای پنل ادمین روی گوشی: زیر ۸۶۰px، سایدبار بهجای
* کنار محتوا، بالای اون قرار میگیره (ستونی بهجای ردیفی) و عرض ثابت
* ۲۴۰px برداشته میشه تا کل صفحه فشرده/اسکرول افقی نشه. تغییر دیگهای
* لازم نیست چون گروههای `` سایدبار از قبل جمعشونده هستن.
*/
@media (max-width: 860px) {
.admin-layout {
flex-direction: column;
min-height: 0;
}
.admin-sidebar {
width: auto;
}
.admin-content {
padding: var(--space-md);
}
}
.section {
padding: var(--space-xl) 0;
}
.section__header {
text-align: center;
margin-bottom: var(--space-lg);
}
.section__header p {
color: var(--color-text-light);
margin-top: var(--space-xs);
}
.grid {
display: grid;
gap: var(--space-md);
}
.grid--products {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.grid--blog {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.grid--testimonials {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.product-card__image {
position: relative;
overflow: hidden;
display: block;
aspect-ratio: 1 / 1;
}
.product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-card__body {
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: 8px;
}
.product-card__category {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 12px 3px 10px;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-purple));
color: #fff;
box-shadow: 0 2px 6px rgba(78, 205, 196, 0.35);
width: fit-content;
}
.product-card__category::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff;
display: inline-block;
}
.product-card__title a {
font-size: 1rem;
font-weight: 700;
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.product-card__price {
font-weight: 700;
color: var(--color-primary-dark);
}
.product-card__price-box {
display: flex;
flex-direction: column;
gap: 2px;
}
.product-card__price--old {
font-weight: 400;
font-size: 0.8rem;
color: var(--color-text-light);
text-decoration: line-through;
}
.product-card__price--sale {
color: var(--color-danger);
}
.product-card__discount-badge {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--color-danger);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--radius-pill);
z-index: 1;
opacity: 0;
transition: opacity var(--transition-base);
}
/* این کلاس هم روی `.product-card__image` استفاده میشه (کارت معمولی
محصول) هم روی خودِ `.spotlight-card` (کارت منتخب ویژه) - برای همین
هر دو والد رو هاور میکنیم. */
.product-card__image:hover .product-card__discount-badge,
.spotlight-card:hover .product-card__discount-badge {
opacity: 1;
}
.btn-sm {
padding: 8px 18px;
font-size: 0.85rem;
}
.blog-card__image {
overflow: hidden;
display: block;
aspect-ratio: 16 / 12;
}
.blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-card__body {
padding: var(--space-sm);
}
.blog-card__date {
font-size: 0.8rem;
color: var(--color-text-light);
}
.blog-card__title {
margin: 8px 0;
}
.blog-card__link {
color: var(--color-primary);
font-weight: 700;
font-size: 0.9rem;
}
.testimonial-card {
padding: var(--space-md);
text-align: center;
}
.testimonial-card__rating {
font-size: 1rem;
margin-bottom: var(--space-xs);
}
.testimonial-card__text {
color: var(--color-text-light);
margin-bottom: var(--space-sm);
}
.testimonial-card__name {
font-weight: 700;
color: var(--color-primary-dark);
}
.empty-state {
text-align: center;
color: var(--color-text-light);
padding: var(--space-lg) 0;
}
.editor-img-remove {
display: none;
}
.editor-img-resize-handle {
display: none;
}
.editor-img-alt {
display: none;
}
.editor-img-wrap {
display: inline-block;
max-width: 100%;
line-height: 0;
}
.editor-img {
max-width: 100%;
border-radius: 8px;
}
.editor-embed-remove {
display: none;
}
.editor-embed-wrap {
position: relative;
display: block;
max-width: 100%;
margin: var(--space-sm) 0;
}
.editor-embed-wrap iframe {
display: block;
width: 100%;
min-height: 320px;
border: 0;
border-radius: var(--radius-md);
background-color: #000;
}
.preview-banner {
background-color: var(--color-warning);
color: #4a3600;
text-align: center;
font-weight: 700;
font-size: 0.9rem;
padding: 10px 16px;
position: sticky;
top: 0;
z-index: 999;
}
/* کارت نظر و فرم ثبت نظر — مشترک بین صفحه محصول و صفحه بلاگ */
.comment-item {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-sm);
margin-bottom: var(--space-sm);
}
.comment-item__header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.comment-item__name {
font-weight: 700;
}
.comment-item__text {
color: var(--color-text-light);
margin-bottom: 6px;
}
.comment-item__date {
font-size: 0.8rem;
color: var(--color-text-light);
}
.comment-form {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-md);
}
.comment-form--guest {
text-align: center;
}
.comment-form--guest p {
margin-bottom: var(--space-sm);
color: var(--color-text-light);
}
.site-nav__dropdown-link--all:hover,
.site-nav__dropdown-link--all:focus-visible {
color: var(--color-text) !important;
}