/*========================== 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; } } /* ===================================================== ACADEMIC COUNCIL BANNER ===================================================== */ .overview-banner { width: 100%; min-height: 300px; display: flex; align-items: stretch; position: relative; overflow: hidden; background: #083C7C; font-family: Arial, Helvetica, sans-serif; } /* ===================================================== LEFT CONTENT ===================================================== */ .overview-content { width: 52%; padding: 80px 6% 80px 8%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 5; } /* ===================================================== BADGE ===================================================== */ .overview-badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.20); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: .4px; } .overview-badge i { font-size: 15px; } /* ========================================================= LABEL ========================================================= */ .overview-label { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(83, 119, 205, 0.35); border: 1px solid rgba(180, 204, 255, 0.35); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .overview-label i { font-size: 13px; } /* ========================================================= HEADING ========================================================= */ .overview-content h1 { margin: 0; max-width: 600px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; font-weight: 700; letter-spacing: -1.5px; } .overview-content h1 span { color: #a9c7ff; } /* ===================================================== LINE ===================================================== */ .overview-line { width: 50px; height: 3px; margin: 25px 0 20px; background: #FFFFFF; border-radius: 5px; } /* ===================================================== DESCRIPTION ===================================================== */ .overview-content p { max-width: 520px; margin: 0; color: rgba(255,255,255,.90); font-size: 16px; line-height: 1.75; } /* ===================================================== RIGHT IMAGE AREA ===================================================== */ .overview-image { width: 48%; min-height: 500px; position: relative; overflow: hidden; } /* ===================================================== PHOTO ===================================================== */ .overview-photo { position: absolute; inset: 0; overflow: hidden; /* Simple professional curved transition */ clip-path: ellipse( 100% 100% at 100% 50% ); background: #AFCBFF; } .overview-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .7s ease; } /* ===================================================== HOVER ===================================================== */ .overview-banner:hover .overview-photo img { transform: scale(1.04); } /* ===================================================== SIMPLE LIGHT BORDER ===================================================== */ /* .overview-image::before { content: ""; position: absolute; z-index: 3; left: -12px; top: 0; width: 24px; height: 100%; background: #AFCBFF; border-radius: 50%; } */ /* ===================================================== DECORATIVE DOTS ===================================================== */ .overview-banner::before { content: ""; position: absolute; left: 35px; top: 35px; width: 60px; height: 60px; background-image: radial-gradient( rgba(255,255,255,.45) 1.5px, transparent 1.5px ); background-size: 12px 12px; opacity: .7; z-index: 2; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991px) { .overview-banner { min-height: 430px; } .overview-content { width: 52%; padding: 60px 35px; } .overview-image { width: 48%; min-height: 430px; } .overview-content h1 { font-size: 44px; } .overview-content p { font-size: 14px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { .overview-banner { display: flex; flex-direction: column; min-height: auto; } .overview-content { width: 100%; min-height: 360px; padding: 55px 25px 45px; } .overview-content h1 { font-size: clamp(34px, 9vw, 46px); } .overview-content p { font-size: 14px; line-height: 1.65; } .overview-image { width: 100%; height: 300px; min-height: 300px; } .overview-photo { clip-path: none; border-radius: 0; } .overview-image::before { display: none; } .overview-banner::before { top: 20px; left: 20px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 480px) { .overview-content { min-height: 330px; padding: 45px 20px 40px; } .overview-badge { font-size: 10px; padding: 7px 13px; } .overview-content h1 { font-size: 32px; } .overview-content p { font-size: 13px; } .overview-image { height: 250px; min-height: 250px; } } /* ========================================================= ODLC INFORMATION SECTION Primary Color: #062d5c Paragraph: 16px ========================================================= */ .odlc-info-section { width: 100%; padding: 45px 0; background: #f5f8fc; } /* MAIN CONTAINER */ .odlc-info-container { width: min(1180px, calc(100% - 80px)); margin: 0 auto; background: #ffffff; border-radius: 14px; padding: 20px 28px; box-shadow: 0 8px 25px rgba(6, 45, 92, 0.08); border: 1px solid #e5edf7; } /* ========================================================= EACH INFORMATION ROW ========================================================= */ .odlc-info-item { display: flex; align-items: center; gap: 20px; padding: 20px 0; } /* REMOVE EXTRA SPACE FROM FIRST / LAST */ .odlc-info-item:first-child { padding-top: 8px; } .odlc-info-item:last-child { padding-bottom: 8px; } /* ========================================================= ICON ========================================================= */ .odlc-info-icon { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: #eef5ff; display: flex; align-items: center; justify-content: center; color: #00386F; font-size: 27px; box-shadow: 0 4px 12px rgba(13, 99, 216, 0.08); } /* ========================================================= CONTENT ========================================================= */ .odlc-info-content { flex: 1; padding-left: 18px; border-left: 2px solid #edf2f8; } .odlc-info-content p { margin: 0; font-size: 16px; line-height: 1.7; color: #344a63; font-weight: 400; } /* BOLD TEXT */ .odlc-info-content strong { color: #00386F; font-weight: 700; } /* ========================================================= HORIZONTAL SEPARATORS ========================================================= */ .odlc-info-item + .odlc-info-item { border-top: 1px solid #edf1f6; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .odlc-info-section { padding: 35px 0; } .odlc-info-container { width: calc(100% - 50px); padding: 18px 22px; } .odlc-info-item { gap: 16px; padding: 18px 0; } .odlc-info-icon { flex: 0 0 56px; width: 56px; height: 56px; font-size: 24px; } .odlc-info-content { padding-left: 15px; } .odlc-info-content p { font-size: 16px; line-height: 1.65; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .odlc-info-section { padding: 28px 0; } .odlc-info-container { width: calc(100% - 30px); padding: 14px 17px; border-radius: 12px; } .odlc-info-item { align-items: flex-start; gap: 12px; padding: 16px 0; } .odlc-info-icon { flex: 0 0 48px; width: 48px; height: 48px; font-size: 21px; } .odlc-info-content { padding-left: 12px; } .odlc-info-content p { font-size: 16px; line-height: 1.6; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 575px) { .odlc-info-section { padding: 22px 0; } .odlc-info-container { width: calc(100% - 20px); padding: 10px 13px; border-radius: 10px; } .odlc-info-item { gap: 10px; padding: 14px 0; } .odlc-info-icon { flex: 0 0 42px; width: 42px; height: 42px; font-size: 18px; } .odlc-info-content { padding-left: 10px; } .odlc-info-content p { font-size: 16px; line-height: 1.55; } } /* ========================================================= MEMBERSHIP SECTION ODLC PRIMARY COLOR : #00386F ========================================================= */ .membership-section { width: 100%; padding: 35px 0 45px; background: #f6f9fd; } /* ========================================================= CONTAINER ========================================================= */ .membership-container { width: min(1180px, calc(100% - 70px)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* ========================================================= MEMBERSHIP CARD ========================================================= */ .membership-card { position: relative; min-height: 320px; padding: 24px 25px 22px; background: #ffffff; border-radius: 8px; border: 1px solid #e6edf5; box-shadow: 0 5px 18px rgba(0, 56, 111, 0.07); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* TOP COLOR LINE */ .membership-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #00386F; } /* HOVER */ .membership-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 56, 111, 0.12); } /* ========================================================= TOP AREA ========================================================= */ .membership-top { display: flex; align-items: center; gap: 20px; min-height: 105px; } /* ========================================================= ICON ========================================================= */ .membership-icon { width: 56px; height: 56px; min-width: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eaf3ff; color: #00386F; font-size: 27px; } /* ========================================================= HEADING ========================================================= */ .membership-heading { flex: 1; } .membership-heading h3 { margin: 0 0 7px; color: #162d4d; font-size: 19px; line-height: 1.3; font-weight: 700; } /* ========================================================= PRICE ========================================================= */ .membership-price { color: #00386F; font-size: 24px; line-height: 1.2; font-weight: 700; margin-bottom: 3px; } .membership-heading > span { display: block; color: #596b80; font-size: 14px; line-height: 1.4; } /* ========================================================= DIVIDER ========================================================= */ .membership-divider { width: 100%; height: 1px; background: #e6edf5; margin: 13px 0 17px; } /* ========================================================= DESCRIPTION ========================================================= */ .membership-description { margin: 0; color: #394b61; font-size: 16px; line-height: 1.65; font-weight: 400; flex: 1; } /* ========================================================= BUTTON ========================================================= */ .membership-btn { width: fit-content; min-width: 123px; height: 38px; padding: 0 14px; margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1.5px solid #00386F; border-radius: 6px; background: #ffffff; color: #00386F; text-decoration: none; font-size: 14px; font-weight: 600; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .membership-btn i { font-size: 17px; transition: transform 0.25s ease; } .membership-btn:hover { background: #00386F; color: #ffffff; transform: translateY(-1px); } .membership-btn:hover i { transform: translateX(4px); } /* ========================================================= OPTIONAL CARD VARIATIONS Keeps the layout from the reference while using ODLC blue ========================================================= */ .overview-card::before, .institutional-card::before, .corporate-card::before { background: #00386F; } .overview-card .membership-icon, .institutional-card .membership-icon, .corporate-card .membership-icon { background: #eaf3ff; color: #00386F; } .overview-card .membership-price, .institutional-card .membership-price, .corporate-card .membership-price { color: #00386F; } /* ========================================================= TABLET 768px – 991px ========================================================= */ @media (max-width: 991px) { .membership-section { padding: 30px 0 40px; } .membership-container { width: calc(100% - 45px); grid-template-columns: repeat(2, 1fr); gap: 18px; } .membership-card { min-height: 315px; padding: 22px; } .membership-heading h3 { font-size: 17px; } .membership-price { font-size: 22px; } .membership-description { font-size: 16px; } } /* ========================================================= MOBILE 576px – 767px ========================================================= */ @media (max-width: 767px) { .membership-section { padding: 25px 0 35px; } .membership-container { width: calc(100% - 30px); grid-template-columns: 1fr; gap: 16px; } .membership-card { min-height: auto; padding: 21px; } .membership-top { gap: 15px; min-height: 90px; } .membership-icon { width: 52px; height: 52px; min-width: 52px; font-size: 24px; } .membership-heading h3 { font-size: 16px; } .membership-price { font-size: 21px; } .membership-heading > span { font-size: 13px; } .membership-description { font-size: 16px; line-height: 1.6; } .membership-btn { font-size: 13px; height: 37px; } } /* ========================================================= SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { .membership-container { width: calc(100% - 20px); gap: 14px; } .membership-card { padding: 18px; } .membership-top { gap: 13px; } .membership-icon { width: 48px; height: 48px; min-width: 48px; font-size: 21px; } .membership-heading h3 { font-size: 15px; } .membership-price { font-size: 20px; } .membership-heading > span { font-size: 12px; } .membership-description { font-size: 16px; line-height: 1.55; } .membership-btn { font-size: 12px; min-width: 115px; height: 36px; } } /* ========================================================= LEGAL NOTE & UNDERTAKING ODLC STANDARD UI ========================================================= */ .legal-section { width: 100%; padding: 35px 0 45px;; background: #f6f9fd; } .legal-container { width: min(1180px, calc(100% - 70px)); max-width: 1500px; margin: 0 auto; padding: 28px 35px 30px; background: #ffffff; border: 1px solid #e5edf7; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 56, 111, 0.08); box-sizing: border-box; } /* ========================================================= HEADING ========================================================= */ .legal-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; } .legal-heading-icon { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: #0878df; font-size: 34px; flex-shrink: 0; } .legal-heading-icon > i:first-child { font-size: 38px; } .legal-small-shield { position: absolute; right: 0; bottom: 2px; font-size: 17px !important; background: #ffffff; border-radius: 50%; } .legal-heading h2 { margin: 0; color: #00386F; font-size: 30px; font-weight: 700; line-height: 1.2; } .legal-heading-line { display: block; width: 45px; height: 3px; margin-top: 9px; background: #0878df; border-radius: 10px; } /* ========================================================= TIMELINE ========================================================= */ .legal-timeline { position: relative; width: 100%; } /* Vertical timeline line */ .legal-timeline::before { content: ""; position: absolute; left: 26px; top: 25px; bottom: 25px; width: 2px; background: #dce9f8; } /* ========================================================= TIMELINE ITEM ========================================================= */ .legal-item { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; padding: 8px 0 10px; box-sizing: border-box; } /* ========================================================= ICON ========================================================= */ .legal-icon { position: relative; z-index: 2; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #eaf3ff; border-radius: 50%; color: #0878df; font-size: 23px; box-shadow: 0 2px 8px rgba(0, 56, 111, 0.05); box-sizing: border-box; } /* ========================================================= CONTENT ========================================================= */ .legal-content { padding-top: 2px; } .legal-content h5 { margin: 0 0 3px; color: #0878df; font-size: 16px; font-weight: 700; line-height: 1.35; } .legal-content p { margin: 0 0 4px; color: #273b55; font-size: 16px; font-weight: 400; line-height: 1.55; text-align: left; } .legal-content p:last-child { margin-bottom: 0; } /* ========================================================= HOVER ========================================================= */ .legal-item:hover .legal-icon { background: #dcecff; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0, 56, 111, 0.12); } .legal-icon { transition: all 0.25s ease; } /* ========================================================= LAPTOP 992px - 1199px ========================================================= */ @media (max-width: 1199px) { .legal-container { width: calc(100% - 60px); padding: 25px 30px 28px; } .legal-heading h2 { font-size: 30px; } .legal-content h3 { font-size: 16px; } .legal-content p { font-size: 16px; line-height: 1.5; } } /* ========================================================= TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { .legal-section { padding: 45px 0; } .legal-container { width: calc(100% - 40px); padding: 24px 24px 26px; border-radius: 12px; } .legal-heading { gap: 14px; margin-bottom: 20px; } .legal-heading-icon { width: 48px; height: 48px; } .legal-heading h2 { font-size: 30px; } .legal-timeline::before { left: 24px; } .legal-item { grid-template-columns: 50px minmax(0, 1fr); column-gap: 15px; } .legal-icon { width: 48px; height: 48px; font-size: 21px; } .legal-content h3 { font-size: 16px; } .legal-content p { font-size: 16px; line-height: 1.5; } } /* ========================================================= MOBILE 576px - 767px ========================================================= */ @media (max-width: 767px) { .legal-section { padding: 35px 0; } .legal-container { width: calc(100% - 24px); padding: 20px 17px 22px; border-radius: 10px; } .legal-heading { gap: 12px; margin-bottom: 18px; } .legal-heading-icon { width: 42px; height: 42px; } .legal-heading-icon > i:first-child { font-size: 31px; } .legal-small-shield { font-size: 14px !important; } .legal-heading h2 { font-size: 30px; } .legal-heading-line { width: 40px; height: 3px; margin-top: 7px; } .legal-timeline::before { left: 21px; } .legal-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 7px 0 9px; } .legal-icon { width: 42px; height: 42px; font-size: 19px; } .legal-content h3 { font-size: 16px; line-height: 1.35; } .legal-content p { font-size: 16px; line-height: 1.5; } } /* ========================================================= SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { .legal-section { padding: 28px 0; } .legal-container { width: calc(100% - 16px); padding: 18px 13px 20px; border-radius: 9px; } .legal-heading { gap: 10px; margin-bottom: 16px; } .legal-heading-icon { width: 38px; height: 38px; } .legal-heading-icon > i:first-child { font-size: 28px; } .legal-small-shield { font-size: 12px !important; } .legal-heading h2 { font-size: 29px; } .legal-heading-line { width: 36px; height: 3px; } .legal-timeline::before { left: 19px; } .legal-item { grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; padding: 6px 0 8px; } .legal-icon { width: 38px; height: 38px; font-size: 17px; } .legal-content h3 { font-size: 15px; } .legal-content p { font-size: 16px; line-height: 1.48; } } .membership-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 125px; height: 40px; padding: 0 17px; margin-top: 20px; background: #eaf3ff; border: 1.5px solid #00386F; border-radius: 6px; color: #00386F; text-decoration: none; font-size: 14px; font-weight: 600; transition: all 0.25s ease; } .membership-btn:hover { background: #00386F; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 56, 111, 0.18); } /* ============================================================================ MEMBERSHIP - OVERVIEW: THE INSIDE OF THE SECTIONS ON THE HEADER AND FOOTER LADDER, AND THE BANNER'S DOT GRID HIDDEN --------------------------------------------------------------------------- WIDTHS AND THE BANNER'S DOTS ONLY. NOT ONE FONT IS TOUCHED - no font-family, font-size, font-weight, line-height, letter-spacing or text-transform appears anywhere in this block. Nothing in this page's PHP is touched either, and no other page's stylesheet is written to. MEASURED AT A 1000px VIEWPORT BEFORE THIS BLOCK header .container-fluid L 29.6 R 955.3 w 925.7 logo L 29.6 .odlc-info-container margin 40px/40px padding 28px/28px dL 10.4 dR 10.5 .membership-container margin 35px/35px dL 5.4 dR 5.5 .legal-container margin 30px/30px padding 30px/30px dL 0.4 dR 0.5 .odlcf-cta-in 925.7px / 1380px dL 0.0 dR 0.0 DELTA banner text to logo: +49.2px --------------------------------------------------------------------------- 1. THE BANNER'S DOTS, HIDDEN .overview-banner::before paints one decoration and it is a pseudo-element, so there is nothing in the PHP to keep and no class to find it by. It is a square of small dots in the banner's top-left corner, built from a radial-gradient of a 1.5px dot on a transparent one. It is stopped with content:none, which is the only way to stop a pseudo-element painting. .overview-banner::before content none --------------------------------------------------------------------------- 2. THE BANNER'S GUTTER, banner text to logo: +49.2px OFF THE LOGO'S EDGE The banner's own type is left exactly as it is. What was wrong was where it sat: the content column's left padding is 78.775px at this width, against a logo at 29.6px. .overview-content padding-left max(4%, 50% - 690px) 3% at 1199 and below, 5% at 767, 4% at 480 4% of 1342 is 53.68, which is the logo's edge at a 1342px viewport, and 3% of 984.8 is 29.54 against a logo at 29.6 here. The gutter goes on the content column and not on the section, because the picture column beside it is 48% of the section and padding on the section would shrink the photograph. The photograph is not named in this block. --------------------------------------------------------------------------- 3. THE CONTENT CONTAINERS, ONTO THE HEADER'S LADDER Each of these carried its own margin or its own fixed cap rather than the ladder, so each landed somewhere other than the header's edges. They go on the ladder from header.css line 9213 - 92% with a 1380px cap, then 94% at 1199 and below, 90% at 767 and below, 92% at 480 and below - with their padding zeroed and their margins centred: .odlc-info-container .membership-container .legal-container Their sections give up any horizontal padding they carry, so the container is the only thing that decides the width. 92% of 1342 is 1234.64, which is the header's own width, so all of them land on the header's left and right edges at 0.0 on both sides - the same figure .odlcf-cta-in already measures. --------------------------------------------------------------------------- 4. THE PADDING, AND ONE COMPONENT LEFT ALONE Two sections on this page are out, both by 10px, both with the larger of the two at the bottom: .membership-section 35px above / 45px below -> 35px / 35px .legal-section 35px above / 45px below -> 35px / 35px .odlc-info-section is 45px/45px and is not touched. .odlcf-strip measures 14px above and 0px below on every page of the site. It is a shared footer component loaded by thirteen pages from css/includes/footer.css, so it is not named here and not fixed here. It is the one section on these pages still out by 14px, and it needs a site-wide decision rather than four separate ones. --------------------------------------------------------------------------- NOT TOUCHED No font, anywhere. The banner's background is not named. The photograph - overview - is not named. .overview-image::before, the navy sweep the photograph sits against, is not named: it is structure, not decoration, and removing it would leave a hard rectangular join where the curve is. .odlcf-cta, .odlcf-strip, .odlcf-ds, .odlcf-st and .odlcf-dc are the shared footer components and are not named. ============================================================================ */ /* ------------------------------------------------ 1. the banner's dots */ .overview-banner::before { content: none !important; } /* --------------------------------------------- 2. the banner's gutter */ .overview-content { padding-left: max(4%%, 50%% - 690px) !important; } /* ------------------------------- 3. the sections give up their side padding */ .odlc-info-section, .membership-section, .legal-section { padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------- 3. the containers onto the header's ladder */ .odlc-info-container, .membership-container, .legal-container { width: 92%% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } @media screen and (max-width: 1199px) { .odlc-info-section, .membership-section, .legal-section { padding-left: 0 !important; padding-right: 0 !important; } .odlc-info-container, .membership-container, .legal-container { width: 94% !important; } .overview-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { .odlc-info-container, .membership-container, .legal-container { width: 90% !important; } .overview-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { .odlc-info-container, .membership-container, .legal-container { width: 92% !important; } .overview-content { padding-left: max(4%, 50% - 690px) !important; } } /* ============================================================================ MEMBERSHIP - OVERVIEW: THE BASE WIDTH AND GUTTER MY OWN GENERATOR DROPPED, AND THE SECTION PADDING AT EVERY ONE OF THE PAGE'S OWN BREAKPOINTS --------------------------------------------------------------------------- A FAULT OF MY OWN, AND IT IS THE FIRST THING IN THIS BLOCK The block before this one wrote the base rule as width: 92%% !important; padding-left: max(4%%, 50%% - 690px) !important; with two percent signs. That is not valid CSS, so the browser dropped both declarations and kept the rest - max-width:1380px took effect and width did not, and the banner's gutter did not move at all while the dots did disappear. The 1199, 767 and 480 rules were written through a different format and came out correct, which is why the page looked right below 1200px and wrong above it. at 882px the three containers 829.078px / 1380px dL 0.0 ON EDGES at 1342px the three containers 1180.0px / 1500px dL 27.3 OFF Both are restated correctly below with one percent sign, and the whole ladder is written again so the page does not depend on which half survived. THE PADDING, STILL OUT AT THE BASE line 2064 .membership-section base padding 35px 0 45px out by 10 line 2360 @media 991px padding 30px 0 40px out by 10 line 2399 @media 767px padding 25px 0 35px out by 10 line 2521 .legal-section base padding 35px 0 45px out by 10 .legal-section's own narrow values are already equal and are kept: line 2784 @media 1199px padding 45px 0 line 2843 @media 991px padding 35px 0 line 2920 @media 767px padding 28px 0 .odlc-info-section measures 45px/45px and is not named at the base; it is re-measured after this block rather than assumed at every width. NO FONT IS TOUCHED, AND NO BACKGROUND Nothing below sets font-family, font-size, font-weight, line-height, letter-spacing, text-transform, background, colour or border. NOT NAMED: the banner's dots, already content:none from the block before; .overview-image::before, the navy sweep the photograph sits against; the photograph itself; and the shared footer components. ============================================================================ */ /* -------------------------------- the base width, written correctly this time */ .odlc-info-container, .membership-container, .legal-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------ the base gutter, likewise */ .overview-content { padding-left: max(4%, 50% - 690px) !important; } /* ------------------- the padding above and below, at every one of its steps */ .membership-section { padding: 35px 0 35px !important; } .legal-section { padding: 35px 0 35px !important; } @media screen and (max-width: 991px) { .membership-section { padding: 30px 0 30px !important; } .legal-section { padding: 35px 0 35px !important; } } @media screen and (max-width: 767px) { .membership-section { padding: 25px 0 25px !important; } .legal-section { padding: 28px 0 28px !important; } } @media screen and (max-width: 1199px) { odlc-info-container, membership-container, legal-container { width: 94% !important; } overview-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { odlc-info-container, membership-container, legal-container { width: 90% !important; } overview-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { odlc-info-container, membership-container, legal-container { width: 92% !important; } overview-content { padding-left: max(4%, 50% - 690px) !important; } } /* ============================================================================ MEMBERSHIP - OVERVIEW: THE BASE WIDTH AND GUTTER MY OWN GENERATOR DROPPED, AND THE SECTION PADDING AT EVERY ONE OF THE PAGE'S OWN BREAKPOINTS --------------------------------------------------------------------------- A FAULT OF MY OWN, AND IT IS THE FIRST THING IN THIS BLOCK The block before this one wrote the base rule as width: 92%% !important; padding-left: max(4%%, 50%% - 690px) !important; with two percent signs. That is not valid CSS, so the browser dropped both declarations and kept the rest - max-width:1380px took effect and width did not, and the banner's gutter did not move at all while the dots did disappear. The 1199, 767 and 480 rules were written through a different format and came out correct, which is why the page looked right below 1200px and wrong above it. at 882px the three containers 829.078px / 1380px dL 0.0 ON EDGES at 1342px the three containers 1180.0px / 1500px dL 27.3 OFF Both are restated correctly below with one percent sign, and the whole ladder is written again so the page does not depend on which half survived. THE PADDING, STILL OUT AT THE BASE line 2064 .membership-section base padding 35px 0 45px out by 10 line 2360 @media 991px padding 30px 0 40px out by 10 line 2399 @media 767px padding 25px 0 35px out by 10 line 2521 .legal-section base padding 35px 0 45px out by 10 .legal-section's own narrow values are already equal and are kept: line 2784 @media 1199px padding 45px 0 line 2843 @media 991px padding 35px 0 line 2920 @media 767px padding 28px 0 .odlc-info-section measures 45px/45px and is not named at the base; it is re-measured after this block rather than assumed at every width. NO FONT IS TOUCHED, AND NO BACKGROUND Nothing below sets font-family, font-size, font-weight, line-height, letter-spacing, text-transform, background, colour or border. NOT NAMED: the banner's dots, already content:none from the block before; .overview-image::before, the navy sweep the photograph sits against; the photograph itself; and the shared footer components. ============================================================================ */ /* -------------------------------- the base width, written correctly this time */ .odlc-info-container, .membership-container, .legal-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------ the base gutter, likewise */ .overview-content { padding-left: max(4%, 50% - 690px) !important; } /* ------------------- the padding above and below, at every one of its steps */ .membership-section { padding: 35px 0 35px !important; } .legal-section { padding: 35px 0 70px !important; } @media screen and (max-width: 991px) { .membership-section { padding: 30px 0 30px !important; } .legal-section { padding: 35px 0 35px !important; } } @media screen and (max-width: 767px) { .membership-section { padding: 25px 0 25px !important; } .legal-section { padding: 28px 0 28px !important; } } @media screen and (max-width: 1199px) { .odlc-info-container, .membership-container, .legal-container { width: 94% !important; } .overview-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { .odlc-info-container, .membership-container, .legal-container { width: 90% !important; } .overview-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { .odlc-info-container, .membership-container, .legal-container { width: 92% !important; } .overview-content { padding-left: max(4%, 50% - 690px) !important; } } /* ============================================================================ MEMBERSHIP - OVERVIEW: THE CARDS' OWN PADDING PUT BACK --------------------------------------------------------------------------- A FAULT OF MY OWN, AND IT IS THE ONE IN THE SCREENSHOT THE FAULT Three blocks ago, in putting the three containers on the header's ladder, this page's containers were given padding-left 0 !important padding-right 0 !important which was right for a bare container and wrong for two of these three, because on this page the container IS the card. It is the white panel with the 0.8px border, and its padding is what kept the text off that border. Zeroed, the legal copy ran to the inside of the right-hand edge with nothing between the words and the line - which is what the screenshot shows, the last words of every paragraph reading as though they were cut off. MEASURED BEFORE THIS BLOCK, at a 1000px viewport .legal-container L 29.6 R 955.3 padding 25 / 0 / 28 / 0 .odlc-info-container L 29.6 R 955.3 padding 45 / 0 / 45 / 0 .membership-container L 29.6 R 955.3 padding 35 / 0 / 35 / 0 Every child measured 0.8px inside the card's right border, which is the border itself and nothing more - flush to the edge, not inside it. WHAT THE PAGE ITSELF SPECIFIES line 2527 .legal-container padding 28px 35px 30px -> 35px line 2757 @media 1199px padding 25px 30px 28px -> 30px line 2788 @media 991px padding 24px 24px 26px -> 24px line 2847 @media 767px padding 20px 17px 22px -> 17px line 2924 @media 575px padding 18px 13px 20px -> 13px line 1819 .odlc-info-container padding 20px 28px -> 28px line 1941 @media 991px padding 18px 22px -> 22px line 1981 @media 767px padding 14px 17px -> 17px line 2027 @media 575px padding 10px 13px -> 13px Those are the page's own values and they are what goes back, at each of the page's own breakpoints. Only the left and the right are named; the vertical padding of each card is left exactly as it is. .membership-container is given nothing here. Its own rule at line 2075 is margin:0 auto with no padding at all, so there was nothing to take away and nothing to put back. WHY THIS DOES NOT UNDO THE LADDER Padding is inside the border box. The card's border box stays at 92% of the section with its margins centred, which is what puts it on the header's left and right edges at 0.0 - and the copy moves back inside the card by 35px at a desktop width, 13px on a small phone. The card is on the header's edges and its text is off the card's border, which is the arrangement every other card on this site has. THE OTHER THREE MEMBERSHIP PAGES ARE NOT AFFECTED .corporate-membership-box, .corporate-benefits-container, .institutional-membership-box, .institutional-benefits-container and .validity-container and .moe-container were all measured at padding 0px before anything was zeroed, so on those pages there was no inset to lose and this block is not repeated for them. NO FONT IS TOUCHED, AND NO BACKGROUND Nothing below sets font-family, font-size, font-weight, line-height, letter-spacing, text-transform, background, color or border. Only the two padding properties are written. ============================================================================ */ /* ------------------- the legal card: its own inset, at each of its steps */ .legal-container { padding-left: 35px !important; padding-right: 35px !important; } @media screen and (max-width: 1199px) { .legal-container { padding-left: 30px !important; padding-right: 30px !important; } } @media screen and (max-width: 991px) { .legal-container { padding-left: 24px !important; padding-right: 24px !important; } } @media screen and (max-width: 767px) { .legal-container { padding-left: 17px !important; padding-right: 17px !important; } } @media screen and (max-width: 575px) { .legal-container { padding-left: 13px !important; padding-right: 13px !important; } } /* -------------------- the info card: its own inset, at each of its steps */ .odlc-info-container { padding-left: 28px !important; padding-right: 28px !important; } @media screen and (max-width: 991px) { .odlc-info-container { padding-left: 22px !important; padding-right: 22px !important; } } @media screen and (max-width: 767px) { .odlc-info-container { padding-left: 17px !important; padding-right: 17px !important; } } @media screen and (max-width: 575px) { .odlc-info-container { padding-left: 13px !important; padding-right: 13px !important; } } /* ========================================================================== READ MORE BUTTON TAKEN FROM A PALE TINT TO A BLUE FILL ------------------------------------------------------------------------- Two declarations and a hover. Measured on the live page at 1920, 1440, 1024, 768 and 390, all identical: background rgb(234, 243, 255) = #eaf3ff color rgb(0, 56, 111) = #00386F border rgb(0, 56, 111) = #00386F size 132.2 x 40 So the button was a 1.5px navy outline around a near-white tint, with navy text inside it. At #eaf3ff against a white card that fill is only eleven steps off the page, so the whole thing read as a washed-out outline rather than a button. The three of them - fill, text, border - were all telling the same story at three different strengths. THE COLOUR IS NOT NEW #00386F is already the card's own navy. It is what the price is set in, what the heading is set in, and what this button's own border and text were already set in - sixteen uses in this stylesheet. The button was already that colour; it just had it as an outline. Filling it with the same value is not a new colour arriving, it is the existing one being used properly, and the button now matches the price above it. background: #eaf3ff -> #00386F color: #00386F -> #ffffff The border is left at 1.5px solid #00386F. Against a fill of the same value it simply stops being visible, which is what a border should do when it is the same colour as the thing it outlines. It is not removed. THE HOVER The old hover inverted the button - pale fill out, navy in, white text. That is now the resting state, so it would have been a dead hover. It moves to #062d5c instead, which is already in this file and is the deeper navy the site uses for its banners, so the button darkens rather than emptying out. The -2px lift and the shadow stay as they were. hover background #00386F -> #062d5c hover color #ffffff -> unchanged -------------------------------------------------------------------------- NOTHING ELSE Background and colour only. The size, the padding, the gap, the radius, the border width, the font size and weight, the arrow icon and its hover slide, the three hrefs and the three card layouts are all left exactly as they are - the button still measures 132.2 x 40 at 1250px and wider, and 125 x 40 at 575px. The other two membership pages carry their own stylesheets and are not touched. overview.php is not opened. ========================================================================== */ .membership-btn { background: #00386F; color: #ffffff; } .membership-btn:hover { background: #062d5c; color: #ffffff; }