/*========================== 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; } } *{ margin:0; padding:0px; box-sizing:border-box; } body{ font-family:'Roboto',Arial; background:#ffffff; overflow-x:hidden; } img{ max-width:100%; } a{ text-decoration:none; } /* ========================================================= GOVERNING COUNCIL BANNER ========================================================= */ .academic-council-banner { position: relative; width: 100%; min-height: 430px; display: flex; align-items: stretch; overflow: hidden; background: #083C7C; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } /* Remove decorative dots from Governing Council banner */ .academic-council-banner::before, .academic-council-banner::after { display: none !important; content: none !important; } .academic-council-content::before, .academic-council-content::after { display: none !important; content: none !important; } /* Remove decorative dots from Council Members section */ .council-members::before, .council-members::after, .members-container::before, .members-container::after { display: none !important; content: none !important; } /* ========================================================= LEFT CONTENT ========================================================= */ .academic-council-content { width: 52%; padding: 80px 50px 80px 8%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; } /* ========================================================= BADGE ========================================================= */ .academic-council-badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 9px 18px; border-radius: 30px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; } .academic-council-badge i { font-size: 15px; } /* ========================================================= HEADING ========================================================= */ .academic-council-content h1 { margin: 0; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(42px, 5vw, 68px); font-weight: 700; line-height: 1.08; letter-spacing: -1px; } /* ========================================================= UNDERLINE ========================================================= */ .academic-council-line { width: 55px; height: 3px; margin: 22px 0 18px; background: #ffffff; border-radius: 10px; transition: width 0.35s ease; } .academic-council-banner:hover .academic-council-line { width: 75px; } /* ========================================================= DESCRIPTION ========================================================= */ .academic-council-content p { max-width: 540px; margin: 0; color: rgba(255, 255, 255, 0.90); font-size: 16px; font-weight: 400; line-height: 1.75; } /* ========================================================= RIGHT IMAGE AREA ========================================================= */ .academic-council-image { position: relative; width: 48%; min-height: 430px; overflow: hidden; z-index: 2; } /* ========================================================= IMAGE CONTAINER ========================================================= */ .academic-council-photo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #dce9f7; /* Curved transition between blue content and image */ clip-path: ellipse( 105% 100% at 100% 50% ); } /* ========================================================= IMAGE ========================================================= */ .academic-council-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================= IMAGE HOVER ========================================================= */ .academic-council-banner:hover .academic-council-photo img { transform: scale(1.04); } /* ========================================================= IMAGE LEFT BLUE BORDER ========================================================= */ .academic-council-image::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 100%; background: #083C7C; z-index: 4; opacity: 0.9; } /* ========================================================= DECORATIVE DOTS ========================================================= */ .academic-council-banner::before { content: ""; position: absolute; top: 38px; left: 35px; width: 65px; height: 60px; background-image: radial-gradient( rgba(255, 255, 255, 0.45) 1.6px, transparent 1.6px ); background-size: 12px 12px; opacity: 0.7; z-index: 4; pointer-events: none; } /* ========================================================= CONTENT ANIMATION ========================================================= */ .academic-council-content { animation: councilContentIn 0.8s ease-out both; } @keyframes councilContentIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================= IMAGE ANIMATION ========================================================= */ .academic-council-photo { animation: councilImageIn 1s ease-out both; } @keyframes councilImageIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } } /* ========================================================= LARGE TABLET 1200px ========================================================= */ @media (max-width: 1200px) { .academic-council-content { padding-left: 6%; padding-right: 35px; } .academic-council-content h1 { font-size: 52px; } } /* ========================================================= TABLET 992px ========================================================= */ @media (max-width: 991px) { .academic-council-banner { min-height: 400px; } .academic-council-content { width: 52%; padding: 60px 30px 60px 5%; } .academic-council-image { width: 48%; min-height: 400px; } .academic-council-content h1 { font-size: 44px; } .academic-council-content p { font-size: 14px; line-height: 1.7; } .academic-council-badge { font-size: 12px; padding: 8px 15px; } } /* ========================================================= MOBILE 768px ========================================================= */ @media (max-width: 767px) { .academic-council-banner { display: flex; flex-direction: column; min-height: auto; } /* LEFT CONTENT */ .academic-council-content { width: 100%; min-height: 340px; padding: 55px 25px 45px; } .academic-council-content h1 { font-size: clamp( 34px, 9vw, 46px ); line-height: 1.12; } .academic-council-content p { max-width: 100%; font-size: 14px; line-height: 1.7; } /* BADGE */ .academic-council-badge { margin-bottom: 20px; padding: 8px 14px; font-size: 11px; } /* LINE */ .academic-council-line { width: 45px; margin: 20px 0 16px; } /* RIGHT IMAGE */ .academic-council-image { width: 100%; height: 300px; min-height: 300px; } .academic-council-photo { position: relative; inset: auto; width: 100%; height: 100%; clip-path: none; border-radius: 0; } .academic-council-photo img { object-position: center; } .academic-council-image::before { width: 6px; } /* DOTS */ .academic-council-banner::before { top: 20px; left: 20px; width: 50px; height: 50px; background-size: 10px 10px; } } /* ========================================================= SMALL MOBILE 480px ========================================================= */ @media (max-width: 480px) { .academic-council-content { min-height: 320px; padding: 45px 20px 38px; } .academic-council-badge { padding: 7px 12px; font-size: 10px; } .academic-council-content h1 { font-size: 32px; letter-spacing: -0.5px; } .academic-council-content p { font-size: 13px; line-height: 1.65; } .academic-council-line { width: 42px; height: 3px; margin: 18px 0 15px; } .academic-council-image { height: 250px; min-height: 250px; } } /* ========================================================= VERY SMALL MOBILE 360px ========================================================= */ @media (max-width: 360px) { .academic-council-content { padding: 40px 18px 35px; } .academic-council-content h1 { font-size: 29px; } .academic-council-content p { font-size: 12px; } .academic-council-image { height: 220px; min-height: 220px; } } /* ========================================================= REDUCE MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .academic-council-content, .academic-council-photo, .academic-council-photo img { animation: none !important; transition: none !important; } } /* ===================================== COUNCIL SECTION ===================================== */ .council-section { width: 100%; padding: 70px 24px; background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #3A4F66; } .council-container { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; } /* ===================================== EQUAL OUTER CARDS ===================================== */ .council-card { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #e5edf8; border-radius: 16px; background: #ffffff; box-shadow: 0 12px 35px rgba(58, 79, 102, 0.07); padding: 42px; } /* ===================================== LEFT CARD ===================================== */ .about-card { display: flex; flex-direction: column; justify-content: center; } .section-label { display: block; color: #3159d8; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; } /* .section-line { display: block; width: 35px; height: 3px; margin: 12px 0 18px; background: #3159d8; border-radius: 10px; } */ .about-card h2 { margin: 0 0 18px; color: #0b478d; font-size: 36px; line-height: 1.2; font-weight: 700; } .body-text { margin: 0; color: #526b86; font-size: 16px; line-height: 1.8; } /* ===================================== HIGHLIGHT BOX ===================================== */ .highlight-box { width: 100%; box-sizing: border-box; display: flex; align-items: flex-start; margin-top: 28px; padding: 20px; background: #eef4ff; border-left: 3px solid #3159d8; border-radius: 0 12px 12px 0; } .highlight-icon { width: 38px; height: 38px; flex: 0 0 38px; margin-right: 15px; display: flex; align-items: center; justify-content: center; background: #0d478b; border-radius: 50%; } .highlight-icon svg { width: 20px; height: 20px; fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .highlight-box p { margin: 0; color: #526b86; font-size: 14px; line-height: 1.7; } .highlight-box strong { color: #3A4F66; } /* ===================================== RIGHT CARD ===================================== */ .vision-card { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 25px; } /* ===================================== BUILDING ICON ===================================== */ .building-icon-wrap { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; margin-top: -5px; } .building-icon { position: relative; z-index: 3; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; background: #edf4ff; border-radius: 50%; } .building-icon svg { width: 72px; height: 72px; fill: none; stroke: #0b478d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Decorative circles */ .circle { position: absolute; border: 1px dashed #c8dafa; border-radius: 50%; } .circle-middle { width: 165px; height: 165px; } .circle-outer { width: 195px; height: 195px; } /* ===================================== VISION TITLE ===================================== */ .vision-card h3 { margin: 5px 0 0; color: #0b478d; font-size: 22px; line-height: 1.3; font-weight: 700; text-align: center; } .vision-line { width: 35px; height: 2px; margin: 10px 0 24px; background: #3159d8; border-radius: 10px; } /* ===================================== GOVERNANCE GRID ===================================== */ .governance-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e5edf7; border-left: 1px solid #e5edf7; } .governance-item { min-height: 92px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box; border-right: 1px solid #e5edf7; border-bottom: 1px solid #e5edf7; color: #3A4F66; } .governance-icon { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4ff; color: #0b478d; font-size: 16px; } .governance-item span { font-size: 13px; line-height: 1.45; font-weight: 700; color: #3A4F66; } /* ===================================== TABLET ===================================== */ @media (max-width: 950px) { .council-container { grid-template-columns: 1fr; gap: 35px; } .council-card { padding: 35px; } } /* ===================================== MOBILE ===================================== */ @media (max-width: 600px) { .council-section { padding: 45px 16px; } .council-container { gap: 25px; } .council-card { padding: 25px 20px; border-radius: 12px; } .about-card h2 { font-size: 32px; } .body-text { font-size: 16px; line-height: 1.7; } .highlight-box { padding: 16px; } .highlight-box p { font-size: 13px; } .building-icon-wrap { width: 160px; height: 160px; } .building-icon { width: 110px; height: 110px; } .building-icon svg { width: 60px; height: 60px; } .circle-middle { width: 140px; height: 140px; } .circle-outer { width: 165px; height: 165px; } .vision-card h3 { font-size: 20px; } .governance-item { min-height: 75px; padding: 12px; gap: 9px; } .governance-icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; } .governance-item span { font-size: 12px; } } /* ===================================== MODERN ANIMATIONS ===================================== */ /* Section entrance */ .about-card { animation: slideInLeft 0.8s ease-out both; } .vision-card { animation: slideInRight 0.8s ease-out both; } /* Building icon floating effect */ .building-icon { animation: softFloat 4s ease-in-out infinite; } /* Decorative circles */ .circle-middle { animation: rotateCircle 18s linear infinite; } .circle-outer { animation: rotateCircleReverse 24s linear infinite; } /* Governance title */ .vision-card h3 { animation: fadeUp 0.8s ease-out 0.25s both; } /* Governance items */ .governance-item { transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } /* Hover effect */ .governance-item:hover { transform: translateY(-4px); background: #f7faff; box-shadow: 0 8px 20px rgba(58, 79, 102, 0.08); } /* Icon hover */ .governance-item:hover .governance-icon { transform: scale(1.1) rotate(4deg); background: #0b478d; color: #ffffff; } .governance-icon { transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; } /* Highlight box */ .highlight-box { transition: transform 0.3s ease, box-shadow 0.3s ease; } .highlight-box:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(49, 89, 216, 0.10); } /* Highlight icon */ .highlight-icon { transition: transform 0.3s ease; } .highlight-box:hover .highlight-icon { transform: scale(1.08); } /* ===================================== KEYFRAMES ===================================== */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-35px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes softFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateCircleReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ===================================== ACCESSIBILITY ===================================== */ @media (prefers-reduced-motion: reduce) { .about-card, .vision-card, .building-icon, .circle-middle, .circle-outer, .vision-card h3 { animation: none; } .governance-item, .governance-icon, .highlight-box, .highlight-icon { transition: none; } } /* ===================================== COUNCIL MEMBERS ===================================== */ .council-members { width: 100%; padding: 75px 24px; background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #3A4F66; position: relative; overflow: hidden; } .members-container { width: 100%; max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; } /* ===================================== SECTION HEADER ===================================== */ .members-header { text-align: center; margin-bottom: 35px; } .members-label { display: block; font-size: 13px; font-weight: 700; color: #3159d8; letter-spacing: 0.5px; margin-bottom: 8px; } .members-header h2 { margin: 0; font-size: 36px; line-height: 1.2; color: #0b478d; font-weight: 700; } .members-title-line { width: 35px; height: 2px; margin: 10px auto 24px; background: #3159d8; border-radius: 10px; } .members-title-line span { width: 40px; height: 3px; background: #3159d8; border-radius: 20px; } .members-title-line i { width: 5px; height: 5px; background: #9db8eb; border-radius: 50%; } .members-header p { margin: 0 auto; max-width: 650px; font-size: 16px; line-height: 1.6; color: #526b86; } /* ===================================== TABLE ===================================== */ .members-table { width: 100%; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(58, 79, 102, 0.08); border: 1px solid #edf1f7; } .member-row { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; min-height: 58px; border-bottom: 1px solid #e9eef6; transition: background 0.3s ease, transform 0.3s ease; } .member-row:last-child { border-bottom: none; } /* ===================================== HEADER ROW ===================================== */ .member-header { min-height: 55px; background: #092e73; color: #ffffff; border: none; } .member-header:hover { transform: none; } .member-header .member-column { color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; } /* ===================================== COLUMNS ===================================== */ .member-column { display: flex; align-items: center; padding: 12px 20px; font-size: 14px; color: #526b86; } .name-column { gap: 12px; } .designation-column { justify-content: flex-start; } .email-column { gap: 12px; } /* ===================================== HEADER ICON ===================================== */ .header-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #ffffff; } /* ===================================== PERSON ICON ===================================== */ .person-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4ff; color: #194da0; font-size: 17px; transition: transform 0.3s ease, background 0.3s ease; } .name-column strong { font-size: 14px; color: #173c78; font-weight: 700; } /* ===================================== EMAIL ICON ===================================== */ .mail-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4ff; color: #194da0; font-size: 13px; flex-shrink: 0; } /* ===================================== ROW HOVER ===================================== */ .member-row:not(.member-header):hover { background: #f6f9ff; transform: translateX(4px); } .member-row:not(.member-header):hover .person-icon { transform: scale(1.08); background: #dce9ff; } /* ===================================== FOOTER NOTE ===================================== */ .member-footer { margin-top: 20px; min-height: 85px; padding: 17px 20px; display: flex; align-items: center; gap: 20px; background: #edf4ff; border-radius: 8px; } .footer-note { flex: 1; display: flex; align-items: center; gap: 14px; } .info-icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #0b3f83; color: #ffffff; font-size: 20px; font-weight: 700; } .footer-note p { margin: 0; font-size: 13px; line-height: 1.6; color: #3A4F66; } .footer-note strong { font-weight: 700; } /* ===================================== DIVIDER ===================================== */ .footer-divider { width: 1px; height: 50px; background: #bfd0ed; } /* ===================================== BUTTON ===================================== */ .member-button { border: none; min-height: 48px; padding: 0 20px; display: flex; align-items: center; gap: 12px; border-radius: 6px; background: #092e73; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .member-button:hover { background: #0b4388; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(9, 46, 115, 0.2); } .button-icon { font-size: 18px; } .arrow { font-size: 21px; transition: transform 0.3s ease; } .member-button:hover .arrow { transform: translateX(5px); } /* ===================================== BACKGROUND DECORATION ===================================== */ .council-members::before { content: ""; position: absolute; top: 20px; left: 20px; width: 75px; height: 45px; background-image: radial-gradient(#b8cdf0 1.5px, transparent 1.5px); background-size: 15px 15px; opacity: 0.65; } .council-members::after { content: ""; position: absolute; top: -35px; right: -20px; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #e5edfb; box-shadow: -18px 18px 0 -1px #f5f8ff; } /* ===================================== TABLET ===================================== */ @media (max-width: 850px) { .member-row { grid-template-columns: 1.1fr 0.8fr 1fr; } .member-column { padding: 11px 14px; } .member-footer { flex-direction: column; align-items: stretch; } .footer-divider { width: 100%; height: 1px; } .member-button { justify-content: center; } } /* ===================================== MOBILE ===================================== */ @media (max-width: 600px) { .council-members { padding: 50px 16px; } .members-header h2 { font-size: 32px; } .members-header p { font-size: 16px; } .members-table { overflow-x: auto; } .member-row { min-width: 680px; } .member-column { font-size: 13px; } .name-column strong { font-size: 13px; } .member-footer { padding: 16px; gap: 15px; } .footer-note p { font-size: 13px; } } /* ========================================= COUNCIL MEMBERS BACKGROUND ========================================= */ .council-members { position: relative; overflow: hidden; background: radial-gradient( circle at 50% 45%, #ffffff 0%, #f8faff 45%, #eef4ff 100% ); font-family: Arial, Helvetica, sans-serif; } /* ========================================= TOP LEFT DOT PATTERN ========================================= */ .council-members::before { content: ""; position: absolute; top: 55px; left: 30px; width: 170px; height: 130px; background-image: radial-gradient( circle, #9bbcf5 2px, transparent 2.5px ); background-size: 22px 22px; opacity: 0.7; pointer-events: none; } /* ========================================= TOP RIGHT SOFT CIRCLE ========================================= */ .council-members::after { content: ""; position: absolute; top: -80px; right: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient( circle, rgba(191, 211, 250, 0.45) 0%, rgba(224, 234, 255, 0.28) 45%, transparent 70% ); pointer-events: none; } /* ===================================== CONTACT COUNCIL ===================================== */ .contact-council { width: 100%; padding: 70px 24px; background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #3A4F66; } .contact-container { width: 100%; max-width: 1180px; margin: 0 auto; } /* ===================================== SECTION HEADING SAME STYLE AS COUNCIL MEMBERS ===================================== */ .contact-header { text-align: center; margin-bottom: 35px; } .contact-label { display: block; margin-bottom: 8px; color: #3159d8; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; } .contact-header h2 { margin: 0; color: #0b478d; font-size: 36px; line-height: 1.2; font-weight: 700; } /* Blue line + dots */ .contact-title-line { width: 35px; height: 2px; margin: 10px auto 24px; background: #3159d8; border-radius: 10px; } .contact-title-line span { width: 40px; height: 3px; background: #3159d8; border-radius: 20px; } /* .contact-title-line i { width: 5px; height: 5px; background: #9db8eb; border-radius: 50%; } */ .contact-header p { max-width: 650px; margin: 0 auto; color: #526b86; font-size: 16px; line-height: 1.6; } /* ===================================== CONTACT CARD ===================================== */ .contact-card { width: 100%; min-height: 280px; display: grid; grid-template-columns: 35% 65%; overflow: hidden; background: linear-gradient( 135deg, #f7faff 0%, #edf4ff 100% ); border: 1px solid #dce8fb; border-radius: 16px; box-shadow: 0 10px 30px rgba(58, 79, 102, 0.08); } /* ===================================== LEFT ICON AREA ===================================== */ .contact-icon-area { position: relative; display: flex; align-items: center; justify-content: center; border-right: 1px solid #bfd2f2; } .contact-icon-area::before { content: ""; position: absolute; width: 165px; height: 165px; border: 1px solid #d4e2f8; border-radius: 50%; } .contact-icon-area::after { content: ""; position: absolute; width: 125px; height: 125px; background: #e7efff; border-radius: 50%; } /* ===================================== MAIN EMAIL ICON ===================================== */ .contact-icon-circle { position: relative; z-index: 2; width: 95px; height: 95px; display: flex; align-items: center; justify-content: center; background: #dce8fc; border-radius: 50%; } .contact-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #0b4388; border-radius: 50%; color: #ffffff; font-size: 28px; box-shadow: 0 8px 20px rgba(11, 67, 136, 0.18); transition: transform 0.3s ease; } .contact-icon-area:hover .contact-icon { transform: scale(1.08) rotate(-5deg); } /* ===================================== RIGHT CONTENT ===================================== */ .contact-details { display: flex; flex-direction: column; justify-content: center; padding: 32px 42px; } .contact-details h3 { margin: 0 0 7px; color: #0b4388; font-size: 22px; line-height: 1.3; font-weight: 700; } .contact-subtitle { margin: 0 0 16px; color: #526b86; font-size: 14px; } /* ===================================== CONTACT LIST ===================================== */ .contact-list { max-width: 560px; } .contact-item { min-height: 48px; display: flex; align-items: center; gap: 14px; border-top: 1px solid #dce6f5; color: #3A4F66; font-size: 16px; transition: transform 0.25s ease, color 0.25s ease; } .contact-item:last-child { border-bottom: 1px solid #dce6f5; } .contact-item:hover { transform: translateX(5px); color: #0b4388; } /* Contact small icons */ .contact-item-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e1ebfc; color: #0b4388; font-size: 14px; transition: background 0.25s ease, color 0.25s ease; } .contact-item:hover .contact-item-icon { background: #0b4388; color: #ffffff; } /* ===================================== RESPONSIVE ===================================== */ @media (max-width: 800px) { .contact-card { grid-template-columns: 1fr; } .contact-icon-area { min-height: 190px; border-right: none; border-bottom: 1px solid #bfd2f2; } .contact-details { padding: 30px; } } @media (max-width: 600px) { .contact-council { padding: 50px 16px; } .contact-header h2 { font-size: 32px; } .contact-header p { font-size: 16px; } .contact-card { border-radius: 12px; } .contact-details { padding: 25px 20px; } .contact-details h3 { font-size: 20px; } .contact-item { font-size: 14px; } } /* ========================================= REMOVE IMAGE LEFT STRIP ON TABLET & MOBILE ========================================= */ @media (max-width: 991px) { .academic-council-image::before { display: none !important; content: none !important; width: 0 !important; } .academic-council-image { width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } .academic-council-photo { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; clip-path: none !important; } .academic-council-photo img { width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; } } /* ========================================================= MATCH THE LEGAL STATUS COLUMN WIDTH ------------------------------------------------------------ Legal Status puts its content in one column: .ls-section padding 48px 0 (no side padding) .ls-container width 92%, max-width 1380px, centred This page used three different columns and added its own side padding, so every section sat in a narrower, differently centred band than Legal Status: .council-section padding 70px 24px .council-container max-width 1280px .council-members padding 75px 24px .members-container max-width 1180px .contact-council padding 70px 24px .contact-container max-width 1180px These rules put all three on the Legal Status column, using the same 92 / 94 / 90 / 92 percent ladder and the same 1380px cap. No markup, no content, no other rule is touched. ========================================================= */ .council-section, .council-members, .contact-council { padding-left: 0; padding-right: 0; } .council-container, .members-container, .contact-container { width: 92%; max-width: 1380px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } @media (max-width: 1199px) { .council-container, .members-container, .contact-container { width: 94%; } } @media (max-width: 767px) { .council-container, .members-container, .contact-container { width: 90%; } } @media (max-width: 480px) { .council-container, .members-container, .contact-container { width: 92%; } } /* ========================================================= BANNER TEXT LINES UP WITH THE LOGO ------------------------------------------------------------ The header logo sits on the left edge of the header's own centred column. The banner did not use that column: it padded its text by a percentage of the full-width banner, so the two edges drifted apart and never met. header column banner text padding 92% (>1199px) 4% 8% -> 57px out at 1440 94% (768-1199) 3% 6% -> 26px out at 1000 90% (<=767px) 5% 5% -> 0, correct by luck These rules give the banner the same left inset the header column produces at each breakpoint, so the GOVERNANCE badge, the GOVERNING COUNCIL title, the rule and the paragraph all start exactly on the logo's left edge. Measured after the change (banner text left - logo left): 504px 0.0 859px 0.0 1000px 0.0 1422px 0.0 No markup, no content, no other rule is touched. ========================================================= */ /* Above 1199px the header column is 92% wide until it reaches its 1380px cap, then it stays 1380px and centres. max() picks the right one automatically, so no extra breakpoint is needed: banner width < 1500 4% is larger -> use 4% banner width > 1500 the calc is larger -> use the calc */ .academic-council-content { padding-left: max(4%, calc((100% - 1380px) / 2)) !important; } @media (max-width: 1199px) { .academic-council-content { padding-left: 3% !important; } } @media (max-width: 767px) { .academic-council-content { padding-left: 5% !important; } } /* ========================================================= "GOVERNING WITH VISION" - THE FOUR ICONS AND LABELS LINE UP ------------------------------------------------------------ .governance-item is a flex row with justify-content:center (governingcouncil.css:2370), so each cell centres its own icon-plus-label pair. The four labels are not the same width Institutional / Oversight 73.7px Strategic / Planning 55.7px Regulatory / Compliance 73.7px Transparent / Governance 75.1px so each pair landed at a different offset inside its cell and the icons and labels formed four ragged edges instead of two. Measured at 1564px, the offset of each icon from its own cell's left edge: Institutional Oversight 82.4px Strategic Planning 91.4px Regulatory Compliance 82.4px Transparent Governance 81.7px spread 9.7px and the labels were out by the same 9.7px. Left-aligning the pair puts every icon on the cell's own padding line and every label on a single vertical line: icon 18px from the cell edge (12px below 600px) label 70px from the cell edge (53px below 600px) because every cell is the same 1fr of the same grid, so the four icons now form one column and the four labels another. The label's own text-align is already left and is set with !important by global-typography.css:661, so both lines of every label stay flush; it is repeated here so the rule stands on its own. The icon size, the 38px circle, the 14px gap, the 92px row height, the hover lift and the grid borders are untouched. ========================================================= */ .governance-item { justify-content: flex-start !important; } .governance-item span { text-align: left !important; } /* ========================================================================== GOVERNANCE, GOVERNING COUNCIL: THE CONTACT ROWS DO SOMETHING NOW ------------------------------------------------------------------------- The three rows in the Contact the Council block - the email and the two numbers - were
elements. A div has no action of its own, so they looked live and were not: nothing happened when they were clicked, and a keyboard could not reach them at all. They are now elements carrying the right scheme for what they hold: governance@odlc.ac.in -> mailto:governance@odlc.ac.in +91 9211225458 -> tel:+919211225458 +91 11-49402533 -> tel:+911149402533 The digits in each tel: are the digits already shown on screen with the country code and with the punctuation taken out, which is the form a handset needs. The second one matches the tel: already used elsewhere on this same page, so both land on the same number there and here. -------------------------------------------------------------------------- WHY ONLY TEXT-DECORATION IS ADDED BELOW Nothing else has to change, and that is deliberate. The whole look of a row - the 48px minimum height, the flex alignment, the 14px gap, the top rule between rows, the colour, the 16px type, the round icon and its hover - is already written for .contact-item and applies to an anchor exactly as it applied to a div. The class names are unchanged, so that whole design is carried over untouched. The one thing a div never had and an anchor brings with it is the underline, so that is the one thing withdrawn. Colour is deliberately NOT restated here. .contact-item already sets it to #3A4F66 and .contact-item:hover already moves it to #0b4388, and an author rule beats the browser's default link colour at both states. A rule written here would carry the extra weight of the a element and quietly win over the hover, which is how a hover gets lost. :focus-visible draws the ring only for keyboard users. It is what a newly clickable element needs and what a div could never have had. The blue is the #0b4388 already used by the icon and the hover on this page. -------------------------------------------------------------------------- WHAT IS NOT TOUCHED The visible text of all three rows is byte-for-byte what it was. The icons, the order, the class names, the heading, the envelope circle, the card, the section, and the tel: link at the top of the page are all left exactly where they were. No existing rule is edited or removed. ========================================================================== */ a.contact-item { text-decoration: none; } a.contact-item:focus-visible { outline: 2px solid #0b4388; outline-offset: 3px; } /* ========================================================================== GOVERNING COUNCIL: THE BANNER PHOTOGRAPH TAKES THE CLASS X SHAPE ------------------------------------------------------------------------- THE BANNER PHOTOGRAPH IS CUT TO THE SAME SHAPE AS THE SECONDARY LEVEL CLASS X PAGE, AT EVERY WIDTH. The model is .secondary-banner-image in css/Programmes/Academic/secondarylevel-classx.css - the Secondary Level - Class X (Grade 10) page named as the reference. Its two declarations: .secondary-banner-image { clip-path: ellipse(70% 90% at 72% 50%); } .secondary-banner-image::before { content: ""; position: absolute; top: -10%; left: -32%; width: 58%; height: 120%; z-index: 3; border-radius: 50%; background: #062d5c; } An ellipse anchored at 72% 50% cuts a real curve out of the photograph's left side, so the blue field bulges over it. The oval on ::before is what draws that bulge. Both are copied here, not re-derived. -------------------------------------------------------------------------- ONE COLOUR DELIBERATELY NOT COPIED The reference oval is #062d5c. This banner's own field is #083C7C, and #062d5c is never to be used as a banner background on this site, so the oval below is #083C7C. The two are both navy and the oval sits on a navy field either way, so the shape and the sweep are the same to the eye; what changes is only that this file does not introduce a colour it is not allowed to use. Change this one line if you want the exact reference value. -------------------------------------------------------------------------- WHAT ELSE IS DIFFERENT, AND WHY IT IS LEFT ALONE No PHP is touched on any of these pages. Every one of them already has the wrapper and the inside it, so the shape is a styling question alone: governance.php .gd-banner-photo had no curve Governance/academiccouncil.php .academic-council-photo 105% curve Governance/administrativestructure.php .admin-image-shape 105% curve Governance/governingcouncil.php .academic-council-photo 105% curve The three council pages were not flat - they had the other ellipse, a much gentler left curve. Only the value changes on those. The decorative dot grid, the rings, the 12px strip on .academic-council-image::before, the entrance animations, the padding ladder and every other declaration in these files are all left exactly as they are. The oval is placed on the element that holds the photograph, not on the outer .academic-council-image - that ::before is already in use on those two pages for the 12px strip, and two rules cannot share one pseudo. -------------------------------------------------------------------------- THE BANDS Where this file already forces clip-path: none with !important, that !important still wins and the shape is simply absent below that width, which is the existing behaviour of the page and is not overridden here. Only the oval needs a matching display:none, because nothing else was hiding it and it would otherwise sit over the square photograph on a phone. ========================================================================== */ /* ---------- the clip ---------- */ .academic-council-photo { clip-path: ellipse(70% 90% at 72% 50%); } /* ---------- the navy oval that draws the bulge ---------- */ .academic-council-photo::before { content: ""; position: absolute; top: -10%; left: -62%; width: 58%; height: 120%; z-index: 3; border-radius: 50%; background: #083C7C; } @media screen and (max-width: 991px) { .academic-council-photo::before { display: none; } } /* ---------- why these widths ---------- */ /* This file already carries clip-path: none !important at 991px, which wins over the rule above and is left in charge. Only the oval needed matching. */ /* ========================================================================== COUNCIL MEMBERS: SUITABLE ICON PER ROLE, ONE SIZE, AND A MAIL ACTION ------------------------------------------------------------------------- Three things on the Council Members table, and one button. -------------------------------------------------------------------------- 1. THE ICONS All five members were sharing one glyph - the same pawn in the same pale circle, five times down the table. Five different roles were being drawn with five identical stamps, so the column carried no information at all. Each row now carries the mark that belongs to the job it names: President bi-award Secretary bi-file-earmark-text Director bi-briefcase Director - Operations bi-gear Director bi-briefcase They are Bootstrap Icons, the same set the banner badge, the contact rows and the rest of this site already use, loaded once by includes/header.php. A vector mark scales cleanly and does not depend on the font happening to carry a chess piece or a dingbat, which is the whole reason the old glyph was a poor choice. The .person-icon and .mail-icon class names are kept on all ten, so the 34px and 28px circles, the #edf4ff fill, the #194da0 colour and the 1.08 hover scale all carry over without a line being rewritten. Only the mark inside the circle is new. -------------------------------------------------------------------------- 2. ONE SIZE FOR ALL OF THEM Bootstrap Icons are sized in em, which means an icon with no font-size of its own silently inherits whatever the row around it happens to be. That is how five icons end up five different sizes. The two rules below pin them: 16px in the 34px member circle, 13px in the 28px mail circle - the same figures the glyphs were set at before, so nothing grows or shrinks. line-height: 1 is the other half. Without it the icons sit on the font's line box and read a pixel or two low inside a circle that is centring them, which is the difference between a row of marks that look aligned and a row that looks nearly aligned. -------------------------------------------------------------------------- 3. THE ADDRESSES ARE LIVE The five addresses were plain text. They now sit in an .member-mail anchor carrying a real mailto:, so clicking one opens that member's mail client with the address already in the To field. The text on screen is not changed. It still reads president[at]odlc[dot]ac[dot]in and so on, exactly as before - the brackets are the address, written so that a scraper reading the page does not collect five working addresses, and unwriting it was not what was asked for. Only the destination is real. .member-mail reproduces the 12px gap the email column had between its icon and its address, because the anchor is now the single child of that flex column rather than two children, and colour is taken from the column so the row does not turn into a line of links. -------------------------------------------------------------------------- 4. THE BUTTON LABEL IS WHITE Request Complete Member List sits inside a navy .member-button whose own colour is #ffffff, but the label is wrapped in an , and a link takes its colour from the browser rather than inheriting it. That is why it was rendering blue on navy. .member-button a now states the white outright, and the hover state says so too, so the label does not flip colour as the pointer crosses it. The button still points where it pointed, and its icon, its arrow, its height, its radius and its hover lift are untouched. -------------------------------------------------------------------------- WHAT IS NOT TOUCHED Nothing outside the Council Members table is opened. The names, the designations, the three header glyphs, the note, the divider, the contact block added earlier, the banner, the sections above and below, the breadcrumbs and every other href on the page are all exactly as they were. No rule in this file is edited or removed; the whole of this is appended. ========================================================================== */ /* ---------- one size for every member icon ---------- */ .council-members .person-icon i { font-size: 16px; line-height: 1; } .council-members .mail-icon i { font-size: 13px; line-height: 1; } /* ---------- the addresses open a mail client ---------- */ .council-members .member-mail { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .council-members .member-mail:hover { color: #0b4388; } /* ---------- the button label is white on the navy ---------- */ .member-button a, .member-button a:visited, .member-button a:hover, .member-button a:focus { color: #ffffff; text-decoration: none; } /* ========================================================================== COUNCIL MEMBERS: ONE PERSON MARK, NOT FIVE ROLE MARKS ------------------------------------------------------------------------- The five rows were given a mark each - award for the President, a document for the Secretary, a briefcase for a Director, a gear for Operations. That is withdrawn. The column is a list of people, not a list of departments, and the header above it already says so with a person glyph. A President and a Director are both members of this Council and the icon should say member. All five now carry the same mark, bi-person-fill, so the eye reads the column as one kind of thing and stops being pulled sideways by five different shapes that each appear only once and therefore mean nothing on their own. The solid figure is used rather than the outline one because at 16px inside a 34px circle a solid silhouette stays legible where a hairline one closes up. Nothing below is restated. The two size rules written for the previous marks are exactly as correct for one mark as they were for five - 16px in the 34px circle, 13px in the 28px mail circle, line-height 1 so each sits centred - and because every row now holds the identical icon, one pinned size is all five of them get, which is the point. The five mail marks, the five mailto actions and the white button label from the same piece of work are all unchanged. ========================================================================== */ /* ========================================================================== COUNCIL MEMBERS: THE MARK BESIDE NAME IS THE SAME PERSON MARK ------------------------------------------------------------------------- The header row and the body of the table were describing the same column with two different drawings. The five rows carry a person mark; the heading above them carried a chess pawn glyph. A pawn is not a person, and a column whose heading and whose contents disagree about what the column holds reads as a mistake even when neither is wrong on its own. The heading now carries the identical mark, so the column is labelled with the same thing it contains. -------------------------------------------------------------------------- THE SIZE 16px with line-height 1, the same two declarations the five member marks are set at. The header box is a 25px square and the member box is 34px, so the marks are not the same absolute size as each other and should not be - a heading is smaller than what it heads. What has to match is the weight and the family: one person, drawn one way, twice on the page. line-height 1 for the same reason as on the rows: without it the glyph sits on the font's line box and reads low inside a box that is centring it. The white is inherited, not restated. .header-icon already sets color to #ffffff for white on the navy bar and still does. -------------------------------------------------------------------------- THE OTHER TWO HEADINGS ARE LEFT ALONE DESIGNATION still carries its own glyph and EMAIL still carries its envelope. This is the NAME heading only - the one where the mark and the five rows below it are both meant to say 'a person'. -------------------------------------------------------------------------- WHAT IS NOT TOUCHED No other rule in this file is edited or removed, and no other part of the page is opened. The five names, the five marks in the rows, the 34px circles, the 14px 20px cell padding, the three grid columns, the DESIGNATION and EMAIL columns, the five mail actions, the white button label, the Governing with Vision card and its centring are all exactly as they were. ========================================================================== */ .council-members .header-icon i { font-size: 16px; line-height: 1; } /* ========================================================================== CONTACT THE COUNCIL: A NORMAL PHONE, NOT A DESK TELEPHONE ------------------------------------------------------------------------- The two numbers in the Secretariat block each carried U+260E, which is a drawing of a 1950s desk telephone: a base, a dial, a separate handset resting in a cradle. ODLC publishes two mobile numbers, +91 9211225458 and +91 11-49402533, and a drawing of a desk phone in front of them says something the numbers themselves do not. Both are now bi-phone, the ordinary handset every phone since the nineties has had, taken from the same Bootstrap Icons set the person marks, the mail marks and the header mark on this page already come from and that includes/header.php already loads. -------------------------------------------------------------------------- WHY NOT THE GLYPH, DRAWN BETTER There is no handset glyph in the block the old one came from. The other candidates are a rotary desk phone again or a fax machine, and a font that happens to carry a good one differs between the machines visitors use - which is the reason the mark was unreliable before it was wrong. A vector mark is the same drawing everywhere. -------------------------------------------------------------------------- THE SIZE 15px with line-height 1, inside the 32px circle that was already there. 15 and not the box's own 14 because a vector mark at 14px carries less visual weight than a dingbat at 14px, and 15 over 32 is the same proportion the two icon circles elsewhere on this page already use - 16 over 34 and 13 over 28. line-height 1 for the same reason as those two: without it the mark sits on the font's line box and reads a pixel low in a circle that is centring it. The colour is not restated. .contact-item-icon already sets #0b4388 and its hover already turns the circle navy with the mark white, and the mark inherits both, so the hover still works without being touched. -------------------------------------------------------------------------- WHAT IS NOT TOUCHED The envelope on the email row above stays as it is - that glyph is a plain envelope and it reads correctly. The two numbers, the email address, the 32px circles, the #e1ebfc fill, the hover, the row heights, the two-column arrangement and the whole of every other section are left exactly as they were. No rule in this file is edited or removed; this is appended. ========================================================================== */ .contact-item-icon i { font-size: 15px; line-height: 1; } /* ========================================================================== CONTACT THE COUNCIL: bi-phone WAS A MOBILE, NOT A PHONE YOU CAN CALL ------------------------------------------------------------------------- bi-phone is a drawing of a mobile handset - a rounded rectangle with a screen and a dot at the bottom. In a 32px circle it reads as a plain rounded rectangle, and beside a number it does not say 'this number can be called'. It was also the wrong drawing for the second number, +91 11-49402533, which is a Delhi landline and not a mobile at all. bi-telephone is the handset with the two arcs beside it - the mark that has meant 'call' on every telephone for a century. It is what the reader needs from an icon next to a number, and it is not the desk telephone the U+260E glyph used to be: that had a base, a dial and a cradle. This has none of those. -------------------------------------------------------------------------- WHY NOT A FILLED MARK bi-telephone-fill and bi-phone-fill are both available and both are solid. The envelope above these two numbers is an outline, drawn with thin strokes. A solid mark beside an outline one is the loudest thing on the row, and the row would read as if the numbers mattered more than the address above them, which is not the case. An outline handset sits at the same weight as the outline envelope and the three rows read as one set. -------------------------------------------------------------------------- THE SIZE IS NOT TOUCHED 15px with line-height 1, inside the same 32px circle, is left exactly as it was. bi-telephone and bi-phone are the same optical size at the same font-size, so nothing about the row moves - the same 494.8px icon edge and the same 540.8px text edge that the three rows already share. The colour and the hover are inherited and untouched: #0b4388 in the circle, white on navy when the row is hovered. -------------------------------------------------------------------------- WHAT IS NOT TOUCHED Only the class name on the two marks. The envelope, the email address, both numbers, every tel: and mailto:, the 32px circles, the #e1ebfc fill, the 14px gap, the row heights, and every other section of the page are exactly as they were. No rule in this file is edited or removed. ========================================================================== */