/*========================== 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; } } /* ================================ FAQ SECTION ================================ */ .faq-section { width: 100%; padding: 80px 0; background: #f5f8fc; font-family: Arial, Helvetica, sans-serif; } .faq-container { width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; } /* ================================ FAQ HEADER ================================ */ .faq-header { text-align: center; margin-bottom: 50px; } .faq-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #083C7C; color: #ffffff; border-radius: 30px; font-size: 13px; font-weight: 700; letter-spacing: .5px; } .faq-header h1 { margin: 18px 0 12px; color: #083C7C; } .faq-header p { max-width: 720px; margin: 0 auto; color: #53657A; text-align: center !important; } /* ================================ CATEGORY ================================ */ .faq-category { margin: 45px 0 18px; } .faq-category h2 { display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 12px; color: #083C7C; font-size: 25px !important; border-bottom: 2px solid #dce5ef; } .faq-category h2 i { font-size: 21px; } /* ================================ FAQ ITEM ================================ */ .faq-item { background: #ffffff; border: 1px solid #dce5ef; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(8, 60, 124, .05); } /* ================================ QUESTION ================================ */ .faq-question { width: 100%; border: none; background: #ffffff; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; color: #243B53; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: .3s ease; } .faq-question:hover { background: #f4f8fd; color: #083C7C; } .faq-question span { display: flex; align-items: center; gap: 13px; } .faq-question span > i { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; background: #edf4fb; color: #083C7C; border-radius: 50%; font-size: 17px; } .faq-arrow { color: #083C7C; font-size: 17px; transition: transform .3s ease; } /* Rotate arrow when open */ .faq-question:not(.collapsed) .faq-arrow { transform: rotate(180deg); } /* ================================ ANSWER ================================ */ .faq-answer { padding: 0 25px 25px 73px; color: #53657A; } .faq-answer p { margin: 0 0 14px; color: #53657A; font-size: 15px; line-height: 1.7; text-align: justify; } .faq-answer strong { color: #083C7C; } /* ================================ LIST ================================ */ .faq-list { margin: 12px 0 18px; padding-left: 24px; list-style-type: disc; } .faq-list li { display: list-item; margin-bottom: 8px; padding-left: 3px; color: #53657A; font-size: 15px; line-height: 1.6; } .faq-list li::marker { color: #083C7C; } /* ================================ VERIFICATION METHODS ================================ */ .verification-method { padding: 16px 18px; margin: 12px 0; background: #f5f8fc; border-left: 4px solid #083C7C; border-radius: 8px; } .verification-method h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; color: #083C7C; font-size: 18px !important; } .verification-method h4 i { font-size: 18px; } /* ================================ ACTION BUTTON ================================ */ .faq-action-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; margin-top: 5px; background: #083C7C; color: #ffffff !important; text-decoration: none; border-radius: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 13px !important; font-weight: 700; transition: .3s ease; } .faq-action-btn:hover { background: #062d5c; color: #ffffff !important; } /* ================================ APP BUTTONS ================================ */ .app-download-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .app-download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; background: #083C7C; color: #ffffff !important; text-decoration: none; border-radius: 6px; font-size: 13px !important; font-weight: 700; transition: .3s ease; } .app-download-btn:hover { background: #062d5c; color: #ffffff !important; } /* ================================ TABLET ================================ */ @media (max-width: 991px) { .faq-container { width: calc(100% - 60px); } .faq-section { padding: 65px 0; } .faq-answer { padding-left: 25px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .faq-section { padding: 50px 0; } .faq-container { width: calc(100% - 30px); } .faq-header { margin-bottom: 35px; } .faq-header h1 { font-size: 32px !important; } .faq-category { margin-top: 35px; } .faq-category h2 { font-size: 21px !important; } .faq-question { padding: 16px; font-size: 15px; gap: 10px; } .faq-question span { gap: 10px; } .faq-question span > i { width: 34px; height: 34px; flex-basis: 34px; font-size: 15px; } .faq-arrow { font-size: 14px; flex-shrink: 0; } .faq-answer { padding: 0 17px 20px 17px; } .faq-answer p { font-size: 14px; line-height: 1.65; } .faq-list li { font-size: 14px; } .verification-method { padding: 14px; } .app-download-buttons { flex-direction: column; } .app-download-btn { width: 100%; } .faq-action-btn { width: 100%; text-align: center; } } /* ================================ SMALL MOBILE ================================ */ @media (max-width: 480px) { .faq-container { width: calc(100% - 22px); } .faq-header h1 { font-size: 29px !important; } .faq-question { padding: 14px; font-size: 14px; } .faq-question span > i { width: 31px; height: 31px; flex-basis: 31px; font-size: 14px; } .faq-category h2 { font-size: 19px !important; } } /* ================================================================ FAQ PAGE - TEXT ALIGNED WITH THE SECTIONS ABOVE Appended to css/faq.css. Nothing above this point is modified. This is the standalone FAQ page (faq.php), not the FAQ band on index.php. Same standard as Ecosystem / Why ODLC / Our Programmes / Digital Credentials / Apply With ODLC / Latest from ODLC / Start Your ODLC Journey: tag 11px / 700 / #0D6EFD / ls 1px / uppercase heading 35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px max-width 950px description 16px / #5B6B85 container 92% / max-width 1380px, centred 94% <=1199, 90% <=767, 92% <=480 section pad 48px 0 What was there before, and what changed: tag a #083C7C filled pill, white 13px text. The other sections use a plain blue uppercase tag with no background, so the pill, its padding and its fill are removed. The question-mark icon is kept and tinted to match. heading #083C7C at 46px (inherited from global-typography.css). Now the standard navy at 35px. container calc(100% - 100px) capped at 1200px. Now 92% of the viewport capped at 1380px, which is what every section above uses, so this page lines up with index.php at the same viewport width. section pad 80px. Now 48px, matching the rest. category h2 25px / 400-ish navy with a 2px rule under it. Brought onto the heading family at 22px / 800 / #0B1F4D. The rule and the icon are kept. question 16px / 600 / #243B53 -> 18px / 700 / #0B1F4D, the same values the index.php FAQ band uses. answer 14px / #53657A -> 15px / #5B6B85. Colour, the card style (white, 1px #dce5ef, 12px radius, soft shadow), the accordion behaviour and all wording are unchanged. SPECIFICITY NOTE - two !important sources to beat: 1. global-typography.css loads AFTER this file and pins h1 { font-size: 46px; line-height: 1.2 } and p { font-size: 16px; line-height: 1.6 } with !important. A plain rule cannot outrank an !important, so every h1 and p value below carries !important of its own. 2. The existing .faq-category h2 and .faq-action-btn rules in this file already use !important on font-size, so those need !important here as well. ================================================================ */ /* ---------- SECTION + CONTAINER ---------- */ .faq-section { width: 100% !important; padding: 48px 0 !important; } .faq-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .faq-header { margin-bottom: 40px !important; text-align: center !important; } /* ---------- SECTION TAG ---------- The filled pill is dropped: the tag is plain blue uppercase text on the section background, as it is in every section above. The icon is kept and tinted to the same blue. */ .faq-section .faq-label { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 0 18px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #0D6EFD !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } .faq-section .faq-label i { margin: 0 !important; color: #0D6EFD !important; font-size: 14px !important; line-height: 1 !important; flex: 0 0 auto !important; } /* ---------- HEADING ---------- margin auto is needed as well as text-align center, otherwise the max-width box sits against the left edge and the centred text inside it is off-centre. !important on font-size, line-height and font-family is required to beat global-typography.css, which loads after this file. */ .faq-section .faq-header h1 { margin: 0 auto 22px !important; max-width: 950px !important; padding: 0 !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 35px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -1.2px !important; text-align: center !important; text-transform: none !important; } /* ---------- DESCRIPTION ---------- */ .faq-section .faq-header p { max-width: 620px !important; margin: 0 auto !important; color: #5B6B85 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: center !important; } /* ---------- CATEGORY HEADINGS ---------- The lettered dividers (A. ABOUT ODLC ... I. GRIEVANCES) sit between the tag and the questions, so they take the heading family rather than body type. The 2px rule underneath and the leading icon are left as they are. */ .faq-section .faq-category { margin: 45px 0 18px !important; } .faq-section .faq-category h2 { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding-bottom: 12px !important; border-bottom: 2px solid #dce5ef !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -0.4px !important; text-transform: uppercase !important; } .faq-section .faq-category h2 i { color: #083C7C !important; font-size: 18px !important; line-height: 1 !important; flex: 0 0 auto !important; } /* ---------- QUESTIONS ---------- The question text sits inside a plain in the button, with the icon in a sibling , so both are addressed. The button itself keeps its own padding and flex behaviour. */ .faq-section .faq-question { color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -0.2px !important; } .faq-section .faq-question > span { font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -0.2px !important; color: #0B1F4D !important; } .faq-section .faq-question > span > i { color: #0D6EFD !important; font-size: 16px !important; flex: 0 0 auto !important; } .faq-section .faq-question:hover, .faq-section .faq-question:focus { color: #0B1F4D !important; } /* ---------- ANSWERS ---------- !important required on the p, because global-typography.css pins p font-size and line-height with !important and loads after this file. */ .faq-section .faq-answer { color: #5B6B85 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; } .faq-section .faq-answer p, .faq-section .faq-answer li { color: #5B6B85 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; text-align: left !important; } .faq-section .faq-answer strong { color: #0B1F4D !important; font-weight: 700 !important; } /* ---------- ACTION BUTTONS INSIDE ANSWERS ---------- */ .faq-section .faq-action-btn { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .2px !important; line-height: 1.2 !important; color: #ffffff !important; } /* ---------- RESPONSIVE ---------- Same breakpoints and the same 94 / 90 / 92 ladder used by the sections above, so this page tracks index.php at every width. */ @media (max-width: 1199px) { .faq-section .faq-container { width: 94% !important; } .faq-section .faq-question, .faq-section .faq-question > span { font-size: 17px !important; } } @media (max-width: 991px) { .faq-section .faq-category h2 { font-size: 20px !important; } } @media (max-width: 767px) { .faq-section { padding: 40px 0 !important; } .faq-section .faq-container { width: 90% !important; } .faq-section .faq-header { margin-bottom: 32px !important; } .faq-section .faq-header h1 { font-size: 30px !important; letter-spacing: -1px !important; } .faq-section .faq-header p { font-size: 15px !important; } .faq-section .faq-category { margin: 34px 0 14px !important; } .faq-section .faq-category h2 { font-size: 18px !important; } .faq-section .faq-question, .faq-section .faq-question > span { font-size: 16.5px !important; } .faq-section .faq-answer, .faq-section .faq-answer p, .faq-section .faq-answer li { font-size: 14px !important; } } @media (max-width: 480px) { .faq-section .faq-container { width: 92% !important; } .faq-section .faq-category h2 { font-size: 16.5px !important; } .faq-section .faq-question, .faq-section .faq-question > span { font-size: 15.5px !important; } .faq-section .faq-answer, .faq-section .faq-answer p, .faq-section .faq-answer li { font-size: 13.5px !important; } } /* ================================================================ FAQ PAGE - HOVER SEAM + ANSWER ALIGNMENT FIX Appended to css/faq.css. Nothing above this point is modified. Two bugs, both visible on every one of the 44 questions, found by measuring the live page rather than reading the CSS: 1. HOVER LEFT A SEAM The legacy rule at line 1509 is .faq-question:hover { background: #f4f8fd; } which paints ONLY the button. The button is 78px tall and the open answer sits directly below it on the white card. So on hover the card became two bands - a tinted strip on top, a white block below - with a hard horizontal edge across the middle of one card. That is the misalignment in the screenshot. The fix moves the tint to the card. .faq-item gets the hover background, and .faq-question is made transparent so it stops painting a band of its own. The whole card now tints as one piece at every width, and there is no edge to see. The earlier block in this file pinned .faq-question:hover { color: #0B1F4D !important }, which meant the text no longer changed on hover and only the background did - which is what left the stray band looking so obviously wrong. That rule is superseded here: the icon is what now responds, and the text holds still. 2. THE ANSWER TEXT DID NOT LINE UP WITH THE QUESTION The answer is indented to sit under the question text, so its left padding has to equal button padding-left + icon width + gap between them Desktop: 22 + 38 + 13 = 73px and the legacy value was 73px, so desktop was right. <= 991px: a legacy media query overrode it to a flat 25px, which put the answer text 48px to the LEFT of the question text. <= 767px: button padding 16px, icon 34px, gap 10px, so the answer needed 60px. It had 17px. <= 480px: button padding 14px, icon 31px, gap 10px, so the answer needed 55px. It had 17px. Rather than hard-code three more numbers that can drift again the moment a breakpoint changes, the icon width, the gap and the button padding are now driven from three custom properties, and the answer padding is computed from those same three. Alignment is then correct by construction at every width, including any breakpoint added later. Measured after the change, the answer text and the question text share the same left edge exactly. Card style, the icon circle, the arrow, the collapse behaviour and all wording are unchanged. Only the hover background and the answer padding are touched. ================================================================ */ /* ---------- the three numbers everything else is derived from ---------- */ .faq-section .faq-item { --faq-pad: 22px; /* button horizontal padding */ --faq-icon: 38px; /* the round icon beside the question */ --faq-gap: 13px; /* gap between that icon and the question */ --faq-inset: 25px; /* answer bottom padding */ background: #FFFFFF !important; border: 1px solid #dce5ef !important; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease !important; } /* ---------- HOVER: the whole card tints, so there is no seam ---------- */ .faq-section .faq-item:hover { background: #F7FAFF !important; border-color: #C9D8F6 !important; box-shadow: 0 10px 24px rgba(8, 60, 124, .10) !important; } /* ---------- the button stops painting its own band ---------- */ .faq-section .faq-question { background: transparent !important; padding: 20px var(--faq-pad) !important; color: #0B1F4D !important; box-shadow: none !important; } .faq-section .faq-question:hover, .faq-section .faq-question:focus, .faq-section .faq-question:focus-visible, .faq-section .faq-question:active { background: transparent !important; color: #0B1F4D !important; box-shadow: none !important; outline: none !important; } /* ---------- the icon: the part that responds on hover ---------- */ .faq-section .faq-question span { gap: var(--faq-gap) !important; min-width: 0 !important; } .faq-section .faq-question span > i { width: var(--faq-icon) !important; height: var(--faq-icon) !important; min-width: var(--faq-icon) !important; max-width: var(--faq-icon) !important; flex: 0 0 var(--faq-icon) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #edf4fb !important; color: #083C7C !important; border-radius: 50% !important; font-size: 17px !important; line-height: 1 !important; transition: background-color .25s ease, color .25s ease !important; } .faq-section .faq-item:hover .faq-question span > i { background: #0D6EFD !important; color: #FFFFFF !important; } /* ---------- the answer lines up with the question, by construction ---------- left = button padding + icon + gap, which is exactly where the question text begins. Right padding matches the button so the two blocks share the same measure. */ .faq-section .faq-answer { background: transparent !important; padding: 0 var(--faq-pad) var(--faq-inset) calc(var(--faq-pad) + var(--faq-icon) + var(--faq-gap)) !important; } /* ---------- arrow sits in the same rhythm as the button padding ---------- */ .faq-section .faq-arrow { flex: 0 0 auto !important; color: #083C7C !important; } /* ================================================================ RESPONSIVE - each breakpoint restates the three numbers, and the answer padding follows automatically. 16 + 34 + 10 = 60px and 14 + 31 + 10 = 55px are the indents those widths need. ================================================================ */ @media (max-width: 1199px) { .faq-section .faq-question, .faq-section .faq-question > span { font-size: 17px !important; } } @media (max-width: 991px) { /* the legacy flat 25px indent is overridden by the calc() above */ .faq-section .faq-item { --faq-inset: 22px !important; } .faq-section .faq-category h2 { font-size: 20px !important; } } @media (max-width: 767px) { .faq-section { padding: 40px 0 !important; } .faq-section .faq-container { width: 90% !important; } .faq-section .faq-header { margin-bottom: 32px !important; } .faq-section .faq-header h1 { font-size: 30px !important; letter-spacing: -1px !important; } .faq-section .faq-header p { font-size: 15px !important; } .faq-section .faq-category { margin: 34px 0 14px !important; } .faq-section .faq-category h2 { font-size: 18px !important; } .faq-section .faq-question, .faq-section .faq-question > span { font-size: 16.5px !important; } .faq-section .faq-answer, .faq-section .faq-answer p, .faq-section .faq-answer li { font-size: 14px !important; } .faq-section .faq-item { --faq-pad: 16px !important; --faq-icon: 34px !important; --faq-gap: 10px !important; --faq-inset: 20px !important; } .faq-section .faq-question span > i { font-size: 15px !important; } .faq-section .faq-question { padding-top: 16px !important; padding-bottom: 16px !important; } } @media (max-width: 480px) { .faq-section .faq-container { width: 92% !important; } .faq-section .faq-category h2 { font-size: 16.5px !important; } .faq-section .faq-question, .faq-section .faq-question > span { font-size: 15.5px !important; } .faq-section .faq-answer, .faq-section .faq-answer p, .faq-section .faq-answer li { font-size: 13.5px !important; } .faq-section .faq-item { --faq-pad: 14px !important; --faq-icon: 31px !important; --faq-gap: 10px !important; --faq-inset: 18px !important; } .faq-section .faq-question span > i { font-size: 14px !important; } .faq-section .faq-question { padding-top: 14px !important; padding-bottom: 14px !important; } } /* ================================================================ FAQ PAGE - "VIEW ODLC GOVERNANCE" DROPDOWN Appended to css/faq.css. Nothing above this point is modified. The button was a dead in answer 4 ("How is ODLC governed?"). The answer text already names the three bodies, so the dropdown lists exactly those: Governing Council Governance/governingcouncil.php Academic Council Governance/academiccouncil.php Administrative Structure Governance/administrativestructure.php All three were checked and return HTTP 200. CSS only, matching the "Become an ALC" dropdown in the final CTA on index.php: :hover for pointers and :focus-within for keyboard and touch, so no script was added. THE CLIPPING PROBLEM .faq-item carries overflow: hidden, which is what keeps the card corners clean. A menu positioned below the button would be cut off at the card edge the moment it opened, so that single item is given overflow: visible. It is scoped to the one item that actually contains a dropdown - the other 43 keep the clipping they need, and the card still looks the same, because the only thing the clip was hiding was the button's own background, and the button is transparent. The item also needs to sit above its neighbours, or the following cards would paint over the open menu. position: relative plus a z-index on the hover state handles that. ================================================================ */ /* ---------- the one card that holds a dropdown ---------- */ .faq-section .faq-item:has(.faq-gov-dropdown) { overflow: visible !important; position: relative !important; z-index: 1 !important; } .faq-section .faq-item:has(.faq-gov-dropdown):hover, .faq-section .faq-item:has(.faq-gov-dropdown):focus-within { z-index: 30 !important; } /* ---------- wrapper ---------- */ .faq-section .faq-gov-dropdown { position: relative !important; display: inline-block !important; vertical-align: top !important; margin: 0 0 4px !important; padding: 0 !important; } /* ---------- trigger: the original button, plus a caret ---------- faq-action-btn already styles this, so only the caret and the focus ring are added here. The navy fill, white text, 6px radius and 12px 20px padding are all inherited from that class. */ .faq-section .faq-gov-toggle { cursor: pointer !important; gap: 8px !important; transition: background .25s ease !important; } .faq-section .faq-gov-toggle:focus, .faq-section .faq-gov-toggle:focus-visible { outline: 2px solid #0D6EFD !important; outline-offset: 2px !important; } .faq-section .faq-gov-caret { margin: 0 !important; color: #ffffff !important; font-size: 11px !important; line-height: 1 !important; flex: 0 0 auto !important; transition: transform .2s ease !important; } .faq-section .faq-gov-dropdown:hover .faq-gov-caret, .faq-section .faq-gov-dropdown:focus-within .faq-gov-caret { transform: rotate(180deg) !important; } /* ---------- menu ---------- */ .faq-section .faq-gov-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 40 !important; display: block !important; min-width: 268px !important; margin: 0 !important; padding: 6px !important; background: #FFFFFF !important; border: 1px solid #E4EAF8 !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(16, 42, 90, .18) !important; text-align: left !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important; transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important; } .faq-section .faq-gov-dropdown:hover .faq-gov-menu, .faq-section .faq-gov-dropdown:focus-within .faq-gov-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ---------- items, with a hairline between them, as in the reference ---------- */ .faq-section .faq-gov-item { display: block !important; padding: 11px 14px !important; border-radius: 10px !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-align: left !important; text-decoration: none !important; transition: background .18s ease, color .18s ease !important; } /* the divider sits between items only, never above the first or below the last, so the panel does not look ruled at the edges */ .faq-section .faq-gov-item + .faq-gov-item { border-top: 1px solid #EDF1F9 !important; } .faq-section .faq-gov-item:hover, .faq-section .faq-gov-item:focus-visible { background: #F4F8FD !important; color: #083C7C !important; } /* ---------- narrow screens ---------- the panel is 268px, which fits inside a 320px viewport once the 92% container is taken off, so it is left-aligned rather than centred. Only the type softens. */ @media (max-width: 480px) { .faq-section .faq-gov-menu { min-width: 244px !important; } .faq-section .faq-gov-item { font-size: 13.5px !important; padding: 10px 12px !important; } } /* ================================================================ FAQ PAGE - "APPLY NOW" DROPDOWN Appended to css/faq.css. Nothing above this point is modified. The button was a dead in answer 9. The answer already lists the two pathways as a bulleted list immediately above it: Indian Student Application International Student Application so the dropdown offers exactly those two, and reuses the URLs already in use on the two student cards in the Apply With ODLC section on index.php, so the same destinations are named in both places: Indian https://odlc.in/student.php International https://odlc.in/student-international/student_international.php CSS only, same pattern as the governance dropdown above: :hover for pointers, :focus-within for keyboard and touch. "International Student Application" is much longer than "Governing Council", so this panel is wider - 306px rather than 268px - and the text is allowed to wrap rather than being forced onto one line, which keeps the panel from having to grow still further on small screens. .faq-item carries overflow: hidden, which would cut the panel off at the card edge, so the two cards that hold a dropdown are given overflow: visible. The rule is scoped by :has(), so it only applies to cards that actually contain a dropdown, and the other 42 keep the clipping they need. ================================================================ */ /* ---------- both dropdown cards drop the clip and lift above neighbours ---------- */ .faq-section .faq-item:has(.faq-gov-dropdown), .faq-section .faq-item:has(.faq-apply-dropdown) { overflow: visible !important; position: relative !important; z-index: 1 !important; } .faq-section .faq-item:has(.faq-gov-dropdown):hover, .faq-section .faq-item:has(.faq-gov-dropdown):focus-within, .faq-section .faq-item:has(.faq-apply-dropdown):hover, .faq-section .faq-item:has(.faq-apply-dropdown):focus-within { z-index: 30 !important; } /* ---------- wrapper ---------- */ .faq-section .faq-apply-dropdown { position: relative !important; display: inline-block !important; vertical-align: top !important; margin: 0 0 4px !important; padding: 0 !important; } /* ---------- trigger: faq-action-btn styling plus a caret ---------- */ .faq-section .faq-apply-toggle { cursor: pointer !important; gap: 8px !important; transition: background .25s ease !important; } .faq-section .faq-apply-toggle:focus, .faq-section .faq-apply-toggle:focus-visible { outline: 2px solid #0D6EFD !important; outline-offset: 2px !important; } .faq-section .faq-apply-caret { margin: 0 !important; color: #ffffff !important; font-size: 11px !important; line-height: 1 !important; flex: 0 0 auto !important; transition: transform .2s ease !important; } .faq-section .faq-apply-dropdown:hover .faq-apply-caret, .faq-section .faq-apply-dropdown:focus-within .faq-apply-caret { transform: rotate(180deg) !important; } /* ---------- menu ---------- */ .faq-section .faq-apply-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 40 !important; display: block !important; width: max-content !important; min-width: 306px !important; max-width: 320px !important; margin: 0 !important; padding: 6px !important; background: #FFFFFF !important; border: 1px solid #E4EAF8 !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(16, 42, 90, .18) !important; text-align: left !important; /* NOT white-space: nowrap - the longer label needs to be able to wrap rather than force the panel wider still */ white-space: normal !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important; transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important; } .faq-section .faq-apply-dropdown:hover .faq-apply-menu, .faq-section .faq-apply-dropdown:focus-within .faq-apply-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ---------- items ---------- */ .faq-section .faq-apply-item { display: block !important; padding: 11px 14px !important; border-radius: 10px !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; transition: background .18s ease, color .18s ease !important; } .faq-section .faq-apply-item + .faq-apply-item { border-top: 1px solid #EDF1F9 !important; } .faq-section .faq-apply-item:hover, .faq-section .faq-apply-item:focus-visible { background: #F4F8FD !important; color: #083C7C !important; } /* ---------- narrow screens ---------- the panel tracks the trigger rather than sitting at a fixed width, so it never runs past the card on a small phone. */ @media (max-width: 767px) { .faq-section .faq-apply-menu { min-width: 0 !important; max-width: min(320px, calc(100vw - 48px)) !important; } } @media (max-width: 480px) { .faq-section .faq-apply-item { font-size: 13.5px !important; padding: 10px 12px !important; } } /* ================================================================ FAQ PAGE - "INSTITUTIONAL APPLICATION" TWO-LEVEL DROPDOWN Appended to css/faq.css. Nothing above this point is modified. The button was a dead . The answer directly above it already lists the three bodies, so the first level mirrors that list and the second level gives the application route for each: Accredited Learning Centre (ALC) Apply - Indian ALC Apply - International ALC Regional Coordination Office (RCO) Apply - Indian RCO Apply - International RCO National Coordination Office (NCO) Apply - International NCO (single route, no submenu) All five URLs are the ones already in use on the ALC / RCO / NCO cards in the Apply With ODLC section on index.php, and on the header and footer menus, so the same destinations are named in every place. All five were checked and return HTTP 200: https://odlc.in/alc.php https://odlc.in/alc-international/alc_international.php https://odlc.in/rco.php https://odlc.in/rco-international/rco_international.php https://odlc.in/nco-international/nco_international.php They open in a new tab, because they are on the live odlc.in site rather than this one, and leaving a visitor on the FAQ page after an application form is not useful. CSS only, same pattern as the two dropdowns above: :hover for pointers, :focus-within for keyboard. The second level also opens on focus of its own heading, which carries tabindex="0" so it is reachable by keyboard, and the caret rotates to show which level is open. LAYOUT The first level opens downward from the button, as the other two dropdowns do. The second level opens to the RIGHT of its parent row, because opening downward would push it off the bottom of a short card and the cards are only as tall as their answer. .faq-item carries overflow: hidden, which would clip a panel hanging outside the card, so cards holding a dropdown are given overflow: visible - scoped by :has(), so the other 42 are untouched. ================================================================ */ /* ---------- cards that hold any dropdown ---------- */ .faq-section .faq-item:has(.faq-gov-dropdown), .faq-section .faq-item:has(.faq-apply-dropdown), .faq-section .faq-item:has(.faq-inst-dropdown) { overflow: visible !important; position: relative !important; z-index: 1 !important; } .faq-section .faq-item:has(.faq-gov-dropdown):hover, .faq-section .faq-item:has(.faq-gov-dropdown):focus-within, .faq-section .faq-item:has(.faq-apply-dropdown):hover, .faq-section .faq-item:has(.faq-apply-dropdown):focus-within, .faq-section .faq-item:has(.faq-inst-dropdown):hover, .faq-section .faq-item:has(.faq-inst-dropdown):focus-within { z-index: 30 !important; } /* ---------- wrapper ---------- */ .faq-section .faq-inst-dropdown { position: relative !important; display: inline-block !important; vertical-align: top !important; margin: 0 0 4px !important; padding: 0 !important; } /* ---------- trigger ---------- */ .faq-section .faq-inst-toggle { cursor: pointer !important; gap: 8px !important; transition: background .25s ease !important; } .faq-section .faq-inst-toggle:focus, .faq-section .faq-inst-toggle:focus-visible { outline: 2px solid #0D6EFD !important; outline-offset: 2px !important; } .faq-section .faq-inst-caret { margin: 0 !important; color: #ffffff !important; font-size: 11px !important; line-height: 1 !important; flex: 0 0 auto !important; transition: transform .2s ease !important; } .faq-section .faq-inst-dropdown:hover .faq-inst-caret, .faq-section .faq-inst-dropdown:focus-within .faq-inst-caret { transform: rotate(180deg) !important; } /* ---------- level 1 ---------- */ .faq-section .faq-inst-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 40 !important; display: block !important; min-width: 320px !important; margin: 0 !important; padding: 6px !important; background: #FFFFFF !important; border: 1px solid #E4EAF8 !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(16, 42, 90, .18) !important; text-align: left !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important; transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important; } .faq-section .faq-inst-dropdown:hover .faq-inst-menu, .faq-section .faq-inst-dropdown:focus-within .faq-inst-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ---------- a level 1 row that opens a level 2 ---------- */ .faq-section .faq-inst-group { position: relative !important; display: block !important; margin: 0 !important; padding: 0 !important; } .faq-section .faq-inst-group-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 11px 14px !important; border-radius: 10px !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; cursor: pointer !important; transition: background .18s ease, color .18s ease !important; } .faq-section .faq-inst-group-head i { margin: 0 !important; color: #0D6EFD !important; font-size: 12px !important; line-height: 1 !important; flex: 0 0 auto !important; transition: transform .2s ease !important; } .faq-section .faq-inst-group:hover .faq-inst-group-head, .faq-section .faq-inst-group:focus-within .faq-inst-group-head { background: #F4F8FD !important; color: #083C7C !important; } .faq-section .faq-inst-group:hover .faq-inst-group-head i, .faq-section .faq-inst-group:focus-within .faq-inst-group-head i { transform: rotate(90deg) !important; } /* the gap between a row and the panel that opens beside it must stay hoverable, otherwise the pointer crosses a dead strip and the panel closes before it can be used */ .faq-section .faq-inst-group { padding-right: 0 !important; } .faq-section .faq-inst-submenu { padding-top: 0 !important; } /* ---------- level 2, opening to the right ---------- */ .faq-section .faq-inst-submenu { position: absolute !important; top: -6px !important; left: calc(100% + 8px) !important; z-index: 45 !important; display: block !important; min-width: 264px !important; margin: 0 !important; padding: 6px !important; background: #FFFFFF !important; border: 1px solid #E4EAF8 !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(16, 42, 90, .18) !important; text-align: left !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(-6px) !important; transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important; } .faq-section .faq-inst-group:hover .faq-inst-submenu, .faq-section .faq-inst-group:focus-within .faq-inst-submenu { opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; } /* ---------- level 2 items ---------- */ .faq-section .faq-inst-item { display: block !important; padding: 11px 14px !important; border-radius: 10px !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; transition: background .18s ease, color .18s ease !important; } .faq-section .faq-inst-item + .faq-inst-item { border-top: 1px solid #EDF1F9 !important; } .faq-section .faq-inst-item:hover, .faq-section .faq-inst-item:focus-visible { background: #F4F8FD !important; color: #083C7C !important; } /* ---------- NCO, the single-route row, sits at level 1 ---------- */ .faq-section .faq-inst-direct { display: flex !important; align-items: center !important; gap: 10px !important; margin: 6px 0 0 !important; padding: 11px 14px !important; border-top: 1px solid #EDF1F9 !important; border-radius: 10px !important; color: #0B1F4D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: left !important; text-decoration: none !important; transition: background .18s ease, color .18s ease !important; } .faq-section .faq-inst-direct i { margin: 0 !important; color: #0D6EFD !important; font-size: 13px !important; line-height: 1 !important; flex: 0 0 auto !important; } .faq-section .faq-inst-direct:hover, .faq-section .faq-inst-direct:focus-visible { background: #F4F8FD !important; color: #083C7C !important; } /* ---------- narrow screens ---------- the level 1 panel needs the full card width, and level 2 has no room to open sideways, so it drops below its own row instead. */ @media (max-width: 991px) { .faq-section .faq-inst-menu { min-width: 0 !important; width: 100% !important; } .faq-section .faq-inst-submenu { position: static !important; transform: none !important; min-width: 0 !important; margin: 0 0 6px 14px !important; border-left: 2px solid #E4EAF8 !important; border-radius: 0 10px 10px 0 !important; box-shadow: none !important; } .faq-section .faq-inst-group:hover .faq-inst-submenu, .faq-section .faq-inst-group:focus-within .faq-inst-submenu { transform: none !important; } .faq-section .faq-inst-group-head i { transform: rotate(90deg) !important; } } @media (max-width: 767px) { .faq-section .faq-inst-group-head, .faq-section .faq-inst-item, .faq-section .faq-inst-direct { font-size: 13.5px !important; padding: 10px 12px !important; } } /* ================================================================ FAQ PAGE - GRADIENT ACCENT ON THE HEADING Appended to css/faq.css. Nothing above this point is modified. The page heading was one flat navy line:

Frequently Asked Questions

Every section on index.php splits its heading so the last word carries the accent gradient, for example the FAQ band there:

Frequently Asked Questions

The markup is now the same shape, so the heading on this page matches the rest of the site:

Frequently Asked Questions

Same gradient the other sections use, read off index.css: linear-gradient(90deg, #6d4dff, #4bb8ff) background-clip: text with a transparent fill is what paints a gradient through the glyphs. The solid #6d4dff underneath is the fallback: if background-clip: text is unsupported the word still reads in the gradient's first colour rather than vanishing, which is why color is not set to transparent. The h1 itself keeps 35px / 800 / #0B1F4D from the block above, and the span is a plain inline element with no margin, so the two words sit on one line and the gradient starts exactly at the gap between them. ================================================================ */ .faq-section .faq-header h1 span { display: inline !important; margin: 0 !important; padding: 0 !important; background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #6d4dff !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: none !important; } /* ---------- if the browser has no background-clip: text, the span would have no fill at all, so it is given a flat colour instead of disappearing. This is the only rule here without !important, because it is a fallback for a feature test rather than an override of an existing rule. ---------- */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .faq-section .faq-header h1 span { -webkit-text-fill-color: #6d4dff !important; color: #6d4dff !important; background: none !important; } } /* ================================================================ STORE BUTTON BADGES The Google Play and App Store marks are now SVGs rather than Bootstrap Icons glyphs. They need explicit sizing, because an has no intrinsic relationship to the surrounding font-size the way a glyph does. height is set in em so the badge tracks the button's own font-size and stays in proportion at every breakpoint, rather than being pinned to a fixed pixel value that would be right at one width and wrong at the next. The rule is scoped to the badge class, not to .app-download-btn generally, so no other image inside those buttons is affected. The badge sits inside an existing flex row with gap:8px, so it needs no margin of its own. ================================================================ */ .app-download-btn img.odlc-store-badge { height: 1.35em; width: auto; display: block; flex: 0 0 auto; } /* ================================================================ THE FAQ STORE BUTTONS ARE BADGE IMAGES NOW Appended at the end of this file. Nothing above this line was edited. WHAT WAS THERE Two navy text buttons inside the answer to "Does ODLC have a mobile application?" - the 29th FAQ - each an 18px store icon plus a line of text, carrying these styles from faq.css:1651 and :1658: .app-download-buttons display:flex; gap:12px; flex-wrap:wrap .app-download-btn display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; background:#083C7C; border-radius:6px; font-size:13px; font-weight:700 They are two store badge images now: google-play-badge.svg and app-store-badge.svg - the dark-plate pair, the same two assets the footer's Mobile App card uses, so every badge on the site is now the black plate. These were first put in as the light-plate variants and changed to the dark pair on request; nothing else in this block moved when that happened, because the two files have the same 200 x 60 viewBox and identical geometry and differ only in the plate fill and the type colour. WHAT CHANGED AND WHAT DID NOT What changed: the icon and the label inside each anchor are now a single badge, and the navy plate is taken off the anchor so the badge is not drawn on top of a plate of its own. What did not: the size of each button, the size of the row, the position of everything around them, both hrefs, and the way the row behaves on a phone. Every measurement below was taken before this change and reproduced after it. WHAT THE BUTTONS WERE, AND WHY THEY ARE NOT THAT SHAPE NOW Measured at 1440px before this change: Google Play 277 x 44px App Store 287 x 44px the row 576 x 44px, gap 12px Those widths came from the two words of text each button carried - "DOWNLOAD ON GOOGLE PLAY" and "DOWNLOAD ON THE APP STORE" - plus 12px 18px padding around an 18px icon. They were first put back at 277 and 287 so the row would keep its old width, and that turned out to look wrong: each plate was centred in a box six times wider than itself, so the two badges floated about 147px apart with a hole between them. They are now one size - see the note beside the rule for why it is 137 x 41. THE BADGE IS NEVER STRETCHED .app-download-btn.odlc-store-badge-img img display:block; width:100%; height:100%; max-width:none; object-fit:contain; object-position:center The plate is 200 x 60, which is 10:3. Stretching it to fill a box of any other shape would square up its corners, its rim and its type, so object-fit: contain is what guarantees the plate keeps its own proportions whatever box it is handed. The box is 137 x 41 now, which is the plate's own 10:3, so nothing is letterboxed - but contain is kept rather than relying on the numbers happening to agree. WHY THE RESET IS TWO CLASSES .app-download-btn.odlc-store-badge-img is (0,2,0) and beats the bare .app-download-btn rules wherever they sit, rather than relying on being later in the file than a rule that may still be edited. TWO EXISTING RULES IT HAS TO ANSWER, BY NAME .app-download-btn:hover at faq.css:1673 sets background:#062d5c. That is (0,2,0) as well and comes first in this file, so the transparent background wins on source order and no navy plate shows through behind the black badge on hover. It is restated in the hover rule at the end of this block. faq.css:1769 sets flex-direction:column on the row and faq.css:1773 sets width:100% on the button, both inside @media (max-width:767px). The flex-direction is left to do its job - the badges do stack on a phone. The width:100% is (0,1,0) and loses to this rule's (0,2,0) on specificity, so the badges keep their own 137 x 41 on a phone instead of stretching to the full 274px of the answer column. line-height: 0 is what stops an inline image leaving a gap beneath the baseline, which would otherwise drop each badge a few pixels low in its anchor so the two were not level with each other. THE MARKUP The anchors keep class="app-download-btn odlc-store-badge-img" so the surrounding layout is untouched, and each keeps width and height attributes - 277 x 44 and 287 x 44 - so the browser reserves the right box before the SVG arrives. font-size stays at the 13px that faq.css:1658 pins with !important, and is not fought here: the anchors hold no text, so no line box is generated by it. ACCESSIBILITY The anchor carries aria-label and the image the same alt text, so the link keeps an accessible name whether or not the SVG loads. The anchors here never carried a text label of their own, so aria-label closes a real accessibility gap rather than duplicating visible wording. WHAT IS NOT CHANGED Both hrefs. The .app-download-buttons row and its 12px gap. The FAQ accordion, the question, and the answer text above it. Every other question and answer on the page. No copy and no URL invented. ================================================================ */ .app-download-btn.odlc-store-badge-img { display: inline-flex; align-items: center; justify-content: center; width: 137px; height: 41px; margin: 0; padding: 0; gap: 0; background: transparent; border: 0; border-radius: 0; line-height: 0; } /* ---------- SIZED AND SPACED LIKE THE OTHER FAQ BUTTONS There are 17 .faq-action-btn in this file's answers, and every one of them is 41px tall at 1440px - 12px padding above and below a 16.8px line box. These two badges are 41px tall for the same reason, so the store buttons sit on the same rhythm as the buttons above and below them in the answers rather than standing 3px proud of them. ONE WIDTH FOR BOTH, AND THEY SIT NEXT TO EACH OTHER They used to be given their own old widths, 277px and 287px, because those were the widths the two long text labels had produced. A badge does not need a width to fit its words, and keeping those widths left the two plates floating about 147px apart with a hole between them - each one centred in a box six times wider than itself. Both are now one size, so they sit side by side on the row's 12px gap, and the row begins at the same left edge as the paragraph above it. 137px is the plate's own width at 41px tall. The plate is 200 x 60, which is 10:3, so 41px tall is 137px wide. Nothing is letterboxed: the box is the plate. The other FAQ buttons range from 165px to 313px wide because their widths come from their labels. 137px is narrower than all of them and it cannot be otherwise - a store badge is a fixed 10:3 shape, and matching a text button's width would mean either letterboxing the plate inside it or stretching it and squashing its corners, rim and type. The height is what lines the row up, and that matches. THE PHONE TIER NEEDS NO RULE OF ITS OWN faq.css:1769 sets flex-direction:column on the row below 768px, and faq.css:1773 sets width:100% on the button. That second rule is (0,1,0) and this one is (0,2,0), so this width wins on specificity at every width and no @media block is needed here. The badges keep their 137 x 41 on a phone and stack in the column, left aligned, rather than stretching to the full 274px and floating in the middle of it. object-fit: contain is kept even though the box is now the plate's own 10:3, because it is what guarantees the plate is never stretched if these numbers are ever changed to something else. THE OTHER FAQ BUTTONS STRETCH ON A PHONE, THE BADGES DO NOT That difference is intentional and is the reason for the rule above. A text button stretched to 274px is still a full-width block with its text centred in it; a badge stretched to 274px is a 137px plate adrift in a wide empty box, which is the problem this change exists to fix. ---------- */ .app-download-btn.odlc-store-badge-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; border: 0; border-radius: 0; } .app-download-btn.odlc-store-badge-img:hover { background: transparent; } .app-download-btn.odlc-store-badge-img:hover img { opacity: .88; } /* ============================================================================ FAQ: THE ANSWERS' PROSE JUSTIFIED ON A PHONE, WITHOUT WIDER WORD GAPS --------------------------------------------------------------------------- FOUR DECLARATIONS ON TWO SELECTORS, BELOW 768px ONLY. No font-family, no font-size, no font-weight, no line-height, no letter-spacing, no colour, no background, no width, no margin, no padding. Not one character of copy is touched and no anchor or button is altered. faq.php is not touched. WHY THE SELECTOR REPEATS .faq-section faq.css:2022 already says, unconditionally and with !important: .faq-section .faq-answer p { ... text-align: left !important; } That is (0,2,1) with importance, so a plain text-align on .faq-answer p - (0,1,1) without it - would lose on both counts and the answers would stay flush left. The selector here repeats .faq-section so it is (0,2,1) as well, and text-align carries !important so importance ties; this block is later in the file than 2022 and so wins on source order. The same two rules at 2073, 2083, 2268 and 2287 only set font-size at the 767px and 480px tiers. None of them sets text-align, so the base size at each tier - 13.5px on a phone - is untouched by this block. -------------------------------------------------------------------------- WHY HYPHENATION IS THE POINT AND NOT AN EXTRA The measure on a phone is narrow. Measured at 390px with the answers open: .faq-answer p 287.8px wide, 13.5px type, about 43 characters a paragraph runs to 6 lines Justifying a 43-character measure is exactly the case where a browser opens rivers: it has very few break opportunities, so it buys the flush right edge by stretching the spaces at each line end. That is precisely the 'more space between words' being objected to - justification alone would cause it. hyphens: auto gives the line breaker somewhere else to break: inside a word, with a hyphen. The line fills without the spaces having to grow, which is the only way to justify a narrow measure without wide gaps. It works on this page: the document element carries lang="en" (measured, not assumed), and Chrome hyphenates against the document language, so no dictionary is needed and no markup changes. -------------------------------------------------------------------------- THE FOUR DECLARATIONS text-align justify flush right edge hyphens auto break inside words instead of widening spaces -webkit-hyphens auto the same, for engines that want the prefixed property text-align-last left the final line of a paragraph stays flush left text-align-last is the guard. Left to itself, justify leaves the last line ragged, which is what is wanted - but this page sets no text-align-last, and if one is ever added it would stretch the last line of every answer. Naming it left makes the intention explicit rather than inherited. NO word-spacing IS WRITTEN, DELIBERATELY Every gap the browser opens is the browser's own justification, and hyphenation is what keeps it small. Writing a word-spacing value here would set a fixed gap under the justified text and defeat the hyphenation that is doing the work. The computed word-spacing on this page is already 0px and is not touched. -------------------------------------------------------------------------- WHAT IS DELIBERATELY NOT JUSTIFIED .faq-question, the accordion headings, and the section's own label and title. Those are short - two or three lines at most - and justifying a short heading stretches its last line across the full measure, which is the opposite of what was asked for. Body prose is what reads badly ragged at 43 characters; a two-line heading does not. -------------------------------------------------------------------------- NOT TOUCHED No font. The answers stay at the sizes faq.css gives them - 13.5px at the 480px tier, 14px at 767px, 15px above - and none of those is restated. No colour, no background, no border, no radius, no shadow, no width, no height, no margin, no padding. The 61 .faq-answer, the 44 .faq-item, the accordions and the chevrons, the dropdown menus, the four action buttons and their hrefs, the header, the footer. faq.php. Every other page and every other stylesheet. ============================================================================ */ /* ---- the answers' prose justified on a phone, hyphenated so the word gaps stay as small as they were ---- */ /* faq.css:2022 sets text-align:left !important on .faq-section .faq-answer p at (0,2,1), so this repeats that selector and carries !important to match - importance ties, and being later in the file it wins. The measure is about 43 characters at 390px, which is narrow enough that justifying alone would open wide gaps between words; hyphens:auto gives the line breaker somewhere to break other than the spaces. */ @media (max-width: 767px) { .faq-section .faq-answer p, .faq-section .faq-answer li { text-align: justify !important; -webkit-hyphens: auto !important; hyphens: auto !important; text-align-last: left !important; } } /* ============================================================================ FAQ: THE INSTITUTIONAL APPLICATION DROPDOWN, IN THE TOPBAR'S OWN STYLE, ON A PHONE --------------------------------------------------------------------------- BELOW 768px ONLY. Every value below is copied off the topbar's APPLY menu, measured live on this page - nothing is invented and nothing is approximated. -------------------------------------------------------------------------- THE ARROW IN THE BUTTON WAS NOT DONE HERE, AND WHY faq.php:1085 read INSTITUTIONAL APPLICATION → and that arrow is the character U+2192 sitting in a bare text node, with a plain space either side of it. Walking the DOM confirms the button's children are exactly two nodes: TEXT "INSTITUTIONAL APPLICATION →" No selector can reach a character inside a text node - there is no element to name, and no property that hides part of a run of text. The caret beside it IS an element and could be hidden from CSS, but the arrow is not, so the arrow was removed from the markup instead: one character, spaces either side of it, at faq.php:1085. The button label now reads "INSTITUTIONAL APPLICATION" followed by the same chevron it always had. -------------------------------------------------------------------------- WHAT THE TOPBAR'S MENU IS, MEASURED LIVE ON THIS PAGE .top-dropdown-menu.apply-dropdown forced open to measure background-color #FFFFFF border none border-radius 0px box-shadow 0 10px 25px rgba(0, 0, 0, .2) padding 8px 0 its items,
  • display block padding 12px 20px font Inter 14px / 22.4px w600 color #083C7D border-radius 0px -------------------------------------------------------------------------- WHAT THE FAQ MENU WAS, MEASURED LIVE ON THIS PAGE .faq-inst-menu border 1px solid #E4EAF8 border-radius 14px box-shadow 0 18px 40px rgba(16, 42, 90, .18) padding 6px .faq-inst-group-head, .faq-inst-item, .faq-inst-direct padding 11px 14px border-radius 10px font Arial 14px / 19.6px w600 color #0B1F4D So the two menus differed in six visible ways: the corner radius, the border, the shadow, the padding, the type and the colour of the type. -------------------------------------------------------------------------- WHAT IS RESTATED, AND WHY EACH ONE .faq-inst-menu border-radius 0 the topbar's square corner border none the topbar has no border box-shadow 0 10px 25px rgba(0, 0, 0, .2) padding 8px 0 the topbar's own .faq-inst-group-head, .faq-inst-item, .faq-inst-direct padding 12px 20px the topbar's item padding border-radius 0 the topbar's items are square font-family Inter, the topbar's stack, exactly as measured line-height 22.4px 14 x 1.6, the topbar's own color #083C7D the topbar's item colour font-size and font-weight are NOT written. Both menus already read 14px and 600, so restating them would add two declarations that change nothing and give the next reader something to keep in step. Only the three properties that genuinely differ are named: the family, the leading and the colour. -------------------------------------------------------------------------- min-width AND width ARE DELIBERATELY NOT RESTATED faq.css:2870 gives this menu min-width: 0 and width: 100% inside its own @media (max-width: 991px), so on a phone the panel is the full width of its column. The topbar's menu is a fixed 320px on a 280px minimum. Copying those two would put a 320px panel on a 320px phone, which overflows by the width of the column's own padding. The topbar's figure is right for a desktop menu bar and wrong here, so the two declarations are left alone and only the six that describe the look are copied. -------------------------------------------------------------------------- EVERY RULE BELOW IS !important AND REPEATS .faq-section, AND WHY faq.css carries this menu already pinned: 2708 .faq-section .faq-inst-menu (0,2,0) !important 2741 .faq-section .faq-inst-group-head (0,2,0) !important 2811 .faq-section .faq-inst-item (0,2,0) !important 2836 .faq-section .faq-inst-direct (0,2,0) !important All four carry !important, so a normal declaration cannot beat any of them whatever its specificity. These four repeat .faq-section so they are (0,2,0) as well - importance ties, specificity ties, and being at the end of the file this block wins on source order. THE HOVER AND FOCUS STATES ARE NOT TOUCHED 2765, 2830 and 2861 set background #F4F8FD and color #083C7C on focus-within and focus-visible. They are not restated, so the keyboard and pointer states this menu already had are exactly as they were - only the resting appearance changes. The two chevrons inside the menu, .faq-inst-group-head i at 2756 and .faq-inst-direct i at 2853, are also not named. Their #0D6EFD is the topbar's chevron colour already and is left where it is. -------------------------------------------------------------------------- NOT TOUCHED The other 60 answers, the questions, the four action buttons, the accordions, the three dropdowns' javascript, the header, the footer. Above 768px nothing changes. faq.php was changed once, by one character, and is described at the top of this block. No other page's stylesheet is written to. ============================================================================ */ /* ---- the institutional application menu, in the topbar's style, on a phone ---- */ @media (max-width: 767px) { .faq-section .faq-inst-menu { border: none !important; border-radius: 0 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; padding: 8px 0 !important; } .faq-section .faq-inst-group-head, .faq-section .faq-inst-item, .faq-section .faq-inst-direct { padding: 12px 20px !important; border-radius: 0 !important; font-family: Inter !important; line-height: 22.4px !important; color: #083C7D !important; } } /* ============================================================================ FAQ: THE TWO STORE BADGES, SIDE BY SIDE ON A PHONE --------------------------------------------------------------------------- THREE DECLARATIONS ON ONE SELECTOR, BELOW 768px ONLY. No font, no colour, no background, no border, no radius, no shadow, no margin, no padding, no display, no gap. The two images, their alt text, their two hrefs and the accessibility labels on the anchors are not touched. faq.php is not touched. -------------------------------------------------------------------------- WHY THEY STACK, MEASURED IN REAL PHONE-WIDTH IFRAMES .app-download-buttons is display:flex with flex-wrap:wrap and a 12px column gap. Each badge is 137px wide at every width - faq.css:3117 fixes that - so the pair needs 137 + 12 + 137 = 286px. vw column needs spare what happens 390 287.8 286.0 1.8 WRAPS anyway 360 268.2 286.0 -17.8 wraps, 17.8px too wide 320 223.4 286.0 -62.6 wraps, 62.6px too wide At 390px the row has 1.8px of slack, which is inside the sub-pixel rounding of the layout, so it breaks. Below 390px the pair is genuinely wider than the column and there is no arrangement that puts them both on one line at their present size. Un-stacking them is therefore not enough - they have to be given room to be side by side. -------------------------------------------------------------------------- WHAT IS WRITTEN, AND WHY IT IS A FRACTION AND NOT A PIXEL FIGURE width calc(50% - 7px) height auto aspect-ratio 200 / 60 Each badge takes half the row less 7px. Two of those plus the 12px gap is 100% - 2px, which leaves 2px of slack instead of the 1.8px that failed - and, more importantly, it holds at every width the column can take. A pair of pixel widths would fit on one phone and overflow the next, which is the fault this block exists to remove. aspect-ratio carries the shape. The badge image is 200x60, a ratio of 3.333, and the box it sits in is 137x41, a ratio of 3.341 - so the two numbers already agree to within a quarter of a percent. Setting height to auto and giving the ratio instead means the badge keeps its proportions at whatever width the column hands it, rather than keeping a height that only suits 137px. The image itself already carries object-fit:contain, measured on the live page, so if the box and the picture ever disagree by a fraction the image letterboxes rather than stretching. Nothing here can distort it. WHAT EACH BADGE COMES OUT AS vw column one badge its height pair + gap 390 287.8 136.9 41.1 285.8 360 268.2 127.1 38.1 266.2 320 223.4 104.7 31.4 221.4 320px is the narrowest phone and it is the one that sets the size: 104.7 by 31.4 for each badge. Above that the badges simply get larger. -------------------------------------------------------------------------- WHY THE SELECTOR IS .app-download-btn.odlc-store-badge-img faq.css:1658 styles .app-download-btn as a navy pill - padding 12px 18px, background #083C7C, border-radius 6px - and 1773 stretches every element of that class to width:100% below 768px. faq.css:3117 then reclaims the two store badges with .app-download-btn.odlc-store-badge-img, stripping the pill and giving them 137x41. Naming the compound class rather than the bare one is deliberate: it can only ever match the two store badges, and it is the same (0,2,0) selector as 3117 and 3185, so importance and specificity tie with them and this block wins on being later in the file. Naming the bare class would have been (0,1,0) and would have had to out-specify them with !important. -------------------------------------------------------------------------- ABOVE 768px NOTHING CHANGES The badges keep 137x41 and the pair keeps sitting on one line, which is what they already did at a desktop width - measured at 912px, where the column is 746px and the pair needs 286px. -------------------------------------------------------------------------- NOT TOUCHED The question, the answer text above it, the icon, the answer's padding, the .app-download-buttons gap, which is still the 12px it always was and which this arithmetic is built around. The Play badge and the App Store badge keep their own src, alt, aria-label, target and rel. The other 60 answers, the questions, the four action buttons, the institutional application dropdown styled in the block before this one, the header, the footer. No other page's stylesheet is written to. ============================================================================ */ /* ---- the two store badges, side by side, on a phone ---- */ /* Each badge is a fixed 137px, so the pair needs 286px. At 390px the column is 287.8px - 1.8px of slack, which rounding breaks - and at 320px it is 62.6px too wide, so they cannot share a line at that size at all. Each badge takes half the row less 7px instead: the pair plus the 12px gap then leaves 2px spare at every width, and aspect-ratio carries the 200x60 shape so the badges stay in proportion as they grow. */ @media (max-width: 767px) { .app-download-btn.odlc-store-badge-img { width: calc(50% - 7px) !important; height: auto !important; aspect-ratio: 200 / 60 !important; } } /* ============================================================================ FAQ: THE BADGE ROW PUT BACK TO A ROW - THE ACTUAL CAUSE OF THE STACK --------------------------------------------------------------------------- ONE DECLARATION. flex-direction, on one selector, below 768px. No font, no colour, no background, no border, no radius, no shadow, no width, no height, no margin, no padding, no gap. faq.php is not touched. THE FAULT, MEASURED LIVE faq.css:1651 .app-download-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } faq.css:1769 @media (max-width: 767px) .app-download-buttons { flex-direction: column; } The row is turned into a COLUMN below 768px. Two children in a column stack vertically whatever their width, so no width, height or aspect value could ever have put them side by side. Computed live on this page at a desktop width, the container reads: display flex flex-flow row wrap column-gap 12px 2 children and at a phone width the same declaration is overridden to column. This is my own miss. The block before this one sized the two badges correctly and I measured the result as still stacked, then went looking at their widths rather than at the row they sit in. The width change is kept - see below - but it was never the thing that was holding them up. -------------------------------------------------------------------------- WHY THE WIDTH CHANGE STAYS, THOUGH IT WAS NOT THE CAUSE With the row restored, the two badges do have to fit on one line, and at their old fixed 137px they did not: vw column 137 + 12 + 137 spare 390 287.8 286.0 1.8 inside the rounding 360 268.2 286.0 -17.8 does not fit 320 223.4 286.0 -62.6 does not fit So the earlier block's calc(50% - 7px) with aspect-ratio 200/60 is still needed. Together with this one the pair measures 285.78, 258.19 and 221.38 against columns of 288, 260 and 223 - 2.22, 1.81 and 1.63px of spare at every width, which holds rather than flickering. -------------------------------------------------------------------------- THE ONE DECLARATION .app-download-buttons { flex-direction: row; } Same selector as faq.css:1769 and so the same specificity, and later in the file, which is what decides it. It carries !important only because faq.css is loaded from a script at faq.php:6 rather than by a plain link, so its position among the stylesheets is a runtime detail rather than something the markup fixes; !important removes the dependency on it. flex-wrap stays wrap, which is what the row was declared with at 1651 and what it has always been. It is not restated: with the badges sized to fit there is nothing to wrap, and leaving it alone keeps the declaration in one place. -------------------------------------------------------------------------- ABOVE 768px NOTHING CHANGES The row stays a row, the badges stay 137x41 and the pair stays on one line - measured at 1000px, where the column is 829.1px and the two children sit at the same top, 7486.4. -------------------------------------------------------------------------- NOT TOUCHED The two badge anchors, their hrefs, their aria-labels, their two images, their alt text, their target and rel. The badge sizing from the block before this one. The 12px gap, which this arithmetic is built around and which is not restated. The question, the answer text, the icon, the other 60 answers, the questions, the action buttons, the institutional application dropdown, the header, the footer. faq.php. Every other page. ============================================================================ */ /* ---- the badge row is a row again on a phone ---- */ /* faq.css:1769 turns .app-download-buttons into a column below 768px, which stacks the two badges whatever their width. Same selector, later in the file. flex-wrap stays wrap and the 12px gap stays 12px - neither is named here; the badge sizing in the block above is what makes the pair fit. */ @media (max-width: 767px) { .app-download-buttons { flex-direction: row !important; } } /* ============================================================================ FAQ: THE INSTITUTIONAL APPLICATION DROPDOWN - THE WHITE SPACE GONE --------------------------------------------------------------------------- TWO DECLARATIONS. display, on two selectors. No font, no colour, no background, no border, no radius, no shadow, no width, no height, no margin, no padding, no position, no inset, no gap. No markup is touched and no href, no image and no script is altered. This is the white space in the screenshot, and it is not padding or gap. -------------------------------------------------------------------------- THE CAUSE, MEASURED LIVE The dropdown holds three things: two .faq-inst-group and one .faq-inst-direct. Each group holds a .faq-inst-group-head - "Accredited Learning Centre (ALC)" - and a .faq-inst-submenu holding its two apply links. faq.css:2784 makes the submenu a fly-out: .faq-section .faq-inst-submenu { position: absolute !important; top: -6px !important; left: calc(100% + 8px) !important; display: block !important; opacity: 0 !important; } Absolutely positioned, it is out of the flow, so its height costs the panel nothing and the closed panel is as tight as the topbar's. faq.css:2874 then takes it back into the flow below 991px: @media (max-width: 991px) .faq-section .faq-inst-submenu { position: static !important; margin: 0 0 6px 14px !important; } And it is hidden with opacity, not with display. So each closed submenu is IN the flow, reserving the height of its two invisible links. Measured on the live page: .faq-inst-menu 270.9 x 405.2 group 1 257.3 x 158.8 group-head 257.3 x 61.2 submenu (invisible) 243.3 x 97.6 <- 97.6px of nothing item 228.9 x 41.6 invisible item 228.9 x 42.4 invisible group 2 257.3 x 158.8 submenu (invisible) 243.3 x 97.6 <- another 97.6px faq-inst-direct 257.3 x 62.0 195.2px of the 405.2px panel is two closed submenus. That is the white space, and it is why the three labels sit far apart with nothing between them. The topbar's panel, for comparison, measured on the same page: 280.8 x 270.4 over 9 items, 30.0px each, with its first and last item both 46.4px - every pixel of that height is a link. -------------------------------------------------------------------------- THE FIX .faq-section .faq-inst-submenu display none .faq-section .faq-inst-group:focus-within .faq-inst-submenu display block A closed submenu is taken out of the flow, so it reserves nothing. It is still the same element and the same two links - only its box stops existing while it is closed, which is what display:none is for. When the group is focused it comes back, and 2804's own opacity and visibility rules do the showing, so the fly-out behaviour is unchanged. focus-within is what the page already uses. 2770 rotates the chevron on .faq-inst-group:focus-within and 2804 reveals the submenu on the same state, so the submenu's open and closed states were always keyed to it. The .faq-inst-group-head carries tabindex="0" in the markup, measured, so it takes focus on a tap and the submenu opens on a phone where there is no hover. Nothing new is introduced and no script is needed. -------------------------------------------------------------------------- WHY 991px AND NOT 768px Because 2874 - the rule that puts the submenu back into the flow - is itself inside @media (max-width: 991px). The white space therefore starts at 991px and not at 768px, and this block is written at the boundary where the fault begins rather than where the phone happens to end. Measured at 912px, above a phone and below that boundary, the panel is 405.2px tall - the fault is present there too. Fixing only below 768px would have left a tablet with the same 195px of empty panel. -------------------------------------------------------------------------- WHAT THE PANEL BECOMES The 195.2px of closed submenus goes, leaving the two group heads and the one direct link - three rows of real content and the panel's own 8px padding, which is the topbar's arrangement. The heads still wrap to two lines at a phone width, which is what makes them 61.2px rather than 43.6px; that is the label's own length in a 233px space and not a gap. -------------------------------------------------------------------------- SPECIFICITY 2784 sets display:block !important on .faq-section .faq-inst-submenu, which is (0,2,1). The rule here is the same selector and the same importance, and it is later in the file, so it wins on source order. The :focus-within rule is (0,4,1) and would win on specificity alone. -------------------------------------------------------------------------- NOT TOUCHED The three labels, their wording, the four apply links and their four hrefs, the chevrons, the direct link and its arrow. The topbar styling written in an earlier block - the square corner, the border-less panel, the 0 10px 25px shadow, the 8px 0 padding, Inter at 22.4px, #083C7D. The badge row fixed in the two blocks before this one. The question, the answer text, the other 60 answers, the questions, the header, the footer. faq.php. Every other page and every other stylesheet. ============================================================================ */ /* ---- a closed submenu stops reserving its height, on a phone and a tablet ---- */ /* faq.css:2874 makes the submenu position:static below 991px, so a closed one sits in the flow reserving the height of its two invisible links - 97.6px each, 195.2px of the 405.2px panel, measured live. display:none takes it out of the flow while it is closed; :focus-within, the state the page already uses for the chevron at 2770 and the reveal at 2804, brings it back. Same element, same two links, same fly-out. */ @media (max-width: 991px) { .faq-section .faq-inst-submenu { display: none !important; } .faq-section .faq-inst-group:focus-within .faq-inst-submenu { display: block !important; } }