/* ========================================================================== Program page (program.php) — the sections that show everything an admin enters in admin/program-details.php. The page's original sections (hero, stats, about, schedule, pricing, enroll) are styled by the theme's `*-module--*` classes in assets/public/main.css. Everything added here is namespaced `pg-` so it can never collide with them, while borrowing their type scale (Plus Jakarta Sans, 42px/700 capitalised section titles) and palette so the page reads as one design. The video section reuses assets/css/home-videos.css (the `tv-` block from the homepage) unchanged — same markup, same player script. --pg-accent is set inline on from the program's own `color` column, so each program tints its own page. ========================================================================== */ :root { --pg-ink: #0b1b3b; --pg-body: #43506b; --pg-line: #e4e8f0; --pg-card: #ffffff; --pg-dark: #0a141b; --pg-dark-2: #0a303c; --pg-accent: #00b3ff; /* Ink that stays readable on --pg-accent; program.php computes it from the program's own colour and sets both on . */ --pg-accent-ink: #06182b; --pg-radius: 18px; --pg-shadow: 0 18px 46px rgba(11, 27, 59, 0.09); } /* --------------------------------- shell --------------------------------- */ .pg-sec { position: relative; padding: 92px 0; font-family: "Plus Jakarta Sans", sans-serif; } .pg-sec--tight { padding: 70px 0; } /* Clear the theme's fixed header when an anchor is followed. */ .pg-sec[id] { scroll-margin-top: 145px; } .pg-sec--dark { background-color: var(--pg-dark); color: #fff; } /* Soft tinted wash so light sections don't read as one flat slab. */ .pg-sec--wash { background: radial-gradient(760px 420px at 88% -8%, rgba(0, 179, 255, 0.09), transparent 62%), radial-gradient(680px 420px at -6% 108%, rgba(11, 27, 59, 0.06), transparent 60%); } /* ------------------------------ section head ----------------------------- */ .pg-head { max-width: 780px; margin: 0 0 52px; } .pg-head--center { margin-left: auto; margin-right: auto; text-align: center; } .pg-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; margin: 0 0 18px; border-radius: 999px; border: 1px solid rgba(11, 27, 59, 0.12); background: rgba(255, 255, 255, 0.72); color: var(--pg-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pg-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pg-accent); } .pg-sec--dark .pg-kicker { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; } .pg-title { color: var(--pg-ink); font-size: 42px; font-weight: 700; line-height: 1.14; text-transform: capitalize; margin: 0 0 12px; } .pg-sec--dark .pg-title { color: #fff; } .pg-lead { color: var(--pg-body); font-size: 18px; line-height: 1.7; margin: 0; max-width: 68ch; } .pg-head--center .pg-lead { margin-inline: auto; } .pg-sec--dark .pg-lead { color: #c3d1e6; } /* ------------------------- rich text from CKEditor ------------------------ */ /* `skills` and `fewsAndPayment` are admin-authored HTML — give it a readable default so the section looks designed whatever the admin pastes in. */ .pg-prose { color: var(--pg-body); font-size: 16.5px; line-height: 1.78; } .pg-prose > *:first-child { margin-top: 0; } .pg-prose > *:last-child { margin-bottom: 0; } .pg-prose h1, .pg-prose h2, .pg-prose h3, .pg-prose h4 { color: var(--pg-ink); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; line-height: 1.3; margin: 30px 0 12px; } .pg-prose h1 { font-size: 28px; } .pg-prose h2 { font-size: 25px; } .pg-prose h3 { font-size: 21px; } .pg-prose h4 { font-size: 18px; } .pg-prose p { margin: 0 0 16px; } .pg-prose strong, .pg-prose b { color: var(--pg-ink); font-weight: 700; } .pg-prose a { color: #0a76c2; text-decoration: underline; } .pg-prose img { max-width: 100%; height: auto; border-radius: 12px; } .pg-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; } .pg-prose th, .pg-prose td { border: 1px solid var(--pg-line); padding: 10px 14px; text-align: left; } .pg-prose th { background: #f4f7fb; color: var(--pg-ink); font-weight: 700; } /* Bulleted lists become ticked lines — the page's own idiom (pricing cards). */ .pg-prose ul { list-style: none; margin: 0 0 18px; padding: 0; } .pg-prose ul > li { position: relative; padding-inline-start: 34px; margin-bottom: 11px; } .pg-prose ul > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.42em; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 179, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a76c2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50% / 12px 12px; } .pg-prose ol { margin: 0 0 18px; padding-left: 22px; } .pg-prose ol > li { margin-bottom: 11px; } /* Nested lists stay plain so they read as sub-points, not more headline ticks. */ .pg-prose ul ul > li::before { background-image: none; background-color: rgba(11, 27, 59, 0.22); width: 7px; height: 7px; top: 0.72em; inset-inline-start: 6px; } .pg-prose ul ul > li { padding-inline-start: 22px; } /* Right-to-left programs (Farsi/Dari). The ticks above are placed with logical properties, which only flip when `direction` is rtl — but CKEditor marks a block as RTL either with dir="rtl" or with an inline text-align, so opt those into rtl direction and the ticks land beside their text instead of stranded in a column down the far side. */ .pg-prose [dir="rtl"], .pg-prose[dir="rtl"], .pg-prose li[style*="text-align:right"], .pg-prose li[style*="text-align: right"], .pg-prose [style*="text-align:right"] li, .pg-prose [style*="text-align: right"] li { direction: rtl; } /* ------------------------------ skills panel ----------------------------- */ .pg-panel { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); padding: 40px 44px; } .pg-panel--flush { padding: 34px 36px; } /* --------------------------- media (in #about) ---------------------------- */ /* Left column of the intro: every video the admin added, two to a row, then the flyer and photos in a matching grid below. No panel behind them — the cards sit straight on the section, so the column reads as part of the page rather than a widget dropped onto it. */ .pg-media { --pgm-line: var(--pg-line); --pgm-muted: #8b97ad; display: flex; flex-direction: column; gap: 16px; } /* Editorial label over each grid: name, count, then a rule that runs out to the edge — enough to separate the two grids without a heavy divider. */ .pg-media-cap { display: flex; align-items: center; gap: 10px; color: var(--pg-ink); font-size: 12px; font-weight: 800; /* The theme's body line-height resolves to 32px here, which both inflates this row and pushes the count off-centre inside its chip. */ line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; } .pg-media-cap::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--pgm-line), rgba(228, 232, 240, 0)); } /* A tight rounded tile rather than a wide pale circle: a single digit left the circle reading as a smudge, and #eef3f9 barely separated from the section. */ .pg-media-cap span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; /* Inverted, like the numbered badge on a topic card. A pale fill on a pale section read as a smudge however the border was tuned. */ background: var(--pg-ink); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* Breathing room before the second label. Keyed off :not(:first-child) rather than a sibling combinator, because the payload and player