/* /public_html/courses/1month/style.css */
/* =========================
Fonts
========================= */
@font-face {
font-family: "Peyda";
src: url("/assets/fonts/peyda/Peyda-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Peyda";
src: url("/assets/fonts/peyda/Peyda-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Peyda";
src: url("/assets/fonts/peyda/Peyda-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Peyda";
src: url("/assets/fonts/peyda/Peyda-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Peyda";
src: url("/assets/fonts/peyda/Peyda-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* =========================
Base Variables
========================= */
:root {
--fh-pink: #ec4899;
--fh-pink-soft: #fce7f3;
--fh-purple: #7c3aed;
--fh-purple-soft: #ede9fe;
--fh-green: #10b981;
--fh-green-soft: #d1fae5;
--fh-ink: #202433;
--fh-muted: #4b5563;
--fh-bg: #fff7fb;
}
/* =========================
Page Base
========================= */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Peyda", sans-serif;
background: var(--fh-bg);
color: var(--fh-ink);
}
button,
input,
textarea,
select {
font-family: inherit;
}
.fh-course-page {
min-height: 100vh;
padding: 28px 16px 56px;
background: var(--fh-bg);
}
.fh-course-page__container {
width: min(1240px, 100%);
margin: 0 auto;
}
/* =========================
Hero Base
========================= */
/* =========================
Hero Card Layout
کارت اصلی Hero
========================= */
.fh-course-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
align-items: center;
gap: 44px;
margin-top: 8px;
padding: 34px;
border-radius: 34px;
border: 1px solid rgba(255, 255, 255, 0.78);
background: #ffffff;
box-shadow:
0 22px 60px rgba(31, 41, 55, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.90);
overflow: hidden;
}
/* دایره تزئینی نرم داخل کارت Hero */
.fh-course-hero::before {
content: "";
position: absolute;
width: 170px;
height: 170px;
right: -55px;
top: -55px;
border-radius: 999px;
background: rgba(236, 72, 153, 0.12);
pointer-events: none;
}
/* ستاره تزئینی خیلی سبک */
.fh-course-hero::after {
content: "✦";
position: absolute;
left: 34px;
top: 28px;
color: rgba(236, 72, 153, 0.55);
font-size: 28px;
line-height: 1;
pointer-events: none;
}
/* =========================
Hero Pill
برچسب کوچک بالای عنوان
========================= */
.fh-course-hero__pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
margin-bottom: 16px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(237, 233, 254, 0.9);
color: #7c3aed;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
box-shadow:
0 10px 24px rgba(124, 58, 237, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.fh-course-hero__content,
.fh-course-hero__media {
position: relative;
z-index: 1;
}
.fh-course-hero__content {
min-width: 0;
}
.fh-course-hero__media {
display: flex;
justify-content: center;
}
/* =========================
Hero Title
عنوان اصلی دوره
========================= */
.fh-course-hero__title {
margin: 0;
font-size: clamp(29px, 4.8vw, 42px);
line-height: 1.2;
letter-spacing: -1px;
font-weight: 700;
}
.fh-course-hero__line {
display: block;
}
.fh-course-hero__word {
position: relative;
display: inline-block;
padding: 0 8px;
isolation: isolate;
}
.fh-course-hero__word::before {
content: "";
position: absolute;
inset: 56% 0 5px;
z-index: -1;
border-radius: 14px;
background: var(--fh-pink-soft);
transform: rotate(-1.2deg);
}
.fh-course-hero__word--fitness {
color: var(--fh-purple);
}
.fh-course-hero__word--fitness::before {
background: var(--fh-purple-soft);
}
.fh-course-hero__word--fatloss {
color: var(--fh-pink);
}
.fh-course-hero__word--home {
color: var(--fh-green);
}
.fh-course-hero__word--home::before {
background: var(--fh-green-soft);
}
/* فقط در دسکتاپ: بالاتر بردن برچسب و عنوان Hero */
@media (min-width: 900px) {
.fh-course-hero__pill,
.fh-course-hero__title {
position: relative;
top: -34px;
}
}
/* =========================
Hero Subtitle
متن توضیحی زیر عنوان
========================= */
.fh-course-hero__subtitle {
max-width: 680px;
margin: 18px 0 0;
color: var(--fh-muted);
font-size: 15px;
line-height: 2.15;
}
/* =========================
Hero Rating Badge
امتیاز دوره در Hero
========================= */
.fh-course-hero__proof {
direction: ltr;
display: inline-flex;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
width: fit-content;
max-width: 100%;
margin-top: 22px;
}
.fh-course-hero__rating {
direction: rtl;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
width: fit-content;
max-width: 100%;
margin-top: 0;
padding: 8px 16px;
border-radius: 12px;
border: 1px solid rgba(245, 158, 11, 0.38);
background:
linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 247, 237, 0.88));
color: #f59e0b;
}
.fh-course-hero__rating-count {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 58px;
color: #92400e;
line-height: 1.25;
white-space: nowrap;
}
.fh-course-hero__rating-count strong {
color: #92400e;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.fh-course-hero__rating-count span {
color: #78350f;
font-size: 9.5px;
font-weight: 750;
line-height: 1.2;
}
.fh-course-hero__rating-divider {
display: block;
width: 1px;
height: 24px;
background: rgba(245, 158, 11, 0.30);
}
.fh-course-hero__rating-score {
display: inline-flex;
align-items: center;
justify-content: center;
color: #f59e0b;
font-size: 23px;
font-weight: 950;
line-height: 1;
letter-spacing: -0.05em;
text-shadow: 0 5px 14px rgba(245, 158, 11, 0.18);
}
.fh-course-hero__stars {
direction: ltr;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
line-height: 1;
}
.fh-course-hero__stars .fh-course-comments__svg-star {
display: block;
width: 18px;
height: 18px;
overflow: visible;
}
.fh-course-hero__stars .fh-course-comments__svg-star path {
vector-effect: non-scaling-stroke;
}
.fh-course-hero__stars .fh-course-comments__svg-star.is-filled {
filter: drop-shadow(0 3px 10px rgba(202, 123, 18, 0.20));
}
.fh-course-hero__stars .fh-course-comments__svg-star.is-filled path {
fill: #f7a928;
stroke: #c97b12;
stroke-width: 0.8;
}
.fh-course-hero__stars .fh-course-comments__svg-star.is-empty path {
fill: rgba(148, 163, 184, 0.20);
stroke: rgba(148, 163, 184, 0.38);
stroke-width: 0.8;
}
.fh-course-hero__metric {
direction: rtl;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 132px;
min-height: 58px;
padding: 8px 14px;
border-radius: 12px;
border: 1px solid rgba(236, 72, 153, 0.18);
background: rgba(255, 240, 249, 0.52);
color: var(--fh-pink);
box-shadow:
0 10px 26px rgba(236, 72, 153, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.fh-course-hero__metric--comments {
color: #d9468f;
}
.fh-course-hero__metric--success {
color: var(--fh-pink);
}
.fh-course-hero__metric-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 24px;
line-height: 0;
}
.fh-course-hero__metric-icon svg {
display: block;
width: 34px;
height: 34px;
}
.fh-course-hero__metric-text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
min-width: 0;
text-align: right;
white-space: nowrap;
}
.fh-course-hero__metric-text strong {
color: var(--fh-ink);
font-size: 18px;
font-weight: 800;
line-height: 1;
}
.fh-course-hero__metric-text span {
color: #6b7280;
font-size: 10px;
font-weight: 800;
line-height: 1.15;
}
/* فقط دسکتاپ: پایینتر آوردن باکس امتیاز */
@media (min-width: 900px) {
.fh-course-hero__proof {
margin-top: 34px;
}
}
/* =========================
Hero Image
تصویر اصلی دوره
========================= */
.fh-course-hero__image-card {
position: relative;
width: min(100%, 360px);
aspect-ratio: 4 / 5;
padding: 2px;
border-radius: 34px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 231, 243, 0.78));
box-shadow:
0 24px 60px rgba(236, 72, 153, 0.18),
0 8px 20px rgba(31, 41, 55, 0.06);
}
.fh-course-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 26px;
background: #f9fafb;
}
/* =========================
Section Divider
جداکننده بین Hero و بخش بعدی
========================= */
.fh-course-section-divider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 12px 0 8px;
height: 14px;
}
.fh-course-section-divider::before {
content: "";
width: 100%;
height: 1px;
background: rgba(236, 72, 153, 0.18);
}
.fh-course-section-divider span {
position: absolute;
width: 42px;
height: 6px;
border-radius: 999px;
background: var(--fh-pink);
box-shadow:
0 6px 16px rgba(236, 72, 153, 0.18),
0 3px 10px rgba(124, 58, 237, 0.12);
}
/* =========================
Course Price Section
سکشن قیمت و ثبتنام
========================= */
.fh-course-price {
margin-top: 0;
}
.fh-course-price__card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 11px;
width: 100%;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 28px;
background: #ffffff;
box-shadow:
0 18px 44px rgba(31, 41, 55, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.fh-course-price__status {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: fit-content;
min-height: 29px;
margin: 0;
padding: 5px 11px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 999px;
background: rgba(248, 250, 252, 0.90);
color: #64748b;
font-size: 10px;
font-weight: 800;
line-height: 1.5;
}
.fh-course-price__status::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 999px;
background: #94a3b8;
box-shadow:
0 0 0 4px rgba(148, 163, 184, 0.10);
}
.fh-course-price__status--open {
border-color: rgba(16, 185, 129, 0.14);
background: rgba(209, 250, 229, 0.88);
color: #047857;
}
.fh-course-price__status--open::before {
background: var(--fh-green);
box-shadow:
0 0 0 4px rgba(16, 185, 129, 0.11);
}
/* کارت داخلی قیمت */
.fh-course-price__buybox {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 4px 14px;
overflow: hidden;
border: 1px solid rgba(236, 72, 153, 0.14);
border-radius: 21px;
background: #fffafd;
box-shadow:
0 13px 30px rgba(236, 72, 153, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
/* هر قیمت در یک ردیف مستقل */
.fh-course-price__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 62px;
padding: 11px 2px;
}
.fh-course-price__row + .fh-course-price__row {
border-top: 1px dashed rgba(148, 163, 184, 0.32);
}
/* عنوان قیمت */
.fh-course-price__label {
flex: 0 0 auto;
color: #64748b;
font-size: 12px;
font-weight: 800;
line-height: 1.6;
white-space: nowrap;
}
/* عدد و واحد پول */
.fh-course-price__value {
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
gap: 5px;
min-width: 0;
margin-right: auto;
white-space: nowrap;
}
.fh-course-price__number {
color: #334155;
font-size: 18px;
font-weight: 900;
line-height: 1;
}
.fh-course-price__unit {
color: #64748b;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
/* قیمت اصلی خطخورده */
.fh-course-price__value--old .fh-course-price__number {
color: #94a3b8;
text-decoration: line-through;
text-decoration-color: rgba(100, 116, 139, 0.78);
text-decoration-thickness: 1.5px;
}
.fh-course-price__value--old .fh-course-price__unit {
color: #94a3b8;
}
/* قیمت تخفیفدار */
.fh-course-price__row--discount .fh-course-price__label {
color: #334155;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
.fh-course-price__row--discount .fh-course-price__number {
color: var(--fh-pink);
font-size: 30px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-shadow:
0 8px 20px rgba(236, 72, 153, 0.13);
}
.fh-course-price__row--discount .fh-course-price__unit {
color: #475569;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
}
/* دکمه ثبتنام */
.fh-course-price__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 49px;
padding: 0 20px;
border: 0;
outline: none;
appearance: none;
border-radius: 16px;
background: var(--fh-pink);
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 1.5;
letter-spacing: normal;
word-spacing: 2px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.2s ease;
}
.fh-course-price__button:hover {
transform: translateY(-2px);
box-shadow:
0 20px 42px rgba(236, 72, 153, 0.28),
0 10px 22px rgba(124, 58, 237, 0.22);
}
.fh-course-price__button:focus-visible {
outline: 3px solid rgba(236, 72, 153, 0.24);
outline-offset: 3px;
}
.fh-course-price__status--waiting {
border-color: rgba(16, 185, 129, 0.14);
background: rgba(236, 253, 245, 0.92);
color: #047857;
}
.fh-course-price__status--waiting::before {
background: var(--fh-green);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.11);
}
.fh-course-price__capacity {
padding: 12px 14px;
border: 1px solid rgba(236, 72, 153, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.76);
}
.fh-course-price__capacity-head {
margin-bottom: 10px;
color: #475569;
font-size: 10px;
font-weight: 800;
line-height: 1.8;
}
.fh-course-price__capacity-track {
position: relative;
height: 8px;
border-radius: 999px;
background: #e8ecea;
}
.fh-course-price__capacity-track i {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--value);
border-radius: inherit;
background: linear-gradient(90deg, var(--fh-pink), var(--fh-green));
}
.fh-course-price__capacity-track em {
position: absolute;
top: 50%;
right: var(--value);
width: 15px;
height: 15px;
border: 1px solid #f0f0f0;
border-radius: 999px;
background: var(--fh-pink);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
transform: translate(50%, -50%);
}
.fh-course-price__waitbox {
padding: 14px;
border: 1px solid rgba(16, 185, 129, 0.14);
border-radius: 20px;
background:
linear-gradient(
145deg,
rgba(16, 185, 129, 0.08),
rgba(255, 255, 255, 0.82)
);
}
.fh-course-price__wait-title {
display: block;
color: #334155;
font-size: 12px;
font-weight: 700;
line-height: 1.9;
letter-spacing: 0;
}
.fh-course-price__wait-text {
margin: 5px 0 0;
color: #64748b;
font-size: 10.5px;
font-weight: 600;
line-height: 1.95;
letter-spacing: 0;
}
.fh-course-price__wait-count {
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid rgba(16, 185, 129, 0.13);
color: #334155;
font-size: 10px;
font-weight: 800;
line-height: 1.8;
}
.fh-course-price__wait-count.is-hidden {
display: none;
}
.fh-course-price__wait-count b {
color: var(--fh-pink);
font-weight: 900;
}
.fh-course-price__microcopy {
margin: -2px 0 0;
color: #8b9a95;
font-size: 9px;
font-weight: 600;
line-height: 1.8;
letter-spacing: 0;
text-align: center;
}
/* =========================
Course waitlist modal
========================= */
.fh-course-waitlist-modal {
position: fixed;
inset: 0;
z-index: 12000;
padding: 18px;
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 180ms ease,
visibility 180ms ease;
}
.fh-course-waitlist-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fh-course-waitlist-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(22, 37, 32, 0.56);
backdrop-filter: blur(8px);
}
.fh-course-waitlist-modal__dialog {
position: relative;
z-index: 1;
width: min(100%, 410px);
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.74);
border-radius: 28px;
background: #fffdf9;
box-shadow: 0 30px 90px rgba(18, 34, 29, 0.30);
transform: translateY(14px) scale(0.97);
transition: transform 180ms ease;
}
.fh-course-waitlist-modal.is-open .fh-course-waitlist-modal__dialog {
transform: translateY(0) scale(1);
}
.fh-course-waitlist-modal__close {
position: absolute;
top: 12px;
left: 12px;
width: 36px;
height: 36px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
background: rgba(39, 73, 63, 0.07);
color: #334155;
font-family: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.fh-course-waitlist-modal__title {
margin: 0;
padding-left: 44px;
color: #334155;
font-size: 20px;
font-weight: 900;
line-height: 1.75;
}
.fh-course-waitlist-modal__text {
margin: 7px 0 16px;
color: #64748b;
font-size: 11px;
font-weight: 700;
line-height: 2;
}
.fh-course-waitlist-modal__field {
display: grid;
gap: 7px;
}
.fh-course-waitlist-modal__field > span {
color: #334155;
font-size: 10px;
font-weight: 900;
}
.fh-course-waitlist-modal__field input {
width: 100%;
height: 50px;
padding: 0 14px;
border: 1px solid rgba(51, 65, 85, 0.14);
border-radius: 16px;
outline: 0;
background: #ffffff;
color: #334155;
direction: ltr;
text-align: left;
font-family: inherit;
font-size: 14px;
transition:
border-color 180ms ease,
box-shadow 180ms ease;
}
.fh-course-waitlist-modal__field input:focus {
border-color: rgba(236, 72, 153, 0.55);
box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.09);
}
.fh-course-waitlist-modal__honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
}
.fh-course-waitlist-modal__privacy {
margin: 8px 1px 0;
color: #8da099;
font-size: 8.8px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-waitlist-modal__submit {
width: 100%;
min-height: 50px;
margin-top: 12px;
padding: 0 16px;
border: 0;
border-radius: 16px;
background: var(--fh-pink);
color: #ffffff;
font-family: inherit;
font-size: 12px;
font-weight: 900;
cursor: pointer;
}
.fh-course-waitlist-modal__submit:disabled {
opacity: 0.65;
cursor: wait;
}
.fh-course-waitlist-modal__message {
min-height: 18px;
margin: 8px 0 0;
color: #b4233d;
font-size: 9.5px;
font-weight: 800;
line-height: 1.8;
text-align: center;
}
.fh-course-waitlist-modal__success {
padding: 12px 4px 3px;
text-align: center;
}
.fh-course-waitlist-modal__success-mark {
width: 64px;
height: 64px;
margin: 0 auto 13px;
display: grid;
place-items: center;
border-radius: 22px;
background: rgba(16, 185, 129, 0.10);
color: var(--fh-green);
font-size: 29px;
font-weight: 900;
}
.fh-course-waitlist-modal__success h3 {
margin: 0;
color: #334155;
font-size: 18px;
font-weight: 900;
line-height: 1.8;
}
.fh-course-waitlist-modal__success p {
margin: 6px 0 15px;
color: #64748b;
font-size: 10.5px;
font-weight: 700;
line-height: 2;
}
.fh-course-waitlist-modal__success button {
min-height: 44px;
padding: 0 20px;
border: 1px solid rgba(51, 65, 85, 0.10);
border-radius: 14px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 10.5px;
font-weight: 900;
cursor: pointer;
}
body.fh-course-waitlist-open {
overflow: hidden;
}
/* =========================
Course Details Section
جزئیات دوره - کارت یکپارچه ۶تایی
========================= */
.fh-course-details {
margin-top: 18px;
padding: 0;
border-radius: 30px;
border: 1px solid rgba(124, 58, 237, 0.08);
background: #ffffff;
box-shadow:
0 18px 44px rgba(31, 41, 55, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
overflow: hidden;
}
.fh-course-details__head {
display: none;
}
.fh-course-details__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 18px 10px;
}
.fh-course-details__card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 112px;
padding: 8px 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
}
/* خط عمودی بین آیتمهای دسکتاپ؛ هر ردیف ۳تایی */
.fh-course-details__card:not(:nth-child(3n))::after {
content: "";
position: absolute;
left: 0;
top: 22px;
bottom: 22px;
width: 1px;
background: rgba(124, 58, 237, 0.13);
}
/* خط افقی بین ردیف اول و دوم */
.fh-course-details__card:nth-child(n + 4)::before {
content: "";
position: absolute;
top: 0;
right: 18px;
left: 18px;
height: 1px;
background: rgba(124, 58, 237, 0.11);
}
.fh-course-details__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 0;
background: transparent;
color: #8b5cf6;
}
.fh-course-details__icon img,
.fh-course-details__icon-img {
width: 25px;
height: 25px;
display: block;
object-fit: contain;
opacity: .72;
}
.fh-course-details__icon-img--support {
width: 29px;
height: 29px;
transform: none;
}
.fh-course-details__text {
min-width: 0;
}
.fh-course-details__item-title {
margin: 0;
color: #202433;
font-size: 12px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-details__value {
margin: 1px 0 0;
color: #4b5563;
font-size: 11.5px;
font-weight: 600;
line-height: 1.9;
}
/* Cloneهای کاروسل فقط برای موبایل هستند؛ در دسکتاپ نمایش داده نشوند */
.fh-course-details__card.is-clone {
display: none;
}
/* =========================
Course Main Layout
چیدمان دسکتاپ: جزئیات راست، قیمت و آمار چپ
========================= */
.fh-course-main-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 18px;
margin-top: 18px;
align-items: start;
}
.fh-course-main-layout__details {
min-width: 0;
}
.fh-course-main-layout__sidebar {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
@media (min-width: 900px) {
.fh-course-main-layout__sidebar {
z-index: 30;
}
.fh-course-main-layout__sidebar.is-floating {
position: fixed;
top: 108px;
left: var(--fh-floating-sidebar-left, 16px);
width: 360px;
}
.fh-course-main-layout {
min-height: 292px;
}
}
/* وقتی داخل layout قرار گرفتند، فاصلههای اضافی حذف شوند */
.fh-course-main-layout .fh-course-details,
.fh-course-main-layout .fh-course-price {
margin-top: 0;
}
/* =========================
Course Quick Nav
منوی سریع بخشهای دوره
========================= */
.fh-course-quicknav {
margin-top: 18px;
padding: 14px;
border-radius: 22px;
border: 1px solid rgba(236, 72, 153, 0.08);
background: rgba(255, 255, 255, 0.82);
box-shadow:
0 16px 38px rgba(31, 41, 55, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.fh-course-quicknav__nav {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.fh-course-quicknav__link {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-height: 44px;
padding: 0 16px;
border-radius: 18px;
border: 1px solid rgba(124, 58, 237, 0.10);
color: #374151;
background: rgba(255, 255, 255, 0.82);
font-size: 13px;
font-weight: 700;
text-decoration: none;
line-height: 1;
box-shadow:
0 8px 18px rgba(31, 41, 55, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
transition:
transform 0.2s ease,
color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
/* آیکن داخل دکمههای منوی سریع */
.fh-course-quicknav__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-left: 7px;
}
.fh-course-quicknav__icon img {
display: block;
width: 20px;
height: 20px;
object-fit: contain;
}
.fh-course-quicknav__text {
display: inline-block;
}
.fh-course-quicknav__link:hover {
transform: translateY(-1px);
color: #fff;
border-color: transparent;
background: var(--fh-pink);
box-shadow:
0 12px 24px rgba(236, 72, 153, 0.18),
0 6px 14px rgba(124, 58, 237, 0.12);
}
/* حالت فعال منوی سریع */
.fh-course-quicknav__link.is-active {
color: #fff;
border-color: transparent;
background: var(--fh-pink);
box-shadow:
0 12px 24px rgba(236, 72, 153, 0.18),
0 6px 14px rgba(124, 58, 237, 0.12);
}
/* محو نرم آیکن در گزینه فعال منوی سریع */
.fh-course-quicknav__link.is-active .fh-course-quicknav__icon {
opacity: 0;
width: 0;
flex-basis: 0;
margin-left: 0;
overflow: hidden;
}
/* اسکرول نرم برای لینکهای داخلی */
html {
scroll-behavior: smooth;
}
/* فاصله امن برای سکشنهای مقصد تا زیر هدر مخفی نشوند */
#courseDescription,
#courseSessions,
#courseFaq,
#courseComments {
scroll-margin-top: 90px;
}
/* Desktop alignment with details column */
@media (min-width: 900px) {
.fh-course-description,
.fh-course-sessions,
.fh-course-faq {
width: calc(100% - 378px);
max-width: none;
margin-right: 0;
margin-left: auto;
}
}
.fh-course-description__card .fh-course-quicknav {
width: 100%;
margin: 0 0 22px 0;
padding: 10px;
border-radius: 22px;
border: 1px solid rgba(236, 72, 153, 0.08);
background: rgba(255, 255, 255, 0.66);
box-shadow: none;
}
/* =========================
Course Description Section
توضیحات دوره
========================= */
.fh-course-anchor-section {
scroll-margin-top: 90px;
}
.fh-course-description {
margin-top: 15px;
}
@media (min-width: 900px) {
.fh-course-description {
margin-top: -22px;
}
}
.fh-course-description__head {
margin-bottom: 14px;
}
.fh-course-description__title {
margin: 0;
color: var(--fh-ink);
font-size: 23px;
font-weight: 500;
line-height: 1.7;
}
.fh-course-description__card {
position: relative;
padding: 28px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.78);
background: #ffffff;
box-shadow:
0 18px 44px rgba(31, 41, 55, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
overflow: hidden;
}
.fh-course-description__card::before {
content: "";
position: absolute;
top: -72px;
left: -72px;
width: 170px;
height: 170px;
border-radius: 999px;
background: rgba(236, 72, 153, 0.08);
pointer-events: none;
}
.fh-course-description__block {
position: relative;
z-index: 1;
}
.fh-course-description__subtitle {
position: relative;
margin: 0 0 10px;
padding-right: 16px;
color: var(--fh-ink);
font-size: 16px;
font-weight: 500;
line-height: 1.7;
}
.fh-course-description__subtitle::before {
content: "";
position: absolute;
right: 0;
top: 13px;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--fh-pink);
box-shadow:
0 0 0 5px rgba(236, 72, 153, 0.10);
}
.fh-course-description__text {
max-width: 980px;
margin: 0;
color: #4b5563;
font-size: 14px;
font-weight: 600;
line-height: 2.25;
}
.fh-course-description__text + .fh-course-description__text {
margin-top: 10px;
}
.fh-course-description__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.fh-course-description__card .fh-description-divider {
margin: 14px 0 16px;
}
/* لیست تکستونه داخل توضیحات */
.fh-course-description__list--single {
grid-template-columns: 1fr;
}
.fh-course-description__list li {
position: relative;
min-height: 34px;
padding: 8px 34px 8px 10px;
border-radius: 16px;
border: 1px solid rgba(16, 185, 129, 0.08);
background: rgba(255, 255, 255, 0.58);
color: #4b5563;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-description__list li::before {
content: "✓";
position: absolute;
right: 10px;
top: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.13);
color: var(--fh-green);
font-size: 10px;
font-weight: 700;
line-height: 1;
}
/* =========================
Course Includes Stack
شامل چه چیزهایی است؟
========================= */
.fh-includes-stack {
position: relative;
max-width: 904px;
margin: 0 auto;
z-index: 1;
}
.fh-includes-head {
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 46px;
margin-bottom: 39px;
}
.fh-includes-title-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
min-width: 0;
}
.fh-includes-head .fh-head-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--fh-pink);
box-shadow: 0 0 0 7px rgba(236, 72, 153, 0.11);
flex: 0 0 auto;
}
.fh-includes-title {
margin: 0;
color: var(--fh-ink);
font-size: 16px;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
}
.fh-includes-cards {
position: relative;
z-index: 1;
min-height: 96px;
}
.fh-include-card {
position: relative;
width: 100%;
min-height: 48px;
padding: 12px 16px;
border: 1px solid rgba(16, 185, 129, 0.16);
border-radius: 17px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
overflow: hidden;
transition:
transform 0.38s cubic-bezier(0.68, -0.55, 0.27, 1.55),
margin 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.fh-include-card::after {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, rgba(236, 72, 153, 0.65), rgba(124, 58, 237, 0.65));
opacity: 0;
transition: 0.3s ease;
}
.fh-include-card:hover {
border-color: rgba(124, 58, 237, 0.22);
box-shadow: 0 14px 30px rgba(95, 65, 145, 0.12);
}
.fh-include-card:hover::after {
opacity: 1;
}
.fh-check {
position: relative;
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(245, 255, 253, 0.13);
color: transparent;
font-size: 0;
line-height: 1;
overflow: hidden;
}
.fh-check::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 999px;
background: linear-gradient(135deg, #7cd9b0 0%, #5ccc99 100%);
box-shadow:
0 6px 14px rgba(46, 158, 107, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fh-check::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 9px;
height: 5px;
border-left: 2.2px solid #fff;
border-bottom: 2.2px solid #fff;
border-radius: 1px;
transform: translate(-50%, -50%) rotate(-45deg);
}
.fh-include-card p {
margin: 0;
color: #37394d;
font-size: 14px;
line-height: 1.85;
font-weight: 600;
}
.fh-includes-stack:not(.is-open) .fh-include-card:not(:first-child) {
margin-top: -39px;
}
.fh-include-card-1 {
z-index: 5;
transform: translateY(0) scale(1);
}
.fh-include-card-2 {
z-index: 4;
transform: translateY(10px) scale(0.985);
}
.fh-include-card-3 {
z-index: 3;
transform: translateY(20px) scale(0.97);
}
.fh-include-card-4 {
z-index: 2;
transform: translateY(30px) scale(0.955);
}
.fh-include-card-5 {
z-index: 1;
transform: translateY(40px) scale(0.94);
}
.fh-includes-stack.is-open .fh-includes-cards {
min-height: 0px;
}
.fh-includes-stack.is-open .fh-include-card {
transform: none;
margin-top: 0;
margin-bottom: 12px;
}
.fh-includes-actions {
position: absolute;
z-index: 30;
right: 0;
top: 138%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.fh-includes-btn {
position: relative;
min-width: 84px;
padding: 6px 12px 6px 28px;
border: 1.5px solid #7c3aed;
border-radius: 999px;
background: #fff;
color: var(--fh-purple);
font-family: inherit;
font-size: 11.5px;
font-weight: 800;
cursor: pointer;
box-shadow: none;
transition:
transform 0.25s ease,
border-color 0.25s ease,
background 0.25s ease,
color 0.25s ease;
}
.fh-includes-btn:hover {
transform: translateY(-1px);
border-color: #ec4899;
background: rgba(236, 72, 153, 0.04);
box-shadow: none;
}
.fh-includes-btn:focus-visible {
outline: 3px solid rgba(124, 58, 237, 0.22);
outline-offset: 4px;
}
.fh-includes-btn::after {
content: "";
position: absolute;
left: 13px;
top: 9px;
width: 6px;
height: 6px;
border-left: 1.8px solid var(--fh-purple);
border-bottom: 1.8px solid var(--fh-purple);
transform: rotate(-45deg);
transition: 0.25s ease;
}
.fh-includes-stack.is-open .fh-includes-btn::after {
top: 12px;
transform: rotate(135deg);
}
@media (max-width: 720px) {
.fh-includes-head {
align-items: center;
}
.fh-includes-title {
font-size: 15px;
}
.fh-includes-btn {
min-width: 78px;
padding: 5px 10px 5px 26px;
font-size: 11px;
}
.fh-includes-btn::after {
left: 12px;
top: 8px;
width: 5.5px;
height: 5.5px;
}
.fh-includes-stack.is-open .fh-includes-btn::after {
top: 11px;
}
.fh-includes-cards {
min-height: 98px;
}
.fh-includes-stack.is-open .fh-includes-cards {
min-height: 3px;
}
.fh-include-card {
min-height: 50px;
padding: 11px 12px;
border-radius: 15px;
gap: 9px;
}
.fh-include-card p {
font-size: 13px;
line-height: 1.8;
}
.fh-check {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 0;
}
.fh-check::before {
inset: 5px;
}
.fh-check::after {
width: 9px;
height: 5px;
border-left-width: 2px;
border-bottom-width: 2px;
}
.fh-includes-stack:not(.is-open) .fh-include-card:not(:first-child) {
margin-top: -41px;
}
.fh-include-card-1 {
transform: translateY(0) scale(1);
}
.fh-include-card-2 {
transform: translateY(9px) scale(0.985);
}
.fh-include-card-3 {
transform: translateY(18px) scale(0.97);
}
.fh-include-card-4 {
transform: translateY(27px) scale(0.955);
}
.fh-include-card-5 {
transform: translateY(36px) scale(0.94);
}
}
@media (max-width: 420px) {
.fh-includes-cards {
min-height: 102px;
}
.fh-includes-stack.is-open .fh-includes-cards {
min-height: 4px;
}
.fh-include-card {
align-items: flex-start;
}
.fh-include-card p {
font-size: 12.8px;
}
}
/* جداکننده داخلی توضیحات */
.fh-course-description__divider {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 24px 0;
height: 18px;
}
.fh-course-description__divider::before {
content: "";
width: 100%;
height: 1px;
background: rgba(240, 113, 166, 0.16);
}
.fh-course-description__divider span {
position: absolute;
width: 36px;
height: 7px;
border-radius: 999px;
background: #f071a6;
box-shadow:
0 8px 20px rgba(236, 72, 153, 0.18),
0 4px 12px rgba(124, 58, 237, 0.12);
}
/* =========================
Course Outcomes
با این دوره چه اتفاقی میافته
========================= */
.fh-course-description__block--outcomes {
padding-top: 2px;
}
.fh-course-outcomes__title {
margin: 0 0 22px;
color: #30c6cf;
font-size: 21px;
font-weight: 700;
line-height: 1.7;
text-align: center;
}
.fh-course-outcomes {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.fh-course-outcomes__item {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 88px;
padding: 18px 22px;
border-radius: 24px;
border: 1px solid rgba(203, 213, 225, 0.72);
background: rgba(255, 255, 255, 0.82);
box-shadow:
0 14px 34px rgba(31, 41, 55, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.fh-course-outcomes__dot {
width: 17px;
height: 17px;
flex: 0 0 17px;
margin-top: 7px;
border-radius: 999px;
background: #35c8cf;
box-shadow:
0 0 0 5px rgba(53, 200, 207, 0.10),
0 8px 18px rgba(53, 200, 207, 0.18);
}
.fh-course-outcomes__content {
min-width: 0;
}
.fh-course-outcomes__item-title {
margin: 0;
color: var(--fh-ink);
font-size: 15.5px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-outcomes__item-title strong,
.fh-course-outcomes__highlight {
color: #30c6cf;
}
.fh-course-outcomes__text {
margin: 4px 0 0;
color: #64748b;
font-size: 12px;
font-weight: 700;
line-height: 1.9;
}
/* رنگی کردن بخشهای مهم عنوانها بدون نیاز به span دستی */
.fh-course-outcomes__item:nth-child(1) .fh-course-outcomes__item-title,
.fh-course-outcomes__item:nth-child(2) .fh-course-outcomes__item-title,
.fh-course-outcomes__item:nth-child(3) .fh-course-outcomes__item-title,
.fh-course-outcomes__item:nth-child(4) .fh-course-outcomes__item-title {
color: var(--fh-ink);
}
/* =========================
Course Description Read More
دکمه بیشتر توضیحات
========================= */
/* چکباکس مخفی */
.fh-course-description__toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* ادامه توضیحات در حالت بسته: بخشی از متن دیده و محو شود */
.fh-course-description__more {
position: relative;
max-height: 560px;
overflow: hidden;
opacity: 1;
transform: none;
transition:
max-height 0.45s ease;
}
/* گرادیان محو روی ادامه متن */
.fh-course-description__more::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: 120px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.86) 58%,
rgba(255, 255, 255, 1) 100%
);
pointer-events: none;
}
/* وقتی باز شد */
.fh-course-description__toggle:checked ~ .fh-course-description__more {
max-height: 3000px;
}
/* وقتی باز شد، محوشدن حذف شود */
.fh-course-description__toggle:checked ~ .fh-course-description__more::after {
display: none;
}
/* دکمه بیشتر بخوانید */
.fh-course-description__more-btn {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
min-height: 42px;
margin: -48px auto 0;
padding: 0 18px;
border-radius: 999px;
border: 2px solid rgba(236, 72, 153, 0.34);
background: rgba(255, 255, 255, 0.88);
color: var(--fh-pink);
font-size: 12px;
font-weight: 700;
line-height: 1;
cursor: pointer;
user-select: none;
transition:
transform 0.2s ease,
color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.fh-course-description__more-btn:hover {
transform: translateY(-1px);
color: #fff;
background: var(--fh-pink);
box-shadow:
0 14px 30px rgba(236, 72, 153, 0.18),
0 7px 16px rgba(124, 58, 237, 0.12);
}
/* آیکن دکمه */
.fh-course-description__more-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(236, 72, 153, 0.10);
font-size: 14px;
font-weight: 700;
line-height: 1;
transition:
transform 0.25s ease,
background 0.2s ease;
}
.fh-course-description__more-btn:hover .fh-course-description__more-icon {
background: rgba(255, 255, 255, 0.18);
}
/* متن بستن اول مخفی باشد */
.fh-course-description__more-text--close {
display: none;
}
/* وقتی توضیحات باز شد، متن دکمه عوض شود */
.fh-course-description__toggle:checked ~ .fh-course-description__more-btn .fh-course-description__more-text--open {
display: none;
}
.fh-course-description__toggle:checked ~ .fh-course-description__more-btn .fh-course-description__more-text--close {
display: inline;
}
/* وقتی باز شد، فلش بچرخد */
.fh-course-description__toggle:checked ~ .fh-course-description__more-btn .fh-course-description__more-icon {
transform: rotate(180deg);
}
/* وقتی توضیحات باز شد، دکمه از روی متن جدا شود */
.fh-course-description__toggle:checked ~ .fh-course-description__more-btn {
margin-top: 22px;
}
/* =========================
Read More Heartbeat Animation
انیمیشن ضربان دکمه بیشتر بخوانید
========================= */
/* برای اینکه سایه ضربانی پشت دکمه نرم و کنترلشده باشد */
.fh-course-description__more-btn {
overflow: visible;
}
/* هاله رنگی پشت دکمه */
.fh-course-description__more-btn::before {
content: "";
position: absolute;
inset: -8px;
z-index: -1;
border-radius: 999px;
background: rgba(236, 72, 153, 0.24);
opacity: 0;
transform: scale(0.92);
filter: blur(12px);
pointer-events: none;
}
/* ضربان نرم خود دکمه */
@keyframes fhReadMoreHeartbeat {
0% {
transform: translateY(0) scale(1);
}
14% {
transform: translateY(-1px) scale(1.018);
}
28% {
transform: translateY(0) scale(1);
}
42% {
transform: translateY(-1px) scale(1.012);
}
62% {
transform: translateY(0) scale(1);
}
100% {
transform: translateY(0) scale(1);
}
}
/* ضربان هماهنگ هاله پشت دکمه */
@keyframes fhReadMoreGlowHeartbeat {
0% {
opacity: 0.12;
transform: scale(0.94);
}
14% {
opacity: 0.34;
transform: scale(1.05);
}
28% {
opacity: 0.16;
transform: scale(0.98);
}
42% {
opacity: 0.26;
transform: scale(1.02);
}
62% {
opacity: 0.12;
transform: scale(0.96);
}
100% {
opacity: 0.12;
transform: scale(0.94);
}
}
/* حرکت خیلی ریز آیکن، هماهنگ با ضربان */
@keyframes fhReadMoreIconHeartbeat {
0% {
transform: translateY(0);
}
14% {
transform: translateY(2px);
}
28% {
transform: translateY(0);
}
42% {
transform: translateY(1px);
}
62% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
/* وقتی توضیحات بسته است، JS این کلاس را میدهد */
.fh-course-description__more-btn.is-heartbeat {
animation: fhReadMoreHeartbeat 2.8s ease-in-out infinite;
}
.fh-course-description__more-btn.is-heartbeat::before {
animation: fhReadMoreGlowHeartbeat 2.8s ease-in-out infinite;
}
.fh-course-description__more-btn.is-heartbeat .fh-course-description__more-icon {
animation: fhReadMoreIconHeartbeat 2.8s ease-in-out infinite;
}
/* وقتی کاربر هاور کرد، ضربان متوقف نشود ولی کمی واضحتر شود */
.fh-course-description__more-btn:hover::before {
opacity: 0.32;
}
/* وقتی کاربر حرکت کمتر میخواهد */
@media (prefers-reduced-motion: reduce) {
.fh-course-description__more-btn.is-heartbeat,
.fh-course-description__more-btn.is-heartbeat::before,
.fh-course-description__more-btn.is-heartbeat .fh-course-description__more-icon {
animation: none !important;
}
}
/* =========================
Course Class Timeline
نحوه برگزاری کلاسها
========================= */
.fh-course-description__block--class-timeline {
position: relative;
}
.fh-course-class-timeline {
position: relative;
padding: 24px 8px 8px;
}
.fh-course-class-timeline,
.fh-course-class-timeline * {
box-sizing: border-box;
}
.fh-course-class-timeline__title {
margin: 0 0 54px;
color: #6750c8;
font-size: clamp(21px, 2.6vw, 31px);
font-weight: 700;
line-height: 1.55;
text-align: center;
letter-spacing: -0.04em;
}
.fh-course-class-timeline__wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 74px;
}
/* خط چین وسط تایملاین */
.fh-course-class-timeline__path {
position: absolute;
top: 18px;
bottom: 18px;
right: 50%;
z-index: 0;
width: 120px;
height: calc(100% - 36px);
transform: translateX(50%);
pointer-events: none;
}
.fh-course-class-timeline__step {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
align-items: center;
gap: 26px;
min-height: 250px;
}
.fh-course-class-timeline__visual {
display: flex;
align-items: center;
justify-content: center;
}
.fh-course-class-timeline__image {
display: block;
max-width: 100%;
height: auto;
filter: drop-shadow(0 22px 34px rgba(42, 33, 86, 0.10));
}
.fh-course-class-timeline__image--live {
width: min(360px, 100%);
}
.fh-course-class-timeline__image--laptop {
width: min(350px, 100%);
}
.fh-course-class-timeline__image--mobile {
width: min(320px, 100%);
}
/* شماره مرحله */
.fh-course-class-timeline__number {
display: grid;
place-items: center;
width: 74px;
height: 74px;
margin: 0 auto;
border-radius: 999px;
background: linear-gradient(135deg, #7357d7, #5f45c2);
color: #ffffff;
font-size: 25px;
font-weight: 700;
line-height: 1;
box-shadow:
0 18px 36px rgba(95, 69, 194, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fh-course-class-timeline__content {
max-width: 390px;
}
/* برچسب LIVE */
.fh-course-class-timeline__tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 84px;
height: 44px;
margin-bottom: 18px;
padding: 0 18px;
border-radius: 14px;
background: #f0ebff;
color: #6a50cf;
font-size: 17px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
}
/* باکس آیکن مرحله ۲ و ۳ */
.fh-course-class-timeline__icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 16px;
border-radius: 18px;
background: #f2edff;
}
.fh-course-class-timeline__icon-box img {
display: block;
width: 34px;
height: 34px;
object-fit: contain;
}
.fh-course-class-timeline__heading {
margin: 0;
color: #29263a;
font-size: clamp(21px, 2.3vw, 29px);
font-weight: 700;
line-height: 1.6;
letter-spacing: -0.04em;
}
.fh-course-class-timeline__heading span {
display: block;
color: #6a50cf;
}
.fh-course-class-timeline__text {
margin: 12px 0 0;
color: #777485;
font-size: clamp(14px, 1.5vw, 16.5px);
font-weight: 700;
line-height: 2;
}
.fh-course-class-timeline__meta {
margin: 8px 0 0;
color: #8d899a;
font-size: 12px;
font-weight: 600;
line-height: 1.8;
}
/* جایگیری متنها در دسکتاپ */
.fh-course-class-timeline__step--one .fh-course-class-timeline__content,
.fh-course-class-timeline__step--three .fh-course-class-timeline__content {
justify-self: start;
text-align: right;
}
.fh-course-class-timeline__step--two .fh-course-class-timeline__content {
justify-self: end;
text-align: right;
}
/* =========================
Course Class Timeline - Mobile
نسخه موبایل بدون کارت، شبیه طرح اصلی
========================= */
@media (max-width: 820px) {
.fh-course-class-timeline {
padding: 16px 0 0;
}
.fh-course-class-timeline__title {
margin-bottom: 34px;
font-size: 14px;
line-height: 1.8;
text-align: center;
}
.fh-course-class-timeline__wrap {
position: relative;
gap: 38px;
}
/* خط چین در موبایل هم بماند */
.fh-course-class-timeline__path {
display: block;
top: 86px;
bottom: 30px;
right: 50%;
width: 80px;
height: calc(100% - 116px);
transform: translateX(50%);
opacity: 0.9;
}
.fh-course-class-timeline__step {
direction: ltr;
display: grid;
grid-template-columns: minmax(0, 1.2fr) 44px minmax(0, 1.2fr);
align-items: center;
gap: 10px;
min-height: 210px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.fh-course-class-timeline__content {
direction: rtl;
max-width: none;
}
.fh-course-class-timeline__number {
grid-column: 2;
grid-row: 1;
width: 34px;
height: 34px;
font-size: 15px;
z-index: 2;
}
.fh-course-class-timeline__visual {
grid-row: 1;
}
/* مرحله ۱ و ۳: عکس چپ، متن راست */
.fh-course-class-timeline__step--one .fh-course-class-timeline__visual,
.fh-course-class-timeline__step--three .fh-course-class-timeline__visual {
grid-column: 1;
justify-content: center;
}
.fh-course-class-timeline__step--one .fh-course-class-timeline__content,
.fh-course-class-timeline__step--three .fh-course-class-timeline__content {
grid-column: 3;
text-align: right;
justify-self: stretch;
}
/* مرحله ۲: متن چپ، عکس راست */
.fh-course-class-timeline__step--two .fh-course-class-timeline__content {
grid-column: 1;
text-align: right;
justify-self: stretch;
}
.fh-course-class-timeline__step--two .fh-course-class-timeline__visual {
grid-column: 3;
justify-content: center;
}
.fh-course-class-timeline__image--live {
width: 168px;
max-width: none;
transform: translateX(+14px);
}
.fh-course-class-timeline__image--laptop {
width: min(150px, 100%);
}
.fh-course-class-timeline__image--mobile {
width: min(136px, 100%);
}
.fh-course-class-timeline__tag {
min-width: 58px;
height: 32px;
margin-bottom: 9px;
padding: 0 11px;
border-radius: 10px;
font-size: 12px;
}
.fh-course-class-timeline__icon-box {
width: 38px;
height: 38px;
margin-bottom: 8px;
border-radius: 12px;
}
.fh-course-class-timeline__icon-box img {
width: 22px;
height: 22px;
}
.fh-course-class-timeline__heading {
font-size: 13px;
line-height: 1.75;
letter-spacing: -0.02em;
}
.fh-course-class-timeline__text {
margin-top: 7px;
font-size: 10px;
line-height: 2;
font-weight: 700;
}
.fh-course-class-timeline__meta {
margin-top: 6px;
font-size: 10px;
line-height: 1.8;
}
}
/* =========================
Course Sessions Section
جلسات دوره
========================= */
.fh-course-sessions {
margin-top: 18px;
padding: 24px;
border-radius: 30px;
border: 1px solid rgba(232, 220, 203, 0.82);
background: #fffdfb;
box-shadow:
0 18px 44px rgba(90, 74, 58, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.94);
overflow: hidden;
}
.fh-course-sessions__head {
margin-bottom: 14px;
}
.fh-course-sessions__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(226, 214, 196, 0.78);
background: rgba(255, 250, 243, 0.92);
color: #7c3aed;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
}
.fh-course-sessions__title {
margin: 0;
color: var(--fh-ink);
font-size: 23px;
font-weight: 700;
line-height: 1.7;
}
.fh-course-sessions__intro {
max-width: 760px;
margin: 6px 0 0;
color: #64748b;
font-size: 13px;
font-weight: 700;
line-height: 2;
}
.fh-course-sessions__accordion {
display: grid;
gap: 12px;
}
.fh-course-session {
border-radius: 26px;
border: 1.5px solid rgba(59, 130, 246, 0.34);
background:
radial-gradient(circle at 92% 8%, rgba(96, 165, 250, 0.22), transparent 32%),
radial-gradient(circle at 8% 12%, rgba(14, 165, 233, 0.16), transparent 30%),
linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.88));
box-shadow: none;
overflow: hidden;
transition:
border-color 0.24s ease,
box-shadow 0.24s ease,
background 0.24s ease;
}
.fh-course-session:not(.is-open):hover {
border-color: rgba(37, 99, 235, 0.46);
box-shadow: none;;
}
.fh-course-session__trigger {
width: 100%;
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border: 0;
background: transparent;
color: inherit;
font-family: inherit;
text-align: right;
cursor: pointer;
}
.fh-course-session__right {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.fh-course-session__number {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 16px;
border: 1px solid rgba(37, 99, 235, 0.14);
background: rgba(219, 234, 254, 0.95);
color: #2563eb;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
/* آیکن کنار شماره جلسه */
.fh-course-session__number-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 0 0 auto;
}
.fh-course-session__head-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 14px;
border: 1px solid rgba(191, 219, 254, 0.86);
background: rgba(239, 246, 255, 0.72);
box-shadow: none;
}
.fh-course-session__head-icon img {
display: block;
width: 23px;
height: 23px;
object-fit: contain;
object-position: center;
}
/* وقتی جلسه باز است، آیکن کمی روشنتر شود */
.fh-course-session.is-open .fh-course-session__head-icon {
border-color: rgba(59, 130, 246, 0.22);
background: rgba(255, 255, 255, 0.78);
}
.fh-course-session__title-wrap {
display: flex;
flex-direction: column;
min-width: 0;
}
.fh-course-session__title {
color: var(--fh-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-session__left {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.fh-course-session__status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.fh-course-session__status--live {
background: rgba(239, 68, 68, 0.11);
color: #dc2626;
}
.fh-course-session__status--saved {
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
.fh-course-session__status--locked {
background: rgba(100, 116, 139, 0.12);
color: #64748b;
}
.fh-course-session__chevron {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: #2563eb;
font-size: 14px;
font-weight: 700;
transition:
transform 0.24s ease,
background 0.24s ease;
}
.fh-course-session.is-open .fh-course-session__chevron {
background: rgba(219, 234, 254, 0.96);
}
.fh-course-session.is-open .fh-course-session__chevron-icon {
transform: rotate(180deg);
}
.fh-course-session.is-open .fh-course-session__number {
color: #fff;
background: #3b82f6;
}
.fh-course-session__panel {
height: 0;
padding: 0 16px;
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
transition:
height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s ease,
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
padding-bottom 0.42s ease;
will-change: height, opacity, transform;
}
.fh-course-session.is-open .fh-course-session__panel {
padding-bottom: 16px;
opacity: 1;
transform: translateY(0);
}
.fh-course-session__panel[hidden] {
display: none;
}
.fh-course-session__panel-inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
gap: 18px;
align-items: stretch;
padding: 16px;
border-radius: 24px;
border: 1px solid rgba(147, 197, 253, 0.28);
background:
radial-gradient(circle at 92% 14%, rgba(96, 165, 250, 0.10), transparent 28%),
radial-gradient(circle at 10% 12%, rgba(14, 165, 233, 0.07), transparent 26%),
rgba(255, 255, 255, 0.78);
}
/* دسکتاپ: ویدیو راست، اطلاعات چپ */
/* دسکتاپ: متن و اطلاعات راست، ویدیو چپ */
.fh-course-session__content {
order: 1;
}
.fh-course-session__video {
order: 2;
}
.fh-course-session__embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 22px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(31, 41, 55, 0.96), rgba(76, 29, 149, 0.88));
box-shadow:
0 18px 40px rgba(31, 41, 55, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fh-course-session__embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.fh-course-session__embed--locked {
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
font-weight: 700;
line-height: 1.8;
text-align: center;
}
.fh-course-session__embed--live {
position: relative;
overflow: hidden;
}
.fh-course-session__live-waiting {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
place-content: center;
gap: 8px;
padding: 24px;
text-align: center;
color: #ffffff;
font-size: 15px;
font-weight: 800;
line-height: 1.9;
pointer-events: none;
}
.fh-course-session__live-waiting strong,
.fh-course-session__live-waiting span,
.fh-course-session__live-waiting b {
display: block;
}
.fh-course-session__embed--live > *:not(.fh-course-session__live-waiting) {
position: relative;
z-index: 1;
}
.fh-course-session-break {
margin: 14px 24px;
padding: 16px 18px;
border: 1px solid rgba(236, 72, 153, 0.18);
border-radius: 22px;
background:
radial-gradient(circle at 15% 20%, rgba(236, 72, 153, 0.10), transparent 32%),
linear-gradient(135deg, rgba(255, 241, 248, 0.96), rgba(255, 255, 255, 0.96));
}
.fh-course-session-break--yellow {
border-color: rgba(245, 158, 11, 0.22);
background:
radial-gradient(circle at 15% 20%, rgba(245, 158, 11, 0.13), transparent 34%),
linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
}
.fh-course-session-break--yellow .fh-course-session-break__content strong {
color: #92400e;
}
.fh-course-session-break--red {
border-color: rgba(244, 63, 94, 0.22);
background:
radial-gradient(circle at 15% 20%, rgba(244, 63, 94, 0.13), transparent 34%),
linear-gradient(135deg, rgba(255, 241, 242, 0.98), rgba(255, 255, 255, 0.96));
}
.fh-course-session-break--red .fh-course-session-break__content strong {
color: #be123c;
}
.fh-course-session-break--green {
border-color: rgba(16, 185, 129, 0.22);
background:
radial-gradient(circle at 15% 20%, rgba(16, 185, 129, 0.13), transparent 34%),
linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.96));
}
.fh-course-session-break--green .fh-course-session-break__content strong {
color: #047857;
}
.fh-course-session-break--blue {
border-color: rgba(59, 130, 246, 0.22);
background:
radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.13), transparent 34%),
linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
}
.fh-course-session-break--blue .fh-course-session-break__content strong {
color: #1d4ed8;
}
.fh-course-session-break__content {
display: grid;
gap: 8px;
}
.fh-course-session-break__content strong {
color: #111827;
font-size: 16px;
font-weight: 950;
line-height: 1.8;
}
.fh-course-session-break__content p {
margin: 0;
color: #4b5563;
font-size: 14px;
font-weight: 700;
line-height: 2;
}
.fh-course-session-break__btn {
width: fit-content;
margin-top: 4px;
padding: 8px 14px;
border-radius: 999px;
background: #ec4899;
color: #ffffff;
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.fh-course-session__content {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.fh-course-session__label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(219, 234, 254, 0.92);
color: #2563eb;
font-size: 10px;
font-weight: 700;
line-height: 1.5;
}
.fh-course-session__panel-title {
margin: 0;
color: var(--fh-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.7;
}
.fh-course-session__desc {
margin: 6px 0 0;
color: #4b5563;
font-size: 10px;
font-weight: 500;
line-height: 2.05;
}
.fh-course-session__focus {
width: 100%;
margin-top: 12px;
padding: 10px 12px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(124, 58, 237, 0.08);
}
.fh-course-session__focus span {
display: block;
color: #64748b;
font-size: 10.5px;
font-weight: 800;
line-height: 1.8;
}
.fh-course-session__focus strong {
display: block;
color: var(--fh-ink);
font-size: 12.5px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-session__tools {
width: 100%;
margin-top: 12px;
}
.fh-course-session__tools h4 {
margin: 0 0 8px;
color: var(--fh-ink);
font-size: 12.5px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-session__tools-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
}
.fh-course-session__tool {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
width: 84px;
min-height: 88px;
padding: 12px 10px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(255, 255, 255, 0.92);
color: #374151;
font-size: 10px;
font-weight: 600;
line-height: 1.5;
text-align: center;
white-space: normal;
box-shadow:
0 8px 18px rgba(31, 41, 55, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.fh-course-session__tool img {
display: block;
width: 82px;
height:82px;
object-fit: contain;
object-position: center;
}
.fh-course-session__start {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin-top: auto;
padding: 0 18px;
border-radius: 16px;
background: #3b82f6;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.18),
0 8px 18px rgba(14, 165, 233, 0.14);
}
.fh-course-session__start.is-disabled {
pointer-events: none;
background: #e5e7eb;
color: #64748b;
box-shadow: none;
}
/* =========================
Live Session Divider
جداکننده مخصوص جلسه لایو
========================= */
.fh-course-live-divider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 18px 0 14px;
padding: 8px 0;
}
.fh-course-live-divider::before,
.fh-course-live-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(236, 72, 153, 0.18);
}
.fh-course-live-divider::before {
margin-left: 12px;
}
.fh-course-live-divider::after {
margin-right: 12px;
}
.fh-course-live-divider__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 66px;
height: 32px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid rgba(124, 58, 237, 0.12);
background: #f5f3ff;
color: #7c3aed;
font-size: 13px;
font-weight: 800;
letter-spacing: 1px;
box-shadow:
0 10px 22px rgba(124, 58, 237, 0.10),
0 2px 8px rgba(236, 72, 153, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
/* =========================
Course Session Note
نوت / هشدار داخل هر جلسه
========================= */
.fh-course-session__note {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
margin-top: 12px;
padding: 12px 13px;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
}
.fh-course-session__note::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
opacity: 0.95;
}
.fh-course-session__note-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
margin-top: 2px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
line-height: 1;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.fh-course-session__note-content {
min-width: 0;
}
.fh-course-session__note-content strong {
display: block;
margin: 0 0 3px;
font-size: 12px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-session__note-content p {
margin: 0;
font-size: 11.5px;
font-weight: 700;
line-height: 2;
}
/* حالت هشدار */
.fh-course-session__note--warning {
border: 1px solid rgba(245, 158, 11, 0.18);
box-shadow:
0 10px 24px rgba(245, 158, 11, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.fh-course-session__note--warning::before {
background:
linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(254, 243, 199, 0.72));
}
.fh-course-session__note--warning .fh-course-session__note-icon {
background: rgba(245, 158, 11, 0.14);
color: #d97706;
}
.fh-course-session__note--warning .fh-course-session__note-content strong {
color: #92400e;
}
.fh-course-session__note--warning .fh-course-session__note-content p {
color: #78350f;
}
/* =========================
Course Session Between Note - Coach Style
نوت خفن بین جلسات
========================= */
.fh-course-session-between-note {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
margin: 4px 0;
padding: 14px 16px 14px 14px;
border-radius: 24px;
border: 1px solid rgba(16, 185, 129, 0.13);
background:
radial-gradient(circle at 96% 10%, rgba(16, 185, 129, 0.12), transparent 30%),
radial-gradient(circle at 8% 18%, rgba(124, 58, 237, 0.08), transparent 28%),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 244, 0.72));
box-shadow:
0 16px 34px rgba(31, 41, 55, 0.055),
0 6px 16px rgba(16, 185, 129, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
overflow: hidden;
isolation: isolate;
}
.fh-course-session-between-note::before {
content: "";
position: absolute;
right: 18px;
left: 18px;
top: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(16, 185, 129, 0.35),
rgba(124, 58, 237, 0.22),
transparent
);
}
.fh-course-session-between-note__rail {
position: absolute;
right: 0;
top: 16px;
bottom: 16px;
width: 4px;
border-radius: 999px 0 0 999px;
background: linear-gradient(180deg, #10b981, #7c3aed);
box-shadow:
0 8px 18px rgba(16, 185, 129, 0.18),
0 4px 12px rgba(124, 58, 237, 0.12);
}
.fh-course-session-between-note__icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
margin-top: 4px;
border-radius: 15px;
background: linear-gradient(135deg, #10b981, #7c3aed);
color: #fff;
font-size: 17px;
font-weight: 700;
line-height: 1;
box-shadow:
0 12px 24px rgba(16, 185, 129, 0.18),
0 6px 14px rgba(124, 58, 237, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.fh-course-session-between-note__icon::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 18px;
border: 1px solid rgba(16, 185, 129, 0.14);
pointer-events: none;
}
.fh-course-session-between-note__content {
min-width: 0;
padding-left: 4px;
}
.fh-course-session-between-note__tag {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 24px;
margin-bottom: 5px;
padding: 0 10px;
border-radius: 999px;
background: rgba(209, 250, 229, 0.72);
color: #059669;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.fh-course-session-between-note__content strong {
display: block;
margin: 0;
color: #17372f;
font-size: 13.5px;
font-weight: 700;
line-height: 1.85;
}
.fh-course-session-between-note__content p {
margin: 3px 0 0;
color: #475569;
font-size: 10.8px;
font-weight: 500;
line-height: 2.05;
}
/* اگر خواستی حالت هشدار نارنجی هم داشته باشی */
.fh-course-session-between-note--warning {
border-color: rgba(245, 158, 11, 0.16);
background:
radial-gradient(circle at 96% 10%, rgba(245, 158, 11, 0.13), transparent 30%),
radial-gradient(circle at 8% 18%, rgba(236, 72, 153, 0.07), transparent 28%),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 235, 0.76));
}
.fh-course-session-between-note--warning .fh-course-session-between-note__rail,
.fh-course-session-between-note--warning .fh-course-session-between-note__icon {
background: linear-gradient(135deg, #f59e0b, #ec4899);
}
.fh-course-session-between-note--warning .fh-course-session-between-note__tag {
background: rgba(254, 243, 199, 0.82);
color: #d97706;
}
.fh-course-session__chevron-icon {
display: block;
width: 15px;
height: 15px;
object-fit: contain;
object-position: center;
pointer-events: none;
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease;
}
/* =========================
Course Sessions - Intro Before Video
عنوان و توضیح قبل از ویدیو
========================= */
.fh-course-session__intro-block {
grid-area: intro;
width: 100%;
min-width: 0;
text-align: right;
}
/* دسکتاپ */
.fh-course-session__panel-inner {
grid-template-areas:
"info video"
"intro video"
"content video";
}
/* =========================
Course Session Note Under Video - Desktop
========================= */
.fh-course-session__note {
grid-area: note;
}
/* دسکتاپ: نوت زیر ویدیو */
.fh-course-session__panel-inner {
grid-template-areas:
"info video"
"intro video"
"content note";
}
.fh-course-session__note {
align-self: start;
margin-top: 0;
}
/* =========================
Course Session Intro Text
استایل ساده و شیک عنوان و توضیح بدون کارت
========================= */
.fh-course-session__intro-block {
position: relative;
width: 100%;
min-width: 0;
padding: 0 2px;
text-align: right;
}
.fh-course-session__intro-block .fh-course-session__panel-title {
position: relative;
display: inline-block;
margin: 0;
padding-right: 12px;
color: var(--fh-ink);
font-size: 19px;
font-weight: 950;
line-height: 1.75;
letter-spacing: -0.03em;
}
.fh-course-session__intro-block .fh-course-session__panel-title::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 5px;
height: 5px;
border-radius: 999px;
background: #3b82f6;
box-shadow:
0 0 0 5px rgba(59, 130, 246, 0.10),
0 8px 16px rgba(14, 165, 233, 0.12);
transform: translateY(-50%);
}
.fh-course-session__intro-block .fh-course-session__desc {
margin: 6px 0 0;
color: #64748b;
font-size: 12.5px;
font-weight: 750;
line-height: 2;
}
.fh-course-session__intro-block .fh-course-session__desc strong,
.fh-course-session__intro-block .fh-course-session__desc b {
color: #2563eb;
font-weight: 500;
}
/* =========================
Green Session Custom Theme
رنگ اختصاصی جلسه سبز
========================= */
.fh-course-session--green {
--fh-green-main: #10b981;
--fh-green-second: #22c55e;
--fh-green-dark: #059669;
--fh-green-soft: rgba(209, 250, 229, 0.94);
--fh-green-border: rgba(16, 185, 129, 0.34);
border-color: var(--fh-green-border);
background:
radial-gradient(circle at 92% 8%, rgba(16, 185, 129, 0.18), transparent 30%),
radial-gradient(circle at 8% 12%, rgba(34, 197, 94, 0.13), transparent 28%),
linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(209, 250, 229, 0.86));
}
.fh-course-session--green .fh-course-session__number {
color: #059669;
background: rgba(209, 250, 229, 0.92);
}
.fh-course-session--green.is-open {
border-color: rgba(16, 185, 129, 0.24);
background:
radial-gradient(circle at 92% 8%, rgba(16, 185, 129, 0.08), transparent 30%),
radial-gradient(circle at 8% 12%, rgba(34, 197, 94, 0.05), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 253, 246, 0.94));
box-shadow:
0 16px 38px rgba(16, 185, 129, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.fh-course-session--green.is-open .fh-course-session__trigger {
background: rgba(255, 255, 255, 0.52);
}
.fh-course-session--green.is-open .fh-course-session__number {
color: #fff;
background: #10b981;
}
.fh-course-session--green .fh-course-session__head-icon {
background: rgba(209, 250, 229, 0.76);
}
.fh-course-session--green .fh-course-session__panel-inner {
border-color: rgba(16, 185, 129, 0.18);
background:
radial-gradient(circle at 92% 12%, rgba(16, 185, 129, 0.14), transparent 30%),
radial-gradient(circle at 8% 14%, rgba(34, 197, 94, 0.10), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(220, 252, 231, 0.76));
}
.fh-course-session--green .fh-course-session__quick-item {
border-color: rgba(16, 185, 129, 0.16);
background: rgba(255, 255, 255, 0.88);
}
.fh-course-session--green .fh-course-session__intro-block .fh-course-session__panel-title::before {
background: #10b981;
}
.fh-course-session--green .fh-course-session__intro-block .fh-course-session__desc strong {
color: #059669;
}
.fh-course-session--green .fh-course-session__start {
background: #10b981;
box-shadow:
0 14px 30px rgba(16, 185, 129, 0.20),
0 8px 18px rgba(34, 197, 94, 0.14);
}
/* =========================
Live Session Custom Theme
رنگ اختصاصی جلسه لایو
========================= */
.fh-course-session--live {
--fh-live-main: #e11d48;
--fh-live-second: #be123c;
--fh-live-soft: rgba(225, 29, 72, 0.10);
--fh-live-border: rgba(225, 29, 72, 0.34);
}
/* کارت اصلی جلسه لایو */
.fh-course-session--live {
border-color: var(--fh-live-border);
background:
radial-gradient(circle at 92% 8%, rgba(225, 29, 72, 0.15), transparent 30%),
radial-gradient(circle at 8% 12%, rgba(190, 18, 60, 0.10), transparent 28%),
linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.86));
}
/* هدر جلسه لایو */
.fh-course-session--live .fh-course-session__trigger {
background:
linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(190, 18, 60, 0.06));
}
/* شماره جلسه لایو */
.fh-course-session--live .fh-course-session__number {
color: var(--fh-live-main);
background: var(--fh-live-soft);
}
/* وقتی جلسه لایو باز شد */
.fh-course-session--live.is-open .fh-course-session__number {
color: #fff;
background: var(--fh-live-main);
}
/* بج لایو */
.fh-course-session--live .fh-course-session__status--live {
color: var(--fh-live-main);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.96);
font-weight: 950;
text-shadow:
0 1px 0 #fff,
1px 0 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 8px rgba(255, 255, 255, 0.95);
box-shadow:
0 0 0 4px rgba(255, 255, 255, 0.28),
0 8px 18px rgba(236, 72, 153, 0.10);
}
/* آیکن کنار شماره جلسه لایو */
.fh-course-session--live .fh-course-session__head-icon {
border-color: rgba(255, 255, 255, 0.95);
background: rgba(255, 228, 230, 0.54);
}
/* پنل داخلی جلسه لایو */
.fh-course-session--live .fh-course-session__panel-inner {
border-color: rgba(225, 29, 72, 0.12);
background:
radial-gradient(circle at 92% 12%, rgba(225, 29, 72, 0.08), transparent 28%),
radial-gradient(circle at 8% 14%, rgba(190, 18, 60, 0.05), transparent 28%),
rgba(255, 255, 255, 0.80);
}
/* کارتهای مدت / تمرکز / سطح در جلسه لایو */
.fh-course-session--live .fh-course-session__quick-item {
border-color: rgba(225, 29, 72, 0.14);
background: rgba(255, 255, 255, 0.88);
}
/* نقطه کنار عنوان جلسه لایو */
.fh-course-session--live .fh-course-session__intro-block .fh-course-session__panel-title::before {
background: var(--fh-live-main);
}
/* دکمه ورود به تمرین لایو */
.fh-course-session--live .fh-course-session__start {
background: var(--fh-live-main);
box-shadow:
0 14px 30px rgba(225, 29, 72, 0.22),
0 8px 18px rgba(190, 18, 60, 0.16);
}
/* =========================
Sessions Title Divider
عنوان جلسات تمرینه با جداکننده دوطرفه
========================= */
.fh-sessions-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
margin: 4px 0 18px;
}
.fh-sessions-divider::before,
.fh-sessions-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(16, 185, 129, 0.20);
}
.fh-sessions-divider .fh-course-sessions__title {
flex: 0 0 auto;
margin: 0;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid rgba(16, 185, 129, 0.12);
background: #f0fdf4;
color: #10a37f;
font-size: 18px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0;
box-shadow:
0 10px 24px rgba(16, 185, 129, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
@media (max-width: 520px) {
.fh-sessions-divider {
gap: 9px;
margin: 2px 0 14px;
}
.fh-sessions-divider .fh-course-sessions__title {
padding: 6px 12px;
font-size: 14px;
line-height: 1.7;
}
}
/* =========================
Course FAQ Section
سوالات پرتکرار
========================= */
.fh-course-faq {
margin-top: 18px;
padding: 24px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.78);
background: #f8fbff;
box-shadow:
0 18px 44px rgba(31, 41, 55, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
overflow: hidden;
}
.fh-course-faq__head {
margin-bottom: 18px;
}
.fh-faq-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
margin: 4px 0 18px;
}
.fh-faq-divider::before,
.fh-faq-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(14, 165, 233, 0.22);
}
.fh-course-faq__title {
flex: 0 0 auto;
margin: 0;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(14, 165, 233, 0.13);
background: #eff6ff;
color: #0284c7;
font-size: 18px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0;
box-shadow:
0 10px 24px rgba(14, 165, 233, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.fh-course-faq__title label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 7px 14px 7px 10px;
cursor: pointer;
user-select: none;
}
.fh-course-faq__toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
.fh-course-faq__toggle-icon {
position: relative;
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: #2563eb;
box-shadow:
0 6px 14px rgba(37, 99, 235, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.fh-course-faq__toggle-icon::before {
content: "+";
font-size: 18px;
font-weight: 950;
line-height: 1;
}
.fh-course-faq__toggle:checked ~ .fh-course-faq__head .fh-course-faq__toggle-icon::before {
content: "−";
}
.fh-course-faq__list {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
transition:
max-height 0.48s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.24s ease,
transform 0.32s ease;
}
.fh-course-faq__toggle:checked ~ .fh-course-faq__list {
max-height: 1400px;
opacity: 1;
transform: translateY(0);
}
.fh-course-faq__list {
display: grid;
gap: 10px;
}
.fh-course-faq__item {
border-radius: 20px;
border: 1px solid rgba(236, 72, 153, 0.10);
background: #fffafd;
box-shadow:
0 10px 24px rgba(31, 41, 55, 0.035),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
overflow: hidden;
}
.fh-course-faq__question {
position: relative;
display: flex;
align-items: center;
min-height: 58px;
padding: 14px 44px 14px 16px;
color: var(--fh-ink);
font-size: 13.5px;
font-weight: 950;
line-height: 1.9;
cursor: pointer;
list-style: none;
}
.fh-course-faq__question::-webkit-details-marker {
display: none;
}
.fh-course-faq__question::before {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 7px;
height: 7px;
border-radius: 999px;
background: #3b82f6;
box-shadow:
0 0 0 5px rgba(59, 130, 246, 0.10);
transform: translateY(-50%);
}
.fh-course-faq__question::after {
content: "+";
position: absolute;
left: 16px;
top: 50%;
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.74);
color: #2563eb;
font-size: 17px;
font-weight: 700;
line-height: 1;
transform: translateY(-50%);
}
.fh-course-faq__item[open] {
border-color: rgba(236, 72, 153, 0.18);
background: #fcf7fa;
}
.fh-course-faq__item[open] .fh-course-faq__question::after {
content: "−";
color: #0ea5e9;
}
.fh-course-faq__answer {
padding: 0 44px 16px 16px;
}
.fh-course-faq__answer p {
margin: 0;
color: #475569;
font-size: 12.5px;
font-weight: 700;
line-height: 2.15;
}
/* =========================
Mobile Styles
========================= */
@media (max-width: 520px) {
.fh-course-page {
padding: 18px 7px 42px;
}
.fh-course-hero {
grid-template-columns: 1fr;
gap: 26px;
padding: 22px;
border-radius: 28px;
}
.fh-course-hero::after {
left: 22px;
top: 22px;
font-size: 22px;
}
.fh-course-hero__pill {
margin-bottom: 12px;
padding: 7px 12px;
font-size: 11px;
}
.fh-course-hero__title {
font-size: clamp(17px, 6.8vw, 24px);
letter-spacing: -0.5px;
line-height: 1.45;
}
.fh-course-hero__line:first-child {
white-space: normal;
}
.fh-course-hero__word {
padding: 0 3px;
}
.fh-course-hero__subtitle {
margin-top: 14px;
font-size: 11.5px;
line-height: 2;
}
.fh-course-hero__media {
justify-content: center;
}
.fh-course-hero__image-card {
width: min(100%, 320px);
border-radius: 30px;
}
.fh-course-hero__image {
border-radius: 24px;
}
.fh-course-hero__proof {
display: grid;
grid-template-columns: 165px minmax(0, 1fr);
grid-template-areas: "metrics rating";
align-items: stretch;
gap: 5px;
width: 100%;
max-width: 100%;
margin: 16px 0 0;
direction: ltr;
}
.fh-course-hero__metrics-card {
grid-area: metrics;
direction: rtl;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
min-height: 46px;
padding: 4px;
border-radius: 12px;
border: 1px solid rgba(236, 72, 153, 0.18);
background: linear-gradient(180deg, rgba(253, 242, 248, 0.88), rgba(255, 255, 255, 0.62));
box-shadow:
0 10px 26px rgba(236, 72, 153, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.fh-course-hero__metrics-card .fh-course-hero__metric {
min-width: 0;
min-height: 0;
padding: 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.fh-course-hero__metrics-divider {
width: 1px;
height: 30px;
flex: 0 0 1px;
background: rgba(236, 72, 153, 0.18);
}
.fh-course-hero__metric {
min-width: 0;
min-height: 48px;
padding: 5px 8px;
gap: 6px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.fh-course-hero__metric-icon {
width: 24px;
height: 24px;
flex: 0 0 18px;
}
.fh-course-hero__metric-icon svg {
width: 24px;
height: 24px;
}
.fh-course-hero__metric-text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
text-align: right;
white-space: nowrap;
}
.fh-course-hero__metric-text strong {
font-size: 11px;
line-height: 1;
}
.fh-course-hero__metric-text span {
font-size: 7.8px;
line-height: 1.1;
}
.fh-course-hero__metric--comments .fh-course-hero__metric-icon {
transform: translateX(-7px);
}
.fh-course-hero__metric--success .fh-course-hero__metric-text {
transform: translateX(4px);
}
.fh-course-hero__rating {
grid-area: rating;
width: 100%;
min-width: 0;
max-width: none;
min-height: 46px;
margin: 0;
padding: 4px 6px;
gap: 5px;
border-radius: 12px;
}
.fh-course-hero__rating-count {
min-width: 42px;
}
.fh-course-hero__rating-count strong {
font-size: 9.5px;
}
.fh-course-hero__rating-count span {
font-size: 7.5px;
}
.fh-course-hero__rating-divider {
height: 18px;
}
.fh-course-hero__rating-score {
font-size: 17px;
}
.fh-course-hero__stars {
gap: 1px;
font-size: 12px;
transform: translateX(4px);
}
.fh-course-hero__stars .fh-course-comments__svg-star {
width: 14px;
height: 14px;
}
}
@media (max-width: 360px) {
.fh-course-hero__proof {
grid-template-columns: 145px minmax(0, 1fr);
gap: 6px;
}
.fh-course-hero__rating {
padding-inline: 6px;
gap: 5px;
}
.fh-course-hero__rating-count {
min-width: 38px;
}
.fh-course-hero__rating-score {
font-size: 16px;
}
.fh-course-hero__stars {
font-size: 11px;
}
.fh-course-hero__metric {
padding-inline: 6px;
gap: 5px;
}
.fh-course-hero__metric-icon {
width: 20px;
height: 20px;
flex-basis: 16px;
}
.fh-course-hero__metric-icon svg {
width: 20px;
height: 20px;
}
.fh-course-hero__metric-text strong {
font-size: 9px;
}
.fh-course-hero__metric-text span {
font-size: 7px;
}
}
.fh-course-price__button:disabled {
cursor: not-allowed;
transform: none;
}
.fh-course-price__button:disabled:hover {
transform: none;
}
.fh-course-price__button--member,
.fh-course-price__button--member:disabled {
background: #10b981;
color: #fff;
cursor: default;
opacity: 1;
box-shadow:
0 14px 30px rgba(16, 185, 129, 0.18),
0 8px 18px rgba(34, 197, 94, 0.12);
}
.fh-course-price__button--member:hover {
transform: none;
}
@media (max-width: 820px) {
.fh-course-price__card {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 10px;
border-radius: 24px;
}
.fh-course-price__buybox {
width: 100%;
padding: 3px 12px;
border-radius: 18px;
}
.fh-course-price__row {
min-height: 57px;
padding: 9px 1px;
}
.fh-course-price__label {
font-size: 11px;
}
.fh-course-price__number {
font-size: 16px;
}
.fh-course-price__unit {
font-size: 9px;
}
.fh-course-price__row--discount .fh-course-price__label {
font-size: 12px;
}
.fh-course-price__row--discount .fh-course-price__number {
font-size: 27px;
}
.fh-course-price__row--discount .fh-course-price__unit {
font-size: 10px;
}
.fh-course-price__button {
width: 100%;
min-height: 47px;
padding: 0 18px;
border-radius: 14px;
font-size: 13px;
}
.fh-course-section-divider {
margin: 8px 0;
height: 12px;
}
.fh-course-section-divider span {
width: 38px;
height: 7px;
}
}
@media (max-width: 820px) {
.fh-course-details {
margin-top: 14px;
padding: 0;
border-radius: 26px;
overflow: hidden;
}
.fh-course-details__grid {
display: flex;
gap: 0;
padding: 14px 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
direction: ltr;
}
.fh-course-details__grid::-webkit-scrollbar {
display: none;
}
.fh-course-details__card {
position: relative;
flex: 0 0 38%;
min-height: 104px;
padding: 8px 8px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
scroll-snap-align: center;
direction: rtl;
}
.fh-course-details__card::after {
content: "";
position: absolute;
right: 0;
top: 24px;
bottom: 24px;
width: 1px;
background: rgba(124, 58, 237, 0.12);
}
.fh-course-details__card:first-child::after {
display: none;
}
.fh-course-details__icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto;
border-radius: 0;
background: transparent;
}
.fh-course-details__icon img,
.fh-course-details__icon-img {
width: 24px;
height: 24px;
display: block;
object-fit: contain;
opacity: .72;
}
.fh-course-details__icon-img--support {
width: 25px;
height: 25px;
transform: none;
}
.fh-course-details__text {
min-width: 0;
text-align: center;
}
.fh-course-details__item-title {
margin: 0;
font-size: 11px;
font-weight: 700;
line-height: 1.6;
color: #202433;
}
.fh-course-details__value {
margin: 2px 0 0;
font-size: 10.5px;
font-weight: 600;
line-height: 1.7;
color: #4b5563;
}
}
@media (max-width: 430px) {
.fh-course-details__card {
flex-basis: 24%;
}
}
@media (max-width: 820px) {
/* Course Main Layout - Mobile */
.fh-course-main-layout {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-top: 14px;
width: 100%;
}
.fh-course-main-layout__details {
order: 3;
width: 100%;
}
.fh-course-main-layout__sidebar {
order: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
}
.fh-course-main-layout__sidebar .fh-course-price {
width: 100%;
}
.fh-course-main-layout__sidebar .fh-course-price__card {
width: 100%;
}
.fh-course-main-layout__sidebar .fh-course-price__buybox {
width: 100%;
max-width: none;
}
/* Course Quick Nav - Mobile */
.fh-course-quicknav {
width: 100%;
max-width: none;
margin-top: 14px;
padding: 12px;
border-radius: 18px;
}
.fh-course-quicknav__nav {
gap: 6px;
padding: 6px;
border-radius: 18px;
}
.fh-course-quicknav__link {
min-height: 38px;
padding: 0 8px;
border-radius: 14px;
font-size: 11px;
}
.fh-course-quicknav__icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
margin-left: 5px;
}
.fh-course-quicknav__icon img {
width: 17px;
height: 17px;
}
#courseDescription,
#courseSessions,
#courseFaq,
#courseComments,
.fh-course-anchor-section {
scroll-margin-top: 76px;
}
/* Course Description - Mobile */
.fh-course-description {
margin-top: 0;
padding-top: 14px;
background: var(--fh-bg);
}
.fh-course-description__head {
margin-bottom: 12px;
}
.fh-course-description__title {
font-size: 17px;
line-height: 1.7;
}
.fh-course-description__card {
padding: 16px;
border-radius: 22px;
}
.fh-course-description__subtitle {
margin-bottom: 8px;
padding-right: 14px;
font-size: 13px;
line-height: 1.7;
}
.fh-course-description__subtitle::before {
top: 10px;
width: 5px;
height: 5px;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10);
}
.fh-course-description__text {
font-size: 12.5px;
line-height: 2.05;
}
.fh-course-description__list {
grid-template-columns: 1fr;
gap: 7px;
}
.fh-course-description__list li {
min-height: auto;
padding: 8px 30px 8px 8px;
border-radius: 14px;
font-size: 11px;
line-height: 1.85;
}
.fh-course-description__list li::before {
right: 9px;
top: 10px;
width: 15px;
height: 15px;
font-size: 9.5px;
}
.fh-course-description__divider {
margin: 18px 0;
height: 16px;
}
.fh-course-description__divider span {
width: 30px;
height: 6px;
}
/* Course Outcomes - Mobile */
.fh-course-outcomes__title {
margin-bottom: 16px;
font-size: 16.5px;
line-height: 1.7;
}
.fh-course-outcomes {
gap: 10px;
}
.fh-course-outcomes__item {
min-height: auto;
padding: 14px;
border-radius: 18px;
gap: 10px;
}
.fh-course-outcomes__dot {
width: 13px;
height: 13px;
flex-basis: 13px;
margin-top: 7px;
box-shadow:
0 0 0 4px rgba(53, 200, 207, 0.10),
0 6px 14px rgba(53, 200, 207, 0.14);
}
.fh-course-outcomes__item-title {
font-size: 12px;
line-height: 1.8;
}
.fh-course-outcomes__text {
margin-top: 2px;
font-size: 10.5px;
line-height: 1.8;
}
/* Course Description Read More - Mobile */
.fh-course-description__more-btn {
min-height: 38px;
margin-top: -34px;
padding: 0 14px;
font-size: 11px;
}
.fh-course-description__more-icon {
width: 20px;
height: 20px;
font-size: 12px;
}
.fh-course-description__more {
max-height: 580px;
}
.fh-course-description__more::after {
height: 105px;
}
.fh-course-description__toggle:checked ~ .fh-course-description__more {
max-height: 3200px;
}
.fh-course-description__toggle:checked ~ .fh-course-description__more-btn {
margin-top: 18px;
}
}
@media (max-width: 390px) {
.fh-course-class-timeline__step {
grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
gap: 8px;
min-height: 200px;
}
.fh-course-class-timeline__path {
width: 68px;
}
.fh-course-class-timeline__number {
width: 30px;
height: 30px;
font-size: 12px;
}
.fh-course-class-timeline__image--live {
width: min(118px, 100%);
}
.fh-course-class-timeline__image--laptop {
width: min(128px, 100%);
}
.fh-course-class-timeline__image--mobile {
width: min(116px, 100%);
}
.fh-course-class-timeline__heading {
font-size: 14px;
}
.fh-course-class-timeline__text {
font-size: 7.5px;
line-height: 1.95;
}
.fh-course-class-timeline__meta {
font-size: 9px;
}
}
/* =========================
Course Sessions - Final Clean Layout
چیدمان نهایی و تمیز پنل جلسات
========================= */
/* آیتم بازشده */
.fh-course-session.is-open:not(.fh-course-session--green):not(.fh-course-session--live) {
border-color: rgba(37, 99, 235, 0.42);
background:
radial-gradient(circle at 92% 8%, rgba(96, 165, 250, 0.24), transparent 30%),
radial-gradient(circle at 8% 12%, rgba(14, 165, 233, 0.16), transparent 28%),
linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(219, 234, 254, 0.90));
box-shadow:
0 18px 44px rgba(37, 99, 235, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.fh-course-session.is-open:not(.fh-course-session--green):not(.fh-course-session--live) .fh-course-session__trigger {
background:
linear-gradient(135deg, rgba(219, 234, 254, 0.72), rgba(224, 242, 254, 0.62));
}
/* پنل */
.fh-course-session__panel {
padding: 0 4px 14px;
}
.fh-course-session__panel[hidden] {
display: none;
}
/* دسکتاپ:
راست: کارتهای سریع + عنوان + توضیح + وسایل + دکمه
چپ: ویدیو
*/
.fh-course-session__panel-inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-areas:
"info video"
"content video";
gap: 12px 16px;
align-items: stretch;
padding: 14px;
border-radius: 22px;
border: 1px solid rgba(147, 197, 253, 0.26);
background:
radial-gradient(circle at 92% 12%, rgba(59, 130, 246, 0.08), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(239, 246, 255, 0.72));
box-shadow:
0 12px 28px rgba(31, 41, 55, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.fh-course-session__quick-info {
grid-area: info;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
width: 100%;
margin: 0;
}
.fh-course-session__video {
grid-area: video;
width: 100%;
min-width: 0;
}
.fh-course-session__content {
grid-area: content;
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
min-width: 0;
text-align: right;
}
.fh-course-session__quick-item {
min-width: 0;
padding: 10px 9px;
border-radius: 16px;
border: 1px solid rgba(203, 213, 225, 0.60);
background: rgba(255, 255, 255, 0.86);
box-shadow:
0 10px 22px rgba(31, 41, 55, 0.030),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.fh-course-session__quick-item span {
display: block;
color: #64748b;
font-size: 9.5px;
font-weight: 800;
line-height: 1.8;
}
.fh-course-session__quick-item strong {
display: block;
margin-top: 2px;
color: var(--fh-ink);
font-size: 11.5px;
font-weight: 700;
line-height: 1.7;
}
.fh-course-session__embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(31, 41, 55, 0.96), rgba(76, 29, 149, 0.88));
box-shadow:
0 16px 34px rgba(31, 41, 55, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fh-course-session__embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.fh-course-session__panel-title {
margin: 0;
color: var(--fh-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.75;
letter-spacing: -0.02em;
}
.fh-course-session__desc {
margin: 6px 0 0;
color: #475569;
font-size: 12.5px;
font-weight: 500;
line-height: 2;
}
.fh-course-session__tools {
width: 100%;
margin-top: 10px;
}
.fh-course-session__tools h4 {
margin: 0 0 8px;
color: var(--fh-ink);
font-size: 12.5px;
font-weight: 700;
line-height: 1.8;
}
.fh-course-session__tool {
width: 72px;
min-height: 78px;
max-width: none;
padding: 10px 8px;
border-radius: 14px;
font-size: 9.2px;
line-height: 1.45;
white-space: normal;
}
.fh-course-session__tool img {
width: 40px;
height: 40px;
}
.fh-course-session__start {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin-top: 14px;
padding: 0 18px;
border-radius: 16px;
background: #3b82f6;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.18),
0 8px 18px rgba(14, 165, 233, 0.14);
}
.fh-course-session__start.is-disabled {
pointer-events: none;
background: #e5e7eb;
color: #64748b;
box-shadow: none;
}
/* =========================
Course Sessions - Mobile Final
========================= */
@media (max-width: 820px) {
.fh-course-sessions {
margin-top: 14px;
padding: 14px;
border-radius: 22px;
}
.fh-course-sessions__title {
font-size: 17px;
line-height: 1.7;
}
.fh-course-sessions__intro {
font-size: 11px;
line-height: 2;
}
.fh-course-session {
border-radius: 22px;
}
.fh-course-session__trigger {
min-height: 68px;
padding: 11px 12px;
gap: 8px;
}
.fh-course-session__right {
min-width: 0;
gap: 8px;
}
.fh-course-session__number {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 13px;
font-size: 12px;
}
.fh-course-session__number-wrap {
gap: 7px;
}
.fh-course-session__head-icon {
width: 28px;
height: 28px;
flex-basis: 28px;
border-radius: 11px;
}
.fh-course-session__head-icon img {
width: 19px;
height: 19px;
}
.fh-course-session__title-wrap {
min-width: 0;
}
.fh-course-session__title {
font-size: 11.5px;
line-height: 1.7;
}
.fh-course-session__left {
gap: 6px;
flex: 0 0 auto;
}
.fh-course-session__status {
min-height: 24px;
padding: 0 8px;
font-size: 9px;
}
.fh-course-session__chevron {
width: 26px;
height: 26px;
font-size: 12px;
}
.fh-course-session__panel {
padding: 0 0px;
overflow: hidden;
}
.fh-course-session.is-open .fh-course-session__panel {
padding-bottom: 10px;
}
.fh-course-session__panel-inner {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"info"
"video"
"content" !important;
gap: 12px;
width: 100%;
min-width: 0;
max-width: 100%;
padding: 12px;
border-radius: 20px;
}
.fh-course-session__quick-info {
grid-area: info;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
width: 100%;
margin: 0;
}
.fh-course-session__video {
grid-area: video;
width: 100%;
min-width: 0;
max-width: 100%;
}
.fh-course-session__content {
grid-area: content;
width: 100%;
min-width: 0;
max-width: 100%;
padding: 2px;
align-items: stretch;
text-align: right;
}
.fh-course-session__quick-item {
display: block;
min-width: 0;
padding: 7px 6px;
border-radius: 13px;
text-align: center;
}
.fh-course-session__quick-item span {
font-size: 8px;
line-height: 1.6;
}
.fh-course-session__quick-item strong {
margin-top: 1px;
font-size: 9px;
line-height: 1.55;
text-align: center;
white-space: nowrap;
}
.fh-course-session__embed {
width: 100%;
max-width: 100%;
border-radius: 18px;
}
.fh-course-session__embed iframe {
width: 100%;
height: 100%;
}
.fh-course-session__panel-title {
width: 100%;
font-size: 15px;
line-height: 1.75;
}
.fh-course-session__desc {
width: 100%;
font-size: 11px;
line-height: 2;
}
.fh-course-session__tools {
width: 100%;
margin-top: 10px;
}
.fh-course-session__tools h4 {
margin-bottom: 7px;
font-size: 11.5px;
}
.fh-course-session__tool {
width: 66px;
min-height: 75px;
max-width: none;
padding: 9px 5px;
border-radius: 14px;
font-size: 8.5px;
line-height: 1.45;
white-space: normal;
}
.fh-course-session__tool img {
width: 30px;
height: 30px;
}
.fh-course-session__start {
min-height: 40px;
margin-top: 12px;
border-radius: 14px;
font-size: 12px;
}
.fh-course-session__chevron-icon {
width: 14px;
height: 14px;
}
}
/* =========================
Course Sessions - Final Grid Layout
عنوان قبل ویدیو + نوت زیر ویدیو
این بخش باید آخر فایل بماند
========================= */
.fh-course-session__quick-info {
grid-area: info;
}
.fh-course-session__intro-block {
grid-area: intro;
width: 100%;
min-width: 0;
padding: 0 2px;
text-align: right;
}
.fh-course-session__video {
grid-area: video;
}
.fh-course-session__note {
grid-area: note;
width: 100%;
margin-top: 0;
align-self: start;
}
.fh-course-session__content {
grid-area: content;
}
/* دسکتاپ: حالت عادی، وقتی نوت داریم */
.fh-course-session__panel-inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-areas:
"info video"
"intro video"
"content note";
gap: 12px 16px;
align-items: start;
}
/* دسکتاپ: وقتی نوت نداریم */
@media (min-width: 821px) {
.fh-course-session--no-note .fh-course-session__panel-inner {
grid-template-areas:
"info video"
"intro video"
"content video";
}
.fh-course-session--no-note .fh-course-session__content {
align-self: start;
margin-top: -2px;
}
.fh-course-session--no-note .fh-course-session__tools {
margin-top: 0;
}
.fh-course-session--no-note .fh-course-session__start {
margin-top: 10px;
}
}
/* استایل ساده و شیک عنوان و توضیح بدون کارت */
.fh-course-session__intro-block .fh-course-session__panel-title {
position: relative;
display: inline-block;
margin: 0;
padding-right: 12px;
color: var(--fh-ink);
font-size: 19px;
font-weight: 950;
line-height: 1.75;
letter-spacing: -0.03em;
}
.fh-course-session__intro-block .fh-course-session__panel-title::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 5px;
height: 5px;
border-radius: 999px;
background: #3b82f6;
box-shadow:
0 0 0 5px rgba(59, 130, 246, 0.10),
0 8px 16px rgba(14, 165, 233, 0.12);
transform: translateY(-50%);
}
.fh-course-session__intro-block .fh-course-session__desc {
margin: 6px 0 0;
color: #64748b;
font-size: 12.5px;
font-weight: 700;
line-height: 2;
}
.fh-course-session__intro-block .fh-course-session__desc strong,
.fh-course-session__intro-block .fh-course-session__desc b {
color: #2563eb;
font-weight: 700;
}
/* موبایل */
@media (max-width: 820px) {
.fh-course-session__panel-inner {
grid-template-columns: 1fr !important;
grid-template-areas:
"info"
"intro"
"video"
"note"
"content" !important;
align-items: stretch;
}
.fh-course-session__intro-block {
width: 100%;
padding: 0;
text-align: right;
}
.fh-course-session__note {
width: 100%;
margin-top: 0;
}
.fh-course-session__intro-block .fh-course-session__panel-title {
padding-right: 15px;
font-size: 12px;
line-height: 1.8;
}
.fh-course-session__intro-block .fh-course-session__panel-title::before {
width: 4px;
height: 4px;
box-shadow:
0 0 0 4px rgba(59, 130, 246, 0.10);
}
.fh-course-session__intro-block .fh-course-session__panel-title::after {
right: 10px;
bottom: 5px;
height: 7px;
}
.fh-course-session__intro-block .fh-course-session__desc {
margin-top: 1px;
font-size: 11px;
line-height: 2.95;
}
.fh-course-session__intro-block {
margin-top: 6px;
}
}
/* =========================
Hero Image - Mobile Horizontal
عکس دوره در موبایل افقی شود
========================= */
@media (max-width: 520px) {
.fh-course-hero__image-card {
width: 100%;
max-width: 420px;
aspect-ratio: 16 / 9;
border-radius: 24px;
}
.fh-course-hero__picture {
display: block;
width: 100%;
height: 100%;
}
.fh-course-hero__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 20px;
}
}
/* =========================
Description Title Divider
عنوان «با این دوره بیشتر آشنا شوید»
========================= */
.fh-description-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
margin: 4px 0 18px;
}
.fh-description-divider::before,
.fh-description-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(16, 185, 129, 0.20);
}
.fh-description-divider .fh-course-description__title {
flex: 0 0 auto;
margin: 0;
line-height: 1;
}
.fh-description-divider .fh-course-description__title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid rgba(16, 185, 129, 0.12);
background: #ffffff;
color: #10a37f;
font-size: 18px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0;
white-space: nowrap;
box-shadow:
0 10px 24px rgba(16, 185, 129, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
@media (max-width: 520px) {
.fh-description-divider {
gap: 9px;
margin: 2px 0 14px;
}
.fh-description-divider .fh-course-description__title span {
padding: 6px 12px;
font-size: 13.5px;
line-height: 1.7;
}
}
@media (max-width: 520px) {
.fh-course-faq {
margin-top: 14px;
padding: 14px;
border-radius: 22px;
}
.fh-faq-divider {
gap: 9px;
margin: 2px 0 14px;
}
.fh-course-faq__title {
font-size: 14px;
line-height: 1.7;
}
.fh-course-faq__title label {
padding: 6px 11px 6px 8px;
gap: 8px;
}
.fh-course-faq__toggle-icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.fh-course-faq__toggle-icon::before {
font-size: 16px;
}
.fh-course-faq__list {
gap: 8px;
}
.fh-course-faq__item {
border-radius: 17px;
}
.fh-course-faq__question {
min-height: 52px;
padding: 12px 34px 12px 12px;
font-size: 11.5px;
line-height: 1.9;
}
.fh-course-faq__question::before {
right: 14px;
width: 5px;
height: 5px;
box-shadow:
0 0 0 4px rgba(59, 130, 246, 0.10);
}
.fh-course-faq__question::after {
left: 12px;
width: 22px;
height: 22px;
font-size: 15px;
}
.fh-course-faq__answer {
padding: 0 34px 14px 12px;
}
.fh-course-faq__answer p {
font-size: 10.5px;
line-height: 2.1;
}
}
@media (max-width: 700px) {
.fh-course-session-break {
margin: 12px 10px;
padding: 14px;
border-radius: 18px;
}
.fh-course-session-break__content strong {
font-size: 14px;
}
.fh-course-session-break__content p {
font-size: 13px;
}
}
@media (max-width: 820px) {
/* Hero موبایل مثل دیجیکالا پشت صفحه میمونه */
.fh-course-hero {
position: sticky;
top: 56px;
z-index: 1;
margin-bottom: 0;
}
/* سکشنهای بعدی روی Hero حرکت کنند */
.fh-course-section-divider,
.fh-course-main-layout,
.fh-course-description,
.fh-course-sessions,
.fh-course-faq {
position: relative;
z-index: 4;
}
/* فقط فاصله بین Hero و بخش ثبتنام پوشیده بشه */
.fh-course-section-divider {
margin: 0;
padding: 8px 0;
height: 18px;
background: var(--fh-bg);
}
/* بخش ثبتنام روی Hero بیاد، ولی رنگ کارتها حفظ بشه */
.fh-course-main-layout {
margin-top: -34px;
padding-top: 14px;
padding-bottom: 12px;
background: var(--fh-bg);
border-radius: 28px 28px 0 0;
}
/* فاصله بین اطلاعات دوره و توضیحات، پسزمینه داشته باشه */
.fh-course-description {
background: var(--fh-bg);
padding-bottom: 14px;
}
/* فاصله شفاف بین توضیحات و جلسات حذف بشه */
.fh-course-sessions {
margin-top: 0;
}
/* سوالات پرتکرار هم روی Hero باشه، نه زیرش */
.fh-course-faq {
margin-top: 0;
padding-top: 20px;
background: var(--fh-bg);
}
}
#courseComments,
.fh-course-comments {
position: relative;
z-index: 4;
background: var(--fh-bg);
}
@media (max-width: 820px) {
.fh-course-sessions {
background: #fffdfb;
}
}
@media (max-width: 820px) {
.fh-course-section-divider,
.fh-course-main-layout,
.fh-course-description,
.fh-course-sessions,
.fh-course-faq,
#courseComments,
.fh-course-comments {
position: relative;
z-index: 4;
}
.fh-course-faq {
position: relative;
margin-top: 0;
margin-bottom: 0;
padding: 14px;
border: 0;
border-radius: 0;
background: var(--fh-bg);
box-shadow: none;
overflow: visible;
}
.fh-course-faq::before {
content: "";
position: absolute;
top: 14px;
right: 0;
bottom: 14px;
left: 0;
z-index: 0;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.78);
background: #f8fbff;
box-shadow:
0 18px 44px rgba(31, 41, 55, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
pointer-events: none;
}
.fh-course-faq > * {
position: relative;
z-index: 1;
}
.fh-faq-divider {
margin: 0 0 14px;
}
.fh-course-faq__item[open] {
background: #f5f9ff;
}
#courseComments,
.fh-course-comments {
background: var(--fh-bg);
}
}
/* =========================================================
Locked session message — FitBell visual style
Deliberately limited to the lock box and its action button.
========================================================= */
#courseSessions .fh-course-session__embed--locked {
border: 0;
border-radius: 17px;
background:
linear-gradient(
145deg,
rgba(247, 253, 244, 0.98),
rgba(241, 236, 255, 0.90)
);
color: #667085;
font-size: 11px;
font-weight: 700;
line-height: 2;
text-align: center;
box-shadow: none;
}
#courseSessions .fh-course-session__embed--locked strong {
color: #475467;
}
#courseSessions .fh-course-session__embed--locked p {
color: #667085;
}
#courseSessions .fh-course-session__embed--locked .fh-course-session__start {
width: 80%;
max-width: 360px;
margin: 14px auto 0;
min-height: 43px;
margin-top: 14px;
padding: 0 15px;
border-radius: 14px;
background: #f25f3a;
color: #ffffff;
font-size: 11.5px;
font-weight: 800;
box-shadow: 0 12px 26px rgba(201, 71, 45, 0.19);
}
#courseSessions .fh-course-session__embed--locked .fh-course-session__start:hover {
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(201, 71, 45, 0.24);
}
@media (max-width: 820px) {
#courseSessions .fh-course-session__embed--locked {
padding: 14px;
border-radius: 14px;
font-size: 10px;
}
#courseSessions .fh-course-session__embed--locked .fh-course-session__start {
min-height: 41px;
font-size: 10.5px;
}
}