/*========================== GLOBAL ===========================*/ :root { /* ========================= ODLC GLOBAL COLORS ========================= */ --navy: #083C7C; --navy2: #083C7C; --blue: #083C7C; --cyan: #00a8ff; --purple: #6335e8; --yellow: #ffc400; --white: #ffffff; --muted: #899abd; --border: rgba(0, 168, 255, .30); --section-max-width: 1500px; /* Main Typography */ --font-main: "Inter", "Segoe UI", Arial, sans-serif; /* Main Colors */ --text-dark: #0b1f4d; --text-primary: #17203d; --text-body: #667085; --text-light: #ffffff; /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; } /* ========================================================= 2. GLOBAL BODY ========================================================= */ html, body { font-family: var(--font-main); color: var(--text-primary); font-size: 16px; line-height: 1.6; } /* ========================================================= 3. GLOBAL PARAGRAPHS ========================================================= */ p { font-size: 16px; line-height: 1.7; font-weight: 400; } /* ========================================================= 4. MAIN SECTION HEADINGS ========================================================= */ .section-title, .programmes-title { font-size: 52px; line-height: 1.12; font-weight: 800; letter-spacing: -1.2px; } /* ========================================================= 5. OTHER MAIN SECTION HEADINGS ========================================================= */ .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 46px; line-height: 1.15; font-weight: 800; letter-spacing: -1px; } /* ========================================================= 6. SPECIAL LARGE HERO HEADINGS ========================================================= */ .hero-section h1, .hero-section h2 { font-size: 54px; line-height: 1.1; font-weight: 800; } /* ========================================================= 7. SECTION DESCRIPTION ========================================================= */ .section-desc, .programmes-description, .testimonial-section > p, .blog-section > p, .section-description { font-size: 18px; line-height: 1.7; font-weight: 400; color: var(--text-body); } /* ========================================================= 8. SECTION BADGES ========================================================= */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge, .hero-badge { font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: .5px; } /* ========================================================= 9. CARD HEADINGS ========================================================= */ .feature-card h4, .blog-card h4, .review-card h5, .info-content h5, .info-card h3, .impact-title { font-weight: 700; } /* ========================================================= 10. FEATURE CARD HEADING ========================================================= */ .feature-card h4 { font-size: 19px; line-height: 1.3; } /* ========================================================= 11. FEATURE CARD DESCRIPTION ========================================================= */ .feature-card p { font-size: 14px; line-height: 1.55; } /* ========================================================= 12. IMPACT CARD ========================================================= */ .impact-subtitle { font-size: 13px; font-weight: 700; letter-spacing: .7px; } .impact-title { font-size: 30px; line-height: 1.25; } .impact-item h3 { font-size: 28px; line-height: 1.1; font-weight: 800; } .impact-item p { font-size: 14px; line-height: 1.4; } /* ========================================================= 13. INFORMATION STRIP ========================================================= */ .info-content h5 { font-size: 18px; line-height: 1.3; font-weight: 700; } .info-content p { font-size: 13px; line-height: 1.5; } /* ========================================================= 14. PROGRAMME CARDS ========================================================= */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .program-card p, .programme-card p { font-size: 13px; line-height: 1.55; } /* ========================================================= 15. PROGRAMME COUNTER ========================================================= */ .program-count-card h3 { font-size: 26px; line-height: 1.2; font-weight: 800; } .program-count-card p { font-size: 14px; line-height: 1.5; } /* ========================================================= 16. APPLICATION / GATEWAY SECTION ========================================================= */ .application-section h2, .gateway-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .application-section h4, .gateway-section h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .application-section p, .gateway-section p { font-size: 14px; line-height: 1.55; } /* ========================================================= 17. COMPARISON / WHY ODLC ========================================================= */ .comparison-section h2, .why-odlc-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .comparison-card h3, .stat-card h3 { font-size: 30px; line-height: 1.1; font-weight: 800; } .comparison-card p, .stat-card p { font-size: 13px; line-height: 1.4; font-weight: 500; } /* ========================================================= 18. CERTIFICATION CTA ========================================================= */ .certification-section h2, .skills-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .certification-section p, .skills-section p { font-size: 16px; line-height: 1.65; } /* ========================================================= 19. BOTTOM FEATURE STRIPS ========================================================= */ .feature-strip h4, .bottom-feature h4 { font-size: 16px; line-height: 1.3; font-weight: 700; } .feature-strip p, .bottom-feature p { font-size: 13px; line-height: 1.45; } /* ========================================================= 20. TESTIMONIALS ========================================================= */ .review-card h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } .review-card small { font-size: 12px; } .review-card p { font-size: 14px; line-height: 1.65; } .review-card a { font-size: 13px; font-weight: 600; } /* ========================================================= 21. BLOG ========================================================= */ .blog-card h4 { font-size: 18px; line-height: 1.4; font-weight: 700; } .blog-card p { font-size: 14px; line-height: 1.6; } .blog-category { font-size: 12px; font-weight: 600; } .blog-footer a { font-size: 13px; font-weight: 600; } .date-box h4 { font-size: 18px; line-height: 1; } .date-box span { font-size: 11px; } /* ========================================================= 22. FAQ ========================================================= */ .faq-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .faq-question, .accordion-button { font-size: 16px; line-height: 1.4; font-weight: 600; } .faq-answer, .accordion-body { font-size: 14px; line-height: 1.65; } /* ========================================================= 23. BUTTONS ========================================================= */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 14px; line-height: 1.2; font-weight: 600; } /* ========================================================= 24. HEADER / NAVIGATION ========================================================= */ .navbar-nav .nav-link { font-size: 14px; font-weight: 600; } .navbar-brand { font-size: 18px; font-weight: 700; } /* ========================================================= 25. FOOTER ========================================================= */ footer h4, footer h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } footer p, footer li, footer a { font-size: 13px; line-height: 1.6; } footer .footer-title { font-size: 17px; font-weight: 700; } /* ========================================================= 26. LAPTOP 992px - 1199px ========================================================= */ @media (max-width: 1199px) { .section-title, .programmes-title { font-size: 46px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 42px; } .hero-section h1, .hero-section h2 { font-size: 48px; } .section-desc, .programmes-description { font-size: 17px; } .feature-card h4 { font-size: 18px; } .feature-card p { font-size: 13px; } .blog-card h4 { font-size: 17px; } } /* ========================================================= 27. TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { body { font-size: 15px; } p { font-size: 15px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 40px; line-height: 1.15; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 38px; } .hero-section h1, .hero-section h2 { font-size: 42px; } /* Description */ .section-desc, .programmes-description { font-size: 16px; line-height: 1.7; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 13px; } /* Cards */ .feature-card h4 { font-size: 17px; } .feature-card p { font-size: 13px; } .impact-title { font-size: 26px; } .impact-item h3 { font-size: 25px; } .impact-item p { font-size: 13px; } .blog-card h4 { font-size: 17px; } .blog-card p { font-size: 13px; } .review-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 15px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } } /* ========================================================= 28. MOBILE 576px - 767px ========================================================= */ @media (max-width: 767px) { body { font-size: 15px; } p { font-size: 14px; line-height: 1.65; } /* Main section headings */ .section-title, .programmes-title { font-size: 32px; line-height: 1.18; letter-spacing: -.5px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 32px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 34px; line-height: 1.15; } /* Description */ .section-desc, .programmes-description { font-size: 15px; line-height: 1.65; } /* Badges */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 12px; } /* Feature cards */ .feature-card h4 { font-size: 16px; } .feature-card p { font-size: 12px; line-height: 1.5; } /* Impact */ .impact-title { font-size: 24px; } .impact-item h3 { font-size: 23px; } .impact-item p { font-size: 12px; } /* Programme cards */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 16px; } .program-card p, .programme-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 15px; } .review-card small { font-size: 11px; } .review-card p { font-size: 13px; line-height: 1.6; } /* Blogs */ .blog-card h4 { font-size: 16px; } .blog-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 14px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } /* Footer */ footer h4, footer h5 { font-size: 15px; } footer p, footer li, footer a { font-size: 12px; } } /* ========================================================= 29. SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { body { font-size: 14px; } p { font-size: 14px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 29px; line-height: 1.2; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 29px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 30px; } /* Description */ .section-desc, .programmes-description { font-size: 14px; line-height: 1.65; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 11px; } /* Cards */ .feature-card h4 { font-size: 15px; } .feature-card p { font-size: 12px; } .impact-title { font-size: 22px; } .impact-item h3 { font-size: 21px; } .impact-item p { font-size: 11px; } .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 15px; } .program-card p, .programme-card p { font-size: 12px; } /* Blog */ .blog-card h4 { font-size: 15px; } .blog-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 14px; } .review-card p { font-size: 12px; } /* FAQ */ .faq-question, .accordion-button { font-size: 13px; } .faq-answer, .accordion-body { font-size: 12px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 12px; } /* Footer */ footer h4, footer h5 { font-size: 14px; } footer p, footer li, footer a { font-size: 11px; } } .section-container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* ========================= DESKTOP ========================= */ .section-container { width: 100%; max-width: var(--section-max-width); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* ========================= LAPTOP ========================= */ @media (max-width: 1399px) { .section-container { max-width: 1300px; padding-left: 20px; padding-right: 20px; } } /* ========================= TABLET ========================= */ @media (max-width: 991px) { .section-container { max-width: 100%; padding-left: 15px; padding-right: 15px; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .section-container { padding-left: 10px; padding-right: 10px; } } /* ========================================================= SENIOR SECONDARY HERO ========================================================= */ .senior-hero { width: 100%; margin: 0; padding: 0; background: #062f67; font-family: "Inter", "Segoe UI", Arial, sans-serif; overflow: hidden; } /* ========================================================= MAIN HERO CONTAINER ========================================================= */ .senior-hero-container { position: relative; width: 100%; height: 385px; overflow: hidden; background: #062f67; } /* ========================================================= LEFT CONTENT ========================================================= */ .senior-hero-content { position: relative; z-index: 10; width: 55%; height: 100%; box-sizing: border-box; padding-left: 7%; padding-right: 40px; display: flex; flex-direction: column; justify-content: center; background: #062f67; } /* ========================================================= BREADCRUMB ========================================================= */ .senior-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: #ffffff; font-size: 13px; line-height: 1.4; font-weight: 400; } .senior-breadcrumb i { color: #ffffff; font-size: 13px; } .senior-breadcrumb .bi-chevron-right { font-size: 9px; opacity: 0.8; } /* ========================================================= EDUCATION BADGE ========================================================= */ .senior-education-badge { width: fit-content; display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; margin-bottom: 22px; border-radius: 30px; border: 1px solid rgba(143, 183, 240, 0.45); background: rgba(70, 111, 177, 0.28); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; } .senior-education-badge i { font-size: 15px; color: #ffffff; } /* ========================================================= MAIN HEADING ========================================================= */ .senior-hero-content h1 { max-width: 720px; margin: 0; color: #ffffff; font-size: 54px; line-height: 1.08; font-weight: 800; letter-spacing: -1.2px; } .senior-hero-content h1 span { color: #9dbfff; } /* ========================================================= WHITE ACCENT LINE ========================================================= */ .senior-white-line { width: 45px; height: 3px; margin-top: 25px; background: #ffffff; border-radius: 2px; } /* ========================================================= DESCRIPTION ========================================================= */ .senior-hero-content p { max-width: 610px; margin: 24px 0 0; color: #ffffff; font-size: 18px; line-height: 1.65; font-weight: 400; } /* ========================================================= RIGHT IMAGE ========================================================= */ .senior-hero-image { position: absolute; z-index: 2; top: 0; right: 0; width: 55%; height: 100%; overflow: hidden; } .senior-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ========================================================= LARGE CURVED NAVY SHAPE ========================================================= */ /* This creates the large inward curve visible between the navy section and image. */ /* .senior-hero-image::before { content: ""; position: absolute; z-index: 4; top: -15%; left: -15%; width: 42%; height: 130%; background: #062f67; border-radius: 50%; } */ /* ========================================================= CURVE EDGE ========================================================= */ /* .senior-hero-image::after { content: ""; position: absolute; z-index: 5; top: -15%; left: -27%; width: 42%; height: 130%; border: 1px solid rgba(100, 157, 235, 0.25); border-radius: 50%; pointer-events: none; } */ /* ========================================================= LEFT DOT PATTERN ========================================================= */ .senior-dots { position: absolute; z-index: 12; top: 25px; left: 30px; width: 65px; height: 65px; opacity: 0.65; background-image: radial-gradient( rgba(69, 137, 228, 0.8) 1.4px, transparent 1.4px ); background-size: 12px 12px; } /* ========================================================= TOP ORBIT ========================================================= */ .senior-top-orbit { position: absolute; z-index: 11; top: -55px; left: 48%; width: 115px; height: 115px; border: 1px solid rgba(105, 159, 227, 0.30); border-radius: 50%; pointer-events: none; } .senior-top-orbit span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(105, 159, 227, 0.25); border-radius: 50%; } .senior-top-orbit span:nth-child(1) { width: 75px; height: 75px; } .senior-top-orbit span:nth-child(2) { width: 45px; height: 45px; } .senior-top-orbit span:nth-child(3) { width: 22px; height: 22px; } /* ========================================================= BOTTOM LEFT ORBIT ========================================================= */ .senior-bottom-orbit { position: absolute; z-index: 11; left: -50px; bottom: -60px; width: 145px; height: 145px; border: 3px solid rgba(114, 168, 239, 0.75); border-radius: 50%; } .senior-bottom-orbit::before { content: ""; position: absolute; left: 14px; top: 14px; width: 105px; height: 105px; border: 1px solid rgba(114, 168, 239, 0.35); border-radius: 50%; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .senior-hero-container { height: 360px; } .senior-hero-content { padding-left: 6%; } .senior-hero-content h1 { font-size: 48px; } .senior-hero-content p { font-size: 17px; max-width: 500px; } .senior-hero-image { width: 57%; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 992px) { .senior-hero-container { height: 340px; } .senior-hero-content { width: 56%; padding-left: 5%; } .senior-breadcrumb { font-size: 12px; margin-bottom: 16px; } .senior-education-badge { font-size: 13px; padding: 8px 17px; margin-bottom: 17px; } .senior-hero-content h1 { font-size: 42px; line-height: 1.1; } .senior-hero-content p { font-size: 16px; max-width: 430px; margin-top: 18px; } .senior-hero-image { width: 57%; } .senior-hero-image::before { left: -35%; width: 47%; } .senior-hero-image::after { left: -32%; width: 47%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .senior-hero-container { height: auto; min-height: 0; display: flex; flex-direction: column; } /* LEFT */ .senior-hero-content { width: 100%; height: auto; min-height: 360px; padding: 45px 25px; box-sizing: border-box; justify-content: center; } /* BREADCRUMB */ .senior-breadcrumb { font-size: 11px; gap: 6px; margin-bottom: 18px; } /* BADGE */ .senior-education-badge { font-size: 12px; padding: 8px 16px; margin-bottom: 18px; } /* HEADING */ .senior-hero-content h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.5px; } /* DESCRIPTION */ .senior-hero-content p { font-size: 15px; line-height: 1.55; margin-top: 18px; } /* IMAGE */ .senior-hero-image { position: relative; top: auto; right: auto; width: 100%; height: 280px; order: 2; } /* MOBILE CURVE */ .senior-hero-image::before { top: -35%; left: -15%; width: 130%; height: 65%; border-radius: 50%; } .senior-hero-image::after { display: none; } /* DECORATIONS */ .senior-top-orbit { display: none; } .senior-bottom-orbit { width: 100px; height: 100px; left: -55px; bottom: -50px; } .senior-dots { top: 20px; left: 20px; width: 55px; height: 55px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .senior-hero-content { min-height: 330px; padding: 38px 20px; } .senior-hero-content h1 { font-size: 30px; line-height: 1.15; } .senior-hero-content p { font-size: 14px; } .senior-education-badge { font-size: 11px; padding: 7px 14px; } .senior-hero-image { height: 230px; } } /* ========================================================= PROGRAM OVERVIEW ========================================================= */ .program-overview-section { position: relative; width: 100%; padding: 48px 0; background: #f4f8fd; overflow: hidden; font-family: Arial, Helvetica, sans-serif; } /* ========================================================= MAIN CONTAINER ========================================================= */ .program-overview-container { position: relative; z-index: 2; width: calc(100% - 68px); max-width: 1400px; margin: 0 auto; padding: 48px 34px; box-sizing: border-box; display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: stretch; background: #f7faff; border-radius: 12px; } /* ========================================================= LEFT INTRODUCTION ========================================================= */ .program-overview-intro { display: flex; flex-direction: column; justify-content: center; padding: 0; min-width: 0; } /* ========================================================= SECTION LABEL ========================================================= */ .program-overview-label { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #06459a; font-size: 13px; line-height: 1.3; font-weight: 700; } .program-overview-label-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #06459a; background: #eaf2ff; border-radius: 50%; font-size: 13px; } /* ========================================================= MAIN TITLE ========================================================= */ .program-overview-intro h2 { margin: 0; color: #092f6b; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.4px; } /* ========================================================= YELLOW LINE ========================================================= */ .program-overview-line { width: 34px; height: 3px; margin-top: 17px; margin-bottom: 14px; background: #f3c400; border-radius: 2px; } /* ========================================================= INTRO DESCRIPTION ========================================================= */ .program-overview-intro > p { max-width: 270px; margin: 0; color: #273f61; font-size: 13px; line-height: 1.9; font-weight: 400; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .program-overview-button { width: fit-content; display: inline-flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; padding: 11px 17px; color: #ffffff; background: #063c80; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 700; transition: all 0.25s ease; } .program-overview-button i { font-size: 16px; transition: transform 0.25s ease; } .program-overview-button:hover { color: #ffffff; background: #052f68; } .program-overview-button:hover i { transform: translateX(4px); } /* ========================================================= CARDS CONTAINER ========================================================= */ .program-overview-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 0; } /* ========================================================= INDIVIDUAL CARD ========================================================= */ .program-overview-card { position: relative; min-width: 0; min-height: 340px; padding: 30px 16px 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; background: #ffffff; border: 1px solid #e6edf7; border-radius: 14px; box-shadow: 0 7px 22px rgba(21, 70, 130, 0.08); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .program-overview-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(21, 70, 130, 0.13); } /* ========================================================= CARD ICON ========================================================= */ .program-card-icon { width: 76px; height: 76px; margin: 0 auto 17px; display: flex; align-items: center; justify-content: center; color: #063c80; background: #edf4ff; border-radius: 50%; font-size: 30px; } /* ========================================================= CARD NUMBER ========================================================= */ .program-card-number { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; padding: 0 7px; margin-bottom: 10px; box-sizing: border-box; color: #06459a; background: #edf4ff; border-radius: 50px; font-size: 11px; line-height: 1; font-weight: 700; } /* ========================================================= CARD TITLE ========================================================= */ .program-overview-card h3 { margin: 0; color: #063c80; font-size: 15px; line-height: 1.35; font-weight: 700; } /* ========================================================= CARD YELLOW LINE ========================================================= */ .program-card-line { width: 30px; height: 3px; margin-top: 12px; margin-bottom: 15px; background: #f3c400; border-radius: 2px; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .program-overview-card p { margin: 0; color: #304867; font-size: 13px; line-height: 1.95; font-weight: 400; } /* ========================================================= DOT DECORATION ========================================================= */ .program-overview-dots { position: absolute; z-index: 1; top: 55px; right: 5px; width: 62px; height: 80px; opacity: 0.55; background-image: radial-gradient( #9dbcf0 1.5px, transparent 1.5px ); background-size: 11px 11px; } /* ========================================================= BOTTOM RIGHT CIRCLES ========================================================= */ .program-overview-circle { position: absolute; right: -42px; bottom: -48px; width: 145px; height: 145px; border: 1px solid rgba(88, 137, 207, 0.18); border-radius: 50%; z-index: 1; } .program-overview-circle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(88, 137, 207, 0.13); border-radius: 50%; } .program-overview-circle span:nth-child(1) { width: 105px; height: 105px; } .program-overview-circle span:nth-child(2) { width: 72px; height: 72px; } .program-overview-circle span:nth-child(3) { width: 40px; height: 40px; background: rgba(101, 154, 224, 0.06); } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1400px) { .program-overview-container { width: calc(100% - 68px); padding: 48px 34px; grid-template-columns: 280px 1fr; } .program-overview-card { min-height: 340px; padding-left: 16px; padding-right: 16px; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .program-overview-container { width: calc(100% - 50px); grid-template-columns: 260px 1fr; gap: 18px; padding: 40px 25px; } .program-overview-cards { gap: 12px; } .program-overview-card { min-height: 325px; padding: 25px 14px 22px; } .program-card-icon { width: 70px; height: 70px; font-size: 27px; } .program-overview-intro h2 { font-size: 28px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 992px) { .program-overview-section { padding: 40px 0; } .program-overview-container { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 28px; padding: 38px 28px; } .program-overview-intro { align-items: center; text-align: center; } .program-overview-intro > p { max-width: 650px; } .program-overview-line { margin-left: auto; margin-right: auto; } .program-overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .program-overview-card { min-height: 290px; padding: 25px 20px; } .program-card-icon { margin-left: auto; margin-right: auto; } .program-card-number { margin-top: 2px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .program-overview-section { padding: 30px 0; } .program-overview-container { width: calc(100% - 30px); padding: 30px 20px; border-radius: 10px; gap: 24px; } .program-overview-intro h2 { font-size: 26px; } .program-overview-label { font-size: 12px; } .program-overview-intro > p { font-size: 13px; line-height: 1.8; } .program-overview-cards { grid-template-columns: 1fr; gap: 14px; } .program-overview-card { min-height: auto; padding: 28px 24px; align-items: flex-start; } .program-card-icon { width: 68px; height: 68px; margin-left: 0; margin-right: 0; font-size: 27px; } .program-overview-card h3 { font-size: 15px; } .program-overview-card p { font-size: 12px; line-height: 1.8; } .program-overview-dots { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .program-overview-container { width: calc(100% - 20px); padding: 28px 16px; } .program-overview-intro h2 { font-size: 24px; } .program-overview-button { font-size: 11px; padding: 10px 15px; } .program-overview-card { padding: 24px 20px; } } /* ========================================================= CONTAINER ========================================================= */ .pom-container { width: calc(100% - 80px); max-width: 1440px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .pom-header { text-align: center; margin-bottom: 48px; } .pom-heading-top { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 10px; } .pom-heading-top span { width: 90px; height: 2px; background: #0b55bd; } .pom-cap-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; color: #0b55bd; font-size: 22px; box-shadow: 0 6px 20px rgba(8, 60, 124, 0.12); } .pom-eyebrow { margin-bottom: 4px; color: #4b73d7; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; } .pom-header h2 { margin: 0; color: #071f52; font-size: clamp(34px, 4vw, 48px); line-height: 1.15; font-weight: 700; } .pom-header h2::after { content: ""; display: block; width: 42px; height: 4px; margin: 14px auto 12px; background: #155bd1; border-radius: 5px; } .pom-header p { margin: 0; color: #667795; font-size: 15px; } /* ========================================================= SUBJECT SELECTION & SUBJECT STRUCTURE ========================================================= */ .ss-subject-section { width: 100%; padding: 55px 0; background: #f7faff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; } .ss-subject-container { width: calc(100% - 68px); max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; } /* ========================================================= LEFT GUIDELINES ========================================================= */ .ss-guidelines { padding-top: 5px; } .ss-section-label { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: #06459a; font-size: 13px; font-weight: 700; } .ss-label-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #06459a; background: #eaf2ff; font-size: 13px; } .ss-guidelines h4 { margin: 0; color: #092f6b; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.4px; } .ss-title-line { width: 38px; height: 3px; margin: 16px 0 17px; background: #f3c400; border-radius: 2px; } /* ========================================================= GUIDELINE BOX ========================================================= */ .ss-guideline-list { padding: 8px 17px; background: #ffffff; border: 1px solid #e6edf7; border-radius: 12px; box-shadow: 0 7px 22px rgba(21, 70, 130, 0.07); } .ss-guideline-item { display: flex; align-items: flex-start; gap: 13px; padding: 17px 0; border-bottom: 1px solid #e6edf7; } .ss-guideline-item:last-child { border-bottom: none; } .ss-guideline-icon { flex: 0 0 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #06459a; border-radius: 50%; font-size: 13px; } .ss-guideline-item p { margin: 0; color: #304867; font-size: 12px; line-height: 1.65; } /* ========================================================= LEARNING PATH ========================================================= */ .ss-learning-path { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 20px 18px; background: #eef4ff; border-radius: 12px; } .ss-learning-icon { flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #06459a; border-radius: 50%; font-size: 18px; } .ss-learning-path h4 { margin: 2px 0 7px; color: #06459a; font-size: 12px; font-weight: 700; } .ss-learning-path p { margin: 0; color: #304867; font-size: 11px; line-height: 1.55; } /* ========================================================= SUBJECT STRUCTURE ========================================================= */ .ss-subject-structure { min-width: 0; } .ss-structure-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .ss-structure-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #06459a; background: #eaf2ff; border-radius: 50%; font-size: 30px; } .ss-structure-heading > div:last-child { display: flex; flex-direction: column; } .ss-structure-heading span { color: #06459a; font-size: 30px; font-weight: 700; } .ss-structure-line { width: 35px; height: 3px; margin-top: 8px; background: #f3c400; border-radius: 2px; } /* ========================================================= TWO TABLES ========================================================= */ .ss-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; } /* ========================================================= SUBJECT BOX ========================================================= */ .ss-subject-box { min-width: 0; background: #ffffff; border: 1px solid #e2eaf5; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(21, 70, 130, 0.08); } /* ========================================================= BLUE TABLE TITLE ========================================================= */ .ss-table-title { min-height: 66px; padding: 12px 15px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; color: #ffffff; background: linear-gradient( 135deg, #0b43a1, #073b8d ); } .ss-table-title-icon { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #06459a; background: #ffffff; border-radius: 50%; font-size: 15px; } .ss-table-title h3 { margin: 0; color: #ffffff; font-size: 20px !important; line-height: 1.3; font-weight: 700; } .ss-table-title p { margin: 3px 0 0; color: #ffffff; font-size: 11px; line-height: 1.3; } /* ========================================================= TABLE HEADER ========================================================= */ .ss-table-header { height: 73px; display: grid; grid-template-columns: 82px 105px minmax(0, 1fr); align-items: center; padding: 0 12px; box-sizing: border-box; color: #06459a; background: #f3f7fd; border-bottom: 1px solid #dfe8f5; font-size: 10px; font-weight: 700; } /* ========================================================= IMPORTANT: INDEPENDENT SCROLLING FOR EACH GROUP ========================================================= */ .ss-table-scroll { height: 420px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #7da4df #edf3fb; } /* Chrome / Edge scrollbar */ .ss-table-scroll::-webkit-scrollbar { width: 7px; } .ss-table-scroll::-webkit-scrollbar-track { background: #edf3fb; } .ss-table-scroll::-webkit-scrollbar-thumb { background: #7da4df; border-radius: 10px; } .ss-table-scroll::-webkit-scrollbar-thumb:hover { background: #06459a; } /* ========================================================= TABLE ========================================================= */ .ss-subject-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .ss-subject-table td { padding: 11px 12px; color: #304867; border-bottom: 1px solid #e0e8f4; font-size: 11px; line-height: 1.55; vertical-align: middle; word-wrap: break-word; } /* CODE */ .ss-subject-table td:first-child { width: 82px; color: #06459a; text-align: center; font-weight: 700; } /* NAME */ .ss-subject-table td:nth-child(2) { width: 105px; color: #092f6b; font-weight: 700; } /* DESCRIPTION */ .ss-subject-table td:nth-child(3) { color: #304867; } /* ALTERNATING ROW */ .ss-subject-table tbody tr:nth-child(even) { background: #f5f8fd; } .ss-subject-table tbody tr:hover { background: #edf4ff; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .ss-subject-container { width: calc(100% - 50px); grid-template-columns: 250px 1fr; gap: 20px; } .ss-table-grid { gap: 16px; } .ss-table-header { grid-template-columns: 72px 95px minmax(0, 1fr); font-size: 9px; } .ss-subject-table td { padding: 10px 9px; font-size: 10px; } .ss-subject-table td:first-child { width: 92px; } .ss-subject-table td:nth-child(2) { width: 115px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 992px) { .ss-subject-section { padding: 45px 0; } .ss-subject-container { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 30px; } .ss-guidelines { max-width: 700px; width: 100%; margin: 0 auto; } .ss-subject-structure { width: 100%; } .ss-table-grid { grid-template-columns: 1fr; gap: 25px; } .ss-table-scroll { height: 400px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ss-subject-section { padding: 35px 0; } .ss-subject-container { width: calc(100% - 30px); gap: 25px; } .ss-guidelines h2 { font-size: 26px; } .ss-section-label { font-size: 12px; } .ss-guideline-item p { font-size: 12px; } .ss-table-grid { gap: 20px; } .ss-table-title { min-height: 62px; padding: 11px 13px; } .ss-table-title h3 { font-size: 13px; } .ss-table-title p { font-size: 10px; } .ss-table-header { grid-template-columns: 80px 125px minmax(170px, 1fr); min-width: 400px; } .ss-table-scroll { height: 350px; overflow-x: auto; } .ss-subject-table { min-width: 400px; } .ss-subject-table td { font-size: 10px; padding: 10px 8px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .ss-subject-container { width: calc(100% - 20px); } .ss-guidelines h2 { font-size: 24px; } .ss-table-scroll { height: 330px; } .ss-table-header { min-width: 390px; } .ss-subject-table { min-width: 390px; } } /* ========================================================= ASSESSMENT & CERTIFICATION ========================================================= */ .assessment-section { width: 100%; padding: 55px 0; background: #f7faff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; } .assessment-container { width: calc(100% - 68px); max-width: 1400px; margin: 0 auto; } /* ========================================================= SECTION HEADING ========================================================= */ .assessment-heading { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; color: #06459a; font-size: 30px; font-weight: 700; text-align: center; } .assessment-heading-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 7px; color: #06459a; background: #eaf2ff; border-radius: 50%; font-size: 30px; } .assessment-heading-line { width: 32px; height: 3px; margin-top: 8px; background: #f3c400; border-radius: 3px; } /* ========================================================= MAIN CARD ========================================================= */ .assessment-card { width: 100%; min-height: 155px; margin-bottom: 18px; display: grid; grid-template-columns: 135px minmax(0, 1fr) 250px; align-items: center; background: #ffffff; border: 1px solid #e5edf8; border-radius: 14px; box-shadow: 0 7px 24px rgba(20, 70, 130, 0.08); overflow: hidden; } /* ========================================================= LEFT ICON AREA ========================================================= */ .assessment-icon-area { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .assessment-icon-area::after { content: ""; position: absolute; right: 0; top: 25px; bottom: 25px; width: 1px; background: #dce7f5; } .assessment-icon-circle { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; color: #06459a; background: #edf4ff; border-radius: 50%; font-size: 30px; } /* ========================================================= CENTER CONTENT ========================================================= */ .assessment-content { min-width: 0; padding: 22px 25px; } .assessment-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 7px; } .assessment-number { padding-top: 3px; color: #c9d8f3; font-size: 21px; line-height: 1; font-weight: 700; } .assessment-title-row h3 { margin: 0; color: #092f6b; font-size: 20px; line-height: 1.25; font-weight: 700; } .assessment-small-line { width: 32px; height: 3px; margin-top: 9px; background: #f3c400; border-radius: 3px; } .assessment-description { max-width: 700px; margin: 12px 0 0; color: #304867; font-size: 14px; line-height: 1.65; } /* ========================================================= RIGHT IMAGE ========================================================= */ .assessment-image { height: 100%; min-height: 155px; display: flex; align-items: center; justify-content: center; padding: 12px 20px; } .assessment-image-circle { width: 170px; height: 130px; display: flex; align-items: center; justify-content: center; border: 1px dashed #dce8fa; border-radius: 50%; background: rgba(244, 248, 255, 0.65); } .assessment-image img { max-width: 145px; max-height: 115px; width: auto; height: auto; object-fit: contain; display: block; } /* ========================================================= CERTIFICATION POINTS ========================================================= */ .certification-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 35px; row-gap: 9px; margin-top: 10px; } .certification-points div { display: flex; align-items: flex-start; gap: 8px; color: #304867; font-size: 13px; line-height: 2.15; } .certification-points i { flex: 0 0 auto; margin-top: 1px; color: #0b57c7; font-size: 14px; } /* ========================================================= PASSING CRITERIA ========================================================= */ .passing-criteria { max-width: 540px; min-height: 40px; margin-top: 12px; padding: 8px 12px; display: flex; align-items: center; font-size: 13px; gap: 10px; background: #edf4ff; border-radius: 8px; } .passing-icon { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; color: #06459a; background: #ffffff; border-radius: 6px; font-size: 13px; } .passing-criteria p { margin: 0; color: #304867; font-size: 11px; line-height: 1.4; } .passing-criteria strong { color: #092f6b; } /* ========================================================= ADDITIONAL ACADEMIC PROVISIONS ========================================================= */ .academic-provision { margin-top: 4px; } .provision-title { display: flex; /* align-items: center; */ gap: 9px; margin-bottom: 5px; color: #06459a; font-size: 14px; } .provision-title i { width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #06459a; border-radius: 5px; font-size: 11px; } .provision-description { margin: 0 0 6px; color: #304867; font-size: 14px; line-height: 1.5; } .provision-points { display: flex; flex-direction: column; gap: 5px; } .provision-points div { display: flex; align-items: center; gap: 7px; line-height: 2.15 !important; color: #304867; font-size: 13px; } .provision-points i { color: #7ba9ed; font-size: 12px; } .learning-materials { margin: 7px 0 0; color: #304867; font-size: 13px; line-height: 1.5; } .learning-materials strong { color: #092f6b; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .assessment-container { width: calc(100% - 50px); } .assessment-card { grid-template-columns: 110px minmax(0, 1fr) 210px; } .assessment-icon-circle { width: 65px; height: 65px; font-size: 26px; } .assessment-image-circle { width: 145px; height: 115px; } .assessment-image img { max-width: 125px; max-height: 100px; } } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width: 850px) { .assessment-card { grid-template-columns: 90px minmax(0, 1fr); position: relative; padding-right: 20px; } .assessment-image { display: none; } .assessment-icon-circle { width: 60px; height: 60px; font-size: 24px; } .assessment-content { padding: 20px 20px; } .certification-points { column-gap: 20px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .assessment-section { padding: 40px 0; } .assessment-container { width: calc(100% - 30px); } .assessment-heading { font-size: 12px; margin-bottom: 18px; } .assessment-card { grid-template-columns: 1fr; margin-bottom: 15px; min-height: auto; } .assessment-icon-area { height: auto; padding: 18px 0 0; } .assessment-icon-area::after { display: none; } .assessment-icon-circle { width: 58px; height: 58px; font-size: 23px; } .assessment-content { padding: 15px 18px 20px; } .assessment-title-row h3 { font-size: 18px; } .assessment-number { font-size: 18px; } .assessment-description { font-size: 11px; line-height: 1.6; } .certification-points { grid-template-columns: 1fr; gap: 8px; } .certification-points div { font-size: 11px; } .passing-criteria { width: 100%; box-sizing: border-box; } .provision-title { font-size: 12px; } .provision-description { font-size: 10px; } .provision-points div { font-size: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .assessment-container { width: calc(100% - 20px); } .assessment-title-row { gap: 8px; } .assessment-title-row h3 { font-size: 17px; } .assessment-number { font-size: 17px; } } /* REMOVE DOTS FROM SENIOR SECONDARY BANNER */ .senior-dots { display: none !important; } /* ============================================================================ THE GRADE 12 BANNER TAKEN OFF THE GRADE 10 BANNER ---------------------------------------------------------------------------- The Grade 10 banner is the reference. Its markup is a flex row - content on the left, a photograph in a curved shape on the right - and so is this one, but this page wrote it out again with its own arithmetic. Measured on the live pages at a 1000px viewport, side by side: Grade 10 Grade 12 h1 size 40px / 1.08 / 800 48px / 1.08 / 800 h1 letter-spacing -1px -1.2px h1 case UPPERCASE as typed h1 typeface Roboto -> Arial Inter -> Segoe UI h1 measure 600px 720px h1 second line #a9c7ff #9dbfff badge type 15px / 1.3 Arial 14px / 1.6 Inter badge padding 10px 18px 10px 22px badge gap 9px 10px badge fill rgba(255,255,255,.10) rgba(70,111,177,.28) badge border rgba(255,255,255,.35) rgba(143,183,240,.45) badge box 213.9 x 41.1 257.4 x 45.6 rule 36 x 3 24/20 r10 45 x 3 25/0 r2 description 16px / 1.75 ls .2px 17px / 1.65 ls normal description measure 650px 500px description margin 0 0 30px 0 24px 0 0 0 row flex, align centre display block section min-height 430px 0 section fill #062d5c #062f67 photo shape ellipse(70% 90% none at 72% 50%) badge left vs logo -0.0px +29.5px The badge sits 29.5px right of the header logo because .senior-hero-content carries padding-left 7% of its own column. Grade 10 puts the gutter on the section instead and zeroes the content padding, so the badge starts on the logo edge at every width - that is what the padding-left below does, with the same four-step ladder the header uses. THE THREE DECORATIONS ARE SWITCHED OFF .senior-dots, .senior-top-orbit and .senior-bottom-orbit are faded circles over the navy. The Grade 10 banner has no decoration on it - the three equivalents in that page are commented out in its markup - and two of these three sit across the photograph. They are hidden rather than deleted, so the elements stay in the page and one declaration brings them back. SCOPE Style only. No markup, no text, no image file and no attribute is touched, and no rule above this point in the file is edited. The photograph stays images/about21.png; it keeps bleeding off the right edge, which it already did - measured 0.2px from the screen edge on both pages - and it now reaches the top and bottom of the banner as well. NOT THE SECTION WIDTHS The three section containers on this page measure 25.0 to 959.8 at a 1000px viewport and the header measures 29.5 to 952.5, so they are 4.5px outside the header on each side. The Grade 10 page was put on the header's own column in an earlier change. That is a separate job and is not done here. ============================================================================ */ .senior-hero { box-sizing: border-box !important; min-height: 455px !important; overflow: hidden !important; /* background: #062d5c !important; */ padding-left: max(4%, calc((100% - 1380px) / 2)) !important; padding-right: 0 !important; } .senior-hero-container { display: flex !important; align-items: center !important; width: 100% !important; min-height: 455px !important; position: relative !important; overflow: hidden !important; } .senior-hero-content { width: 52% !important; padding: 65px 40px 65px 0 !important; position: relative !important; z-index: 5 !important; } .senior-hero-image { width: 58% !important; position: relative !important; align-self: stretch !important; overflow: hidden !important; border-radius: 0 !important; clip-path: ellipse(70% 90% at 72% 50%) !important; } .senior-hero-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important; } /* ---------- badge = .odlc-custom-banner-badge ---------- */ .senior-education-badge { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; color: #ffffff !important; gap: 10px !important; padding: 11px 20px !important; margin-bottom: 25px !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* ---------- h1 = .odlc-custom-hero-title ---------- */ .senior-hero-content h1 { font-family: Roboto, Arial, sans-serif !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-transform: uppercase !important; color: #ffffff !important; text-align: left !important; max-width: 600px !important; margin: 0 !important; } .senior-hero-content h1 span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #a9c7ff !important; } /* ---------- the short rule = .secondary-banner-line ---------- */ .senior-white-line { width: 36px !important; height: 3px !important; margin: 24px 0 20px !important; border-radius: 10px !important; background: #ffffff !important; } /* ---------- description = .hero-description ---------- */ .senior-hero-content p { font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0.2px !important; color: rgba(255, 255, 255, 0.90) !important; text-align: left !important; max-width: 650px !important; margin: 0 0 30px 0 !important; } /* ---------- the three decorations ---------- */ .senior-hero .senior-dots, .senior-hero .senior-top-orbit, .senior-hero .senior-bottom-orbit { display: none !important; } /* ========================= 1199px ========================= */ @media screen and (max-width: 1199px) { .senior-hero { min-height: 430px !important; padding-left: max(3%, calc((100% - 1380px) / 2)) !important; } .senior-hero-container { min-height: 430px !important; } .senior-education-badge { font-size: 15px !important; gap: 9px !important; padding: 10px 18px !important; margin-bottom: 22px !important; } .senior-hero-content h1 { font-size: 40px !important; } .senior-hero-content p { font-size: 16px !important; line-height: 1.75 !important; } } /* ========================= 991px ========================= */ @media screen and (max-width: 991px) { .senior-hero { min-height: 390px !important; } .senior-hero-container { min-height: 390px !important; } .senior-hero-content { width: 55% !important; padding: 50px 25px 50px 0 !important; } .senior-hero-image { width: 57% !important; } .senior-education-badge { font-size: 14px !important; line-height: 1.35 !important; gap: 8px !important; padding: 9px 17px !important; margin-bottom: 20px !important; } .senior-hero-content h1 { font-size: 36px !important; line-height: 1.10 !important; letter-spacing: -0.8px !important; } .senior-hero-content p { max-width: 430px !important; font-size: 16px !important; line-height: 1.65 !important; } } /* ========================= 767px ========================= */ @media screen and (max-width: 767px) { .senior-hero { min-height: auto !important; background: #062d5c !important; padding-left: max(5%, calc((100% - 1380px) / 2)) !important; } .senior-hero-container { min-height: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .senior-hero-image { order: 1 !important; width: 100% !important; height: 260px !important; align-self: auto !important; clip-path: none !important; } .senior-hero-content { order: 2 !important; width: 100% !important; padding: 38px 25px 50px !important; } .senior-education-badge { font-size: 13px !important; line-height: 1.35 !important; gap: 8px !important; padding: 8px 15px !important; margin-bottom: 18px !important; } .senior-hero-content h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; } .senior-hero-content p { max-width: 100% !important; font-size: 15px !important; line-height: 1.6 !important; } } /* ========================= 575px ========================= */ @media screen and (max-width: 575px) { .senior-education-badge { font-size: 12px !important; line-height: 1.4 !important; gap: 7px !important; padding: 7px 13px !important; margin-bottom: 16px !important; } .senior-hero-content h1 { font-size: 30px !important; line-height: 1.10 !important; letter-spacing: -0.6px !important; } .senior-hero-content p { font-size: 14px !important; line-height: 1.6 !important; } } /* ========================= 480px ========================= */ @media screen and (max-width: 480px) { .senior-hero { padding-left: max(4%, calc((100% - 1380px) / 2)) !important; } .senior-hero-image { height: 220px !important; } .senior-hero-content { padding: 32px 20px 42px !important; } .senior-education-badge { font-size: 11px !important; line-height: 1.4 !important; gap: 6px !important; padding: 6px 12px !important; margin-bottom: 14px !important; } .senior-hero-content h1 { font-size: 29px !important; line-height: 1.10 !important; letter-spacing: -0.4px !important; } .senior-white-line { width: 30px !important; height: 3px !important; margin: 16px 0 !important; } .senior-hero-content p { font-size: 12px !important; line-height: 1.7 !important; } } /* ============================================================================ THE BADGE STAYS ON THE LOGO EDGE AT EVERY WIDTH ---------------------------------------------------------------------------- On the Grade 10 page the banner content carries one rule outside every media query: .secondary-banner.cxbnr .secondary-banner-content { padding-left: 0 !important; } which is what holds the badge on the header's logo edge from 1600px down to 320px. The block above writes .senior-hero-content at four tiers, and the 767px tier gives it padding: 38px 25px 50px - which puts 25px of its own back on the left. Measured at a 682px viewport: Grade 10 content padding-left 0px badge DELTA -0.0px Grade 12 content padding-left 25px badge DELTA +25.0px One declaration, outside every query, so the tier that needs a left inset for its own rhythm cannot reintroduce one. The right-hand 25px and the 38px top and 50px bottom of that tier are untouched. ============================================================================ */ .senior-hero-content { padding-left: 0 !important; } /* ============================================================================ THE THREE BODY SECTIONS ON THE GLOBAL TYPE SCALE ---------------------------------------------------------------------------- The same treatment the Grade 10 page was given, applied to this page's three remaining sections. Each element is mapped to the role it plays and given that role's values and that role's own phone ladder, so that the two programme pages read as one set. section heading -> .odlc-section-title 38 / 1.2 / 700 body copy -> .odlc-body-text 16 / 1.7 card and item title -> .odlc-small-card-title 17 / 1.35 / 700 eyebrow label -> .odlc-section-eyebrow 12 / 1.2 / 700 / ls 2px MEASURED ON THE LIVE PAGE, before this, at 1000px element was the scale says .program-overview-intro h2 28 / 700 38 / 700 .program-overview-label span 13 / 700 12 / ls 2px, upper .program-overview-card h3 15 / 700 17 / 700 .program-overview-card p 13 / 1.95 16 / 1.7 .program-overview-intro p and strong 13 / 1.9 16 / 1.7 .ss-guideline-item strong 12 / 1.65 16 / 1.7 .ss-structure-heading span 30 12, ls 2px, upper .ss-table-title h3 20 / 700 17 / 700 .ss-table-title p 11 / 1.3 16 / 1.7 .ss-subject-table td 10 / 1.55 16 / 1.7 .assessment-heading span 30 12, ls 2px, upper .assessment-title-row h3 20 / 700 17 / 700 .assessment-description 14 / 1.65 16 / 1.7 .passing-criteria strong 11 / 1.4 16 / 1.7 .provision-description 14 / 1.5 16 / 1.7 .learning-materials strong 13 / 1.5 16 / 1.7 Two of these are the worst of the lot. The two eyebrow labels were set at 30px - the same size as a section heading - for the words "SUBJECT STRUCTURE" and "ASSESSMENT & CERTIFICATION", and the subject table was set at 10px, which is the smallest type anywhere on either page. BODY COPY IS HELD AT 16px AT EVERY WIDTH .odlc-body-text steps to 15px at 991px and 14px at 575px. On the Grade 10 page body copy was pinned at 16px as asked, and it is pinned here too so the two pages behave the same. Everything else follows its own ladder. THE TABLE IS HELD AT 16px FOR THE SAME REASON The scale has no table role, and the Grade 10 tables were put at 16px on request. This table joins them. It has no th - 34 td cells and no th in the markup - so only the cells are named. NOT TOUCHED .program-card-number, the "01" through "04" in pale blue behind each card, which is a decorative numeral and has no role in the scale. The icon circles, every colour, every measure, every spacing value, all four cards' contents, the eight subject rows and both assessment panels keep what they have. The footer CTA is part of footer.php and is shared across the site. Nothing above this point in the file is edited. Every value overrides. ============================================================================ */ /* ---------- SECTION HEADING ROLE : .odlc-section-title ---------- */ .program-overview-section .program-overview-intro h2 { font-family: Arial, Helvetica, sans-serif !important; font-size: 38px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } @media screen and (max-width: 1199px) { .program-overview-section .program-overview-intro h2 { font-size: 36px !important; } } @media screen and (max-width: 991px) { .program-overview-section .program-overview-intro h2 { font-size: 34px !important; line-height: 1.15 !important; } } @media screen and (max-width: 767px) { .program-overview-section .program-overview-intro h2 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -0.4px !important; } } @media screen and (max-width: 575px) { .program-overview-section .program-overview-intro h2 { font-size: 29px !important; line-height: 1.15 !important; letter-spacing: -0.3px !important; } } /* ---------- CARD AND ITEM TITLE ROLE : .odlc-small-card-title ---------- */ .program-overview-section .program-overview-card h3, .ss-subject-section .ss-table-title h3, .assessment-section .assessment-title-row h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; } @media screen and (max-width: 1199px) { .program-overview-section .program-overview-card h3, .ss-subject-section .ss-table-title h3, .assessment-section .assessment-title-row h3 { font-size: 16px !important; } } @media screen and (max-width: 991px) { .program-overview-section .program-overview-card h3, .ss-subject-section .ss-table-title h3, .assessment-section .assessment-title-row h3 { font-size: 16px !important; line-height: 1.4 !important; } } @media screen and (max-width: 767px) { .program-overview-section .program-overview-card h3, .ss-subject-section .ss-table-title h3, .assessment-section .assessment-title-row h3 { font-size: 15px !important; line-height: 1.4 !important; } } @media screen and (max-width: 575px) { .program-overview-section .program-overview-card h3, .ss-subject-section .ss-table-title h3, .assessment-section .assessment-title-row h3 { font-size: 15px !important; line-height: 1.4 !important; } } @media screen and (max-width: 480px) { .program-overview-section .program-overview-card h3, .ss-subject-section .ss-table-title h3, .assessment-section .assessment-title-row h3 { font-size: 14px !important; line-height: 1.4 !important; } } /* ---------- EYEBROW LABEL ROLE : .odlc-section-eyebrow ---------- */ .program-overview-section .program-overview-label span, .ss-subject-section .ss-structure-heading span, .assessment-section .assessment-heading span { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } @media screen and (max-width: 991px) { .program-overview-section .program-overview-label span, .ss-subject-section .ss-structure-heading span, .assessment-section .assessment-heading span { font-size: 11px !important; letter-spacing: 1.5px !important; } } @media screen and (max-width: 575px) { .program-overview-section .program-overview-label span, .ss-subject-section .ss-structure-heading span, .assessment-section .assessment-heading span { font-size: 10px !important; letter-spacing: 1.2px !important; } } /* ---------- BODY COPY ROLE : .odlc-body-text, held at 16px at every width ---------- */ .program-overview-section .program-overview-intro p, .program-overview-section .program-overview-intro strong, .program-overview-section .program-overview-card p, .ss-subject-section .ss-guideline-item p, .ss-subject-section .ss-guideline-item strong, .ss-subject-section .ss-table-title p, .ss-subject-section .ss-table-header strong, .ss-subject-section .ss-subject-table td, .assessment-section .assessment-description, .assessment-section .certification-points p, .assessment-section .passing-criteria strong, .assessment-section .passing-criteria p, .assessment-section .provision-title p, .assessment-section .provision-description, .assessment-section .learning-materials strong, .assessment-section .learning-materials p { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; } /* ============================================================================ THE SHORT RULE UNDER THE HEADING WAS BEING SQUASHED TO ZERO ---------------------------------------------------------------------------- .senior-white-line is an empty div, so it has no content to give ground. It is a flex item of .senior-hero-content, which on this page is a flex column with a fixed height - measured 390px at a 912px viewport - and the default flex-shrink of 1 let the browser take the 3px bar down to nothing when the column ran out of room: box 36.0 x 0.0 computed height 0px flex 0 1 auto The Grade 10 bar measures 36 x 3 at the same width, because nothing shrinks it there. flex-shrink: 0 gives the bar back its 3px. It is the only item in that column that this affects - the badge, the heading and the sentence all carry their own height and were measured at their full size throughout. Nothing else is changed. The rule's width, height, margins, radius and colour are as the block above set them. ============================================================================ */ .senior-white-line { flex-shrink: 0 !important; } /* ============================================================================ "SUBJECT SELECTION GUIDELINES" TAKEN OFF THE OTHER HEADINGS ---------------------------------------------------------------------------- This heading was left out of the block above because it is not a heading the scan found - the words sit inside a within an

, so the element that carries the text is the , not the

. Measured against the one other section heading on this page: .program-overview-intro h2 .ss-guidelines h4 912px viewport 34 / 1.15 700 -0.5px 30 / 1.20 700 -0.4px h4 > b - 30 / 1.20 900 -0.4px The colour already matched - both are #092F6B - and the typeface already matched - both ask for Arial. Three things did not: the size and its line box, the letter-spacing, and the , which the browser's bolder had taken from 700 to 900. It is given the same role and the same ladder as the other heading: 38px / 1.2 / 700 / ls -0.5px default 36px 1199px and below 34px / 1.15 991px and below 32px / 1.15 / ls -0.4px 767px and below 29px / 1.15 / ls -0.3px 575px and below The inside it is named as well as the

, because it carries the text and carries its own weight. NOT TOUCHED The yellow rule under the heading, .ss-title-line at 38 x 3px in #F3C400. It is a coloured shape, not type, and the two other rules on this page are blue - if those are to match as well that is a different change and it is not made here. THE TWO GROUP BOXES NEED NOTHING They are already level. .ss-table-grid is a grid with align-items:stretch, and each box holds the same fixed 420px table scroller under the same 75.8px title, so both boxes take the same height whatever the two tables contain - Group A scrolls 2254px of rows and Group B 3765px at a 1182px viewport and the boxes measure the same to the tenth of a pixel: viewport box 1 bottom box 2 bottom difference 1542 1971.3 1971.3 0.0px 1182 1951.3 1951.3 0.0px 1000 1972.7 1972.7 0.0px Below 800px the grid becomes one column and they stack, which is not a misalignment. What varies between them is how many rows are visible inside the 420px scroller, which is a scroll position and not a height. ============================================================================ */ .ss-subject-section .ss-guidelines h4, .ss-subject-section .ss-guidelines h4 b { font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; } .ss-subject-section .ss-guidelines h4, .ss-subject-section .ss-guidelines h4 b { /* font-size: 38px !important; */ line-height: 1.2 !important; letter-spacing: -0.5px !important; } @media screen and (max-width: 1199px) { .ss-subject-section .ss-guidelines h4, .ss-subject-section .ss-guidelines h4 b { font-size: 36px !important; } } @media screen and (max-width: 991px) { .ss-subject-section .ss-guidelines h4, .ss-subject-section .ss-guidelines h4 b { font-size: 34px !important; line-height: 1.15 !important; } } @media screen and (max-width: 767px) { .ss-subject-section .ss-guidelines h4, .ss-subject-section .ss-guidelines h4 b { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -0.4px !important; } } @media screen and (max-width: 575px) { .ss-subject-section .ss-guidelines h4, .ss-subject-section .ss-guidelines h4 b { font-size: 29px !important; line-height: 1.15 !important; letter-spacing: -0.3px !important; } } /* ============================================================================ THE THREE PANELS OF THE SUBJECT SECTION PUT ON ONE LINE ---------------------------------------------------------------------------- Subject Selection Guidelines | Group A | Group B These were three boxes of three different heights, ending on three different lines. Measured at a 1000px viewport before this block: Subject Selection Guidelines top 1314.7 bottom 2130.9 h 816.2 Group A top 1380.7 bottom 1972.7 h 592.0 Group B top 1380.7 bottom 1972.7 h 592.0 bottom spread 158.2px WHY THEY COULD NOT LEVEL ON THEIR OWN Two separate things were holding them apart. One, the grid. .ss-subject-container was align-items:start, so each column took its own content and nobody waited for anybody else. Two, and this is the part that matters - .ss-subject-box was display:block. Inside it sat three children whose heights were fixed and did not move: .ss-table-title 77.0px the navy "Group A - Language Subjects" .ss-table-header 73.0px the Subject Code / Subject Name strip .ss-table-scroll 420.0px a hard-coded height, the table area ------------------------------ 570.0px + border = 592.0px That 420px is why the boxes were always exactly 592.0px tall whatever the two tables contained, and it is also why they could not grow to meet the card on the left. The number was written into the height, not left free. WHAT IS DONE The card on the left is allowed to set the height of the row, and the two group boxes are given the extra room in the only place it is wanted - in their tables, which then show more rows instead of more padding. .ss-subject-container align-items stretch .ss-subject-structure display flex / column .ss-table-grid flex 1 1 auto .ss-subject-box display flex / column .ss-table-scroll flex 1 1 auto, height auto, min-height 0, max-height none .ss-table-title, .ss-table-header flex-shrink 0 .ss-table-scroll already carried overflow:hidden auto and min-height:0, so it can be given the spare height and the table scrolls inside it exactly as it did before. The title and the header strip are pinned with flex-shrink:0 so they cannot be squashed the way the 3px rule under a heading was. WHAT THIS CANNOT DO The three panels will end on one line and the two group boxes will stay the same height as each other, but the three cannot be the same height as each other, and no CSS can do it here. The eyebrow "SUBJECT STRUCTURE" and its 18px gap sit above the group boxes and not above the card, so at any width the two boxes start that much lower down the row. Same height and same bottom line are only possible if the three also share a top line, and that would mean putting the eyebrow beside the card instead of above the boxes. Below 991px the section is one column, each panel is its own row, and this block has nothing to do. ============================================================================ */ .ss-subject-section .ss-subject-container { align-items: stretch !important; } .ss-subject-section .ss-subject-structure { display: flex !important; flex-direction: column !important; } .ss-subject-section .ss-table-grid { flex: 1 1 auto !important; align-self: stretch !important; } .ss-subject-section .ss-subject-box { display: flex !important; flex-direction: column !important; } .ss-subject-section .ss-subject-box .ss-table-title, .ss-subject-section .ss-subject-box .ss-table-header { flex-shrink: 0 !important; } .ss-subject-section .ss-subject-box .ss-table-scroll { flex: 1 1 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; } /* ============================================================================ CORRECTION TO THE BLOCK ABOVE - THE TABLE AREAS RAN AWAY ---------------------------------------------------------------------------- The three panels did come onto one line, but the wrong number came with them. Measured at a 1280px viewport after that block: card bottom 5027.3 height 3859.0 Group A bottom 5027.3 height 3793.0 Group B bottom 5027.3 height 3793.0 scroller 3640.9px - 77.0 title - 73.0 header Bottom spread 0.0px, which was the point, but the panels were 3859px tall instead of 479. The tables had stopped being tables. THE CAUSE flex:1 1 auto means "grow into the spare space, but start from your own height". Starting from your own height on .ss-table-scroll is its content - the whole table, 3641px of rows. So the panels declared themselves 3793px tall before the row had ever been measured, the grid grew to suit them, and the card was then stretched to match. A card that was 479px of guidelines ended up 3859px with 3380px of empty card under the last line. The scrollbar was gone too - scrollH 3641 against clientH 3641 - so it was no longer a scroll area, just a very long page. THE FIX A flex basis of zero. flex:1 1 0% says "take whatever space is going spare and no more", which is what was wanted. The panels now measure from the guidelines card, and the table area takes what the card leaves. The floor of 200px is a guard for the case where the card is shorter than the eyebrow block plus a usable table - it never binds at any width where the section is two columns, because the card is at its tallest there, but it stops the table collapsing to nothing if that ever stops being true. ============================================================================ */ .ss-subject-section .ss-subject-box .ss-table-scroll { flex: 1 1 0% !important; height: auto !important; max-height: none !important; min-height: 200px !important; } /* ============================================================================ CORRECTION - A FLEX BASIS OF 0% IS NOT ZERO, AND THE TABLES NEEDED A FLOOR ---------------------------------------------------------------------------- The three panels do now finish on one line. What the last two blocks got wrong was the table areas, twice, and both times in the same direction - the tables were taking their whole height instead of the spare room. WHAT flex:1 1 0% ACTUALLY DOES HERE 0% is a percentage, not a length. .ss-subject-box is a column flex container whose own height is decided by the grid, so at the point the basis is resolved that height is not known yet, and a percentage basis against an indefinite size falls back to content. The basis therefore became the whole table. Measured at a 912px viewport: Group A box 1151.2 scroller 1000.0 Group B box 2496.8 scroller 2345.6 grid rows 1151.2px and 2496.8px - two different rows and at 1280 the three panels were 3859px tall instead of 479, with 3380px of empty card under the last guideline and the scrollbars gone - scrollH 3641 against clientH 3641. A basis of 0px would not have fixed it either. That would have left the table areas with no height of their own, and below 992px, where the section is one column and there is no spare room to hand out, they would have collapsed to the 200px floor. WHAT IS DONE INSTEAD The basis is set to the height the tables already had, as a length, and flex-grow is left on so they take any room that is genuinely spare: .ss-table-scroll flex 1 1 420px default flex 1 1 400px 992px and below flex 1 1 350px 767px and below flex 1 1 330px 480px and below min-height 0 max-height none The four numbers are the same four the page already used, so nothing about the tables changes: below 992px the section is one column, nothing is stretched, and each area measures exactly what it measured before. Above 992px the guidelines card sets the height of the row and the table areas keep their 420px inside it, growing only if the card is ever taller than the tables. Nothing is hidden and nothing is cut. The row is sized by whichever of the two sides is taller, exactly as a table row is. ============================================================================ */ .ss-subject-section .ss-subject-box .ss-table-scroll { flex: 1 1 420px !important; min-height: 0px !important; max-height: none !important; height: auto !important; } @media screen and (max-width: 992px) { .ss-subject-section .ss-subject-box .ss-table-scroll { flex: 1 1 400px !important; } } @media screen and (max-width: 767px) { .ss-subject-section .ss-subject-box .ss-table-scroll { flex: 1 1 350px !important; } } @media screen and (max-width: 480px) { .ss-subject-section .ss-subject-box .ss-table-scroll { flex: 1 1 330px !important; } } /* ============================================================================ PROGRAMME OVERVIEW CARDS - ICONS TO THE LEFT, NUMBERING OFF ---------------------------------------------------------------------------- Four cards: Eligibility, Mode of Delivery, Programme Validity, Medium of Instruction. Measured at a 1000px viewport before this block: .program-overview-cards grid 142.7px x 4, gap 12px .program-overview-card flex column, align-items flex-start padding 25px 14px 22px 14px 488.8px tall, all four the same THE ICON .program-card-icon was carrying margin:0 21.55px 17px - the two side values are automatic, which is what was holding it in the middle of the card. Its own left edge sat at 21.55px inside the card while everything under it - the number badge, the h3, the yellow rule, the paragraph - sat on the 14px padding. The icon was the only thing on the card not sharing a left edge. Taking the two side margins away puts the icon on the same left edge as everything else in the card. Nothing about the icon itself changes - same 99.6px circle, same #EDF4FF fill, same #063C80 glyph, same 17px gap under it. THE NUMBERING 01, 02, 03, 04. Each is a span.program-card-number - a 27px round badge, #EDF4FF fill, 11px type, 7px of side padding. It is hidden rather than deleted, so the numbers are still in the markup and can be brought back by removing this one rule if they are ever wanted. Hiding it also takes its 10px margin with it, so the h3 moves up into the space it was using. Nothing else on the cards is touched. ============================================================================ */ .ss-program-cards .program-overview-section .program-overview-card .program-card-icon, .program-overview-section .program-overview-card .program-card-icon { margin-left: 0 !important; margin-right: 0 !important; } .program-overview-section .program-overview-card .program-card-number { display: none !important; } /* ============================================================================ PROGRAMME OVERVIEW - THE FOUR CARDS STOPPED BEING STRETCHED TO FILL THE LEFT-HAND PARAGRAPH ---------------------------------------------------------------------------- Measured at a 1000px viewport before this block: .program-overview-container grid 260px / 606.8px, align-items stretch intro, left column 488.8 tall the four cards 488.8 tall section 664.8 tall The two sides are one grid row, so align-items:stretch made the cards take the height of the taller column - the twelve-line paragraph. The cards were not asked to be that tall. What is actually in them: card 1 Eligibility content 300.4 blank 188.4 39% card 2 Mode of Delivery content 294.8 blank 194.0 40% card 3 Programme Validity content 267.6 blank 221.2 45% card 4 Medium of Instruction content 267.6 blank 221.2 45% Two fifths of every card was empty white below the last line of text, which is what made the row read as four tall empty panels rather than four facts. align-items:start lets the cards be as tall as what is in them. The four still come out the same height as each other, because .program-overview-cards is its own grid and its default align-items stretches every card to the tallest of the four - card 1, at three lines. Nothing is centred, nothing is stretched, nothing is clipped. The cards go from 488.8px to the height of their own contents and the left paragraph is left exactly as it was. ============================================================================ */ .program-overview-section .program-overview-container { align-items: start !important; } /* ============================================================================ GRADE 12 - THE 767px TIER BACK TO THIS PAGE'S OWN #062F67 ---------------------------------------------------------------------------- Grade 12's banner navy is #062F67 and always was. When the banner was matched to Grade 10 a 767px tier was written carrying #062D5C, which left this page running one navy on a desktop and a different one on a phone. #062D5C is not to be used as a banner background on this page or on any page that comes next. The tier goes back to #062F67, which is what the rest of this stylesheet already uses, so the banner is one colour at every width. Only the background is named here. The type, the rule, the description, the widths and the ellipse over the photograph are untouched and stay as they were matched. ============================================================================ */ @media screen and (max-width: 767px) { .senior-hero { background: #062f67 !important; } } /* ============================================================================ GRADE 12: THE BLUE LINE DOWN THE LEFT OF THE BANNER PHOTOGRAPH --------------------------------------------------------------------------- TWO DECLARATIONS, TWO SELECTORS, BELOW 768px. No font, no colour, no background, no border, no radius, no shadow, no width, no height, no margin, no gap, no position, no inset, no clip-path, no object-fit. The photograph, its src and its alt are not touched. No markup is touched. -------------------------------------------------------------------------- THE FAULT, MEASURED LIVE IN PHONE-WIDTH IFRAMES vw banner padding-left navy on the left right 390 15.5938px 15.59px 0.00px 360 14.3906px 14.39px 0.00px 320 12.7969px 12.80px 0.00px The photograph is full width - 374.41px of 390, 345.61 of 360, 307.20 of 320 - so the band of navy down its left edge is exactly the banner's own left padding, and nothing on the right. That asymmetry is the line in the screenshot: the picture is flush to the right edge and inset on the left. -------------------------------------------------------------------------- WHY THE BANNER HAS A LEFT PADDING AT ALL ON A PHONE It is the banner gutter, written to put the hero text on the header logo's left edge. It is right on a desktop, where the banner is two columns and only the text needs the inset. Below 768px this banner stacks - the photograph becomes width:100% - and the inset then lands on the picture instead of on the text. The page already has a full ladder for it: line 8415 line 4691 .senior-hero { padding-left: max(4%, calc((100% - 1380px) / 2)) !important; } line 8426 @media (max-width: 1199px) padding-left: max(3%, ...) line 8432 @media (max-width: 767px) padding-left: max(5%, ...) line 8438 @media (max-width: 480px) padding-left: max(4%, ...) so this is not a missing value. It is a present one, doing the job it was written for on the one element that should not be carrying it. -------------------------------------------------------------------------- THE TWO DECLARATIONS .senior-hero { padding-left: 0; } .senior-hero-content { padding-left: max(4%, 50% - 690px); } The gutter is not thrown away, it is moved. It comes off the banner, where it was pushing the photograph about, and goes onto the content, which is what it was written for. On this page the content's left padding was already zero - line 5023 .senior-hero-content { padding-left: 0 !important; } - so the text was sitting at the banner's padding-left and nothing else. Putting max(4%%, 50%% - 690px) back on the content gives the text the same 4%% it effectively had, so THE TEXT DOES NOT MOVE AT ALL. Only the photograph moves, from 15.59px in to 0. vw text before text after photo before photo after 390 15.59 15.59 15.59 0.00 360 14.39 14.39 14.39 0.00 320 12.80 12.80 12.80 0.00 And 4%% is where the header logo already sits - measured at 15.59px / 14.41px / 12.80px, 4.00%% of the viewport at each width - so the text lands on the same edge as the logo above it and as the ECCE banners. It is the same expression written for .ecce-levelN-content earlier in this work. -------------------------------------------------------------------------- SPECIFICITY, WHICH IS WHY THESE SELECTORS ARE THE LONGER ONES Both rules being overridden carry !important, so these do too, and each needs to match the specificity of the rule it supersedes: the banner rule is line 4691 .senior-hero, so .senior-hero is written at the same weight the content rule is line 5023 .senior-hero-content, so .senior-hero-content is written at the same weight Naming the shorter form would have lost on specificity rather than winning on source order, and the fix would have silently done nothing. -------------------------------------------------------------------------- NOT TOUCHED, THOUGH FOUND On this banner the photograph sits 214.00px tall inside a 220.00px box, so 6.00px of navy shows underneath it - the same 6px the ECCE banners had, and it is a different fault with a different fix. It is left alone because this change is for the line on the left. Say the word and it is the same two lines of height that fixed it there. Above 768px nothing changes. The gutter stays on the banner where the two-column desktop banner needs it, the elliptical crop stays, and the photograph keeps its place in the right-hand column. The photograph, its src, its alt. The banner's background. The label chip, the h1 and its span, the rule, the duration chip, the paragraph, the button, the rings and the dots. Every section below the banner. Every other page and stylesheet. ============================================================================ */ /* ---- the line down the left of the banner photograph, gone on a phone ---- The banner gutter is written to put the hero TEXT on the header logo's left edge. Below 768px this banner stacks and the photograph goes full width, so the inset lands on the picture instead: measured, 15.59px of navy down its left and 0.00px on its right, at 390, 360 and 320 alike. Moved rather than removed. The content's own left padding was already 0 on this page, so giving it max(4%%, 50%% - 690px) puts the text back on exactly the 4%% edge it was already reading - which is where the header logo sits - and the text does not move. Only the photograph moves, to 0. Both selectors match the specificity of the !important rules they supersede, so this wins on source order rather than tying. */ @media screen and (max-width: 767px) { .senior-hero { padding-left: 0 !important; } .senior-hero-content { padding-left: max(4%, 50% - 690px) !important; } } /* ========================================================================== PROGRAMME OVERVIEW - THE REFERENCE LAYOUT ------------------------------------------------------------------------- What the reference asks for, against what was here: before four cards across, each one a narrow column after two by two, each one a wide row The card was a vertical stack - icon, title, rule, paragraph - so four of them sat in one row and each was 240px wide with 100px of blank below the last line. The reference turns the card on its side: icon at the left, the three text pieces stacked in the middle, arrow on the right. That is a three-column grid on the card, not a flex row, because the title, the yellow rule and the paragraph are three separate elements in the markup and have to stay three separate elements - they are not wrapped in anything. Four things are added that the markup did not have: the blue bar down the left edge of each card the round arrow on the right of each card the hairline running down the gap between the two columns, with a node on it where each row meets the second word of the heading in blue -------------------------------------------------------------------------- NOTHING ELSE ON THIS PAGE IS TOUCHED Every selector below starts with .program-overview-section, and the type is not restated: the heading stays 38px, the card titles stay 20px and the body stays 16px because those are already set with !important further up this file and they are left alone. This block only moves boxes. The subject-structure and assessment sections share this stylesheet and are not named in any rule here. The Grade 10 page loads a different file, so nothing reaches it. -------------------------------------------------------------------------- THE SIZES IN THE REFERENCE, CHECKED AGAINST WHAT WAS ALREADY SET Read off the reference and scaled to a 1440px viewport: heading about 39px already 38px left as it is card title about 19px already 20px left as it is body about 16px already 16px left as it is eyebrow about 12px already 12px left as it is So no number in the type scale moves. Only the arrangement does. -------------------------------------------------------------------------- THE COLOURS ARE THIS FILE'S OWN The reference's bar runs from a deep blue into the cyan the page already uses for its dotted decoration, so it is #0b57c7 into #00a8ff - both of which are already in this stylesheet. The arrow's circle is #eaf2ff, the same pale fill the section label's icon already wears. Nothing new is introduced and no existing colour is altered. -------------------------------------------------------------------------- WHY grid-auto-rows: 1fr The connector's two nodes sit on the centre line of each row, which is only a fixed distance from the top if the two rows are the same height. grid-auto-rows: 1fr makes them the same height whatever is in them, so the two node positions can be written as exact quarters rather than guessed at. The cards still stretch to their row as they always did. -------------------------------------------------------------------------- NARROWER SCREENS Two cards of this shape need about 900px of card area. Below 1200px there is not that much, so the cards go to one per row - full width, still horizontal, still the reference card - and the connector is hidden because there is no gap between two columns for it to run down. At 991px and below the existing rules centre the intro column, and that is kept. ========================================================================== */ /* ---- the two words of the heading ---- */ .program-overview-section .program-overview-h2a { color: #092f6b; } .program-overview-section .program-overview-h2b { color: #0b57c7; } /* ---- the intro column, and the paragraph set flush on both edges ---- */ .program-overview-section .program-overview-container { grid-template-columns: 331px minmax(0, 1fr); } .program-overview-section .program-overview-intro > p { max-width: 100%; text-align: justify; } /* ---- the two columns of cards ---- */ .program-overview-section .program-overview-cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 28px 50px; } /* ---- the card, turned on its side ---- */ .program-overview-section .program-overview-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 26px; align-items: center; padding: 30px 30px 30px 38px; min-height: 0; } .program-overview-section .program-overview-card .program-card-icon { grid-column: 1; grid-row: 1 / 4; width: 88px; height: 88px; margin: 0; align-self: center; } .program-overview-section .program-overview-card h3 { grid-column: 2; grid-row: 1; align-self: end; } .program-overview-section .program-overview-card .program-card-line { grid-column: 2; grid-row: 2; margin-top: 10px; margin-bottom: 12px; } .program-overview-section .program-overview-card p { grid-column: 2; grid-row: 3; align-self: start; } /* ---- the round arrow on the right of each card ---- */ .program-overview-section .program-card-arrow { grid-column: 3; grid-row: 1 / 4; align-self: center; justify-self: end; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #eaf2ff; color: #0b57c7; font-size: 20px; } /* ---- the bar down the left edge of each card ---- */ .program-overview-section .program-overview-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient( 180deg, #0b57c7 0%, #00a8ff 100% ); } /* ---- the hairline between the two columns ---- */ .program-overview-section .program-cards-connector { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .program-overview-section .program-cards-connector::before { content: ""; position: absolute; left: 50%; top: calc((100% - 28px) / 4); height: calc((100% - 28px) / 2); width: 1px; transform: translateX(-50%); background: #c9d8f3; } .program-overview-section .program-cards-connector span { position: absolute; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff; border: 2px solid #7da4df; box-sizing: border-box; } .program-overview-section .program-cards-connector span:nth-child(1) { top: calc((100% - 28px) / 4); } .program-overview-section .program-cards-connector span:nth-child(2) { top: calc(100% - (100% - 28px) / 4); } /* the stub that reaches from the left column's edge to each node */ .program-overview-section .program-cards-connector span::before { content: ""; position: absolute; top: 50%; right: 100%; width: 15px; height: 1px; background: #c9d8f3; } /* ---- the two decorations move to where the reference has them ---- */ .program-overview-section .program-overview-dots { top: auto; right: auto; bottom: 26px; left: 18px; } .program-overview-section .program-overview-circle { right: auto; bottom: auto; top: -60px; right: -42px; } /* ===================================================================== ONE COLUMN OF CARDS - BELOW 1200px The card needs about 430px of its own to hold an 88px icon, the text and a 50px arrow without crowding. Two of them need 910px of card area, which a 1199px viewport does not have once the 331px intro column and the 68px of section inset are taken off it. So below 1200px the cards run one per row at full width - the same horizontal card, just not side by side - and the connector is hidden, because there is no gap between two columns for it to sit in. ===================================================================== */ @media (max-width: 1199px) { .program-overview-section .program-overview-container { grid-template-columns: 290px minmax(0, 1fr); } .program-overview-section .program-overview-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 22px; } .program-overview-section .program-cards-connector { display: none; } } @media (max-width: 991px) { .program-overview-section .program-overview-container { grid-template-columns: minmax(0, 1fr); } /* justification is dropped here: at one column the measure is short and the browser opens a gap on every line instead of evening the right edge out */ .program-overview-section .program-overview-intro > p { text-align: left; } } @media (max-width: 575px) { .program-overview-section .program-overview-container { grid-template-columns: 260px minmax(0, 1fr); } .program-overview-section .program-overview-card { column-gap: 18px; padding: 22px 20px 22px 26px; } .program-overview-section .program-overview-card .program-card-icon { width: 62px; height: 62px; font-size: 25px; } .program-overview-section .program-card-arrow { width: 40px; height: 40px; font-size: 17px; } .program-overview-section .program-overview-card::before { width: 6px; } } /* ========================================================================== PROGRAMME OVERVIEW - TWO DEFECTS FOUND BY MEASURING THE PASS BEFORE ------------------------------------------------------------------------- Appended to the block above, not merged into it. The rules above still say what they said; these win where they overlap. Nothing outside .program-overview-section is named, and no font size, weight, line height, letter spacing or colour role is restated - not even for the icon and the arrow, whose glyph sizes stay where the block above put them. Only the three measurements that had to move are named again: the card's padding, its column-gap, and the icon's box. ========================================================================== */ /* ---- the solid centre inside each connector node ---- */ .program-overview-section .program-cards-connector span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #0b57c7; } /* ---- the card's own spacing, to give the title room on one line ---- */ .program-overview-section .program-overview-card { padding: 28px 24px 28px 32px; column-gap: 20px; } .program-overview-section .program-overview-card .program-card-icon { width: 84px; height: 84px; } /* ---- and the same three values again at 575px, because the rules above that block are later in the file and would otherwise win over it ---- */ @media (max-width: 575px) { .program-overview-section .program-overview-card { padding: 22px 18px 22px 24px; column-gap: 16px; } .program-overview-section .program-overview-card .program-card-icon { width: 58px; height: 58px; } .program-overview-section .program-card-arrow { width: 38px; height: 38px; } } /* ========================================================================== THE CONTAINER IS ONE COLUMN AT 575px - A BUG IN THE BLOCK ABOVE ------------------------------------------------------------------------- Found by sweeping the widths, not by reading the block. Two of my own media queries contradicted each other: @media (max-width: 991px) container -> minmax(0, 1fr) @media (max-width: 575px) container -> 260px minmax(0, 1fr) 575 is inside 991, so at every width at or below 575 both matched and the later one won - the container went back to two columns and asked for a 260px intro column on a screen that has no room for one. Measured: viewport container content intro asked for left for the cards 991 895px 0px 895px 768 672px 0px 672px 575 505px 260px 206px 390 320px 260px 44px 44px is the whole card - icon, title and arrow do not fit in 44px, and the titles broke to three lines each. The card was unusable below 575px. The fix is to put the container back to one column, which is what the 991px query already said and what the page did before any of this work. Only that one property is corrected here; the card's own padding, gap, icon box and arrow box at 575px are left as the block above set them. ------------------------------------------------------------------------ THE 1199px QUERY IS NOT WRONG, ONLY THE 575px ONE Between 992px and 1199px the container is genuinely still two columns - the intro column is beside the cards there - so 290px is right for that band. It is only below 991px, where the existing rules already stack the intro above the cards and centre it, that the container must be one column. ========================================================================== */ @media (max-width: 575px) { .program-overview-section .program-overview-container { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== PROGRAMME OVERVIEW - THE GRADE 10 PAGE'S ARRANGEMENT ------------------------------------------------------------------------- The Grade 10 page draws this area as a photograph on the left with a floating cap badge over it, the heading and paragraph on the right, and below that a navy panel beside a list of icon rows. The Grade 12 page had an intro column beside four cards. The Grade 12 page now draws it the same way. EVERY GRADE 12 WORD IS CARRIED ACROSS UNCHANGED - the eyebrow, the heading, the paragraph, and the four facts with their own icons, titles and bodies. Only the arrangement is different. -------------------------------------------------------------------------- THE RULES BELOW ARE COPIED, NOT REtyped Every rule from 'class here' is lifted out of secondarylevel-classx.css with its own media query intact, so the two pages are the same UI by construction. That file belongs to the Grade 10 page and is only read here; nothing is written to it. These rules land in this page's own stylesheet, which this page alone loads. Three things were dropped on the way across, all because the elements do not exist on this page: .why-* the 'why choose us' section, which is not on this page .pom-* the block header, which is not on this page :nth-child(2) there is one box here, not two -------------------------------------------------------------------------- THE CONTAINER IS PUT BACK .program-overview-container was a 331px / 1fr grid holding an intro column and four cards. Those two children are gone, so the grid is reset to one column and the pale card and 12px radius are dropped - the Grade 10 page's container has neither. The rules already in this file are left exactly as they are; this only supersedes them. -------------------------------------------------------------------------- THE 01-04 BADGES STAY HIDDEN They were hidden by a rule that reached them through .program-overview-card. They now sit inside .pg-item, so that rule no longer finds them and they are named again here. They are not deleted - they are in the markup. ========================================================================== */ /* ---- the container, reset ---- */ .program-overview-section .program-overview-container { display: block; width: calc(100% - 68px); max-width: 1400px; margin: 0 auto; padding: 0; background: transparent; border-radius: 0; } /* ---- the 01-04 badges, hidden again under their new parent ---- */ .program-overview-section .pg-item .program-card-number { display: none; } .overview-image-area { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; } .overview-image-card { width: 88%; height: 255px; position: relative; z-index: 3; overflow: hidden; border-radius: 20px; box-shadow: 0 12px 28px rgba(8, 60, 124, 0.14); } .overview-image-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .overview-image-card:hover img { transform: scale(1.04); } .overview-floating-icon { width: 58px; height: 58px; position: absolute; top: 18px; right: 7%; z-index: 5; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #3e43d8; color: #ffffff; font-size: 25px; box-shadow: 0 8px 20px rgba(62, 67, 216, 0.25); } .overview-content { position: relative; z-index: 4; padding: 15px 20px 15px 25px; } .overview-content h2 { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 700; } .overview-line { width: 42px; height: 4px; margin: 20px 0 20px; border-radius: 5px; background: #4047d8; } .overview-content p { max-width: 650px; margin: 0 0 22px; color: #263b5c; font-size: 15px; line-height: 1.7; text-align: left; } .overview-content p:last-child { margin-bottom: 0; } @media (max-width: 1200px) { .overview-content { padding-left: 20px; } .overview-image-card { width: 90%; } } @media (max-width: 991px) { .overview-image-area { min-height: 330px; } .overview-image-card { width: 85%; height: 270px; } .overview-floating-icon { right: 8%; } .overview-content { padding: 0; } .overview-content h2 { font-size: 34px; } } @media (max-width: 767px) { .overview-image-area { min-height: 270px; } .overview-image-card { width: 92%; height: 220px; border-radius: 16px; } .overview-floating-icon { width: 50px; height: 50px; top: 8px; right: 2%; font-size: 21px; border-radius: 12px; } .overview-content h2 { font-size: 30px; } .overview-content p { font-size: 14px; line-height: 1.7; } } @media (max-width: 480px) { .overview-image-area { min-height: 235px; } .overview-image-card { width: 94%; height: 190px; } .overview-content h2 { font-size: 27px; } .overview-content p { font-size: 13px; } } .pg-container { width: calc(100% - 80px); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .pg-box { width: 100%; height: 390px; display: grid; grid-template-columns: 38% 62%; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(8, 60, 124, 0.10); } .pg-side-panel { width: 100%; height: 390px; box-sizing: border-box; padding: 38px 20px 25px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; background: #083c7c; color: #ffffff; position: relative; overflow: hidden; } .pg-icon-circle { width: 68px; height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; color: #0755bd; font-size: 25px; margin-bottom: 22px; position: relative; z-index: 2; } .pg-side-panel h3 { margin: 0; color: #ffffff; font-size: 19px; line-height: 1.4; font-weight: 700; position: relative; z-index: 2; } .pg-divider { width: 38px; height: 3px; margin: 18px 0 20px; background: #ffffff; border-radius: 5px; position: relative; z-index: 2; } .pg-large-icon { margin-top: auto; color: rgba(255,255,255,0.25); font-size: 95px; line-height: 1; position: relative; z-index: 2; } .pg-content { width: 100%; height: 390px; box-sizing: border-box; padding: 12px 28px; background: #ffffff; } @media (max-width: 1100px) { .pg-container { width: calc(100% - 50px); max-width: 100%; } .pg-container { grid-template-columns: 1fr; gap: 25px; } .pg-box { height: 390px; } } @media (min-width: 768px) and (max-width: 900px) { .pg-container { width: calc(100% - 40px); } .pg-box { height: 380px; } .pg-side-panel { height: 380px; } .pg-content { height: 380px; padding: 12px 22px; } } @media (max-width: 767px) { .pg-container { width: calc(100% - 24px) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } .pg-container { display: flex !important; flex-direction: column !important; gap: 20px !important; } .pg-box { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; grid-template-rows: none !important; border-radius: 16px !important; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.10); } .pg-side-panel { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 185px !important; flex: none !important; padding: 25px 18px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; order: 1 !important; } .pg-icon-circle { width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; margin: 0 0 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 22px !important; box-sizing: border-box !important; } .pg-side-panel h3 { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: #ffffff !important; font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } .pg-divider { width: 38px !important; height: 3px !important; margin: 13px auto 0 !important; flex-shrink: 0 !important; } .pg-large-icon { display: none !important; } .pg-content { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding: 18px 18px 20px !important; display: block !important; box-sizing: border-box !important; overflow: visible !important; order: 2 !important; } .pg-item { width: 100% !important; min-height: 0 !important; padding: 14px 0 !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; box-sizing: border-box !important; } .pg-item-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 11px !important; font-size: 18px !important; } .pg-item > div:last-child { min-width: 0 !important; flex: 1 1 auto !important; width: auto !important; } .pg-item h4, .pg-item h6 { margin: 0 0 4px !important; color: #0755bd !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 700 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } .pg-item p { margin: 0 !important; color: #294363 !important; font-size: 14px !important; line-height: 1.5 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; text-align: left !important; } } @media (max-width: 480px) { .pg-container { width: calc(100% - 20px) !important; } .pg-container { gap: 18px !important; } .pg-box { border-radius: 14px !important; } .pg-side-panel { min-height: 165px !important; padding: 22px 15px !important; } .pg-icon-circle { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; margin-bottom: 11px !important; font-size: 20px !important; } .pg-side-panel h3 { font-size: 19px !important; line-height: 1.3 !important; } .pg-divider { width: 34px !important; height: 2px !important; margin-top: 11px !important; } .pg-content { padding: 15px 16px 18px !important; } .pg-item, .pg-check-item { padding: 12px 0 !important; gap: 10px !important; } .pg-item-icon, .pg-check { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } .pg-item h4, .pg-item h6 { font-size: 16px !important; line-height: 1.3 !important; } .pg-item p, .pg-check-item p { font-size: 16px !important; line-height: 1.5 !important; } } @media (max-width: 360px) { .pg-container { width: calc(100% - 16px) !important; } .pg-side-panel { min-height: 155px !important; padding: 20px 12px !important; } .pg-icon-circle { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; font-size: 19px !important; } .pg-side-panel h3 { font-size: 18px !important; } .pg-content { padding: 14px 14px 16px !important; } .pg-item, .pg-check-item { gap: 9px !important; } .pg-item-icon, .pg-check { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; font-size: 15px !important; } .pg-item h4, .pg-item h6 { font-size: 16px !important; } .pg-item p, .pg-check-item p { font-size: 16px !important; line-height: 1.45 !important; } } .pg-item { min-height: 91px; display: flex; align-items: center; gap: 17px; border-bottom: 1px solid #e2eaf5; } .pg-item:last-child { border-bottom: none; } .pg-item-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #edf3ff; color: #0755bd; font-size: 20px; } .pg-item h6 { margin: 0 0 5px; color: #0755bd; font-size: 17px; line-height: 1.35; font-weight: 700; } .pg-item p { margin: 0; color: #294363; font-size: 14px; line-height: 1.5; } @media (max-width: 1100px) { .pg-item, .pg-check-item { min-height: 90px; gap: 12px; } .pg-item-icon, .pg-check { width: 44px; height: 44px; } .pg-side-panel h3 { font-size: 17px; } .pg-item h4 { font-size: 16px; } .pg-item p, .pg-check-item p { font-size: 16px; } } @media (max-width: 900px) { .pg-container { grid-template-columns: 1fr; } .pg-box { min-height: 360px; } .pg-side-panel { min-height: 360px; } } @media (max-width: 767px) { .pg-item, .pg-check-item { min-height: 78px; gap: 10px; } .pg-item-icon, .pg-check { width: 40px; height: 40px; font-size: 17px; } .pg-item h4 { font-size: 16px; } .pg-item p, .pg-check-item p { font-size: 16px; } } @media (max-width: 480px) { .pg-item, .pg-check-item { min-height: 72px; gap: 8px; } .pg-item-icon, .pg-check { width: 36px; height: 36px; font-size: 15px; } .pg-item h4 { font-size: 16px; margin-bottom: 3px; } .pg-item p, .pg-check-item p { font-size: 16px; line-height: 1.45; } } .pg-item h6, .pg-item h6 b { font-size: 17px !important; line-height: 1.35 !important; font-weight: 700 !important; } .program-overview-modern .pg-content p, .subject-structure-section .subject-side-panel p, .subject-structure-section .subject-table th, .subject-structure-section .subject-table td, .assessment-section .assessment-header p, .assessment-section .assessment-item-content p, .assessment-section .certification-intro, .assessment-section .certification-item p, .academic-provisions-section .academic-provisions-header p, .academic-provisions-section .academic-card-intro, .academic-provisions-section .academic-card-list p { font-size: 16px !important; } .pg-item p, .pg-check-item p, .subject-side-panel p, .assessment-header p, .assessment-item-content p, .certification-intro, .certification-item p, .academic-provisions-header p, .academic-card-intro, .academic-card-list p { font-size: 16px !important; line-height: 1.7 !important; } .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 20px !important; line-height: 1.35 !important; font-weight: 700 !important; } @media screen and (max-width: 1199px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 16px !important; } } @media screen and (max-width: 991px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 16px !important; line-height: 1.4 !important; } } @media screen and (max-width: 767px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 15px !important; line-height: 1.4 !important; } } @media screen and (max-width: 575px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 15px !important; line-height: 1.4 !important; } } @media screen and (max-width: 480px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 14px !important; line-height: 1.4 !important; } } /* ========================================================================== THE TWO-COLUMN GRID - MY OWN RESET HAD THROWN IT AWAY ------------------------------------------------------------------------- The block above reset .program-overview-container to display:block so that the pale card and the 12px radius - both of which belong to the arrangement being replaced - would go. But the Grade 10 page's container IS the two-column grid, and its rules are named .program-overview-container as well, so they could not be copied across under that name without fighting this page's own rules. Taking the container to display:block therefore took the grid with it, and the photograph - which has no width of its own - filled the whole row. So the grid is written out here, taken value for value from secondarylevel-classx.css lines 1843-1868 and its ladder at 2124-2271, and the .cxgut width ladder from 7760-7776, which the Grade 10 page puts on the same element through the class name cxgut. 48% / 52% photograph left, text right 47% / 53% 1200px and below one column 991px and below, where the two stack -------------------------------------------------------------------------- THE FOUR FACTS GO BELOW, NOT BESIDE .pg-container is the last child of the container, so in a two-column grid it would be pulled into the second column and squeezed. It is given the whole row instead: grid-column 1 / -1. On the Grade 10 page it lives in its own section with its own wrapper; here it sits under the photograph and the paragraph, which is the same reading order and keeps the change inside one section. The .program-overview-section padding and background are set to the Grade 10 page's too - 70px and #f5f8fd against this page's 48px and #f4f8fd. Neither is a banner, so the banner colour rule does not apply here. ========================================================================== */ .program-overview-section { padding: 70px 0; background: #f5f8fd; } .program-overview-section .program-overview-container { width: 92%; max-width: 1380px; min-height: 470px; margin-left: auto; margin-right: auto; position: relative; display: grid; grid-template-columns: 48% 52%; align-items: center; padding: 55px 50px; background: #ffffff; border: 1px solid #e2eaf6; border-radius: 20px; box-shadow: 0 8px 30px rgba(8, 60, 124, 0.06); } /* the four facts take the whole row underneath */ .program-overview-section .program-overview-container > .pg-container { grid-column: 1 / -1; } @media (max-width: 1199px) { .program-overview-section .program-overview-container { width: 94%; } } @media (max-width: 1200px) { .program-overview-section .program-overview-container { grid-template-columns: 47% 53%; padding: 45px 35px; } } @media (max-width: 991px) { .program-overview-section { padding: 55px 0; } .program-overview-section .program-overview-container { grid-template-columns: minmax(0, 1fr); gap: 35px; padding: 40px 35px; } } @media (max-width: 767px) { .program-overview-section .program-overview-container { width: 90%; padding: 30px 22px; border-radius: 16px; gap: 25px; } .program-overview-section { padding: 35px 0; } } @media (max-width: 480px) { .program-overview-section .program-overview-container { width: 92%; padding: 25px 18px; } } /* ========================================================================== ONE PANEL, NOT TWO ------------------------------------------------------------------------- Measured at 1440: .pg-container grid-column 1 / -1 1162.78px wide <- correct .pg-container grid-template-columns 567.39px 567.39px .pg-box 567.39px The Grade 10 page has two panels side by side in that container - 'Programme Structure' and 'Subject Selection Guidelines' - so its .pg-container is two columns and each .pg-box takes one of them. The four Grade 12 facts map onto the first of those two panels; there is no second panel on this page, so the box falls into column one and leaves column two empty, which measured 567.39px of bare card beside it. One rule: the single box takes the whole row. Nothing else changes - the panel, the icon circle, the divider and the four rows are already the Grade 10 page's own rules, copied across unchanged. ========================================================================== */ .program-overview-section .pg-container > .pg-box { grid-column: 1 / -1; } /* ========================================================================== THE SECOND PANEL - SUBJECT SELECTION GUIDELINES ------------------------------------------------------------------------- The Grade 10 page draws this as two panels side by side inside .pg-container: a navy panel and four rows on the left, four check rows and a navy panel on the right. The first of those is already on this page from the change before this one. This adds the second, and the check-item rules and the :nth-child(2) rules that go with it are lifted out of secondarylevel-classx.css exactly as the last batch was. -------------------------------------------------------------------------- THE GUIDELINES ARE MOVED, NOT COPIED The four rules were sitting in .ss-guideline-list in the subject section, as four .ss-guideline-item rows with their own icons. They are lifted out of there and put in this panel, so each rule's wording appears once in the document rather than twice. .ss-guidelines is then hidden - not deleted; it still holds its heading and its rule in the markup, and one rule brings it back. -------------------------------------------------------------------------- THE FOUR ICONS BECOME ONE The Grade 12 rules had four different marks - a check, a group of people, a stack of layers, and two arrows. The Grade 10 panel puts the same check in all four of its rows, and that is the panel being copied, so all four take the check. The wording is untouched. -------------------------------------------------------------------------- THE PANELS GO SIDE BY SIDE AGAIN The rule that made the single box take the whole row is superseded here, so the two boxes sit in .pg-container's own two columns as they do on the Grade 10 page. ========================================================================== */ .program-overview-section .pg-container > .pg-box { grid-column: auto; } /* the old guidelines block in the subject section, hidden not deleted */ .ss-subject-section .ss-guidelines { display: none; } .pg-box:nth-child(2) { grid-template-columns: 62% 38%; } .pg-box:nth-child(2) .pg-side-panel { width: 100%; height: 390px; } @media (max-width: 767px) { .pg-box, .pg-box:nth-child(2) { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; grid-template-rows: none !important; border-radius: 16px !important; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.10); } .pg-side-panel, .pg-box:nth-child(2) .pg-side-panel { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 185px !important; flex: none !important; padding: 25px 18px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; order: 1 !important; } .pg-box:nth-child(2) .pg-side-panel { order: 1 !important; } .pg-box:nth-child(2) .pg-content { order: 2 !important; } .pg-content, .pg-box:nth-child(2) .pg-content { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding: 18px 18px 20px !important; display: block !important; box-sizing: border-box !important; overflow: visible !important; order: 2 !important; } .pg-check-item { width: 100% !important; min-height: 0 !important; padding: 14px 0 !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; box-sizing: border-box !important; } .pg-check { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex-shrink: 0 !important; font-size: 17px !important; } .pg-check-item p { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; color: #294363 !important; font-size: 16px !important; line-height: 1.55 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; text-align: left !important; } } @media (max-width: 480px) { .pg-box, .pg-box:nth-child(2) { border-radius: 14px !important; } .pg-side-panel, .pg-box:nth-child(2) .pg-side-panel { min-height: 165px !important; padding: 22px 15px !important; } .pg-content, .pg-box:nth-child(2) .pg-content { padding: 15px 16px 18px !important; } .pg-item, .pg-check-item { padding: 12px 0 !important; gap: 10px !important; } .pg-item-icon, .pg-check { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } .pg-item p, .pg-check-item p { font-size: 16px !important; line-height: 1.5 !important; } } @media (max-width: 360px) { .pg-side-panel, .pg-box:nth-child(2) .pg-side-panel { min-height: 155px !important; padding: 20px 12px !important; } .pg-content, .pg-box:nth-child(2) .pg-content { padding: 14px 14px 16px !important; } .pg-item, .pg-check-item { gap: 9px !important; } .pg-item-icon, .pg-check { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; font-size: 15px !important; } .pg-item p, .pg-check-item p { font-size: 16px !important; line-height: 1.45 !important; } } .pg-check-item { min-height: 91px; display: flex; align-items: center; gap: 17px; border-bottom: 1px solid #e2eaf5; } .pg-check-item:last-child { border-bottom: none; } .pg-check { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf3ff; color: #0755bd; font-size: 18px; font-weight: 700; } .pg-check-item p { margin: 0; color: #294363; font-size: 16px; line-height: 1.55; } @media (max-width: 1100px) { .pg-item, .pg-check-item { min-height: 90px; gap: 12px; } .pg-item-icon, .pg-check { width: 44px; height: 44px; } .pg-item p, .pg-check-item p { font-size: 16px; } } @media (max-width: 767px) { .pg-item, .pg-check-item { min-height: 78px; gap: 10px; } .pg-item-icon, .pg-check { width: 40px; height: 40px; font-size: 17px; } .pg-item p, .pg-check-item p { font-size: 16px; } } @media (max-width: 480px) { .pg-item, .pg-check-item { min-height: 72px; gap: 8px; } .pg-item-icon, .pg-check { width: 36px; height: 36px; font-size: 15px; } .pg-item p, .pg-check-item p { font-size: 16px; line-height: 1.45; } } .pg-item p, .pg-check-item p, .subject-side-panel p, .assessment-header p, .assessment-item-content p, .certification-intro, .certification-item p, .academic-provisions-header p, .academic-card-intro, .academic-card-list p { font-size: 16px !important; line-height: 1.7 !important; } /* ========================================================================== THE SECOND PANEL WAS LANDING BELOW THE FIRST, NOT BESIDE IT ------------------------------------------------------------------------- Measured at 1440, with both panels in the markup and both sets of rules in place: .pg-container display grid columns 567.391px 567.391px gap 28px box 1 left 148.6 top 506.0 567.4 x 390 box 2 left 148.6 top 896.0 215.6 x 390 Both boxes report grid-column auto and grid-row auto, yet the second lands in the SECOND ROW of the first column rather than in the second column - same left edge, 390px lower, which is one box height down. It also came out 215.6px wide instead of 567.4px, because Class X's .pg-box is width:100% and 100% of a track the browser had not sized yet is not the other column. Rather than leave that to auto-placement, the second panel is put in the second column of the first row outright. Class X draws its two panels side by side, so that is what this says. Below 768px Class X switches .pg-container to display:flex with flex-direction:column, and a grid-column on a flex child is ignored - so the two stack there on their own, exactly as they do on the Grade 10 page, and this rule does nothing. ========================================================================== */ @media (min-width: 768px) { .program-overview-section .pg-container > .pg-box:nth-child(2) { grid-column: 2; grid-row: 1; } } /* ========================================================================== THE SECOND PANEL WAS CLIPPING ITS LAST LINE ------------------------------------------------------------------------- Measured at 1440 with both panels side by side: box 1 .pg-content scroll 390 client 390 overflow 0px box 2 .pg-content scroll 415 client 390 overflow 25px and the last check row's bottom came back at 920.5 against a box bottom of 896.0 - 24.5px of the sentence 'from recognized boards (as per equivalency guidelines)' was outside the panel and simply not drawn. Class X pins .pg-box to height 390px. Its own four check rows are shorter than the Grade 12 four - 'Minimum 5 subjects, including at least one language' against 'Learners must choose a minimum of 5 subjects, including at least one language' - so 390px is enough there and 25px short here. So 390px becomes a floor rather than a ceiling: height auto, min-height 390px. The first panel still comes out at 390 because that is what it needs, and because .pg-container is a grid both panels in the row are the same height - they stretch to the taller of the two, so they stay level. Below 768px Class X already sets height auto and min-height 360px with !important, and this block does not reach there. ========================================================================== */ @media (min-width: 768px) { .program-overview-section .pg-box { height: auto; min-height: 390px; } } /* ========================================================================== SUBJECT STRUCTURE GROUP A AND GROUP B - THE GRADE 10 PAGE'S UI ------------------------------------------------------------------------- The Grade 10 page draws each group as its own section: a 'Subject Structure' heading with the group label under it, a navy panel down the left carrying the group's name and its selection note, and the table beside it with its column headings inside a real thead. The Grade 12 page had one block holding a 2x1 grid of two boxes, with the column headings as a strip of divs sitting outside the table. It now draws them the same way as the Grade 10 page. -------------------------------------------------------------------------- EVERY ROW IS MOVED, NOT REWRITTEN Both Grade 12 tables are lifted out whole - every tr and every td, the codes, the names and the descriptions - and put inside the new markup unchanged. The column headings move from the outside strip into a thead, which is where the Grade 10 page keeps them; the three labels are the same three words. -------------------------------------------------------------------------- WHAT THE GRADE 12 WORDS SAY IN THE PANELS Group A 'Group A - Language Subjects' 'Select One or Two' Group B 'Group B - Academic & Elective' 'Select Three to Five' Both taken from this page's own titles. The Grade 10 page's second panel is labelled 'Group B / Languages', which is a slip on that page - this one says what this page's own table is. -------------------------------------------------------------------------- THE FIXED-HEIGHT SCROLLER IS GONE WITH IT The Grade 12 tables sat in a 420px scroller. The Grade 10 table area carries no height, only overflow-x, so both tables now stand at their natural length and nothing is cut off. -------------------------------------------------------------------------- THE OLD RULES ARE LEFT WHERE THEY ARE The .ss-* rules earlier in this file are not edited and not removed. The elements they named are simply no longer in the markup. ========================================================================== */ .subject-structure-section { width: 100%; padding: 80px 0; background: #f8fbff; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .subject-structure-container { width: calc(100% - 96px); max-width: 1440px; margin: 0 auto; } .subject-structure-header { width: 100%; margin-bottom: 28px; text-align: center; } .subject-structure-header h2 { margin: 0 0 14px; color: #061d4d; font-size: 46px; line-height: 1.15; font-weight: 800; letter-spacing: -0.8px; } .subject-group-label { display: inline-block; padding: 5px 15px; background: #2949ad; color: #ffffff; border-radius: 20px; font-size: 13px; line-height: 1.3; font-weight: 600; } .subject-table-wrapper { width: 100%; display: grid; grid-template-columns: 155px 1fr; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(8, 60, 124, 0.08); } .subject-side-panel h3 { width: 100%; margin: 18px 0 12px; color: #ffffff; font-size: 17px; line-height: 1.4; font-weight: 700; text-align: center; } .group-a-section .subject-side-panel { position: relative; width: 100%; min-height: 540px; padding: 35px 15px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #2949ad; color: #ffffff; overflow: hidden; } .group-a-section .subject-icon-circle { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 0 8px rgba(255,255,255,0.04); position: relative; z-index: 2; } .group-a-section .subject-icon-circle i { color: #ffffff; font-size: 30px; } .group-a-section .subject-side-panel h3 { width: 100%; margin: 0; color: #ffffff; font-size: 16px; line-height: 1.4; font-weight: 700; text-align: center; position: relative; z-index: 2; } .group-a-section .subject-panel-divider { width: 42px; height: 3px; margin: 16px auto; background: #ffffff; border-radius: 5px; position: relative; z-index: 2; } .group-a-section .subject-side-panel p { width: 100%; margin: 0; color: #ffffff; font-size: 16px; line-height: 1.7; font-weight: 700; text-align: center; position: relative; z-index: 2; } .group-a-section .subject-large-icon { margin-top: 55px; opacity: 0.16; position: relative; z-index: 1; } .group-a-section .subject-large-icon i { color: #ffffff; font-size: 105px; } .subject-table-container { width: 100%; overflow-x: auto; } .subject-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .subject-table thead th:nth-child(1) { width: 27%; } .subject-table thead th:nth-child(2) { width: 29%; } .subject-table thead th:nth-child(3) { width: 74%; } .subject-table thead th { height: 52px; padding: 12px 16px; background: #2949ad; color: #ffffff; border-right: 1px solid rgba(255,255,255,0.18); font-size: 13px; line-height: 1.3; font-weight: 600; text-align: left; vertical-align: middle; } .subject-table tbody tr { height: 42px; background: #ffffff; transition: background 0.2s ease; } .subject-table tbody tr:nth-child(even) { background: #f0f4fa; } .subject-table tbody tr:hover { background: #e7efff; } .subject-table tbody td { padding: 10px 14px; font-size: 13px; line-height: 1.45; border-bottom: 1px solid #d8e2ef; border-right: 1px solid #d8e2ef; } .subject-table tbody td:first-child { text-align: center; color: #2949ad; font-weight: 700; } .subject-table tbody td:nth-child(2) { color: #172d55; font-weight: 700; } .subject-table tbody td:nth-child(3) { color: #425572; font-weight: 400; } .subject-table tbody tr:last-child td { border-bottom: none; } @media (min-width: 1400px) { .group-a-section .subject-side-panel { min-height: 540px; padding: 35px 20px; } .group-a-section .subject-icon-circle { width: 72px; height: 72px; } .group-a-section .subject-icon-circle i { font-size: 30px; } .group-a-section .subject-side-panel h3 { font-size: 15px; } .group-a-section .subject-side-panel p { font-size: 13px; } .group-a-section .subject-large-icon i { font-size: 105px; } .group-a-section .subject-table thead th { font-size: 13px; padding: 12px 16px; } .group-a-section .subject-table tbody td { font-size: 13px; padding: 10px 14px; } } @media (min-width: 1200px) and (max-width: 1399px) { .group-a-section .subject-side-panel { min-height: 520px; padding: 30px 18px; } .group-a-section .subject-icon-circle { width: 68px; height: 68px; } .group-a-section .subject-icon-circle i { font-size: 28px; } .group-a-section .subject-side-panel h3 { font-size: 14px; } .group-a-section .subject-side-panel p { font-size: 12px; line-height: 1.6; } .group-a-section .subject-large-icon { margin-top: 45px; } .group-a-section .subject-large-icon i { font-size: 95px; } .group-a-section .subject-table thead th { font-size: 12px; padding: 11px 13px; } .group-a-section .subject-table tbody td { font-size: 12px; padding: 9px 11px; } } @media (min-width: 992px) and (max-width: 1199px) { .group-a-section .subject-side-panel { min-height: 500px; padding: 28px 15px; } .group-a-section .subject-icon-circle { width: 62px; height: 62px; } .group-a-section .subject-icon-circle i { font-size: 25px; } .group-a-section .subject-side-panel h3 { font-size: 14px; line-height: 1.35; } .group-a-section .subject-side-panel p { font-size: 12px; line-height: 1.55; } .group-a-section .subject-large-icon { margin-top: 40px; } .group-a-section .subject-large-icon i { font-size: 85px; } .group-a-section .subject-table-container { width: 100%; overflow-x: auto; } .group-a-section .subject-table { min-width: 650px; } .group-a-section .subject-table thead th { font-size: 11px; padding: 10px 11px; } .group-a-section .subject-table tbody td { font-size: 11px; padding: 9px 10px; } } @media (min-width: 768px) and (max-width: 991px) { .group-a-section .subject-side-panel { min-height: 460px; padding: 25px 12px; } .group-a-section .subject-icon-circle { width: 58px; height: 58px; margin-bottom: 18px; } .group-a-section .subject-icon-circle i { font-size: 23px; } .group-a-section .subject-side-panel h3 { font-size: 13px; line-height: 1.35; } .group-a-section .subject-panel-divider { width: 38px; height: 2px; margin: 13px auto; } .group-a-section .subject-side-panel p { font-size: 11px; line-height: 1.55; } .group-a-section .subject-large-icon { margin-top: 35px; } .group-a-section .subject-large-icon i { font-size: 75px; } .group-a-section .subject-table-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .group-a-section .subject-table { min-width: 650px; } .group-a-section .subject-table thead th { font-size: 11px; padding: 9px 10px; white-space: nowrap; } .group-a-section .subject-table tbody td { font-size: 11px; padding: 8px 9px; } } @media (min-width: 576px) and (max-width: 767px) { .group-a-section .subject-side-panel { min-height: 145px; padding: 25px 20px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 18px; } .group-a-section .subject-icon-circle { width: 58px; height: 58px; min-width: 58px; margin-bottom: 0; } .group-a-section .subject-icon-circle i { font-size: 24px; } .group-a-section .subject-side-panel h3 { width: auto; font-size: 14px; line-height: 1.35; text-align: left; } .group-a-section .subject-panel-divider { display: none; } .group-a-section .subject-side-panel p { width: auto; font-size: 12px; line-height: 1.5; text-align: left; } .group-a-section .subject-large-icon { display: none; } .group-a-section .subject-table-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .group-a-section .subject-table { min-width: 780px; width: 100%; } .group-a-section .subject-table thead th { font-size: 12px; padding: 10px 12px; white-space: nowrap; } .group-a-section .subject-table tbody td { font-size: 12px; padding: 9px 10px; } } @media (min-width: 481px) and (max-width: 575px) { .group-a-section .subject-side-panel { min-height: 135px; padding: 22px 16px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; } .group-a-section .subject-icon-circle { width: 54px; height: 54px; min-width: 54px; margin-bottom: 0; } .group-a-section .subject-icon-circle i { font-size: 22px; } .group-a-section .subject-side-panel h3 { width: auto; font-size: 14px; line-height: 1.3; text-align: left; } .group-a-section .subject-panel-divider, .group-a-section .subject-large-icon { display: none; } .group-a-section .subject-side-panel p { width: auto; font-size: 11px; line-height: 1.45; text-align: left; } .group-a-section .subject-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .group-a-section .subject-table { min-width: 740px; } .group-a-section .subject-table thead th { font-size: 11px; padding: 9px 10px; white-space: nowrap; } .group-a-section .subject-table tbody td { font-size: 11px; padding: 8px 9px; } } @media (min-width: 360px) and (max-width: 480px) { .group-a-section .subject-side-panel { min-height: 130px; padding: 20px 14px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } .group-a-section .subject-icon-circle { width: 50px; height: 50px; min-width: 50px; margin-bottom: 0; } .group-a-section .subject-icon-circle i { font-size: 20px; } .group-a-section .subject-side-panel h3 { width: auto; font-size: 13px; line-height: 1.3; text-align: left; } .group-a-section .subject-side-panel p { width: auto; font-size: 10px; line-height: 1.45; text-align: left; } .group-a-section .subject-panel-divider, .group-a-section .subject-large-icon { display: none; } .group-a-section .subject-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .group-a-section .subject-table { min-width: 720px; } .group-a-section .subject-table thead th { font-size: 10px; padding: 8px 9px; white-space: nowrap; } .group-a-section .subject-table tbody td { font-size: 10px; padding: 8px; } .group-a-section .subject-table tbody tr { height: 42px; } } @media (max-width: 359px) { .group-a-section .subject-side-panel { min-height: 120px; padding: 18px 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px; } .group-a-section .subject-icon-circle { width: 46px; height: 46px; min-width: 46px; margin-bottom: 0; } .group-a-section .subject-icon-circle i { font-size: 18px; } .group-a-section .subject-side-panel h3 { font-size: 12px; line-height: 1.3; text-align: left; } .group-a-section .subject-side-panel p { font-size: 9px; line-height: 1.4; text-align: left; } .group-a-section .subject-panel-divider, .group-a-section .subject-large-icon { display: none; } .group-a-section .subject-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .group-a-section .subject-table { min-width: 680px; } .group-a-section .subject-table thead th { font-size: 10px; padding: 7px 8px; white-space: nowrap; } .group-a-section .subject-table tbody td { font-size: 10px; padding: 7px; } .group-a-section .subject-table tbody tr { height: 40px; } } .group-b-section .subject-side-panel { position: relative; width: 100%; min-height: 540px; padding: 35px 15px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #2949ad; color: #ffffff; overflow: hidden; } .group-b-section .subject-icon-circle { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 0 8px rgba(255,255,255,0.04); position: relative; z-index: 2; } .group-b-section .subject-icon-circle i { color: #ffffff; font-size: 30px; } .group-b-section .subject-side-panel h3 { width: 100%; margin: 0; color: #ffffff; font-size: 16px !important; line-height: 1.4; font-weight: 700; text-align: center; position: relative; z-index: 2; } .group-b-section .subject-panel-divider { width: 42px; height: 3px; margin: 16px auto; background: #ffffff; border-radius: 5px; position: relative; z-index: 2; } .group-b-section .subject-side-panel p { width: 100%; margin: 0; color: #ffffff; font-size: 16px !important; line-height: 1.7; font-weight: 700; text-align: center; position: relative; z-index: 2; } .group-b-section .subject-large-icon { margin-top: 55px; opacity: 0.16; position: relative; z-index: 1; } .group-b-section .subject-large-icon i { color: #ffffff; font-size: 105px; } .group-b-section .subject-table-container { width: 100%; overflow-x: auto; } .group-b-section .subject-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .group-b-section .subject-table thead th:nth-child(1) { width: 20%; } .group-b-section .subject-table thead th:nth-child(2) { width: 20%; } .group-b-section .subject-table thead th:nth-child(3) { width: 55%; } .group-b-section .subject-table thead th { height: 52px; padding: 11px 16px; background: #123f94; color: #ffffff; border-right: 1px solid rgba(255,255,255,0.16); font-size: 13px; line-height: 1.3; font-weight: 600; text-align: left; vertical-align: middle; } .group-b-section .subject-table thead th i { margin-right: 8px; font-size: 15px; } .group-b-section .subject-table tbody tr { height: 39px; background: #ffffff; transition: background 0.2s ease; } .group-b-section .subject-table tbody tr:nth-child(even) { background: #f0f4fa; } .group-b-section .subject-table tbody tr:hover { background: #e7efff; } .group-b-section .subject-table tbody td { padding: 9px 14px; border-bottom: 1px solid #d8e2ef; border-right: 1px solid #d8e2ef; color: #294363; font-size: 12px; line-height: 1.4; vertical-align: middle; } .group-b-section .subject-table tbody td:first-child { color: #2949ad; font-weight: 700; text-align: center; } .group-b-section .subject-table tbody td:nth-child(2) { color: #172d55; font-weight: 700; } .group-b-section .subject-table tbody td:nth-child(3) { color: #425572; font-weight: 400; } .group-b-section .subject-table tbody tr:last-child td { border-bottom: none; } @media (min-width: 1400px) { .group-b-section .subject-structure-container { width: calc(100% - 100px); max-width: 1440px; margin: 0 auto; } .group-b-section .subject-table-wrapper { grid-template-columns: 220px 1fr; } .group-b-section .subject-side-panel { min-height: 520px; padding: 35px 25px; } .group-b-section .subject-side-panel h3 { font-size: 18px; } .group-b-section .subject-side-panel p { font-size: 14px; } .group-b-section .subject-table thead th { font-size: 14px; padding: 14px 16px; } .group-b-section .subject-table tbody td { font-size: 13px; padding: 12px 14px; } } @media (min-width: 1200px) and (max-width: 1399px) { .group-b-section .subject-structure-container { width: calc(100% - 80px); max-width: 1320px; margin: 0 auto; } .group-b-section .subject-table-wrapper { grid-template-columns: 200px 1fr; } .group-b-section .subject-side-panel { min-height: 500px; padding: 32px 22px; } .group-b-section .subject-side-panel h3 { font-size: 17px; } .group-b-section .subject-side-panel p { font-size: 13px; } .group-b-section .subject-table thead th { font-size: 13px; padding: 12px 14px; } .group-b-section .subject-table tbody td { font-size: 12px; padding: 10px 12px; } } @media (min-width: 992px) and (max-width: 1199px) { .group-b-section .subject-structure-container { width: calc(100% - 60px); max-width: 1150px; margin: 0 auto; } .group-b-section .subject-table-wrapper { grid-template-columns: 170px 1fr; } .group-b-section .subject-side-panel { min-height: 480px; padding: 28px 18px; } .group-b-section .subject-side-panel h3 { font-size: 15px; } .group-b-section .subject-side-panel p { font-size: 12px; } .group-b-section .subject-icon-circle { width: 58px; height: 58px; } .group-b-section .subject-table thead th { font-size: 12px; padding: 10px 12px; } .group-b-section .subject-table tbody td { font-size: 11px; padding: 9px 10px; } } @media (min-width: 768px) and (max-width: 991px) { .group-b-section .subject-structure-container { width: calc(100% - 50px); max-width: none; margin: 0 auto; } .group-b-section .subject-table-wrapper { grid-template-columns: 150px minmax(0, 1fr); width: 100%; } .group-b-section .subject-side-panel { min-height: 460px; padding: 25px 15px; } .group-b-section .subject-icon-circle { width: 55px; height: 55px; min-width: 55px; } .group-b-section .subject-icon-circle i { font-size: 22px; } .group-b-section .subject-side-panel h3 { width: 100%; font-size: 14px; line-height: 1.35; text-align: center; } .group-b-section .subject-side-panel p { width: 100%; font-size: 11px; line-height: 1.5; text-align: center; } .group-b-section .subject-table-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .group-b-section .subject-table { min-width: 700px; width: 100%; } .group-b-section .subject-table thead th { font-size: 11px; padding: 10px 9px; white-space: nowrap; } .group-b-section .subject-table tbody td { font-size: 11px; padding: 9px 8px; } } @media (min-width: 576px) and (max-width: 767px) { .group-b-section .subject-structure-container { width: calc(100% - 30px); max-width: none; margin: 0 auto; } .group-b-section .subject-table-wrapper { width: 100%; display: grid; grid-template-columns: 1fr; } .group-b-section .subject-side-panel { width: 100%; min-height: 145px; padding: 25px 20px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 18px; } .group-b-section .subject-icon-circle { width: 58px; height: 58px; min-width: 58px; margin-bottom: 0; } .group-b-section .subject-icon-circle i { font-size: 24px; } .group-b-section .subject-side-panel h3 { width: auto; margin: 0; font-size: 15px; text-align: left; } .group-b-section .subject-side-panel p { width: auto; margin: 0; font-size: 12px; text-align: left; } .group-b-section .subject-panel-divider { display: none; } .group-b-section .subject-large-icon { display: none; } .group-b-section .subject-table-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .group-b-section .subject-table { min-width: 780px; width: 100%; } .group-b-section .subject-table thead th { font-size: 12px; padding: 10px 12px; white-space: nowrap; } .group-b-section .subject-table tbody td { font-size: 12px; padding: 9px 10px; } .group-b-section .subject-table tbody tr { height: 43px; } } @media (min-width: 481px) and (max-width: 575px) { .group-b-section .subject-structure-container { width: calc(100% - 24px); margin: 0 auto; } .group-b-section .subject-table-wrapper { display: grid; grid-template-columns: 1fr; } .group-b-section .subject-side-panel { min-height: 135px; padding: 22px 18px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; } .group-b-section .subject-icon-circle { width: 54px; height: 54px; min-width: 54px; margin-bottom: 0; } .group-b-section .subject-icon-circle i { font-size: 22px; } .group-b-section .subject-side-panel h3 { width: auto; font-size: 14px; text-align: left; } .group-b-section .subject-side-panel p { width: auto; font-size: 11px; text-align: left; } .group-b-section .subject-panel-divider, .group-b-section .subject-large-icon { display: none; } .group-b-section .subject-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .group-b-section .subject-table { min-width: 740px; } .group-b-section .subject-table thead th { font-size: 11px; padding: 9px 10px; } .group-b-section .subject-table tbody td { font-size: 11px; padding: 8px 9px; } } @media (min-width: 360px) and (max-width: 480px) { .group-b-section .subject-structure-container { width: calc(100% - 20px); margin: 0 auto; } .group-b-section .subject-table-wrapper { display: grid; grid-template-columns: 1fr; } .group-b-section .subject-side-panel { min-height: 130px; padding: 20px 15px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } .group-b-section .subject-icon-circle { width: 50px; height: 50px; min-width: 50px; margin-bottom: 0; } .group-b-section .subject-icon-circle i { font-size: 20px; } .group-b-section .subject-side-panel h3 { width: auto; font-size: 14px; line-height: 1.3; text-align: left; } .group-b-section .subject-side-panel p { width: auto; font-size: 11px; line-height: 1.45; text-align: left; } .group-b-section .subject-panel-divider, .group-b-section .subject-large-icon { display: none; } .group-b-section .subject-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .group-b-section .subject-table { min-width: 720px; } .group-b-section .subject-table thead th { font-size: 11px; padding: 8px 9px; white-space: nowrap; } .group-b-section .subject-table tbody td { font-size: 11px; padding: 8px; } .group-b-section .subject-table tbody tr { height: 42px; } } @media (max-width: 359px) { .group-b-section .subject-structure-container { width: calc(100% - 14px); margin: 0 auto; } .group-b-section .subject-table-wrapper { display: grid; grid-template-columns: 1fr; } .group-b-section .subject-side-panel { min-height: 120px; padding: 18px 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px; } .group-b-section .subject-icon-circle { width: 46px; height: 46px; min-width: 46px; margin-bottom: 0; } .group-b-section .subject-icon-circle i { font-size: 18px; } .group-b-section .subject-side-panel h3 { font-size: 13px; line-height: 1.3; text-align: left; } .group-b-section .subject-side-panel p { font-size: 10px; line-height: 1.4; text-align: left; } .group-b-section .subject-panel-divider, .group-b-section .subject-large-icon { display: none; } .group-b-section .subject-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .group-b-section .subject-table { min-width: 680px; } .group-b-section .subject-table thead th { font-size: 10px; padding: 8px; white-space: nowrap; } .group-b-section .subject-table tbody td { font-size: 10px; padding: 7px; } .group-b-section .subject-table tbody tr { height: 40px; } } @media screen and (max-width: 767px) { .subject-structure-section:not(.group-b-section) .subject-side-panel { min-height: 145px !important; height: 145px !important; padding: 25px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 18px !important; box-sizing: border-box; text-align: left !important; } .subject-structure-section:not(.group-b-section) .subject-icon-circle { width: 58px !important; height: 58px !important; min-width: 58px !important; margin: 0 !important; flex: 0 0 58px !important; } .subject-structure-section:not(.group-b-section) .subject-icon-circle i { font-size: 24px !important; } .subject-structure-section:not(.group-b-section) .subject-side-panel h3 { width: auto !important; margin: 0 !important; font-size: 16px !important; line-height: 1.3 !important; text-align: center !important; flex: 0 0 auto !important; } .subject-structure-section:not(.group-b-section) .subject-panel-divider { display: none !important; } .subject-structure-section:not(.group-b-section) .subject-side-panel p { width: auto !important; margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; text-align: left !important; flex: 0 0 auto !important; } .subject-structure-section:not(.group-b-section) .subject-large-icon { display: none !important; } .subject-structure-section:not(.group-b-section) .subject-table-wrapper { grid-template-columns: 1fr !important; border-radius: 16px !important; overflow: hidden !important; } .subject-structure-section:not(.group-b-section) .subject-table-container { width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .subject-structure-section:not(.group-b-section) .subject-table { width: 100%; min-width: 780px !important; } .subject-structure-section:not(.group-b-section) .subject-table thead th { height: 52px; padding: 11px 16px; font-size: 16px; white-space: nowrap; } .subject-structure-section:not(.group-b-section) .subject-table tbody td { padding: 9px 14px; font-size: 16px; } } @media screen and (max-width: 480px) { .subject-structure-section:not(.group-b-section) .subject-side-panel { min-height: 130px !important; height: 130px !important; padding: 20px 15px !important; gap: 16px !important; } .subject-structure-section:not(.group-b-section) .subject-icon-circle { width: 52px !important; height: 52px !important; min-width: 52px !important; flex-basis: 52px !important; } .subject-structure-section:not(.group-b-section) .subject-icon-circle i { font-size: 22px !important; } .subject-structure-section:not(.group-b-section) .subject-side-panel h3 { font-size: 14px !important; } .subject-structure-section:not(.group-b-section) .subject-side-panel p { font-size: 17px !important; font-weight: 700; } .subject-structure-section:not(.group-b-section) .subject-table { min-width: 720px !important; } } .group-a-section .subject-side-panel h3 { font-size: 16px !important; } @media screen and (max-width: 767px) { .subject-structure-section.group-a-section .subject-icon-circle { flex: initial !important; margin: 0 !important; } .subject-structure-section.group-a-section .subject-side-panel h3 { flex: initial !important; margin: 0 !important; font-size: 16px !important; line-height: 1.3 !important; text-align: left !important; } .subject-structure-section.group-a-section .subject-side-panel p { flex: initial !important; margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; text-align: left !important; } .subject-structure-section.group-a-section .subject-table thead th { height: 52px !important; background-color: #123F94 !important; } } @media screen and (min-width: 576px) and (max-width: 767px) { .subject-structure-section.group-a-section .subject-side-panel { min-height: 145px !important; height: 145px !important; padding: 25px 20px !important; gap: 18px !important; } .subject-structure-section.group-a-section .subject-icon-circle { width: 58px !important; height: 58px !important; min-width: 58px !important; } .subject-structure-section.group-a-section .subject-icon-circle i { font-size: 24px !important; } .subject-structure-section.group-a-section .subject-table { min-width: 780px !important; } .subject-structure-section.group-a-section .subject-table thead th { padding: 10px 12px !important; white-space: nowrap !important; } .subject-structure-section.group-a-section .subject-table tbody td { padding: 9px 10px !important; } } @media screen and (max-width: 575px) { .subject-structure-section.group-a-section .subject-side-panel { min-height: 135px !important; height: 135px !important; padding: 22px 18px !important; gap: 14px !important; } .subject-structure-section.group-a-section .subject-icon-circle { width: 54px !important; height: 54px !important; min-width: 54px !important; } .subject-structure-section.group-a-section .subject-icon-circle i { font-size: 22px !important; } .subject-structure-section.group-a-section .subject-table { min-width: 740px !important; } .subject-structure-section.group-a-section .subject-table thead th { padding: 9px 10px !important; white-space: normal !important; } .subject-structure-section.group-a-section .subject-table tbody td { padding: 8px 9px !important; } } @media screen and (max-width: 480px) { .subject-structure-section.group-a-section .subject-side-panel { min-height: 130px !important; height: 130px !important; padding: 20px 15px !important; gap: 12px !important; } .subject-structure-section.group-a-section .subject-icon-circle { width: 50px !important; height: 50px !important; min-width: 50px !important; } .subject-structure-section.group-a-section .subject-icon-circle i { font-size: 20px !important; } .subject-structure-section.group-a-section .subject-table { min-width: 720px !important; } .subject-structure-section.group-a-section .subject-table thead th { padding: 8px 9px !important; white-space: nowrap !important; } .subject-structure-section.group-a-section .subject-table tbody td { padding: 8px !important; } } @media screen and (max-width: 359px) { .subject-structure-section.group-a-section .subject-side-panel { min-height: 120px !important; height: 120px !important; padding: 18px 10px !important; gap: 9px !important; } .subject-structure-section.group-a-section .subject-icon-circle { width: 46px !important; height: 46px !important; min-width: 46px !important; } .subject-structure-section.group-a-section .subject-icon-circle i { font-size: 18px !important; } .subject-structure-section.group-a-section .subject-table { min-width: 680px !important; } .subject-structure-section.group-a-section .subject-table thead th { padding: 8px !important; white-space: nowrap !important; } .subject-structure-section.group-a-section .subject-table tbody td { padding: 7px !important; } } .program-overview-modern .pg-content p, .subject-structure-section .subject-side-panel p, .subject-structure-section .subject-table th, .subject-structure-section .subject-table td, .assessment-section .assessment-header p, .assessment-section .assessment-item-content p, .assessment-section .certification-intro, .assessment-section .certification-item p, .academic-provisions-section .academic-provisions-header p, .academic-provisions-section .academic-card-intro, .academic-provisions-section .academic-card-list p { font-size: 16px !important; } .subject-structure-section .subject-group-label { display: flex !important; align-items: center !important; justify-content: center !important; gap: 15px !important; width: 100% !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; color: #2949ad !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; } .subject-structure-section .subject-group-label::before, .subject-structure-section .subject-group-label::after { content: "" !important; display: block !important; flex: 0 1 70px !important; min-width: 20px !important; height: 1px !important; background: #2949ad !important; border-radius: 0 !important; } @media screen and (max-width: 767px) { .subject-structure-section .subject-group-label { gap: 12px !important; } .subject-structure-section .subject-group-label::before, .subject-structure-section .subject-group-label::after { flex-basis: 45px !important; } } @media screen and (max-width: 480px) { .subject-structure-section .subject-group-label { gap: 10px !important; } .subject-structure-section .subject-group-label::before, .subject-structure-section .subject-group-label::after { flex-basis: 26px !important; } } .subject-structure-header h2, .assessment-header h2, .academic-provisions-header h2 { font-size: 38px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.5px !important; } @media screen and (max-width: 1199px) { .subject-structure-header h2, .assessment-header h2, .academic-provisions-header h2 { font-size: 36px !important; } } @media screen and (max-width: 991px) { .subject-structure-header h2, .assessment-header h2, .academic-provisions-header h2 { font-size: 34px !important; line-height: 1.15 !important; } } @media screen and (max-width: 767px) { .subject-structure-header h2, .assessment-header h2, .academic-provisions-header h2 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -0.4px !important; } } @media screen and (max-width: 575px) { .subject-structure-header h2, .assessment-header h2, .academic-provisions-header h2 { font-size: 29px !important; line-height: 1.15 !important; letter-spacing: -0.3px !important; } } .pg-item p, .pg-check-item p, .subject-side-panel p, .assessment-header p, .assessment-item-content p, .certification-intro, .certification-item p, .academic-provisions-header p, .academic-card-intro, .academic-card-list p { font-size: 16px !important; line-height: 1.7 !important; } .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 20px !important; line-height: 1.35 !important; font-weight: 700 !important; } @media screen and (max-width: 1199px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 16px !important; } } @media screen and (max-width: 991px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 16px !important; line-height: 1.4 !important; } } @media screen and (max-width: 767px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 15px !important; line-height: 1.4 !important; } } @media screen and (max-width: 575px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 15px !important; line-height: 1.4 !important; } } @media screen and (max-width: 480px) { .pg-side-panel h3, .pg-item h6, .pg-item h6 b, .subject-side-panel h3, .assessment-box-title h3, .assessment-item-content h4, .academic-card-content h3 { font-size: 14px !important; line-height: 1.4 !important; } } .subject-group-label { font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } @media screen and (max-width: 991px) { .subject-group-label { font-size: 11px !important; letter-spacing: 1.5px !important; } } @media screen and (max-width: 575px) { .subject-group-label { font-size: 10px !important; letter-spacing: 1.2px !important; } } .subject-structure-section .subject-group-label { font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } @media screen and (max-width: 991px) { .subject-structure-section .subject-group-label { font-size: 11px !important; letter-spacing: 1.5px !important; } } @media screen and (max-width: 575px) { .subject-structure-section .subject-group-label { font-size: 10px !important; letter-spacing: 1.2px !important; } } .subject-structure-section .subject-structure-header h2 { font-family: Arial, Helvetica, sans-serif !important; } .subject-structure-header h2, .assessment-header h2, .academic-provisions-header h2 { color: #061D4D !important; } /* ========================================================================== THE GUIDELINES PANEL WAS STILL CLIPPING - MY OWN REGRESSION ------------------------------------------------------------------------- Raised two changes ago and not finished. Measured again just now, with the two panels finally side by side: box 2 .pg-content scroll 415 client 390 overflow 25px box 2 height auto, min-height 390px, grid row 390px The block before last made 390px a floor rather than a ceiling, and the box did take height auto - but the row stayed 390px and the last line was still outside the panel. The reason is one line further down: .pg-content { width: 100%; height: 390px; ... } copied from the Grade 10 page. A percentage-less fixed height on the grid ITEM means the item contributes exactly 390px to the row's intrinsic size, whatever is inside it. So the row is sized to the item, not the item to the row, and the sentence 'from recognized boards (as per equivalency guidelines)' never reaches the page. The Grade 10 page does not show this because its own four check rows are shorter and happen to fit in 390px. The Grade 12 four are longer. So .pg-content is given height auto at 768px and above. The row then sizes to what is actually in it, the second panel grows to about 415px, and because .pg-container is a grid both panels in the row stay the same height. Below 768px the Grade 10 page's own rules already set height auto with !important and this block does not reach there. ========================================================================== */ @media (min-width: 768px) { .program-overview-section .pg-content { height: auto; } } /* ========================================================================== THE OVERVIEW IS ITS OWN SECTION NOW ------------------------------------------------------------------------- The photograph, the text and the two panels were all inside one white card, photograph left and text right, panels across the bottom. Now: program-overview-section the photograph, full width, with the heading and the paragraph centred on it program-overview-panels the two panels, in a section of their own which is the split the Grade 10 page makes between its own program-overview-section and its program-overview-modern. -------------------------------------------------------------------------- WHY THERE IS A SCRIM White text has to sit on a photograph of a bright classroom, so the picture carries a navy veil - rgba(6,47,103,...) at 74% to 84%, which is this page's own navy rather than #062d5c. It is a translucent overlay, not a background: the photograph reads through it. The heading goes to white and the paragraph to 92% white so both clear the photograph. The type sizes are not touched - the Grade 10 page's 38px heading and its paragraph ladder stay as they are. -------------------------------------------------------------------------- THE LABEL IS GONE The document icon and the words PROGRAMME OVERVIEW were taken out of the markup. 'About the Programme' and the paragraph are untouched. -------------------------------------------------------------------------- WHAT THE OLD CARD GAVE UP .program-overview-container was a 48%/52% grid inside a white panel with a 1px border, a 20px radius and a shadow. With one full-width child it has nothing to divide, so the grid, the panel, the border and the shadow are all set back to nothing and the photograph carries the rounded corners itself. ========================================================================== */ .program-overview-section { padding: 70px 0 0; } .program-overview-section .program-overview-container { display: block; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* the photograph becomes the whole band */ .program-overview-section .overview-image-area { position: relative; display: block; width: 100%; min-height: 460px; border-radius: 20px; overflow: hidden; } .program-overview-section .overview-image-card { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; } /* the veil the text sits on */ .program-overview-section .overview-image-area::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(6, 47, 103, 0.74) 0%, rgba(6, 47, 103, 0.84) 100% ); } /* the heading and the paragraph, centred on the photograph */ .program-overview-section .overview-content { position: relative; z-index: 4; max-width: 860px; margin: 0 auto; padding: 64px 40px; text-align: center; } .program-overview-section .overview-content h2 { color: #ffffff; } .program-overview-section .overview-content p { color: rgba(255, 255, 255, 0.92); } /* the panels, in a section of their own */ .program-overview-panels { padding: 56px 0 70px; background: #f5f8fd; } @media (max-width: 1199px) { .program-overview-section .overview-image-area { min-height: 420px; } .program-overview-section .overview-content { padding: 56px 34px; } } @media (max-width: 991px) { .program-overview-section { padding: 55px 0 0; } .program-overview-section .overview-image-area { min-height: 380px; } .program-overview-section .overview-content { padding: 48px 30px; } } @media (max-width: 767px) { .program-overview-section { padding: 35px 0 0; } .program-overview-section .overview-image-area { min-height: 320px; border-radius: 16px; } .program-overview-section .overview-content { padding: 38px 24px; } .program-overview-panels { padding: 40px 0 35px; } } @media (max-width: 575px) { .program-overview-section .overview-image-area { min-height: 280px; } .program-overview-section .overview-content { padding: 30px 18px; } } /* ========================================================================== THE PARAGRAPH WAS STILL SETTING ITS OWN ALIGNMENT AND WIDTH ------------------------------------------------------------------------- The block above centres .overview-content, and the heading centred with it - 'About the Programme' came out dead middle of the band. The paragraph did not: it sat left of centre with both edges flush, because the Grade 10 page's own rule names the element directly. .overview-content p text-align: left; max-width: 650px; margin: 0 0 22px text-align on the parent is inherited, and anything set on the element beats what it inherits, however high the parent's own specificity - so centring the block could not reach the paragraph. Its 650px cap with no side margin also left it hard against the left edge of the 860px block. So the paragraph is named here: full width of the block, centred, no side margins. Nothing about the type changes. ========================================================================== */ .program-overview-section .overview-content p { max-width: 100%; margin: 0; text-align: center; } /* ========================================================================== BACK TO THE WHITE CARD, AS IN THE REFERENCE ------------------------------------------------------------------------- The last change made the photograph a full-width band with the heading and the paragraph centred on it under a navy veil. The reference this was matched to is the other shape - a white rounded card, the photograph on the left with the cap badge over its top corner, the heading and the paragraph on the right - so that is what this puts back. Superseded, not edited: every rule here wins over the band block above it, which is left in the file as it stands. the veil content: none off the photograph the card white, 20px radius, 1px #e2eaf6, soft shadow the two columns 48% photograph / 52% text, level with each other the photograph 88% x 255px, 20px radius, centred in its column the heading #092f6b, its own navy on white again the paragraph #263b5c, left aligned, flush left inside the text The 48%/52% split, the 55px 50px padding, the 20px radius, the #f5f8fd section ground and the whole width ladder are the values written out two changes ago, which are the Grade 10 page's own. -------------------------------------------------------------------------- THE PANELS ARE NOT TOUCHED .program-overview-panels stays its own section underneath, and nothing in this block names .pg-* at all. ========================================================================== */ .program-overview-section .program-overview-container { display: grid; grid-template-columns: 48% 52%; align-items: center; min-height: 470px; padding: 55px 50px; background: #ffffff; border: 1px solid #e2eaf6; border-radius: 20px; box-shadow: 0 8px 30px rgba(8, 60, 124, 0.06); } /* the photograph sits in the left column again, not behind the text */ .program-overview-section .overview-image-area { display: flex; align-items: center; justify-content: center; min-height: 360px; border-radius: 0; overflow: visible; } .program-overview-section .overview-image-area::after { content: none; } .program-overview-section .overview-image-card { position: relative; inset: auto; z-index: 3; width: 88%; height: 255px; border-radius: 20px; box-shadow: 0 12px 28px rgba(8, 60, 124, 0.14); } /* the text is back in its own column, navy on white */ .program-overview-section .overview-content { max-width: 100%; margin: 0; padding: 0 0 0 20px; text-align: left; } .program-overview-section .overview-content h2 { color: #092f6b; } .program-overview-section .overview-content p { max-width: 650px; margin: 0; color: #263b5c; text-align: left; } @media (max-width: 1199px) { .program-overview-section .program-overview-container { width: 94%; } } @media (max-width: 1200px) { .program-overview-section .program-overview-container { grid-template-columns: 47% 53%; padding: 45px 35px; } } @media (max-width: 991px) { .program-overview-section .program-overview-container { grid-template-columns: minmax(0, 1fr); gap: 35px; padding: 40px 35px; } .program-overview-section .overview-image-area { min-height: 330px; } } @media (max-width: 767px) { .program-overview-section .program-overview-container { width: 90%; padding: 30px 22px; border-radius: 16px; gap: 25px; } .program-overview-section .overview-image-area { min-height: 270px; } } @media (max-width: 480px) { .program-overview-section .program-overview-container { width: 92%; padding: 25px 18px; } .program-overview-section .overview-image-area { min-height: 235px; } } /* ========================================================================== THE PANELS WERE 18PX WIDER THAN THE CARD ABOVE THEM ------------------------------------------------------------------------- Measured at 1440: .program-overview-container left 58 right 1382 1324.8 wide .pg-container left 40 right 1400 1360.0 wide The Grade 10 page gives .pg-container width: calc(100% - 80px), which is what is being read here, and it lands 18px outside the card on each side. Before the panels were moved into a section of their own they sat inside that card and shared its width, so the two edges always lined up. Splitting them out is what let them drift, and nothing put them back. So the panels take the card's own measure - 92% of the section, capped at 1380px, centred - which is the same width ladder .program-overview-container already uses at every breakpoint. ========================================================================== */ .program-overview-panels .pg-container { width: 92%; max-width: 1380px; margin-left: auto; margin-right: auto; } @media (max-width: 1199px) { .program-overview-panels .pg-container { width: 94%; } } @media (max-width: 767px) { .program-overview-panels .pg-container { width: 90%; } } @media (max-width: 480px) { .program-overview-panels .pg-container { width: 92%; } } /* ========================================================================== THE TEXT WAS SITTING ABOVE THE PHOTOGRAPH ------------------------------------------------------------------------- Measured at 1440: container top 70.0 height 472.0 align-items start image area top 126.0 height 360.0 photo top 178.5 height 255.0 centre 306.0 text top 126.0 height 215.2 centre 233.6 The text sat 72.4px above the middle of the photograph. The photograph is centred inside a 360px row; the text was pinned to the top of the same row, because of a rule that has been in this file since long before any of this work: .program-overview-section .program-overview-container align-items: start !important It was written for the old arrangement, where the column of text beside the cards could be taller than the cards. It carries !important, so the align-items: center in the block written for the white card could not reach it - same selector, and !important wins over source order. So the two are put on the same footing. The rule above is left exactly as it is; this one supersedes it. Below 991px the container is a single column, so each item centres in its own row and nothing changes there. ========================================================================== */ .program-overview-section .program-overview-container { align-items: center !important; } /* ========================================================================== BOTH EDGES ON THE HEADER'S MEASURE ------------------------------------------------------------------------- The header, the footer and the white card above already agree. Two blocks on this page did not: .pg-container 90px wider than the card below 768px .subject-structure-container 9px wider than the card at every width Both carry widths copied from the Grade 10 page, and both are put back on the header's measure so that every section on this page has the same left edge and the same right edge. 92% capped at 1380px, then 94% at 1199px, 90% at 767px, 92% at 480px - the header's own ladder. The card is not named here: it is already on it. !important because the rules being superseded already carry it on .pg-container, and because .group-b-section .subject-structure-container outranks a plain .subject-structure-container on specificity as well. ========================================================================== */ .program-overview-panels .pg-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; } .subject-structure-section .subject-structure-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 1199px) { .program-overview-panels .pg-container { width: 94% !important; } .subject-structure-section .subject-structure-container { width: 94% !important; } } @media (max-width: 767px) { .program-overview-panels .pg-container { width: 90% !important; } .subject-structure-section .subject-structure-container { width: 90% !important; } } @media (max-width: 480px) { .program-overview-panels .pg-container { width: 92% !important; } .subject-structure-section .subject-structure-container { width: 92% !important; } } /* ========================================================================== GROUP B LEFT PANEL MATCHES GROUP A ------------------------------------------------------------------------- The two subject blocks sit one above the other under the same heading and are meant to read as a pair. Their left panels did not: viewport Group A panel Group B panel difference 1920 155 220 +65 1440 155 220 +65 1400 155 220 +65 1399 155 200 +45 1200 155 200 +45 1199 155 170 +15 1024 155 170 +15 991 155 150 -5 768 155 150 -5 Group A holds one width, 155px, the whole way up. Group B stepped down through four values, so the blue column was 65px wider than its neighbour on a large desktop, then 45, then 15, and finally 5px narrower than Group A below 1200 - the columns crossed over rather than lining up. Four rules were causing it, one per band: .group-b-section .subject-table-wrapper { grid-template-columns: 220px 1fr } .group-b-section .subject-table-wrapper { grid-template-columns: 200px 1fr } .group-b-section .subject-table-wrapper { grid-template-columns: 170px 1fr } .group-b-section .subject-table-wrapper { grid-template-columns: 150px minmax(0, 1fr) } One value replaces all four, from 768px up: .group-b-section .subject-table-wrapper { grid-template-columns: 155px minmax(0, 1fr) } 155px is Group A's own number, measured off the page rather than guessed. minmax(0, 1fr) is kept for the table column because that is what the narrowest of the four rules being replaced used, so the table column cannot be pushed wider by its own content at any width. MEASURED AFTER, EVERY WIDTH FROM 768 UP viewport Group A panel Group B panel difference 1920 155 155 0 1440 155 155 0 1399 155 155 0 1200 155 155 0 1199 155 155 0 1024 155 155 0 991 155 155 0 768 155 155 0 No child of the panel crosses its edge at any of those widths, and the document has no horizontal overflow at any width tested. -------------------------------------------------------------------------- NOTHING ELSE One declaration in one band. No padding, no min-height, no font, no icon size, no colour, no radius, no border, no table rule, no row height. Group A is not named anywhere here and measures identically with this block present. Below 768px both panels are already full width and side by side above their tables, and that is untouched - measured identical at 767, 600 and 390. The markup is not opened. ========================================================================== */ @media (min-width: 768px) { .group-b-section .subject-table-wrapper { grid-template-columns: 155px minmax(0, 1fr); } }