/* ================================================== MUSLIM PATH ACADEMY TEACHER PHOTOS - SOURCE LEVEL ================================================== */ /* * Original avatar from teachers.php. */ .mpa-teachers-page .mpa-teacher-avatar{ position:relative !important; overflow:hidden !important; } /* * Real teacher photo replaces only the visual * content of the original avatar. */ .mpa-teachers-page .mpa-teacher-avatar__photo{ position:absolute !important; inset:0 !important; z-index:5 !important; display:block !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:inherit !important; object-fit:cover !important; object-position:center center !important; opacity:1 !important; visibility:visible !important; } /* * Keep gender badge above the photograph. */ .mpa-teachers-page .mpa-teacher-avatar .mpa-teacher-gender{ position:relative !important; z-index:10 !important; } /* * Kill any old JS-created blocks if stale HTML * exists in browser/cache. */ .mpa-teachers-page .mpa-teacher-photo-slot{ display:none !important; } /* * Avoid accidental duplicate real photos. */ .mpa-teachers-page .mpa-teacher-avatar .mpa-teacher-avatar__photo ~ .mpa-teacher-avatar__photo{ display:none !important; } /* ================================================== MPA_TEACHER_MODERN_CARD_START CLEAN ACADEMIC CARD DESIGN ================================================== */ /* ================================================== CARD ================================================== */ .mpa-teachers-page .mpa-teacher-card{ position:relative !important; display:flex !important; flex-direction:column !important; height:100% !important; padding: 22px !important; background: #ffffff !important; border: 1px solid #dce7f1 !important; border-radius: 22px !important; box-shadow: 0 8px 30px rgba( 8, 40, 76, .055 ) !important; overflow: hidden !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } /* ================================================== SMALL TOP BRAND LINE ================================================== */ /* ================================================== CARD HEAD ================================================== */ .mpa-teachers-page .mpa-teacher-card__head{ display:flex !important; align-items:center !important; gap: 17px !important; padding: 8px 0 19px !important; margin: 0 !important; border-bottom: 1px solid #e4edf5 !important; } /* ================================================== AVATAR ================================================== */ /* Female subtle gold variation */ .mpa-teachers-page .mpa-teacher-avatar--female{ background: #fff8e9 !important; border-color: #f6e4af !important; } /* ================================================== REAL PHOTOS ================================================== */ /* ================================================== DEFAULT AVATAR SVG / ICON ================================================== */ .mpa-teachers-page .mpa-teacher-avatar > svg{ width: 46px !important; height: 46px !important; opacity: .74 !important; } .mpa-teachers-page .mpa-teacher-avatar--male > svg{ color: #5081ad !important; } .mpa-teachers-page .mpa-teacher-avatar--female > svg{ color: #bc8a20 !important; } /* ================================================== GENDER ICON INSIDE PHOTO ================================================== */ .mpa-teachers-page .mpa-teacher-gender{ position:absolute !important; inset-inline-end: 7px !important; bottom: 7px !important; z-index: 12 !important; display:flex !important; align-items:center !important; justify-content:center !important; width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: rgba( 255, 255, 255, .94 ) !important; border: 1px solid rgba( 8, 40, 76, .09 ) !important; border-radius: 50% !important; box-shadow: 0 3px 10px rgba( 8, 40, 76, .10 ) !important; } /* ================================================== IDENTITY ================================================== */ .mpa-teachers-page .mpa-teacher-card__identity{ flex: 1 1 auto !important; min-width: 0 !important; } .mpa-teachers-page .mpa-teacher-card__number{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width: 31px !important; min-height: 23px !important; padding: 3px 8px !important; margin: 0 0 3px !important; background: #f2f7fb !important; color: #65829e !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; } .mpa-teachers-page .mpa-teacher-card__gender-label{ display:inline-flex !important; align-items:center !important; min-height: 24px !important; padding: 3px 9px !important; margin: 0 !important; background: rgba( 1, 71, 141, .07 ) !important; color: #3f709d !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 750 !important; } /* ================================================== QUICK FACTS ================================================== */ .mpa-teachers-page .mpa-teacher-card__quick span, .mpa-teachers-page .mpa-teacher-card__quick div{ border-radius: 8px !important; } /* ================================================== CONTENT SECTIONS ================================================== */ .mpa-teachers-page .mpa-teacher-card__section h3, .mpa-teachers-page .mpa-teacher-card__section h4{ margin: 0 0 8px !important; color: #315f88 !important; -webkit-text-fill-color: #315f88 !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1.5 !important; letter-spacing: .01em !important; } .mpa-teachers-page .mpa-teacher-card__section p{ margin: 0 0 8px !important; color: #3f5e78 !important; -webkit-text-fill-color: #3f5e78 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.8 !important; } .mpa-teachers-page .mpa-teacher-card__section p:last-child{ margin-bottom: 0 !important; } .mpa-teachers-page .mpa-teacher-card__section ul, .mpa-teachers-page .mpa-teacher-card__section ol{ margin: 7px 0 0 !important; padding-inline-start: 19px !important; } .mpa-teachers-page .mpa-teacher-card__section li{ margin: 5px 0 !important; color: #3f5e78 !important; -webkit-text-fill-color: #3f5e78 !important; font-size: 13px !important; line-height: 1.8 !important; } /* ================================================== LINKS ================================================== */ .mpa-teachers-page .mpa-teacher-card a{ color: #01478d !important; -webkit-text-fill-color: #01478d !important; text-decoration: none !important; text-underline-offset: 3px !important; } .mpa-teachers-page .mpa-teacher-card a:hover{ color: #08284c !important; -webkit-text-fill-color: #08284c !important; text-decoration: underline !important; } /* ================================================== BOTTOM ACCENT ================================================== */ .mpa-teachers-page .mpa-teacher-card__accent{ position:absolute !important; bottom:0 !important; inset-inline-start: 22px !important; inset-inline-end: 22px !important; height: 3px !important; background: linear-gradient( 90deg, #01478d 0%, #01478d 78%, #fdb002 78%, #fdb002 100% ) !important; border-radius: 4px 4px 0 0 !important; opacity: .88 !important; } /* ================================================== CLEAN TYPOGRAPHY ================================================== */ .mpa-teachers-page .mpa-teacher-card strong{ color: #183e62 !important; -webkit-text-fill-color: #183e62 !important; font-weight: 750 !important; } /* ================================================== RTL ================================================== */ /* ================================================== LTR ================================================== */ /* ================================================== TABLET ================================================== */ @media (max-width:900px){ .mpa-teachers-page .mpa-teacher-card{ padding: 20px !important; border-radius: 19px !important; } .mpa-teachers-page .mpa-teacher-avatar{ flex-basis: 84px !important; width: 84px !important; height: 84px !important; min-width: 84px !important; min-height: 84px !important; border-radius: 18px !important; } .mpa-teachers-page .mpa-teacher-avatar__photo{ border-radius: 17px !important; } } /* ================================================== MOBILE ================================================== */ @media (max-width:620px){ .mpa-teachers-page .mpa-teacher-card{ padding: 17px !important; border-radius: 17px !important; box-shadow: 0 6px 20px rgba( 8, 40, 76, .05 ) !important; } .mpa-teachers-page .mpa-teacher-card__head{ gap: 13px !important; padding-bottom: 15px !important; } .mpa-teachers-page .mpa-teacher-avatar{ flex-basis: 76px !important; width: 76px !important; height: 76px !important; min-width: 76px !important; min-height: 76px !important; border-radius: 16px !important; } .mpa-teachers-page .mpa-teacher-avatar__photo{ border-radius: 15px !important; } .mpa-teachers-page .mpa-teacher-card__quick{ padding: 12px 0 !important; } .mpa-teachers-page .mpa-teacher-card__section{ margin-top: 9px !important; padding: 12px 13px !important; border-radius: 12px !important; } .mpa-teachers-page .mpa-teacher-card__section p, .mpa-teachers-page .mpa-teacher-card__section li{ font-size: 12.5px !important; line-height: 1.75 !important; } } /* ================================================== MPA_TEACHER_MODERN_CARD_END ================================================== */ /* MPA_REAL_PHOTO_CLEAN_START */ /* * If a real photograph exists: * show ONLY the photo inside the avatar. */ .mpa-teachers-page .mpa-teacher-avatar:has(> .mpa-teacher-avatar__photo) > :not(.mpa-teacher-avatar__photo){ display:none !important; visibility:hidden !important; opacity:0 !important; } /* * Remove any old decorative circles/pseudo elements * from real-photo avatars only. */ .mpa-teachers-page .mpa-teacher-avatar:has(> .mpa-teacher-avatar__photo)::before, .mpa-teachers-page .mpa-teacher-avatar:has(> .mpa-teacher-avatar__photo)::after{ content:none !important; display:none !important; } /* * Photo must stay above everything. */ .mpa-teachers-page .mpa-teacher-avatar:has(> .mpa-teacher-avatar__photo) .mpa-teacher-avatar__photo{ display:block !important; position:absolute !important; inset:0 !important; z-index:50 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; opacity:1 !important; visibility:visible !important; } /* MPA_REAL_PHOTO_CLEAN_END */ /* ================================================== MPA_MODERN_TEACHER_PLACEHOLDER_START ================================================== */ /* ================================================== FOLLOW SITE LIGHT / DARK COLOR SCHEME ================================================== */ .mpa-teachers-page{ color-scheme:inherit; } /* ================================================== CARDS - LIGHT + DARK ================================================== */ .mpa-teachers-page .mpa-teacher-card{ background:#ffffff !important; background: light-dark( #ffffff, #0d1b2b ) !important; border-color:#dce7f1 !important; border-color: light-dark( #dce7f1, #20364d ) !important; color:#304f6b !important; color: light-dark( #304f6b, #b9cada ) !important; box-shadow: light-dark( 0 8px 30px rgba(8,40,76,.055), 0 10px 34px rgba(0,0,0,.22) ) !important; } .mpa-teachers-page .mpa-teacher-card:hover{ border-color: light-dark( #a9c8e3, #315675 ) !important; box-shadow: light-dark( 0 16px 38px rgba(8,40,76,.09), 0 18px 42px rgba(0,0,0,.30) ) !important; } /* ================================================== CARD DIVIDERS ================================================== */ .mpa-teachers-page .mpa-teacher-card__head, .mpa-teachers-page .mpa-teacher-card__quick{ border-color: light-dark( #e4edf5, #22384d ) !important; } /* ================================================== TEACHER NAME ================================================== */ .mpa-teachers-page .mpa-teacher-card__identity h2{ color:#08284c !important; color: light-dark( #08284c, #f3f7fb ) !important; -webkit-text-fill-color: currentColor !important; } /* ================================================== LABELS ================================================== */ .mpa-teachers-page .mpa-teacher-card__number{ background: light-dark( #f2f7fb, #14283c ) !important; color: light-dark( #65829e, #8fb0cb ) !important; } .mpa-teachers-page .mpa-teacher-card__gender-label{ background: light-dark( rgba(1,71,141,.07), rgba(71,148,213,.11) ) !important; color: light-dark( #3f709d, #91bfe5 ) !important; } /* ================================================== INFORMATION SECTIONS ================================================== */ .mpa-teachers-page .mpa-teacher-card__section{ background: light-dark( #f8fbfe, #112338 ) !important; border-color: light-dark( #e5edf5, #213b54 ) !important; } .mpa-teachers-page .mpa-teacher-card__section h3, .mpa-teachers-page .mpa-teacher-card__section h4{ color: light-dark( #315f88, #91b9da ) !important; -webkit-text-fill-color: currentColor !important; } .mpa-teachers-page .mpa-teacher-card__section p, .mpa-teachers-page .mpa-teacher-card__section li{ color: light-dark( #3f5e78, #b8c8d7 ) !important; -webkit-text-fill-color: currentColor !important; } .mpa-teachers-page .mpa-teacher-card strong{ color: light-dark( #183e62, #e0e9f2 ) !important; -webkit-text-fill-color: currentColor !important; } .mpa-teachers-page .mpa-teacher-card a{ color: light-dark( #01478d, #67b3f4 ) !important; -webkit-text-fill-color: currentColor !important; } /* ================================================== NO-PHOTO AVATAR MODERN MINIMAL PROFILE TILE ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ){ position:relative !important; isolation:isolate !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#eef6fc !important; background: light-dark( linear-gradient( 145deg, #f4f9fd 0%, #e8f2fa 100% ), linear-gradient( 145deg, #142a40 0%, #0e2032 100% ) ) !important; border: 1px solid light-dark( #d4e4f1, #294965 ) !important; border-radius: 24px !important; box-shadow: light-dark( inset 0 1px 0 rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.035) ) !important; } /* ================================================== REMOVE THE OLD WHITE DOT ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ) .mpa-teacher-gender{ display:none !important; visibility:hidden !important; opacity:0 !important; } /* ================================================== REMOVE OLD DECORATIVE DOTS ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) )::before, .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) )::after{ content:none !important; display:none !important; } /* ================================================== MODERN DEFAULT ICON ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ) > svg{ position:relative !important; inset:auto !important; z-index:3 !important; display:block !important; width:46px !important; height:46px !important; margin:0 !important; opacity:1 !important; color: light-dark( #3979ad, #80b9e7 ) !important; stroke: currentColor !important; filter:none !important; } /* ================================================== FEMALE PLACEHOLDER ================================================== */ .mpa-teachers-page .mpa-teacher-avatar--female:not( :has( > .mpa-teacher-avatar__photo ) ){ background: light-dark( linear-gradient( 145deg, #fffaf0 0%, #fff3d8 100% ), linear-gradient( 145deg, #302817 0%, #211d14 100% ) ) !important; border-color: light-dark( #f0ddb1, #5b4a25 ) !important; } .mpa-teachers-page .mpa-teacher-avatar--female:not( :has( > .mpa-teacher-avatar__photo ) ) > svg{ color: light-dark( #b98318, #f3c251 ) !important; } /* ================================================== REAL PHOTO AVATAR ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:has( > .mpa-teacher-avatar__photo ){ border-color: light-dark( #d9e5ef, #30465a ) !important; background: light-dark( #eef4f8, #101e2c ) !important; } /* ================================================== REAL PHOTO - NO DOT / NO ICON ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:has( > .mpa-teacher-avatar__photo ) > :not( .mpa-teacher-avatar__photo ){ display:none !important; } /* ================================================== PHOTO ================================================== */ .mpa-teachers-page .mpa-teacher-avatar .mpa-teacher-avatar__photo{ display:block !important; position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; border-radius: 23px !important; } /* ================================================== MOBILE ================================================== */ @media (max-width:620px){ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ){ border-radius: 19px !important; } .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ) > svg{ width: 39px !important; height: 39px !important; } .mpa-teachers-page .mpa-teacher-avatar .mpa-teacher-avatar__photo{ border-radius: 18px !important; } } /* ================================================== MPA_MODERN_TEACHER_PLACEHOLDER_END ================================================== */ /* ================================================== MPA_LINKEDIN_CARDS_START ================================================== */ /* -------------------------------------------------- CARD -------------------------------------------------- */ .mpa-teachers-page .mpa-teacher-card{ position:relative !important; display:flex !important; flex-direction:column !important; padding: 0 22px 22px !important; background: light-dark( #ffffff, #111b25 ) !important; border: 1px solid light-dark( #d9dee3, #2a3947 ) !important; border-radius: 12px !important; box-shadow: 0 1px 2px light-dark( rgba(0,0,0,.07), rgba(0,0,0,.30) ) !important; overflow: hidden !important; transform: none !important; transition: box-shadow .2s ease, border-color .2s ease !important; } .mpa-teachers-page .mpa-teacher-card:hover{ transform: none !important; border-color: light-dark( #c7ced5, #3a5064 ) !important; box-shadow: 0 4px 14px light-dark( rgba(0,0,0,.10), rgba(0,0,0,.34) ) !important; } /* -------------------------------------------------- LINKEDIN-LIKE COVER -------------------------------------------------- */ .mpa-teachers-page .mpa-teacher-card::before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height: 92px !important; background: linear-gradient( 135deg, #08284c 0%, #01478d 60%, #6b9dc6 100% ) !important; border-radius: 0 !important; z-index: 0 !important; } /* Remove old lower accent */ /* -------------------------------------------------- HEADER -------------------------------------------------- */ /* -------------------------------------------------- PROFILE PHOTO -------------------------------------------------- */ /* Real photo */ .mpa-teachers-page .mpa-teacher-avatar__photo{ position:absolute !important; inset:0 !important; z-index: 5 !important; display:block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; object-fit: cover !important; object-position: center center !important; } /* -------------------------------------------------- PLACEHOLDER WITHOUT PHOTO -------------------------------------------------- */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( .mpa-teacher-avatar__photo ) ){ background: light-dark( linear-gradient( 145deg, #edf2f6, #dfe7ed ), linear-gradient( 145deg, #243747, #1a2a38 ) ) !important; } /* Default profile icon */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( .mpa-teacher-avatar__photo ) ) svg{ width: 44px !important; height: 44px !important; color: light-dark( #5f7f99, #90adc3 ) !important; stroke: currentColor !important; opacity: .95 !important; } /* -------------------------------------------------- REMOVE OLD DOT / GENDER BADGE COMPLETELY -------------------------------------------------- */ /* Remove avatar pseudo-elements */ /* -------------------------------------------------- IDENTITY -------------------------------------------------- */ /* Number */ .mpa-teachers-page .mpa-teacher-card__number{ display:inline-block !important; margin: 0 0 5px !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; background: transparent !important; color: light-dark( #778592, #8096a8 ) !important; font-size: 10px !important; font-weight: 700 !important; } /* Name */ /* Teacher label */ /* -------------------------------------------------- QUICK FACTS -------------------------------------------------- */ /* -------------------------------------------------- CONTENT SECTIONS LinkedIn-like flat layout -------------------------------------------------- */ /* Last section */ /* Section headings */ /* Body copy */ /* Lists */ /* -------------------------------------------------- LINKS - LinkedIn blue spirit -------------------------------------------------- */ /* -------------------------------------------------- RTL -------------------------------------------------- */ html[dir="rtl"] .mpa-teachers-page .mpa-teacher-card, html[dir="rtl"] .mpa-teachers-page .mpa-teacher-card__head{ text-align: right !important; } /* -------------------------------------------------- LTR -------------------------------------------------- */ html[dir="ltr"] .mpa-teachers-page .mpa-teacher-card, html[dir="ltr"] .mpa-teachers-page .mpa-teacher-card__head{ text-align: left !important; } /* -------------------------------------------------- MOBILE -------------------------------------------------- */ @media (max-width:620px){ .mpa-teachers-page .mpa-teacher-card{ padding: 0 17px 18px !important; border-radius: 10px !important; } .mpa-teachers-page .mpa-teacher-card::before{ height: 78px !important; } .mpa-teachers-page .mpa-teacher-card__head{ padding-top: 35px !important; } .mpa-teachers-page .mpa-teacher-avatar{ width: 82px !important; height: 82px !important; min-width: 82px !important; min-height: 82px !important; } .mpa-teachers-page .mpa-teacher-card__identity h2{ font-size: 1.25rem !important; } } /* ================================================== MPA_LINKEDIN_CARDS_END ================================================== */ /* ================================================== MPA_TEACHERS_CENTER_HOME_COVER_START ================================================== */ /* * IMPORTANT: * If your homepage cover image path is different, * replace the URL below only. */ :root{ --mpa-teacher-cover-image: url("PUT-THE-HOMEPAGE-HERO-COVER-URL-HERE"); } /* ------------------------------------------ CARD ------------------------------------------ */ /* ------------------------------------------ HEADER LAYOUT ------------------------------------------ */ /* ------------------------------------------ COVER IMAGE ABOVE CARD ------------------------------------------ */ /* ------------------------------------------ AVATAR CENTER ------------------------------------------ */ .mpa-teachers-page .mpa-teacher-avatar{ position:absolute !important; top:78px !important; left:50% !important; transform:translateX(-50%) !important; margin:0 !important; width:116px !important; height:116px !important; min-width:116px !important; min-height:116px !important; border:5px solid #ffffff !important; border-radius:50% !important; overflow:hidden !important; background:light-dark(#eef2f6,#203141) !important; box-shadow:0 8px 20px rgba(0,0,0,.12) !important; z-index:3 !important; } .mpa-teachers-page .mpa-teacher-avatar__photo{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; border-radius:50% !important; display:block !important; } /* Empty avatar */ .mpa-teachers-page .mpa-teacher-avatar:not(:has(.mpa-teacher-avatar__photo)){ display:flex !important; align-items:center !important; justify-content:center !important; background: light-dark( linear-gradient(145deg,#edf2f7,#dde6ee), linear-gradient(145deg,#233444,#1a2936) ) !important; } .mpa-teachers-page .mpa-teacher-avatar:not(:has(.mpa-teacher-avatar__photo)) svg{ width:52px !important; height:52px !important; color:light-dark(#6f8598,#9ab0c1) !important; stroke:currentColor !important; } /* ------------------------------------------ REMOVE OLD DOTS / GENDER ICON BUBBLES ------------------------------------------ */ .mpa-teachers-page .mpa-teacher-gender, .mpa-teachers-page .mpa-teacher-avatar::before, .mpa-teachers-page .mpa-teacher-avatar::after{ display:none !important; content:none !important; } /* ------------------------------------------ IDENTITY CENTER ------------------------------------------ */ .mpa-teachers-page .mpa-teacher-card__identity{ width:100% !important; text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding-top:8px !important; } .mpa-teachers-page .mpa-teacher-card__number{ display:block !important; margin:0 0 8px !important; color:light-dark(#7b8794,#8ea2b2) !important; background:transparent !important; font-size:12px !important; font-weight:700 !important; line-height:1 !important; } /* ------------------------------------------ QUICK FACTS CENTER ------------------------------------------ */ /* ------------------------------------------ CONTENT SECTIONS ------------------------------------------ */ .mpa-teachers-page .mpa-teacher-card__section h3, .mpa-teachers-page .mpa-teacher-card__section h4{ margin:0 0 12px !important; color:light-dark(#122033,#f0f4f8) !important; -webkit-text-fill-color:currentColor !important; font-size:1.02rem !important; font-weight:800 !important; line-height:1.4 !important; text-align:center !important; text-transform:none !important; } /* ------------------------------------------ LINKS ------------------------------------------ */ .mpa-teachers-page .mpa-teacher-card a{ color:light-dark(#0a66c2,#79b8ff) !important; -webkit-text-fill-color:currentColor !important; text-decoration:none !important; font-weight:700 !important; } .mpa-teachers-page .mpa-teacher-card a:hover{ text-decoration:underline !important; } /* ------------------------------------------ MOBILE ------------------------------------------ */ @media (max-width:640px){ .mpa-teachers-page .mpa-teacher-card::before{ height:130px !important; } .mpa-teachers-page .mpa-teacher-card__head{ padding:122px 16px 20px !important; } .mpa-teachers-page .mpa-teacher-avatar{ top:68px !important; width:98px !important; height:98px !important; min-width:98px !important; min-height:98px !important; } .mpa-teachers-page .mpa-teacher-card__identity h2{ font-size:1.65rem !important; } .mpa-teachers-page .mpa-teacher-card__section h3, .mpa-teachers-page .mpa-teacher-card__section h4{ font-size:.96rem !important; } .mpa-teachers-page .mpa-teacher-card__section p, .mpa-teachers-page .mpa-teacher-card__section li{ font-size:.90rem !important; } } /* ================================================== MPA_TEACHERS_CENTER_HOME_COVER_END ================================================== */ /* ================================================== MPA_TEACHERS_FINAL_LINKEDIN_START ================================================== */ /* ================================================== ORDER Omar first visually ================================================== */ .mpa-teachers-page .mpa-teacher-card{ order:0 !important; } .mpa-teachers-page .mpa-teacher-card--omar{ order:-100 !important; } /* ================================================== CARD ================================================== */ .mpa-teachers-page .mpa-teacher-card{ position:relative !important; overflow:hidden !important; padding: 0 30px 28px !important; background: light-dark( #ffffff, #101b27 ) !important; border: 1px solid light-dark( #d9e2ea, #293c4e ) !important; border-radius: 22px !important; box-shadow: light-dark( 0 8px 28px rgba(8,40,76,.075), 0 12px 34px rgba(0,0,0,.28) ) !important; transform:none !important; } /* ================================================== REAL MUSLIM PATH HOMEPAGE COVER ================================================== */ .mpa-teachers-page .mpa-teacher-card::before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height: 165px !important; background-image: linear-gradient( rgba(8,40,76,.08), rgba(8,40,76,.08) ), url("https://muslimpathacademy.com/wp-content/uploads/2026/09/muslimpathacademy-cover.webp") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; z-index: 0 !important; } /* ================================================== HEADER ================================================== */ .mpa-teachers-page .mpa-teacher-card__head{ position:relative !important; z-index:2 !important; display:flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 84px 0 24px !important; text-align: center !important; border-bottom: 1px solid light-dark( #e3e8ed, #2b3d4d ) !important; } /* ================================================== LARGE PROFILE PHOTO ================================================== */ .mpa-teachers-page .mpa-teacher-avatar{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; transform: none !important; display:flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 200px !important; height: 200px !important; min-width: 200px !important; min-height: 200px !important; max-width: 200px !important; max-height: 200px !important; margin: 0 auto 20px !important; padding: 0 !important; background: light-dark( #edf3f8, #203243 ) !important; border: 6px solid light-dark( #ffffff, #101b27 ) !important; border-radius: 50% !important; overflow: hidden !important; box-shadow: 0 11px 30px rgba( 8, 40, 76, .18 ) !important; } /* ================================================== REAL PHOTO ================================================== */ .mpa-teachers-page .mpa-teacher-avatar .mpa-teacher-avatar__photo{ position:absolute !important; inset: 0 !important; z-index: 10 !important; display:block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; object-fit: cover !important; object-position: center center !important; visibility: visible !important; opacity: 1 !important; } /* ================================================== NO PHOTO PLACEHOLDER SAME CENTER POSITION ================================================== */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ){ display:flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; background: light-dark( linear-gradient( 145deg, #f1f5f8, #dee8ef ), linear-gradient( 145deg, #263949, #192936 ) ) !important; } /* Placeholder icon */ .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ) > svg{ position:static !important; display:block !important; width: 86px !important; height: 86px !important; max-width: 86px !important; max-height: 86px !important; margin: 0 auto !important; transform: none !important; color: light-dark( #708aa1, #a1b4c4 ) !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; } /* ================================================== REMOVE ALL OLD DOTS / BADGES FROM AVATAR ================================================== */ .mpa-teachers-page .mpa-teacher-gender{ display:none !important; visibility: hidden !important; opacity: 0 !important; } .mpa-teachers-page .mpa-teacher-avatar::before, .mpa-teachers-page .mpa-teacher-avatar::after{ content:none !important; display:none !important; } /* ================================================== IDENTITY ================================================== */ .mpa-teachers-page .mpa-teacher-card__identity{ display:flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } /* * We don't need LinkedIn-style card numbers. * Hiding them also avoids Omar appearing as "02" * after being moved to the first position. */ .mpa-teachers-page .mpa-teacher-card__number{ display:none !important; } /* Name */ .mpa-teachers-page .mpa-teacher-card__identity h2{ display:block !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; color: light-dark( #08284c, #f4f7fa ) !important; -webkit-text-fill-color: currentColor !important; font-size: clamp( 2rem, 2.5vw, 2.55rem ) !important; font-weight: 850 !important; line-height: 1.18 !important; letter-spacing: -.02em !important; text-align: center !important; } /* Teacher / Female teacher label */ .mpa-teachers-page .mpa-teacher-card__gender-label{ display:inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 auto !important; padding: 7px 16px !important; background: light-dark( #f7fafc, #182936 ) !important; border: 1px solid light-dark( #cbd8e3, #405468 ) !important; border-radius: 999px !important; color: light-dark( #405f7a, #b6c6d2 ) !important; font-size: .9rem !important; font-weight: 700 !important; text-align: center !important; } /* ================================================== QUICK INFORMATION ================================================== */ .mpa-teachers-page .mpa-teacher-card__quick{ display:flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 19px 0 !important; text-align: center !important; border-bottom: 1px solid light-dark( #e3e8ed, #2b3d4d ) !important; } .mpa-teachers-page .mpa-teacher-card__quick > *{ display:inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 8px 12px !important; background: light-dark( #f3f7fa, #1a2b39 ) !important; border: 0 !important; border-radius: 9px !important; color: light-dark( #3e5b75, #bac9d5 ) !important; font-size: .88rem !important; font-weight: 700 !important; text-align: center !important; } /* ================================================== CONTENT SECTIONS ================================================== */ .mpa-teachers-page .mpa-teacher-card__section{ width: 100% !important; margin: 0 !important; padding: 22px 8px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid light-dark( #e3e8ed, #2b3d4d ) !important; border-radius: 0 !important; text-align: center !important; } .mpa-teachers-page .mpa-teacher-card__section:last-of-type{ border-bottom: 0 !important; } /* Section titles */ .mpa-teachers-page .mpa-teacher-card__section h3, .mpa-teachers-page .mpa-teacher-card__section h4{ margin: 0 0 12px !important; color: light-dark( #08284c, #edf3f8 ) !important; -webkit-text-fill-color: currentColor !important; font-size: 1.08rem !important; font-weight: 850 !important; line-height: 1.4 !important; text-align: center !important; } /* Main copy */ .mpa-teachers-page .mpa-teacher-card__section p, .mpa-teachers-page .mpa-teacher-card__section li{ color: light-dark( #3e5870, #bdcbd6 ) !important; -webkit-text-fill-color: currentColor !important; font-size: .99rem !important; font-weight: 500 !important; line-height: 1.9 !important; text-align: center !important; } /* Lists */ .mpa-teachers-page .mpa-teacher-card__section ul, .mpa-teachers-page .mpa-teacher-card__section ol{ margin: 8px auto 0 !important; padding: 0 !important; list-style-position: inside !important; text-align: center !important; } .mpa-teachers-page .mpa-teacher-card__section li::marker{ color: #fdb002 !important; } /* Links */ .mpa-teachers-page .mpa-teacher-card a{ color: light-dark( #01478d, #75b9f5 ) !important; -webkit-text-fill-color: currentColor !important; font-weight: 650 !important; } /* Remove old bottom line */ .mpa-teachers-page .mpa-teacher-card__accent{ display:none !important; } /* ================================================== DARK MODE FALLBACK SELECTORS ================================================== */ html[data-theme="dark"] .mpa-teachers-page .mpa-teacher-card, body[data-theme="dark"] .mpa-teachers-page .mpa-teacher-card, html.dark .mpa-teachers-page .mpa-teacher-card, body.dark .mpa-teachers-page .mpa-teacher-card, html.mpa-dark .mpa-teachers-page .mpa-teacher-card, body.mpa-dark .mpa-teachers-page .mpa-teacher-card{ background: #101b27 !important; border-color: #293c4e !important; color: #bdcbd6 !important; } /* ================================================== MOBILE ================================================== */ @media ( max-width: 620px ){ .mpa-teachers-page .mpa-teacher-card{ padding: 0 18px 22px !important; border-radius: 18px !important; } .mpa-teachers-page .mpa-teacher-card::before{ height: 135px !important; } .mpa-teachers-page .mpa-teacher-card__head{ padding-top: 70px !important; } .mpa-teachers-page .mpa-teacher-avatar{ width: 160px !important; height: 160px !important; min-width: 160px !important; min-height: 160px !important; max-width: 160px !important; max-height: 160px !important; border-width: 5px !important; } .mpa-teachers-page .mpa-teacher-avatar:not( :has( > .mpa-teacher-avatar__photo ) ) > svg{ width: 70px !important; height: 70px !important; } .mpa-teachers-page .mpa-teacher-card__identity h2{ font-size: 1.7rem !important; } .mpa-teachers-page .mpa-teacher-card__section h3, .mpa-teachers-page .mpa-teacher-card__section h4{ font-size: 1rem !important; } .mpa-teachers-page .mpa-teacher-card__section p, .mpa-teachers-page .mpa-teacher-card__section li{ font-size: .92rem !important; } } /* ================================================== MPA_TEACHERS_FINAL_LINKEDIN_END ================================================== */ /* MPA_TEACHERS_ORDER_NEUTRAL_START */ /* * DOM order is handled by teacher-order.js. * Neutralise older order declarations. */ .mpa-teachers-page .mpa-teacher-card, .mpa-teachers-page .mpa-teacher-card--omar{ order:0 !important; } /* MPA_TEACHERS_ORDER_NEUTRAL_END */