/* Page-specific overrides for diploma-in-astro-science Compact pass: the shared course-page scale (40px section titles, 40-60px section padding, 35-40px card padding) stretched this page past 10 screens. Loaded last in so it wins over the shared sheets. */ /* ---------- Section rhythm ---------- */ .hero-section { padding: 26px 0 20px; } .hero-buttons-section { padding: 14px 0; } .motivation-section, .highlights-section, .course-details-section, .benefits-section, .curriculum-section, .audience-section, .outcomes-section, .certificate-demo-section, .reviews-section, .alumni-section, .explore-section, .social-sharing-section { padding-top: 30px; padding-bottom: 30px; } .footer-cta { padding: 24px 0; } /* ---------- Typography ---------- */ .hero-section h1 { font-size: 2.1rem; line-height: 1.25; margin-bottom: 8px; } .hero-section .sub-headline { font-size: 1rem; line-height: 1.5; } .section-title { font-size: 1.65rem; line-height: 1.3; margin-bottom: 16px; } /* Intro blurbs under the section titles carry inline font-size/margin */ .curriculum-section > .container > p[style], .audience-section > .container > p[style], .certificate-demo-section > .container > p[style], .alumni-section > .container > p[style] { font-size: 0.95rem !important; line-height: 1.6 !important; margin: 0 auto 18px !important; max-width: 780px !important; } .reviews-section .section-subtitle { font-size: 0.95rem; line-height: 1.55; } .motivation-section h2 { font-size: 1.5rem; margin-bottom: 10px; } .motivation-section p { font-size: 0.95rem; line-height: 1.65; } .motivation-section .wellness-icon { font-size: 2rem; margin-bottom: 8px; } /* ---------- Cards ---------- */ .highlight-card, .benefit-card, .audience-card, .detail-card { padding: 18px 16px; } .module-card { padding: 22px 20px; } .outcomes-card { padding: 22px 26px; } .highlights-grid, .benefits-grid, .audience-grid, .details-grid, .modules-grid, .courses-grid { gap: 16px; } .highlight-card h3, .module-card h3 { font-size: 1.1rem; line-height: 1.35; margin-bottom: 6px; } .benefit-card h4, .audience-card h4 { font-size: 0.98rem; line-height: 1.35; margin-bottom: 6px; } .highlight-card p, .benefit-card p, .audience-card p, .module-card p { font-size: 0.88rem; line-height: 1.55; margin-bottom: 0; } .highlight-icon, .benefit-icon, .audience-icon, .detail-icon { font-size: 1.4rem; margin-bottom: 8px; } .module-features li, .outcomes-list li { font-size: 0.88rem; line-height: 1.5; margin-bottom: 7px; } .detail-card .detail-value { font-size: 1.05rem; } .detail-card .detail-subtext { font-size: 0.82rem; line-height: 1.45; } /* ---------- Certificate section ---------- The demo image was upscaled to 1277px wide (native 1052px) and the preview and feature list stacked, which alone cost ~1500px of page height. */ .certificate-demo-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 26px; } .certificate-preview, .certificate-frame { max-width: 100%; } .certificate-frame img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; } .certificate-features h3 { font-size: 1.15rem !important; margin-bottom: 12px !important; } .certificate-features-list li { font-size: 0.9rem; line-height: 1.5; margin-bottom: 8px; } @media (max-width: 900px) { .certificate-demo-container { grid-template-columns: 1fr; gap: 18px; } } /* ---------- Outcomes list ---------- */ .outcomes-list li { padding: 7px 0; gap: 12px; } /* ---------- Reviews / alumni ---------- reviews-section-compact.css sets these with !important, so match it. */ .reviews-section { padding: 30px 0 !important; } .reviews-section .section-header { margin-bottom: 14px !important; } .reviews-section .section-badge { font-size: 0.7rem !important; padding: 5px 12px !important; margin-bottom: 8px !important; } .reviews-section .section-title { font-size: 1.65rem !important; margin-bottom: 8px !important; } .reviews-trust-badges { gap: 16px !important; margin-bottom: 16px !important; } .trust-badge-item { padding: 7px 14px !important; } .reviews-grid-wrapper { padding-top: 0; padding-bottom: 0; } .reviews-carousel-wrapper { padding: 6px 0 18px !important; } .alumni-carousel-wrapper { padding-top: 6px; padding-bottom: 18px; } .review-card { padding: 16px 18px !important; } .alumni-carousel .alumni-card, .alumni-card { padding: 18px; } .review-text, .alumni-achievement { font-size: 0.88rem; line-height: 1.55; } .review-info h4, .alumni-card h4 { font-size: 0.98rem; } /* ---------- Other Popular Courses ---------- */ .explore-section .course-img, .explore-section .course-img img { height: 132px; } .explore-section .course-card-header { padding: 12px 14px; } .explore-section .course-title-lg { font-size: 1rem; line-height: 1.3; } .explore-section .course-card-body { padding: 12px 14px; } .explore-section .course-card-body p { font-size: 0.84rem; line-height: 1.5; } .explore-section .course-card-promo { font-size: 0.75rem; padding: 6px 10px; } .explore-section .course-card-btn { padding: 9px 12px; font-size: 0.88rem; } /* ---------- Sharing block ---------- */ .sharing-header h2 { font-size: 1.4rem; } .sharing-details-content h3 { font-size: 1.15rem; } .detail-row { font-size: 0.88rem; line-height: 1.5; } .footer-cta h3 { font-size: 1.3rem; } .footer-cta p { font-size: 0.95rem; } /* ---------- Small screens ---------- Stacked, full-width promo cards ran ~490px each here. Laying them out horizontally keeps all four visible without the endless scroll. */ @media (max-width: 700px) { .explore-section .course-card { display: grid !important; grid-template-columns: 118px minmax(0, 1fr); grid-template-areas: "img header" "img body"; align-items: start; } /* Base CSS makes .course-img a flexbox, so a percentage-height image collapses to its intrinsic size. Absolutely fill the cell instead. */ .explore-section .course-img { grid-area: img; position: relative; overflow: hidden; height: 100% !important; min-height: 118px; } .explore-section .course-img img { position: absolute; inset: 0; width: 100% !important; object-fit: cover; } /* mobile-image-sections.css forces `img { height: auto !important }` with a high-specificity :not() chain that computes to (0,0,6,2). Duplicated classes plus the [src] attribute push this selector to (0,0,7,1) so it wins and the absolutely-positioned image fills its cell. */ .explore-section.explore-section .course-card.course-card .course-img.course-img img[src] { height: 100% !important; } .explore-section .course-card-header { grid-area: header; padding: 10px 12px 0 !important; } .explore-section .course-card-body { grid-area: body; padding: 6px 12px 10px !important; } .explore-section .course-title-lg { font-size: 0.95rem !important; } .explore-section .course-card-body p { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem !important; margin-bottom: 8px !important; } .explore-section .course-card-btn { padding: 7px 10px !important; } } @media (max-width: 600px) { .hero-section h1 { font-size: 1.6rem; } .section-title { font-size: 1.35rem; } .motivation-section, .highlights-section, .course-details-section, .benefits-section, .curriculum-section, .audience-section, .outcomes-section, .certificate-demo-section, .reviews-section, .alumni-section, .explore-section, .social-sharing-section { padding-top: 22px; padding-bottom: 22px; } }