/** * Course landing pages — /courses/{slug} * * Layout and components only. The colour comes from style.css: every token in * the block below resolves to a site token, so a course page is the same navy on * white as the rest of the site. It used to run its own cream-and-red palette * with its own header and footer, which made opening a course feel like leaving * for a different website. * * Scoped under `.course-page` (on ) so the component styles stay off other * pages. Note that scoping cuts one way only: a token redefined here overrides * style.css for everything inside a course page, which is why the four names * that used to shadow it were removed rather than kept. * * Direction: logical properties only (padding-inline, inset-inline-start, * margin-block, text-align: start). No left/right anywhere, so the layout * mirrors itself without a second stylesheet. * * Persian body copy runs at line-height 2 — Latin leading is too tight for * Arabic-script descenders and diacritics. */ /* ========================================================================== 1. Latin display face — self-hosted Google Fonts is blocked in Iran; a blocked font request stalls the page rather than failing quietly, so Playfair ships with the theme. ========================================================================== */ @font-face { font-family: 'Playfair Display'; src: url('../fonts/PlayfairDisplay-Variable.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; /* Latin only: Persian never renders in this face. */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 2. Tokens ========================================================================== */ /* * These pages used to run their own palette — cream ground, red action colour, * warm-grey text and sand borders — which made a course read as a different * website. The names are kept because they are referenced throughout this file, * but every one now resolves to a token from style.css, so there is a single * source for the site's colour. * * Four names that used to live here (--ink, --radius-card, --shadow-card, * --shadow-lift) have been removed rather than aliased: they shadowed style.css * for every descendant, so any shared component rendered on a course page * silently picked up warm ink, an 18px radius and brown shadows. */ .course-page { --surface: #fff; --muted: var(--navy-500); /* * Action colour. Red is an accent at small scale only — never a button fill * or a surface — so the primary action is navy, as it is everywhere else. * The one surviving red on these pages is the .c-eyebrow rule. */ --brand: var(--navy-700); --brand-dark: var(--navy-800); /* Level codes were #1b3a6b, four steps off the brand navy for no reason. */ --level: var(--navy-700); --line: var(--hairline); /* Interactive borders need 3:1 (WCAG 1.4.11); --line is decorative only. */ --line-strong: var(--hairline-strong); --radius-lg: 24px; --ease: var(--ease-premium); --header-h: var(--header-height); --font-latin: 'Playfair Display', 'Iowan Old Style', Georgia, serif; } /* Latin and French runs inside Persian sentences. */ .course-page .latin, .course-page [dir='ltr'].latin { font-family: var(--font-latin); font-weight: 500; letter-spacing: 0.01em; } /* * Latin runs isolated by zandi_bidi(). Direction is pinned in the markup; the * display face is applied only in headings, per the brief — inline Latin in * body copy keeps Vazirmatn's own Latin so the paragraph colour stays even. */ .course-page h1 .latin-run, .course-page h2 .latin-run, .course-page h3 .latin-run, .course-page .c-other__title .latin-run, .course-page .c-card__title .latin-run { font-family: var(--font-latin); font-weight: 600; } /* * Scoped to #main, not the whole body. The shared site footer is inside * .course-page now, and it is navy — a blanket heading colour here turned its * column titles navy-on-navy. Anything outside the article is the chrome's * business, not this stylesheet's. */ .course-page #main h1, .course-page #main h2, .course-page #main h3, .course-page #main h4 { color: var(--navy-700); text-wrap: balance; } .course-page p { line-height: 2; } .course-page ::selection { background: var(--brand); color: #fff; } /* ========================================================================== 3. Layout primitives ========================================================================== */ .c-container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 640px) { .c-container { padding-inline: 2rem; } } @media (min-width: 1024px) { .c-container { padding-inline: 2.5rem; } } .c-section { padding-block: 3.5rem; scroll-margin-top: 6rem; } @media (min-width: 768px) { .c-section { padding-block: 5rem; } } .c-section--tight { padding-block: 2.5rem; } /* * Section headings are centred and body copy stays start-aligned — the pattern * the landing page already uses. In Persian a centred heading over * right-aligned prose reads as deliberate; a heading hugging one edge over a * narrow block reads like left-aligned Latin text pasted into an RTL page. */ .c-section__head { margin-block-end: 2.5rem; margin-inline: auto; max-width: 46rem; text-align: center; } /* Body copy keeps the reading direction: right-aligned, hugging the start edge. */ .c-prose, .c-outcomes, .c-fit__col, .c-card, .c-other__card, .course-page .accordion__trigger, .course-page .accordion__answer { text-align: start; } .c-section__title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); line-height: 1.45; font-weight: 700; } .c-section__lead { margin-inline: auto; max-width: 42rem; margin-block-start: 0.875rem; color: var(--muted); font-size: 1rem; line-height: 2; } /* ========================================================================== 4. Buttons ========================================================================== */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: var(--radius-pill); font-family: inherit; font-size: 0.975rem; font-weight: 700; line-height: 1; padding: 1rem 1.75rem; cursor: pointer; text-align: center; transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .c-btn:active { transform: translateY(1px); } .c-btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-card); } .c-btn--primary:hover { background: var(--brand-dark); box-shadow: var(--shadow-lift); } .c-btn--ghost { background: transparent; color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--line-strong); } .c-btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy-700); } .c-btn--block { width: 100%; } .c-btn--sm { padding: 0.7rem 1.15rem; font-size: 0.875rem; } /* ========================================================================== 6. Hero ========================================================================== */ /* * The site header is position: fixed, so it is out of flow and the hero has to * reserve its height. The course header this page used to load was sticky, which * took up space on its own — without this the breadcrumb sits underneath it. */ .c-hero { padding-block: calc(var(--header-height) + 1.5rem) 3rem; } @media (min-width: 1024px) { .c-hero { padding-block: calc(var(--header-height) + 2.5rem) 4.5rem; } } .c-hero__grid { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .c-hero__grid { /* Column one is the reading start (right in RTL); the card sits opposite. */ grid-template-columns: minmax(0, 1fr) 21.5rem; gap: 3.5rem; align-items: start; } } /* * The one red left on these pages, and the reason the token is not aliased to * --level: a short bold kicker with a 1.5rem rule is exactly the small scale the * brand reserves red for. #c8102e on white is 4.6:1, which clears AA here. */ .c-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--rouge-500); letter-spacing: 0.01em; } .c-eyebrow::before { content: ''; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--rouge-500); } .c-hero__title { margin-block-start: 1.25rem; font-size: clamp(1.85rem, 1.15rem + 3vw, 3rem); line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; } .c-hero__subtitle { margin-block-start: 1.25rem; max-width: 38rem; font-size: 1.05rem; line-height: 2; color: var(--muted); } .c-hero__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-block-start: 2rem; } @media (min-width: 480px) { .c-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; } } /* --- Course info card --- */ .c-infocard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; } @media (min-width: 1024px) { .c-infocard { position: sticky; /* Clears the sticky header. */ top: calc(var(--header-h) + 1.5rem); padding: 1.75rem; } } .c-infocard__title { font-size: 0.95rem; font-weight: 700; padding-block-end: 1rem; border-block-end: 1px solid var(--line); } .c-infocard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; padding-block: 1.25rem; } .c-infocard__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.925rem; line-height: 1.7; } .c-infocard__icon { flex-shrink: 0; font-size: 1rem; line-height: 1.6; } .c-infocard__prices { border-block-start: 1px solid var(--line); padding-block-start: 1.25rem; } .c-price { font-size: 1.6rem; font-weight: 700; line-height: 1.4; } .c-price__unit { font-size: 1rem; font-weight: 500; color: var(--muted); } .c-price__alt { margin-block-start: 0.35rem; font-size: 0.925rem; color: var(--muted); } .c-infocard .c-btn { margin-block-start: 1.25rem; } .c-infocard__pay { margin-block-start: 1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); line-height: 1.8; } /* ========================================================================== 7. Trust bar ========================================================================== */ .c-trust { border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.55); } .c-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; padding-block: 1.15rem; } @media (min-width: 900px) { .c-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .c-trust__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); line-height: 1.7; } .c-trust__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } /* ========================================================================== 8. Video placeholder ========================================================================== */ .c-video { margin-block-start: 2rem; margin-inline: auto; max-width: 52rem; } .c-video__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .c-video__frame iframe, .c-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .c-video__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; /* Reads as "deliberately empty", not "broken". */ background: repeating-linear-gradient( 45deg, transparent, transparent 11px, rgba(228, 220, 208, 0.32) 11px, rgba(228, 220, 208, 0.32) 22px ); } .c-video__play { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); color: var(--brand); } .c-video__play svg { width: 1.6rem; height: 1.6rem; /* Optical centring: a triangle's visual mass sits behind its point. */ margin-inline-start: 0.15rem; } .c-video__note { font-size: 0.85rem; color: var(--muted); } .c-video__caption { margin-block-start: 0.9rem; font-size: 0.85rem; color: var(--muted); line-height: 1.9; } /* ========================================================================== 9. Prose + outcomes ========================================================================== */ .c-prose { max-width: 44rem; margin-inline: auto; } .c-prose p + p { margin-block-start: 1.15rem; } .c-prose p { font-size: 1rem; line-height: 2; color: var(--muted); } .c-outcomes { margin-block-start: 2.25rem; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 44rem; } @media (min-width: 640px) { .c-outcomes { padding: 1.75rem 2rem; } } .c-outcomes__title { font-size: 1rem; font-weight: 700; margin-block-end: 1rem; } .c-outcomes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } @media (min-width: 700px) { .c-outcomes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.5rem; } } .c-outcomes__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.95rem; line-height: 1.85; } .c-check { flex-shrink: 0; margin-block-start: 0.45rem; width: 1.05rem; height: 1.05rem; color: var(--brand); } /* ========================================================================== 10. Cards grid — deliverables and method ========================================================================== */ .c-cards { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .c-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .c-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 979px) { .c-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .c-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .c-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); } .c-card__icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--navy-50); color: var(--brand); margin-block-end: 1rem; } .c-card__icon svg { width: 1.35rem; height: 1.35rem; } .c-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.6; } .c-card__body { margin-block-start: 0.7rem; font-size: 0.925rem; line-height: 1.95; color: var(--muted); } .c-card__num { font-family: var(--font-latin); font-size: 0.95rem; font-weight: 600; color: var(--brand); margin-block-end: 0.6rem; } /* ========================================================================== 11. Accordions — curriculum and FAQ Shared markup with the site accordion so one script drives both; only the surface treatment changes here. ========================================================================== */ .course-page .accordion { display: flex; flex-direction: column; gap: 0.75rem; max-width: 52rem; margin-inline: auto; } .course-page .accordion__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none; overflow: hidden; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .course-page .accordion__item:hover { border-color: var(--line-strong); } .course-page .accordion__item.is-open { border-color: var(--line-strong); box-shadow: var(--shadow-card); } .course-page .accordion__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; text-align: start; font-size: 1rem; font-weight: 700; line-height: 1.8; color: var(--navy-700); background: none; cursor: pointer; } .course-page .accordion__chevron { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease); } .course-page .accordion__chevron svg { width: 1.05rem; height: 1.05rem; } .course-page .accordion__item.is-open .accordion__chevron { transform: rotate(180deg); background: var(--brand); color: #fff; } .course-page .accordion__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s var(--ease), opacity 0.3s var(--ease); } .course-page .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; opacity: 1; } .course-page .accordion__panel > div { overflow: hidden; } .course-page .accordion__answer { padding: 0 1.25rem 1.35rem; font-size: 0.95rem; line-height: 2; color: var(--muted); } /* ========================================================================== 12. Empty states — curriculum and testimonials ========================================================================== */ .c-empty { margin-inline: auto; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 2.25rem 1.5rem; text-align: center; max-width: 52rem; } .c-empty__title { font-size: 1rem; font-weight: 700; } .c-empty__body { margin-block-start: 0.6rem; font-size: 0.9rem; color: var(--muted); line-height: 1.9; } /* ========================================================================== 13. Who it is for / not for ========================================================================== */ .c-fit { display: grid; gap: 1.25rem; } @media (min-width: 840px) { .c-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .c-fit__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; } @media (min-width: 640px) { .c-fit__col { padding: 1.75rem; } } .c-fit__title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; font-weight: 700; margin-block-end: 1.1rem; } .c-fit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .c-fit__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.95rem; line-height: 1.9; color: var(--muted); } /* * Shape carries the meaning as well as colour: a ring for yes, a slash for no, * so the distinction survives without colour vision. */ .c-mark { flex-shrink: 0; margin-block-start: 0.5rem; width: 1rem; height: 1rem; } .c-mark--yes { color: var(--brand); } .c-mark--no { color: var(--muted); } /* ========================================================================== 14. About Shima ========================================================================== */ .c-about { display: grid; gap: 2rem; align-items: start; } @media (min-width: 880px) { .c-about { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; } } .c-about__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--surface); border: 1px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; overflow: hidden; } /* * The dashed frame is the empty state — "deliberately empty, photo coming". * With a real photograph in it, it reads as a broken upload instead. */ /* * With a photograph in it the box stops dictating a shape. It reserved 4:5 and * covered to fill, which trimmed the top and bottom off a portrait that is not * quite 4:5 — the frame is the owner's and the layout bends to it. */ .c-about__photo--filled { display: block; aspect-ratio: auto; border: 0; background: transparent; } .c-about__photo img { width: 100%; height: 100%; object-fit: cover; } /* * Must come after the rule above, not before: both are one class plus one * element, so specificity is a tie and source order decides. Written the other * way round it silently lost and the cover crop stayed in force. */ .c-about__photo--filled img { height: auto; object-fit: fill; } .c-about__photo svg { width: 2rem; height: 2rem; opacity: 0.5; } /* ========================================================================== 15. Support callout ========================================================================== */ .c-support { background: var(--navy-800); color: #fff; border-radius: var(--radius-lg); padding: 2.25rem 1.5rem; text-align: center; } @media (min-width: 768px) { .c-support { padding: 3rem 3.5rem; } } .course-page #main .c-support__title { color: #fff; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.6; font-weight: 700; } .c-support__body { margin-block: 1rem 1.75rem; margin-inline: auto; max-width: 42rem; font-size: 1rem; line-height: 2; color: rgba(255, 255, 255, 0.78); } /* * Inverted: on a navy panel the navy fill the button carries everywhere else * would disappear into the background. */ .course-page .c-support .c-btn--primary { background: #fff; color: var(--navy-800); box-shadow: none; } .course-page .c-support .c-btn--primary:hover { background: var(--navy-100); color: var(--navy-900); } /* ========================================================================== 16. Closing CTA ========================================================================== */ .c-closing { text-align: center; max-width: 44rem; margin-inline: auto; } .c-closing__title { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.5; font-weight: 700; } .c-closing__body { margin-block: 1rem 2rem; font-size: 1.05rem; line-height: 2; color: var(--muted); } /* ========================================================================== 17. Other courses ========================================================================== */ .c-other { display: grid; gap: 1.25rem; } @media (min-width: 700px) { .c-other { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1240px) { .c-other { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .c-other__card { display: flex; flex-direction: column; gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .c-other__card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); } .c-other__level { font-family: var(--font-latin); font-size: 0.85rem; font-weight: 600; color: var(--level); letter-spacing: 0.04em; } .c-other__title { font-size: 1.05rem; font-weight: 700; line-height: 1.6; } .c-other__price { font-size: 0.95rem; color: var(--muted); } .c-other__link { margin-block-start: auto; padding-block-start: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: 0.4rem; } .c-other__link svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease); } .c-other__card:hover .c-other__link svg { transform: translateX(-3px); } .c-other__card--soon { border-style: dashed; box-shadow: none; } .c-soon-badge { align-self: flex-start; border-radius: var(--radius-pill); background: var(--navy-50); border: 1px solid var(--line-strong); padding: 0.25rem 0.7rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); } .c-notify { display: flex; flex-direction: column; gap: 0.6rem; margin-block-start: 0.5rem; } @media (min-width: 420px) { .c-notify { flex-direction: row; } } .c-notify__input { flex: 1; min-width: 0; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: #fff; padding: 0.75rem 1rem; font-family: inherit; font-size: 0.9rem; color: var(--ink); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .c-notify__input::placeholder { color: var(--muted); opacity: 0.75; } .c-notify__input:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(16, 31, 54, 0.1); } .c-notify__msg { margin-block-start: 0.5rem; font-size: 0.8rem; color: var(--muted); } /* ========================================================================== 19. Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .course-page *, .course-page *::before, .course-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .course-page .c-card:hover, .course-page .c-other__card:hover, .course-page .c-btn:hover { transform: none; } } /* -------------------------------------------------------------------------- Enrol notice Shown in the infocard after a bounced enrol attempt — «ثبت‌نام آنلاین این دوره هنوز فعال نشده» and the like. The button used to post, bounce and reload the same page in silence; this is what says so. -------------------------------------------------------------------------- */ .c-enrol-note { margin-block-end: 0.85rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-card); background: var(--cream); border: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.9; color: var(--ink); }