/* ========================================================================== RishaLearn — Design System v4 (multi-theme) ========================================================================== Everything a component needs comes from CSS custom properties — never a hardcoded color/font/radius/shadow in a component rule below. That's what makes theming possible: assets/css/rlp-themes.css overrides these same variable names per theme (via [data-rlp-theme="..."] on ), and every component below re-skins automatically. One set of component logic, five swappable token sets — not five separate stylesheets, which would multiply the bug surface instead of the design. PANEL TOKENS: solid brand-colored sections (footer, course hero band) use --rlp-panel-bg / --rlp-panel-text* instead of --rlp-primary + white directly, because a bright accent color that works as a small button would be wrong as a full-bleed panel in Dark theme — panels there use a dark neutral instead. Always use panel tokens for full-bleed colored sections, never --rlp-primary + hardcoded white. ========================================================================== */ :root { /* Color */ --rlp-primary: #0B6B4F; --rlp-primary-dk: #084F39; --rlp-primary-tint: #E7F5EF; --rlp-accent: #FF6B4A; --rlp-accent-dk: #E14F2E; --rlp-accent-tint: #FFEEE9; --rlp-accent-glow: rgba(255,107,74,0.32); /* Soft colored halo behind primary-action buttons — the "eye-soothing glow" touch, tinted per theme to match its own accent. */ --rlp-on-primary: #FFFFFF; /* Text color guaranteed readable on --rlp-primary/--rlp-primary-dk/--rlp-accent — Dark theme overrides this to a dark color since its brand colors are bright, not deep. */ --rlp-ink: #1A1D23; --rlp-ink-soft: #5B6169; --rlp-ink-faint: #8A9099; --rlp-border: #E4E6EA; --rlp-surface: #FFFFFF; --rlp-surface-alt: #F6F7F9; --rlp-success: #1F9254; --rlp-warn-bg: #FFF7E6; --rlp-warn-text: #92620B; --rlp-error-bg: #FDECEA; --rlp-error-text: #A23B2E; /* Solid brand-colored panels (footer, hero bands) — see note above */ --rlp-panel-bg: #0B6B4F; --rlp-panel-text: #FFFFFF; --rlp-panel-text-soft: rgba(255,255,255,0.82); --rlp-panel-text-faint: rgba(255,255,255,0.55); --rlp-panel-border: rgba(255,255,255,0.15); /* Type */ --rlp-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Bengali', sans-serif; --rlp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Bengali', sans-serif; /* Geometry */ --rlp-radius-sm: 8px; --rlp-radius-md: 12px; --rlp-radius-lg: 18px; --rlp-radius-xl: 28px; --rlp-shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06); --rlp-shadow-card: 0 4px 18px rgba(20, 22, 30, 0.07); --rlp-shadow-lifted: 0 16px 40px rgba(20, 22, 30, 0.14); --rlp-max-width: 1160px; --rlp-header-h: 64px; } /* ---------- Reset (scoped) ---------- */ .rlp-body, .rlp-body *, .rlp-body *::before, .rlp-body *::after { box-sizing: border-box; } .rlp-body { margin: 0; background: var(--rlp-surface); color: var(--rlp-ink); font-family: var(--rlp-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rlp-body img { max-width: 100%; display: block; } .rlp-body a { color: inherit; text-decoration: none; } .rlp-body h1, .rlp-body h2, .rlp-body h3 { font-family: var(--rlp-font-display); font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--rlp-ink); } .rlp-body :focus-visible { outline: 3px solid var(--rlp-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .rlp-body * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .rlp-skip-link { position: absolute; left: -9999px; top: 0; background: var(--rlp-panel-bg); color: var(--rlp-panel-text); padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0; } .rlp-skip-link:focus { left: 0; } /* ---------- Header ---------- */ .rlp-header { position: sticky; top: var(--rlp-preview-banner-h, 0px); z-index: 100; background: var(--rlp-surface); border-bottom: 1px solid var(--rlp-border); } /* ---------- Admin "View as Student" preview banner ---------- */ .rlp-body--previewing { --rlp-preview-banner-h: 44px; } .rlp-preview-banner { position: sticky; top: 0; z-index: 101; height: var(--rlp-preview-banner-h, 44px); background: #1A1D23; color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 0.85rem; padding: 0 16px; flex-wrap: wrap; text-align: center; } .rlp-preview-banner__exit { background: #F97316; color: #1A1D23; font-weight: 800; padding: 5px 14px; border-radius: 100px; flex-shrink: 0; } .rlp-preview-banner--link { background: #334155; } .rlp-header__bar { max-width: var(--rlp-max-width); margin: 0 auto; height: var(--rlp-header-h); display: flex; align-items: center; gap: 16px; padding: 0 16px; } .rlp-logo { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 800; color: var(--rlp-primary-dk); flex-shrink: 0; } .rlp-logo__mark { color: var(--rlp-primary); flex-shrink: 0; } .rlp-nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; margin-left: auto; } .rlp-nav-toggle span { display: block; height: 2px; width: 22px; background: var(--rlp-ink); border-radius: 2px; } .rlp-header__search { display: none; } .rlp-header__search-form { display: flex; width: 100%; } .rlp-nav__search { margin-bottom: 12px; } .rlp-header__search-input { flex: 1; min-width: 0; border: 1px solid var(--rlp-border); border-right: none; border-radius: var(--rlp-radius-sm) 0 0 var(--rlp-radius-sm); padding: 10px 14px; font-size: 0.92rem; font-family: inherit; background: var(--rlp-surface-alt); } .rlp-header__search-input:focus { outline: none; border-color: var(--rlp-primary); background: var(--rlp-surface); } .rlp-header__search-btn { border: none; background: var(--rlp-accent); color: var(--rlp-on-primary); padding: 0 18px; font-weight: 700; font-size: 0.88rem; border-radius: 0 var(--rlp-radius-sm) var(--rlp-radius-sm) 0; cursor: pointer; box-shadow: 0 2px 10px var(--rlp-accent-glow); } .rlp-header__search-btn:hover { background: var(--rlp-accent-dk); } /* ---------- Language switcher (EN / বাং) ---------- */ .rlp-lang-switch { display: flex; gap: 2px; } .rlp-lang-switch--header { display: none; } /* Shown at 800px+ below — mobile uses the copy inside the nav menu instead, same pattern as the search form. */ .rlp-lang-switch__link { font-size: 0.82rem; font-weight: 700; padding: 6px 10px; border-radius: 100px; color: var(--rlp-ink-soft); border: 1px solid var(--rlp-border); } .rlp-lang-switch__link.is-active { background: var(--rlp-primary); color: var(--rlp-on-primary); border-color: var(--rlp-primary); } .rlp-lang-switch--nav { padding: 4px 12px 16px; border-bottom: 1px solid var(--rlp-border); margin-bottom: 8px; } .rlp-lang-switch--nav .rlp-lang-switch__link { font-size: 0.95rem; padding: 8px 16px; } /* Bangla script needs a script-appropriate font — the theme's Latin display/body faces don't cover Bengali glyphs at all. Hind Siliguri loads only when this attribute is present (see RLP_Assets), so English visitors never pay for a font they don't use. */ [data-rlp-lang="bn"] { font-family: 'Hind Siliguri', -apple-system, sans-serif; } [data-rlp-lang="bn"] .rlp-hero__title, [data-rlp-lang="bn"] .rlp-section__title, [data-rlp-lang="bn"] .rlp-card__title { font-family: 'Hind Siliguri', -apple-system, sans-serif; } .rlp-nav { position: fixed; top: var(--rlp-header-h); left: 0; right: 0; bottom: 0; z-index: 90; background: var(--rlp-surface); display: flex; flex-direction: column; gap: 4px; padding: 20px 16px; transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; } .rlp-nav.is-open { transform: translateX(0); } .rlp-nav a { padding: 14px 12px; font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--rlp-border); } .rlp-nav__cta { margin-top: 10px; background: var(--rlp-accent); color: var(--rlp-on-primary) !important; border-radius: var(--rlp-radius-md); text-align: center; border-bottom: none !important; font-weight: 700; padding: 14px 12px !important; box-shadow: 0 3px 14px var(--rlp-accent-glow); } @media (min-width: 800px) { .rlp-nav-toggle { display: none; } .rlp-header__search { display: block; flex: 1; max-width: 420px; } .rlp-nav__search { display: none; } .rlp-lang-switch--header { display: flex; } /* The compact "EN | বাং" pill switcher — desktop-only. */ .rlp-lang-switch--nav { display: none; } /* The full-text "English / বাংলা" switcher — that one's for inside the mobile menu only; without this rule it was leaking into the horizontal desktop nav bar, which is the exact bug this comment is here to stop from recurring. */ .rlp-nav { position: static; transform: none; flex-direction: row; align-items: center; margin-left: auto; padding: 0; background: transparent; gap: 4px; } .rlp-nav a { border-bottom: none; padding: 8px 14px; font-size: 0.95rem; border-radius: var(--rlp-radius-sm); } .rlp-nav a:hover { background: var(--rlp-surface-alt); } .rlp-nav__cta { margin-top: 0; padding: 9px 20px !important; } .rlp-nav a.rlp-nav__cta:hover { background: var(--rlp-accent-dk); color: var(--rlp-on-primary); } } /* ---------- Layout ---------- */ .rlp-main { min-height: 60vh; } .rlp-section { max-width: var(--rlp-max-width); margin: 0 auto; padding: 40px 16px; } .rlp-section--narrow { max-width: 460px; } /* Alt sections (shaded full-bleed background) center their children via flex on the SECTION itself — not via margin/width tricks on each child. That per-child approach kept losing specificity ties against other rules touching the same properties (see git history — this is the third fix attempt at what was really an architecture problem, not a value problem). Controlling alignment from one place (the parent) removes the possibility of that fight recurring. */ .rlp-section--alt { background: var(--rlp-surface-alt); max-width: none; padding: 40px 0; display: flex; flex-direction: column; align-items: center; } .rlp-section--alt > * { width: 100%; max-width: var(--rlp-max-width); padding-left: 16px; padding-right: 16px; } .rlp-section--alt .rlp-grid { margin-top: 20px; } .rlp-section__title { font-size: 1.7rem; margin-bottom: 0.3em; } .rlp-section__title::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 14px; background: var(--rlp-accent); border-radius: 100px; } .rlp-section__subtitle { color: var(--rlp-ink-soft); margin-top: -0.4em; margin-bottom: 1.2em; } .rlp-section__title--center, .rlp-section__subtitle--center { text-align: center; width: 100%; } .rlp-section__title--center::after { margin-left: auto; margin-right: auto; } .rlp-subheading { font-size: 1.2rem; margin-top: 1.8em; font-weight: 800; } .rlp-empty { color: var(--rlp-ink-soft); padding: 32px 0; } /* ---------- Hero ---------- */ .rlp-hero { background: linear-gradient(180deg, var(--rlp-primary-tint) 0%, var(--rlp-surface) 100%); padding: 48px 16px 40px; border-bottom: 1px solid var(--rlp-border); } .rlp-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .rlp-hero__title { font-size: 2.1rem; } .rlp-hero__subtitle { color: var(--rlp-ink-soft); font-size: 1.08rem; margin-bottom: 1.6em; } .rlp-hero__trust { font-size: 0.88rem; color: var(--rlp-primary-dk); margin-top: 16px; font-weight: 700; } .rlp-hero__trust strong { color: var(--rlp-primary-dk); } .rlp-stats { justify-content: center; } .rlp-stats { display: flex; gap: 28px; margin-top: 32px; flex-wrap: wrap; } .rlp-stats__item { display: flex; flex-direction: column; } .rlp-stats__num { font-size: 1.8rem; font-weight: 800; color: var(--rlp-primary-dk); line-height: 1; } .rlp-stats__label { font-size: 0.82rem; color: var(--rlp-ink-soft); margin-top: 4px; } @media (min-width: 800px) { .rlp-hero { padding: 80px 16px 64px; } .rlp-hero__title { font-size: 3.1rem; max-width: 18ch; } } /* ---------- Badges ---------- */ .rlp-badge { display: inline-block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 100px; margin-bottom: 12px; } .rlp-badge--teal { background: var(--rlp-primary-tint); color: var(--rlp-primary-dk); } .rlp-badge--amber { background: var(--rlp-accent-tint); color: var(--rlp-accent-dk); } /* ---------- Buttons ---------- */ .rlp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 22px; border-radius: var(--rlp-radius-md); font-weight: 700; font-size: 0.95rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; font-family: inherit; } .rlp-btn:active { transform: scale(0.97); } /* Soft glow (--rlp-accent-glow, set per theme) is the "kid-friendly, eye-soothing" touch — a gentle colored halo rather than a hard shadow. Applied to every primary-action button consistently (search, nav CTA, form submits) so they all read as the same "this is clickable" language instead of each having its own separate color. */ .rlp-btn--primary { background: var(--rlp-accent); color: var(--rlp-on-primary); box-shadow: 0 4px 16px var(--rlp-accent-glow); } .rlp-btn--primary:hover { background: var(--rlp-accent-dk); box-shadow: 0 6px 22px var(--rlp-accent-glow); transform: translateY(-1px); } /* Never black/near-black text on a button, per design direction — secondary buttons use the brand primary color instead of plain ink, so even an outline button feels branded. */ .rlp-btn--secondary { background: transparent; border-color: var(--rlp-border); color: var(--rlp-primary-dk); } .rlp-btn--secondary:hover { border-color: var(--rlp-primary); background: var(--rlp-primary-tint); } .rlp-btn--large { width: 100%; padding: 15px 22px; font-size: 1.02rem; } @media (min-width: 560px) { .rlp-btn--large { width: auto; } } .rlp-sticky-cta { position: sticky; bottom: 12px; z-index: 10; margin-top: 24px; box-shadow: var(--rlp-shadow-lifted); } /* ---------- Subject tiles (replaces gray placeholders — see RLP_Subject_Style) ---------- */ .rlp-subject-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; background-image: linear-gradient(160deg, currentColor 0%, transparent 60%); } .rlp-subject-tile::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1.5px, transparent 1.5px); background-size: 20px 20px; opacity: 0.1; } .rlp-subject-tile__accent { position: absolute; width: 140px; height: 140px; border-radius: 50%; background: currentColor; opacity: 0.08; top: -50px; right: -50px; } .rlp-subject-tile__badge { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20,22,30,0.1); } .rlp-subject-tile__icon { width: 28px; height: 28px; } .rlp-subject-tile__label { position: relative; z-index: 1; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; } .rlp-subject-tile--hero { border-radius: var(--rlp-radius-lg); aspect-ratio: 16/9; } .rlp-subject-tile--hero .rlp-subject-tile__badge { width: 76px; height: 76px; } .rlp-subject-tile--hero .rlp-subject-tile__icon { width: 36px; height: 36px; } .rlp-subject-tile--hero .rlp-subject-tile__label { font-size: 0.82rem; } /* ---------- Cards / grid ---------- */ /* Flexbox, not CSS Grid, is deliberate here: Grid treats the whole layout as a fixed row/column matrix, so a partial last row (e.g. 4 items = a full row of 3 + a lone 4th) stays left-aligned with empty reserved tracks — there's no native way to center a leftover row in Grid. Flexbox with wrap + justify-content:center handles any item count correctly, including exactly one. max-width caps each card so at most 3 fit per row at the section's max width; flex-grow lets fewer cards expand (not stretch edge-to-edge — capped) and center. */ .rlp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 24px; } .rlp-grid > * { flex: 1 1 280px; max-width: 360px; } .rlp-card { display: flex; flex-direction: column; background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); overflow: hidden; box-shadow: var(--rlp-shadow-card); transition: box-shadow 0.18s ease, transform 0.18s ease; } .rlp-card:hover { box-shadow: var(--rlp-shadow-lifted); transform: translateY(-3px); } .rlp-card__img { aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; } .rlp-card__img img { width: 100%; height: 100%; object-fit: cover; } /* flex column + flex:1 on the body, plus margin-top:auto on the price row below, is what pins price to the bottom consistently regardless of how long each card's excerpt runs — no fixed heights needed. */ .rlp-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; } .rlp-card__byline { font-size: 0.76rem; color: var(--rlp-ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 6px; } .rlp-card__title { font-size: 1.05rem; margin-bottom: 0.35em; font-weight: 800; } .rlp-card__excerpt { font-size: 0.9rem; color: var(--rlp-ink-soft); margin: 0 0 12px; line-height: 1.5; } .rlp-card__meta { font-size: 0.85rem; color: var(--rlp-ink-soft); margin: 0 0 6px; } .rlp-card__price-row { display: flex; align-items: center; justify-content: center; margin-top: auto; padding-top: 10px; width: 100%; } .rlp-card__price { font-weight: 800; color: var(--rlp-ink); margin: 0; font-size: 1.05rem; } /* Composition bar — small colored strip showing the real video/pdf/live mix in a course. */ .rlp-composition-bar { display: flex; height: 5px; border-radius: 100px; overflow: hidden; margin: 10px 0; background: var(--rlp-surface-alt); } .rlp-composition-bar__seg--video { background: #2B6CB0; } .rlp-composition-bar__seg--pdf { background: #6B46C1; } .rlp-composition-bar__seg--live { background: var(--rlp-accent); } .rlp-composition-bar__seg--text { background: #2C7A7B; } /* ---------- Curriculum list ---------- */ .rlp-curriculum-list { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); overflow: hidden; } .rlp-curriculum-list__item { border-bottom: 1px solid var(--rlp-border); } .rlp-curriculum-list__item:last-child { border-bottom: none; } .rlp-curriculum-list__item a, .rlp-curriculum-list__locked { display: flex; align-items: center; gap: 12px; padding: 15px 18px; font-size: 0.95rem; font-weight: 600; } .rlp-curriculum-list__item a { background: var(--rlp-surface); } .rlp-curriculum-list__item a:hover { background: var(--rlp-surface-alt); } .rlp-curriculum-list__locked { color: var(--rlp-ink-faint); background: var(--rlp-surface-alt); font-weight: 500; } .rlp-curriculum-list__icon { flex-shrink: 0; width: 20px; text-align: center; } .rlp-curriculum-list__cover { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background-size: cover; background-position: center; } .rlp-curriculum-list__tag { margin-left: auto; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; background: var(--rlp-accent-tint); color: var(--rlp-accent-dk); padding: 3px 9px; border-radius: 100px; } .rlp-curriculum-list__done { margin-left: auto; color: var(--rlp-success); font-weight: 800; } /* ---------- Single course/package ---------- */ .rlp-course-layout { max-width: none; padding-bottom: 76px; } /* Clears the fixed sticky mobile buy bar so it never covers the last bit of content (reviews, "Next Lesson", etc). */ @media (min-width: 900px) { .rlp-course-layout { padding-bottom: 0; } } /* Course/Package detail hero — previously a flat single-color panel; now a two-tone gradient (panel-bg to primary-dk, both already theme-defined, so this looks right on every theme with zero new custom properties) plus a faint dot-grid texture, echoing the homepage hero's polish instead of looking like a plain color block. */ .rlp-course__hero { background: linear-gradient(135deg, var(--rlp-panel-bg) 0%, var(--rlp-primary-dk) 140%); position: relative; overflow: hidden; } .rlp-course__hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.09) 1.5px, transparent 1.5px); background-size: 24px 24px; } .rlp-course__hero-inner { max-width: 760px; margin: 0 auto; padding: 40px 16px; text-align: center; position: relative; z-index: 1; } .rlp-course__hero-inner img, .rlp-subject-tile--hero, .rlp-course__hero-inner .rlp-intro-video { margin: 20px auto 0; border-radius: var(--rlp-radius-lg); max-height: 320px; } .rlp-course__hero-inner img { object-fit: cover; } .rlp-course__hero-inner .rlp-intro-video { max-width: 560px; } /* ---------- Testimonials ---------- */ .rlp-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; } .rlp-testimonials--strip { padding-top: 0; } .rlp-testimonial-card { background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); padding: 22px; box-shadow: var(--rlp-shadow-sm); } .rlp-testimonial-card__quote { font-size: 0.98rem; line-height: 1.65; color: var(--rlp-ink); margin: 0 0 18px; font-style: italic; } .rlp-testimonial-card__author { display: flex; align-items: center; gap: 10px; } .rlp-testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .rlp-testimonial-card__avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--rlp-primary-tint); color: var(--rlp-primary-dk); font-weight: 800; } .rlp-testimonial-card__name { display: block; font-weight: 700; font-size: 0.9rem; color: var(--rlp-ink); } .rlp-testimonial-card__role { display: block; font-size: 0.78rem; color: var(--rlp-ink-soft); } .rlp-testimonials__more { text-align: center; margin: 20px 0 0; } .rlp-testimonials__more a { font-weight: 700; color: var(--rlp-primary-dk); } .rlp-testimonial-form-box { margin: 16px 0; } .rlp-testimonial-form-box__details { background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-md); padding: 14px 18px; } .rlp-testimonial-form-box__details summary { cursor: pointer; font-size: 0.92rem; } .rlp-testimonial-form-box__form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; max-width: 480px; } .rlp-testimonial-form-box__form textarea { padding: 10px 12px; border-radius: var(--rlp-radius-sm); border: 1px solid var(--rlp-border); font: inherit; resize: vertical; } .rlp-testimonial-form-box__form select { padding: 8px 10px; border-radius: var(--rlp-radius-sm); border: 1px solid var(--rlp-border); font: inherit; } .rlp-testimonial-form-box__form .rlp-btn { align-self: flex-start; } /* ---------- About / Instructor page ---------- */ .rlp-about { max-width: 680px; text-align: center; } .rlp-about__header { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 8px; } .rlp-about__photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: var(--rlp-shadow-card); } .rlp-about__philosophy { font-size: 1.15rem; font-style: italic; color: var(--rlp-ink-soft); border: none; margin: 20px 0 28px; padding: 0 20px; } .rlp-about__video { margin: 0 0 28px; max-width: 560px; margin-left: auto; margin-right: auto; } .rlp-about__bio { text-align: left; color: var(--rlp-ink-soft); line-height: 1.75; margin-bottom: 28px; } .rlp-about__bio p { margin: 0 0 14px; } /* ---------- Course/Package filter bar ---------- */ .rlp-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 18px 0 28px; padding: 14px 16px; background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-md); } .rlp-filter-bar__field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--rlp-ink-soft); } .rlp-filter-bar__field select { padding: 8px 10px; border-radius: var(--rlp-radius-sm); border: 1px solid var(--rlp-border); background: var(--rlp-surface); font: inherit; min-width: 160px; } .rlp-filter-bar__clear { font-size: 0.82rem; font-weight: 700; color: var(--rlp-primary-dk); align-self: center; margin-top: 18px; } .rlp-course__title { font-size: 1.7rem; color: var(--rlp-panel-text); margin-bottom: 0.4em; display: inline-block; } .rlp-course__title::after { content: ''; display: block; width: 56px; height: 4px; margin: 14px auto 0; background: var(--rlp-panel-text); opacity: 0.45; border-radius: 100px; } .rlp-course__hero-desc { color: var(--rlp-panel-text-soft); font-size: 1.02rem; max-width: 56ch; margin-left: auto; margin-right: auto; } .rlp-badge { display: block; width: fit-content; margin-left: auto; margin-right: auto; } @media (min-width: 800px) { .rlp-course__hero-inner { padding: 56px 16px; } .rlp-course__title { font-size: 2.3rem; } } .rlp-course__layout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 32px 16px 60px; max-width: var(--rlp-max-width); margin: 0 auto; } @media (min-width: 900px) { .rlp-course__layout-grid { grid-template-columns: 1fr 340px; align-items: start; } } .rlp-course__main { min-width: 0; } .rlp-course__desc { color: var(--rlp-ink-soft); line-height: 1.7; } .rlp-list { padding-left: 1.2em; } .rlp-list li { margin-bottom: 6px; } .rlp-buybox { background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); padding: 24px; box-shadow: var(--rlp-shadow-lifted); } @media (min-width: 900px) { .rlp-buybox { position: sticky; top: calc(var(--rlp-header-h) + 20px); } } /* ---------- Sticky mobile buy bar ---------- */ .rlp-sticky-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--rlp-surface); border-top: 1px solid var(--rlp-border); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* Clears the home-indicator area on notched phones. */ box-shadow: 0 -4px 16px rgba(20,22,30,0.08); } .rlp-sticky-buybar__price { font-weight: 800; font-size: 1.05rem; color: var(--rlp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rlp-sticky-buybar .rlp-btn { padding: 10px 20px; white-space: nowrap; } @media (min-width: 900px) { .rlp-sticky-buybar { display: none; } } /* ---------- "Continue where you left off" banner (homepage) ---------- */ .rlp-continue-banner { background: var(--rlp-primary-tint); border-bottom: 1px solid var(--rlp-border); padding: 12px 16px; } .rlp-continue-banner__inner { max-width: var(--rlp-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rlp-continue-banner__text { font-size: 0.9rem; color: var(--rlp-ink); } /* Desktop already has the full buybox pinned via position:sticky above — no need for a second, smaller version of the same thing. */ .rlp-buybox__price { font-size: 1.7rem; font-weight: 800; color: var(--rlp-ink); margin: 0 0 16px; } .rlp-buybox__price span { font-size: 0.9rem; font-weight: 500; color: var(--rlp-ink-soft); } .rlp-buybox__includes { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--rlp-border); display: flex; flex-direction: column; gap: 12px; } .rlp-buybox__duration { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--rlp-ink-soft); margin: 0 0 16px; padding: 10px 12px; background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-sm); } .rlp-buybox__includes li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--rlp-ink-soft); } .rlp-buybox__includes-icon { flex-shrink: 0; } /* ---------- Forms ---------- */ .rlp-auth-card { background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); box-shadow: var(--rlp-shadow-card); padding: 28px 24px; margin-top: 20px; } .rlp-form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; } .rlp-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--rlp-ink-soft); } .rlp-field__hint { font-size: 0.78rem; font-weight: 400; color: var(--rlp-ink-faint); margin-top: -2px; } /* ---------- Reviews ---------- */ .rlp-reviews__summary { font-size: 0.9rem; font-weight: 600; color: var(--rlp-ink-soft); margin-left: 10px; } .rlp-review-form-box { background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-md); padding: 14px 18px; margin: 12px 0 20px; } .rlp-review-form-box summary { cursor: pointer; font-size: 0.92rem; } .rlp-review-form-box__form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; max-width: 480px; } .rlp-review-form-box__form textarea { padding: 10px 12px; border-radius: var(--rlp-radius-sm); border: 1px solid var(--rlp-border); font: inherit; resize: vertical; } .rlp-review-form-box__form .rlp-btn { align-self: flex-start; } /* Star radio widget — visually reversed (5 first in markup) so the CSS-only ~ sibling-selector hover/checked trick works without JS: hovering/checking a star also highlights every star BEFORE it in markup order, which (thanks to the reversed layout) is every star to its visual LEFT — i.e. the expected "3 stars" look. */ .rlp-review-form-box__stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; font-size: 1.6rem; } .rlp-review-form-box__stars input { position: absolute; opacity: 0; width: 0; height: 0; } .rlp-review-form-box__stars label { color: var(--rlp-border); cursor: pointer; line-height: 1; } .rlp-review-form-box__stars input:checked ~ label, .rlp-review-form-box__stars label:hover, .rlp-review-form-box__stars label:hover ~ label { color: var(--rlp-accent); } .rlp-reviews__list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .rlp-review-card { border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-md); padding: 16px 18px; background: var(--rlp-surface); } .rlp-review-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .rlp-review-card__stars { color: var(--rlp-accent); letter-spacing: 1px; } .rlp-review-card__name { font-weight: 700; font-size: 0.88rem; color: var(--rlp-ink); } .rlp-review-card__comment { margin: 0; color: var(--rlp-ink-soft); line-height: 1.6; } /* ---------- Gamification badges ---------- */ .rlp-badge-shelf { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; } .rlp-badge { display: flex; align-items: center; gap: 8px; background: var(--rlp-accent-tint); border: 1px solid var(--rlp-accent); border-radius: 100px; padding: 6px 14px 6px 8px; } .rlp-badge__icon { font-size: 1.3rem; } .rlp-badge__label { font-size: 0.82rem; font-weight: 700; color: var(--rlp-ink); } /* ---------- Lesson quiz ---------- */ .rlp-quiz { margin-top: 24px; padding: 20px; background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-lg); border: 1px solid var(--rlp-border); } .rlp-quiz__title { margin: 0 0 12px; } .rlp-quiz__result { font-weight: 700; color: var(--rlp-primary-dk); background: var(--rlp-primary-tint); padding: 10px 14px; border-radius: var(--rlp-radius-sm); margin: 0 0 16px; } .rlp-quiz__question { margin-bottom: 18px; } .rlp-quiz__question-text { font-weight: 700; margin: 0 0 8px; color: var(--rlp-ink); } .rlp-quiz__option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--rlp-radius-sm); cursor: pointer; font-weight: 500; } .rlp-quiz__option:hover { background: var(--rlp-surface); } /* ---------- Homework / assignment submission ---------- */ .rlp-assignment { margin-top: 20px; padding: 20px; background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-lg); border: 1px solid var(--rlp-border); } .rlp-assignment__title { margin: 0 0 8px; } .rlp-assignment__instructions { color: var(--rlp-ink-soft); margin: 0 0 16px; } .rlp-assignment__status { padding: 12px 16px; border-radius: var(--rlp-radius-sm); margin-bottom: 16px; background: var(--rlp-surface); } .rlp-assignment__status p { margin: 6px 0 0; color: var(--rlp-ink-soft); } .rlp-assignment__status--approved { border-left: 4px solid #22C55E; } .rlp-assignment__status--needs_revision { border-left: 4px solid var(--rlp-accent); } .rlp-assignment__status--pending { border-left: 4px solid var(--rlp-ink-faint); } .rlp-assignment__form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .rlp-assignment__form textarea { padding: 10px 12px; border-radius: var(--rlp-radius-sm); border: 1px solid var(--rlp-border); font: inherit; resize: vertical; } .rlp-assignment__form .rlp-btn { align-self: flex-start; } .rlp-field input, .rlp-field select { font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-sm); background: var(--rlp-surface); color: var(--rlp-ink); font-family: inherit; } .rlp-field input:focus, .rlp-field select:focus { outline: none; border-color: var(--rlp-primary); box-shadow: 0 0 0 3px var(--rlp-primary-tint); } .rlp-form__msg { font-size: 0.9rem; min-height: 1.2em; font-weight: 600; } .rlp-form__msg.is-error { color: var(--rlp-error-text); } .rlp-form__msg.is-success { color: var(--rlp-primary-dk); } .rlp-form__footnote { margin-top: 18px; font-size: 0.9rem; color: var(--rlp-ink-soft); } /* ---------- Alerts ---------- */ .rlp-alert { border-radius: var(--rlp-radius-sm); padding: 14px 16px; margin: 16px 0; font-size: 0.92rem; font-weight: 500; } .rlp-alert--warn { background: var(--rlp-warn-bg); color: var(--rlp-warn-text); } .rlp-alert--error { background: var(--rlp-error-bg); color: var(--rlp-error-text); } /* ---------- Checkout ---------- */ .rlp-checkout-summary { display: flex; justify-content: space-between; align-items: center; background: var(--rlp-surface-alt); border-radius: var(--rlp-radius-sm); padding: 14px 16px; margin: 16px 0 24px; font-weight: 700; } .rlp-payment-box { background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); padding: 22px; box-shadow: var(--rlp-shadow-card); } .rlp-steps { padding-left: 1.2em; } .rlp-steps li { margin-bottom: 10px; } .rlp-bkash-number { display: inline-block; margin-top: 6px; font-family: monospace; font-size: 1.2rem; font-weight: 800; background: var(--rlp-accent-tint); color: var(--rlp-accent-dk); padding: 6px 14px; border-radius: var(--rlp-radius-sm); letter-spacing: 1px; } /* ---------- Dashboard ---------- */ .rlp-dashboard-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .rlp-telegram-connect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--rlp-primary-tint); border: 1px solid var(--rlp-primary); border-radius: var(--rlp-radius-lg); padding: 16px 20px; margin: 16px 0; } .rlp-telegram-connect__text strong { display: block; font-size: 0.98rem; margin-bottom: 2px; } .rlp-telegram-connect__text p { margin: 0; font-size: 0.88rem; color: var(--rlp-ink-soft); } .rlp-referral-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--rlp-accent-tint); border: 1px solid var(--rlp-accent); border-radius: var(--rlp-radius-lg); padding: 16px 20px; margin: 16px 0; } .rlp-referral-box__text strong { display: block; font-size: 0.98rem; margin-bottom: 2px; } .rlp-referral-box__text p { margin: 0; font-size: 0.88rem; color: var(--rlp-ink-soft); max-width: 42ch; } .rlp-referral-box__link-row { display: flex; gap: 8px; flex-wrap: wrap; } .rlp-referral-box__link-row input { padding: 8px 10px; border-radius: var(--rlp-radius-sm); border: 1px solid var(--rlp-border); font-size: 0.82rem; min-width: 220px; background: var(--rlp-surface); } .rlp-coupon-box { margin: 0 0 20px; } .rlp-coupon-box__row { display: flex; gap: 8px; } .rlp-coupon-box__row input { flex: 1; text-transform: uppercase; } .rlp-upcoming-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .rlp-upcoming-item { display: flex; align-items: center; gap: 12px; background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-md); padding: 14px 16px; box-shadow: var(--rlp-shadow-sm); } .rlp-upcoming-item:hover { border-color: var(--rlp-primary); } .rlp-upcoming-item__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rlp-accent); flex-shrink: 0; } .rlp-upcoming-item__body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .rlp-upcoming-item__title { font-weight: 700; font-size: 0.95rem; } .rlp-upcoming-item__course { font-size: 0.82rem; color: var(--rlp-ink-soft); } .rlp-upcoming-item__time { font-size: 0.82rem; font-weight: 700; color: var(--rlp-primary-dk); white-space: nowrap; } @media (max-width: 420px) { .rlp-upcoming-item { flex-wrap: wrap; } .rlp-upcoming-item__time { margin-left: 22px; } } .rlp-card--dashboard { text-align: center; } .rlp-card--ghost { display: flex; align-items: stretch; border: 2px dashed var(--rlp-border); background: transparent; box-shadow: none; } .rlp-card--ghost:hover { border-color: var(--rlp-primary); box-shadow: none; } .rlp-card--ghost .rlp-card__body { justify-content: center; } .rlp-card--ghost__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rlp-primary-tint); color: var(--rlp-primary-dk); font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; } .rlp-card__continue { display: block; width: 100%; margin-top: auto; padding-top: 12px; text-align: center; } .rlp-progress { margin-top: 12px; width: 100%; } .rlp-progress__bar { height: 6px; border-radius: 100px; background: var(--rlp-surface-alt); overflow: hidden; } .rlp-progress__fill { height: 100%; background: var(--rlp-primary); border-radius: 100px; } .rlp-progress__label { display: block; font-size: 0.78rem; color: var(--rlp-ink-soft); margin-top: 5px; } /* ---------- How It Works ---------- */ .rlp-howitworks__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; } @media (min-width: 760px) { .rlp-howitworks__grid { grid-template-columns: repeat(3, 1fr); } } .rlp-howitworks__item { background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); padding: 22px; } .rlp-howitworks__mark { display: inline-block; font-weight: 800; font-size: 0.78rem; color: var(--rlp-primary-dk); background: var(--rlp-primary-tint); padding: 4px 12px; border-radius: 100px; margin-bottom: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .rlp-howitworks__item h3 { font-size: 1.05rem; margin-bottom: 0.3em; } .rlp-howitworks__item p { color: var(--rlp-ink-soft); font-size: 0.92rem; margin: 0; } /* ---------- Lesson viewer ---------- */ .rlp-lesson-layout { display: flex; flex-direction: column; max-width: var(--rlp-max-width); margin: 0 auto; } .rlp-lesson-sidebar { order: 2; border-top: 1px solid var(--rlp-border); padding: 16px; } .rlp-lesson-sidebar__back { display: inline-block; margin-bottom: 12px; font-size: 0.9rem; color: var(--rlp-primary-dk); font-weight: 700; } .rlp-lesson-sidebar__list { display: flex; flex-direction: column; } .rlp-lesson-sidebar__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rlp-radius-sm); font-size: 0.9rem; font-weight: 600; } .rlp-lesson-sidebar__item.is-active { background: var(--rlp-primary-tint); color: var(--rlp-primary-dk); } .rlp-lesson-sidebar__icon { width: 18px; text-align: center; flex-shrink: 0; } .rlp-lesson-sidebar__cover { width: 28px; height: 28px; border-radius: 7px; background-size: cover; background-position: center; flex-shrink: 0; } .rlp-lesson-sidebar__title { flex: 1; } .rlp-lesson-sidebar__check { color: var(--rlp-success); font-weight: 800; flex-shrink: 0; } .rlp-lesson-content { order: 1; padding: 16px; } .rlp-lesson-content__title { font-size: 1.4rem; margin-bottom: 16px; } .rlp-lesson-footer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rlp-border); } .rlp-lesson-footer form { margin: 0; } @media (min-width: 900px) { .rlp-lesson-layout { flex-direction: row; align-items: flex-start; gap: 24px; padding: 24px 16px; } .rlp-lesson-sidebar { order: 1; width: 280px; flex-shrink: 0; border-top: none; border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); padding: 16px; position: sticky; top: calc(var(--rlp-header-h) + 16px); } .rlp-lesson-content { order: 2; flex: 1; padding: 0; } } .rlp-video-wrap { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--rlp-radius-lg); overflow: hidden; } .rlp-video-frame { width: 100%; height: 100%; border: 0; } .rlp-video-watermark, .rlp-pdf-watermark { position: absolute; bottom: 10px; right: 12px; pointer-events: none; font-size: 0.72rem; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.4); padding: 3px 9px; border-radius: 100px; font-family: monospace; letter-spacing: 0.02em; } .rlp-pdf-wrap { position: relative; border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); overflow: hidden; height: 75vh; min-height: 400px; } .rlp-pdf-frame { width: 100%; height: 100%; border: 0; } .rlp-pdf-watermark { color: rgba(0,0,0,0.45); background: rgba(255,255,255,0.7); } .rlp-live-box { background: var(--rlp-surface); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-lg); padding: 28px; text-align: center; box-shadow: var(--rlp-shadow-card); } .rlp-live-box__time { color: var(--rlp-ink-soft); margin-bottom: 18px; font-weight: 600; } .rlp-live-box__note { color: var(--rlp-ink-faint); font-size: 0.85rem; margin-top: 12px; margin-bottom: 0; } /* ---------- Footer ---------- */ .rlp-footer { border-top: 1px solid var(--rlp-panel-border); margin-top: 48px; background: var(--rlp-panel-bg); } .rlp-footer__inner { max-width: var(--rlp-max-width); margin: 0 auto; padding: 40px 16px 24px; } /* Mobile-first: a single stacked, centered column per section — this is the actual mobile-optimized layout, not a shrunk-down desktop grid, so nothing here needs a media query to look right on a phone. */ .rlp-footer__grid { display: flex; flex-direction: column; gap: 28px; text-align: center; } .rlp-footer__col--brand { max-width: 320px; margin: 0 auto; } .rlp-footer__brand { font-weight: 800; margin: 0 0 8px; color: var(--rlp-panel-text); font-size: 1.15rem; } .rlp-footer__tagline { font-size: 0.88rem; color: var(--rlp-panel-text-soft); margin: 0; line-height: 1.6; } .rlp-footer__heading { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rlp-panel-text-faint); margin: 0 0 12px; } .rlp-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; } .rlp-footer__links a { color: var(--rlp-panel-text-soft); font-weight: 600; } .rlp-footer__links a:hover { color: var(--rlp-panel-text); } .rlp-footer__bottom { border-top: 1px solid var(--rlp-panel-border); margin-top: 32px; padding-top: 20px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; } .rlp-footer__copy { font-size: 0.8rem; color: var(--rlp-panel-text-faint); margin: 0; } @media (min-width: 760px) { /* PREVIOUS BUG: this used `grid-template-columns: 1.4fr repeat(auto-fit, minmax(120px, 1fr));`. Combining a fixed leading track with an auto-fit repeat() in the same track list is invalid per the CSS Grid spec once the container's available size is involved the way it is here — browsers silently drop the ENTIRE grid-template-columns declaration when that happens (not just clamp it), so every column collapsed back to the base rule's single `1fr` track while every other rule in this same media query block (the text-align, the brand column's margin) kept applying fine — which is exactly the half-broken result in the screenshot: left-aligned text, but everything still stacked in one column. Flexbox with flex-wrap sidesteps the whole ambiguity and handles any number of visible columns (3, 4, or 5, since Support only shows when a phone/email is set) without any special-casing. */ .rlp-footer__grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; text-align: left; } .rlp-footer__col { flex: 1 1 130px; } .rlp-footer__col--brand { flex: 1.6 1 220px; max-width: none; margin: 0; } .rlp-footer__bottom { flex-direction: row; justify-content: space-between; } } /* Below ~360px (older/cheaper Android phones running a small default viewport) tighten padding and type a touch so nothing feels cramped against the edge of the screen. */ @media (max-width: 359px) { .rlp-footer__inner { padding: 32px 14px 20px; } .rlp-footer__grid { gap: 24px; } .rlp-footer__tagline { font-size: 0.85rem; } } /* ---------- Legal pages ---------- */ .rlp-legal { max-width: 760px; } .rlp-legal__content { color: var(--rlp-ink-soft); line-height: 1.75; } .rlp-legal__content h3 { color: var(--rlp-ink); font-family: var(--rlp-font-display); margin: 28px 0 10px; font-size: 1.1rem; } .rlp-legal__content h3:first-child { margin-top: 0; } .rlp-legal__content p { margin: 0 0 14px; } .rlp-legal__content em { color: var(--rlp-ink-faint); } /* ---------- Intro / promo video (course & package pages) ---------- */ .rlp-intro-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--rlp-radius-lg); overflow: hidden; box-shadow: var(--rlp-shadow-card); background: #000; } .rlp-intro-video__frame { width: 100%; height: 100%; border: 0; display: block; } /* ---------- Invoice / Receipt ---------- */ .rlp-invoice { background: #FFFFFF; border: 1px solid var(--rlp-border, #E4E6EA); border-radius: var(--rlp-radius-lg, 18px); box-shadow: var(--rlp-shadow-card, 0 4px 18px rgba(20,22,30,0.07)); padding: 32px; color: #1A1D23; } .rlp-invoice__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid #1A1D23; padding-bottom: 18px; margin-bottom: 18px; } .rlp-invoice__business { font-weight: 800; font-size: 1.1rem; margin: 0 0 4px; } .rlp-invoice__address { font-size: 0.85rem; color: #5B6169; margin: 0; } .rlp-invoice__meta { text-align: right; font-size: 0.88rem; color: #5B6169; } .rlp-invoice__meta p { margin: 0 0 4px; } .rlp-invoice__title { font-weight: 800; letter-spacing: 0.06em; color: #1A1D23; font-size: 1rem; } .rlp-invoice__billto { margin-bottom: 20px; } .rlp-invoice__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8A9099; margin: 0 0 4px; } .rlp-invoice__billto p { margin: 0 0 2px; } .rlp-invoice__table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.92rem; } .rlp-invoice__table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8A9099; border-bottom: 1px solid #E4E6EA; padding: 6px 0; } .rlp-invoice__table td { padding: 10px 0; border-bottom: 1px solid #E4E6EA; } .rlp-invoice__table th:last-child, .rlp-invoice__table td:last-child { text-align: right; } .rlp-invoice__table tfoot td { border-top: 2px solid #1A1D23; border-bottom: none; font-weight: 800; padding-top: 12px; } .rlp-invoice__payment { font-size: 0.88rem; color: #5B6169; margin-bottom: 18px; } .rlp-invoice__payment p { margin: 0 0 2px; } .rlp-invoice__footnote { font-size: 0.8rem; color: #8A9099; border-top: 1px solid #E4E6EA; padding-top: 14px; margin: 0; } /* ---------- Completion Certificate ---------- */ .rlp-certificate { padding: 10px; } .rlp-certificate__border { background: #FFFFFF; border: 3px solid #1A1D23; border-radius: 4px; padding: 56px 40px; text-align: center; box-shadow: 0 12px 40px rgba(20,22,30,0.12); position: relative; } .rlp-certificate__border::before { content: ""; position: absolute; inset: 12px; border: 1px solid #C7CCD4; border-radius: 2px; pointer-events: none; } .rlp-certificate__eyebrow { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8A9099; font-weight: 700; margin: 0 0 20px; } .rlp-certificate__name { font-size: 2.1rem; font-weight: 800; margin: 0 0 14px; color: #1A1D23; font-family: Georgia, 'Times New Roman', serif; } .rlp-certificate__body { font-size: 1rem; color: #5B6169; margin: 0 0 10px; } .rlp-certificate__course { font-size: 1.4rem; font-weight: 700; color: #1A1D23; margin: 0 0 20px; } .rlp-certificate__date { font-size: 0.9rem; color: #8A9099; margin: 0 0 44px; } .rlp-certificate__footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: left; flex-wrap: wrap; } .rlp-certificate__sig-line { width: 160px; border-bottom: 1px solid #1A1D23; margin-bottom: 8px; } .rlp-certificate__sig-name { font-weight: 700; margin: 0; font-size: 0.92rem; } .rlp-certificate__sig-title { margin: 0; font-size: 0.8rem; color: #8A9099; } .rlp-certificate__issuer { text-align: right; font-size: 0.85rem; color: #5B6169; } .rlp-certificate__issuer p { margin: 0 0 2px; } .rlp-certificate__id { font-size: 0.72rem; color: #ABB1B9; } @media (max-width: 600px) { .rlp-certificate__border { padding: 36px 20px; } .rlp-certificate__name { font-size: 1.5rem; } .rlp-certificate__course { font-size: 1.15rem; } .rlp-certificate__footer { flex-direction: column; align-items: flex-start; text-align: left; } .rlp-certificate__issuer { text-align: left; } } /* ---------- Accordion (curriculum sections, package "what's included") ---------- */ .rlp-accordion__controls { display: flex; justify-content: flex-end; margin-bottom: 10px; } .rlp-accordion__toggle-all { font-size: 0.85rem; font-weight: 700; color: var(--rlp-primary-dk); background: none; border: none; cursor: pointer; padding: 4px 8px; } .rlp-accordion__toggle-all:hover { text-decoration: underline; } .rlp-accordion__item { border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-md); margin-bottom: 10px; overflow: hidden; background: var(--rlp-surface); } .rlp-accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--rlp-surface-alt); border: none; cursor: pointer; text-align: left; font: inherit; } .rlp-accordion__header-text { display: flex; flex-direction: column; gap: 2px; } .rlp-accordion__header-title { font-weight: 700; color: var(--rlp-ink); font-size: 0.98rem; } .rlp-accordion__header-meta { font-size: 0.8rem; color: var(--rlp-ink-soft); } .rlp-accordion__chevron { flex-shrink: 0; width: 18px; height: 18px; transition: transform 0.2s ease; color: var(--rlp-ink-soft); } .rlp-accordion__item.is-open .rlp-accordion__chevron { transform: rotate(180deg); } .rlp-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .rlp-accordion__item.is-open .rlp-accordion__panel { max-height: 3000px; } .rlp-accordion__panel-inner { padding: 6px 16px 14px; } .rlp-accordion__panel-inner .rlp-curriculum-list { margin: 0; } .rlp-accordion__panel-inner .rlp-curriculum-list__item a, .rlp-accordion__panel-inner .rlp-curriculum-list__item .rlp-curriculum-list__locked { background: transparent; padding-left: 4px; padding-right: 4px; } /* Nested package accordion — course-level sections containing their own lessons list. */ .rlp-accordion__course-link { font-size: 0.8rem; color: var(--rlp-primary-dk); font-weight: 700; margin: 8px 0 0 4px; display: inline-block; } /* ---------- Collapsible class-intro toggle ---------- */ .rlp-intro-toggle { margin: 18px 0 24px; } .rlp-intro-toggle__btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--rlp-primary-tint); border: 1px solid var(--rlp-border); border-radius: var(--rlp-radius-md); padding: 14px 16px; color: var(--rlp-primary-dk); font-weight: 700; } .rlp-intro-toggle__btn:hover { background: var(--rlp-surface-alt); } .rlp-intro-toggle__icon { font-size: 1.2rem; } .rlp-intro-toggle__chevron { margin-left: auto; transition: transform 0.2s ease; flex-shrink: 0; } .rlp-intro-toggle.is-open .rlp-intro-toggle__chevron { transform: rotate(180deg); } .rlp-intro-toggle__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .rlp-intro-toggle.is-open .rlp-intro-toggle__panel { max-height: 600px; } .rlp-intro-toggle__panel-inner { padding-top: 14px; }