/* ========================================================== COURSE LANDING PAGE STYLES Extends css/style.css — same palette, fonts & components. Course accent colour is set per-page via --accent / --accent-soft on ========================================================== */ /* ---------- Compact Header ---------- */ .course-page .mini-header { position: sticky; top: 0; left: 0; width: 100%; z-index: 999; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border-bottom: 1px solid #eef1f6; } .course-page .mini-nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; } .course-page .mini-nav .logo img { height: 42px; } .course-page .back-home { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--accent, #2563eb); text-decoration: none; padding: 8px 16px; border: 1.5px solid var(--accent, #2563eb); border-radius: 999px; transition: .3s; white-space: nowrap; } .course-page .back-home:hover { background: var(--accent, #2563eb); color: #fff; transform: translateY(-2px); } .course-page .back-home span.short { display: none; } /* ---------- Breadcrumb ---------- */ .course-page .crumb { font-size: .85rem; color: #8a93a3; padding-top: 18px; } .course-page .crumb a { color: #8a93a3; text-decoration: none; } .course-page .crumb a:hover { color: var(--accent, #2563eb); } .course-page .crumb span.current { color: var(--accent, #2563eb); font-weight: 600; } /* ---------- Hero ---------- */ .course-page .course-hero { padding: 18px 0 50px; position: relative; overflow: hidden; background: radial-gradient(circle at 85% 15%, var(--accent-soft, rgba(37,99,235,.10)), transparent 40%), #f8fafc; } .course-page .course-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; } .course-page .course-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft, #e8f1ff); color: var(--accent, #2563eb); padding: 9px 18px; border-radius: 40px; font-size: .85rem; font-weight: 700; margin-bottom: 18px; } .course-page .course-hero h1 { font: 800 clamp(2rem, 3.6vw, 3.1rem) Poppins, sans-serif; line-height: 1.15; margin-bottom: 10px; color: #111827; } .course-page .course-hero h1 span { color: var(--accent, #2563eb); } .course-page .course-tagline { font-weight: 600; color: var(--accent, #2563eb); font-size: 1.05rem; margin-bottom: 6px; } .course-page .course-hero p.lead { color: #5b6475; font-size: 1.02rem; line-height: 1.75; margin: 14px 0 22px; max-width: 560px; } .course-page .course-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; } .course-page .course-hero-buttons .btn { background: var(--accent, #2563eb); } .course-page .course-hero-buttons .btn-outline { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); } .course-page .course-hero-buttons .btn-outline:hover { background: var(--accent, #2563eb); } .course-page .quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .course-page .quick-fact { background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 14px 10px; text-align: center; box-shadow: 0 6px 18px rgba(17, 24, 39, .04); } .course-page .quick-fact strong { display: block; font-family: Poppins, sans-serif; font-size: 1.05rem; color: #111827; margin-bottom: 3px; } .course-page .quick-fact span { font-size: .75rem; color: #8a93a3; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } /* Hero visual card (mirrors homepage AI card) */ .course-page .hero-card { background: #fff; border-radius: 28px; padding: 26px; box-shadow: 0 24px 60px rgba(17, 24, 39, .10); border: 1px solid #eef1f6; } .course-page .hero-card .card-header { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; color: #111827; margin-bottom: 20px; } .course-page .hero-card .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); } .course-page .hero-icon-circle { width: 96px; height: 96px; border-radius: 50%; background: var(--accent, #2563eb); display: flex; align-items: center; justify-content: center; margin: 6px auto 22px; box-shadow: 0 14px 30px var(--accent-soft, rgba(37,99,235,.35)); } .course-page .hero-icon-circle img { width: 48px; height: 48px; filter: brightness(0) invert(1); } .course-page .hero-features { display: flex; flex-direction: column; gap: 12px; } .course-page .hero-features span { background: #f8fafc; border-radius: 12px; padding: 10px 14px; font-size: .88rem; font-weight: 600; color: #333; } .course-page .hero-features span::before { content: "✓ "; color: var(--accent, #2563eb); font-weight: 800; } /* ---------- Section shell ---------- */ body.course-page { counter-reset: csection; } .course-page .csection { padding: 38px 0; } /* Section header now spans the full container: text block on the left, a large soft auto-numbered digit on the right so the header never leaves one side of the container empty. */ .course-page .csection-title { max-width: 100%; display: grid; grid-template-columns: minmax(0, 640px) 1fr; column-gap: 30px; align-items: center; margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid #eef1f6; } .course-page .csection-title > * { grid-column: 1; } .course-page .csection-title::after { counter-increment: csection; content: counter(csection, decimal-leading-zero); grid-column: 2; grid-row: 1 / -1; justify-self: end; font: 800 5rem/1 Poppins, sans-serif; color: var(--accent-soft, #e8f1ff); -webkit-text-stroke: 1px var(--accent-soft, #e8f1ff); } .course-page .csection-title h2 { font: 800 clamp(1.5rem, 2.6vw, 2.1rem) Poppins, sans-serif; margin-bottom: 8px; color: #111827; } .course-page .csection-title p { color: #666; font-size: 1rem; margin: 0; } .course-page .csection-badge { display: inline-block; background: var(--accent-soft, #e8f1ff); color: var(--accent, #2563eb); padding: 8px 18px; border-radius: 40px; font-size: .8rem; font-weight: 700; letter-spacing: .3px; margin-bottom: 14px; } .course-page hr.divider { border: none; border-top: 1px solid #eef1f6; margin: 0; } /* ---------- Curriculum accordion (reuses faq styles) ---------- */ /* Base .faq-wrapper is a narrow (820px) centered single column, which on the wide 1200px course container left large empty margins on both sides. Override it to a full-width 2-column grid instead. */ .course-page .curriculum-wrapper { max-width: 100%; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 16px; } .course-page .curriculum-wrapper .faq-item { margin-bottom: 0; } /* If the module count is odd, let the last module stretch across both columns instead of leaving one empty cell dangling on its own. */ .course-page .curriculum-wrapper .faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; } .course-page .module-index { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft, #e8f1ff); color: var(--accent, #2563eb); font-weight: 800; font-size: .85rem; margin-right: 14px; flex: none; } .course-page .faq-question span:first-of-type { display: flex; align-items: center; } /* ---------- Tools & Outcomes ---------- */ .course-page .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .course-page .info-card { background: #fff; border: 1px solid #eef1f6; border-radius: 20px; padding: 26px 28px; } .course-page .info-card h3 { font-family: Poppins, sans-serif; font-size: 1.15rem; margin-bottom: 16px; color: #111827; } .course-page .chip-list { display: flex; flex-wrap: wrap; gap: 10px; } .course-page .chip-list span { padding: 8px 15px; border-radius: 14px; font-weight: 700; font-size: .85rem; background: var(--accent-soft, #f4f7fb); color: var(--accent, #2563eb); } .course-page .outcome-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .course-page .outcome-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: #3d4451; font-weight: 500; } .course-page .outcome-list li::before { content: "🎯"; flex: none; } /* ---------- CTA banner tweaks ---------- */ .course-page .corporate-cta { margin-top: 0; background: linear-gradient(135deg, var(--accent, #2563eb), #1e293b); } /* ---------- Compact contact ---------- */ .course-page .mini-contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; } .course-page .mini-contact-info { background: #fff; border: 1px solid #eef1f6; border-radius: 20px; padding: 26px 28px; } .course-page .mini-contact-info h3 { font-family: Poppins, sans-serif; margin-bottom: 18px; font-size: 1.1rem; } .course-page .mini-contact-info .contact-item { margin-bottom: 16px; } .course-page .contact-card { background: #fff; border: 1px solid #eef1f6; border-radius: 20px; padding: 26px 28px; } .course-page .contact-card h3 { font-family: Poppins, sans-serif; margin-bottom: 16px; font-size: 1.1rem; } .course-page .contact-submit, .course-page .btn-primary { background: var(--accent, #2563eb); border: none; cursor: pointer; } /* ---------- Mini footer ---------- */ .course-page .mini-footer { background: #0b1220; color: #cbd5e1; padding: 26px 0; } .course-page .mini-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .course-page .mini-footer-brand { display: flex; align-items: center; gap: 12px; } .course-page .mini-footer-brand img { height: 30px; } .course-page .mini-footer-brand span { font-size: .85rem; color: #8ea0c2; } .course-page .mini-footer-links { display: flex; gap: 22px; list-style: none; font-size: .88rem; } .course-page .mini-footer-links a { color: #cbd5e1; text-decoration: none; } .course-page .mini-footer-links a:hover { color: #fff; } .course-page .mini-footer-contact { font-size: .85rem; color: #8ea0c2; } .course-page .mini-footer-bottom { text-align: center; font-size: .78rem; color: #64748b; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .course-page .course-hero-grid { grid-template-columns: 1fr; } .course-page .hero-card { max-width: 420px; margin: 0 auto; } .course-page .split-grid, .course-page .mini-contact-grid { grid-template-columns: 1fr; } .course-page .quick-facts { grid-template-columns: repeat(2, 1fr); } .course-page .curriculum-wrapper { grid-template-columns: 1fr; } .course-page .curriculum-wrapper .faq-item:last-child:nth-child(odd) { grid-column: auto; } .course-page .csection-title::after { font-size: 3.4rem; } } @media (max-width: 640px) { .course-page .csection-title { grid-template-columns: 1fr; } .course-page .csection-title::after { display: none; } .course-page .mini-nav .logo img { height: 34px; } .course-page .back-home span.full { display: none; } .course-page .back-home span.short { display: inline; } .course-page .course-hero-buttons { flex-direction: column; } .course-page .course-hero-buttons a { text-align: center; } .course-page .mini-footer-inner { flex-direction: column; text-align: center; } }