/* ========================================================================== LPEN — Instructor finder -------------------------------------------------------------------------- Source file: unscoped and readable. build_instructors.py prefixes every selector with #lpen-fac at deploy time (CLAUDE.md §18b.3), because the Elementor kit emits `.elementor-kit-8 h3 {…}` at specificity (0,1,1) and would otherwise outbid every bare class here. Three selector families are deliberately NOT scoped, and the builder's _SKIP list names each one: :root the design tokens, so they survive the hoist below #lpen-fac-scrim the modal. On init the script moves it to , because Elementor wraps widgets in containers that may carry a transform, and a transformed ancestor silently turns `position: fixed` into `absolute`. Its own id gives it specificity (1,0,0) anyway. .lpen-i the Tabler mask glyphs, needed on both sides of that hoist. .lpen-fac-locked the scroll lock, which lands on /. ========================================================================== */ :root { --fac-navy-900: #012032; --fac-navy-800: #022E48; --fac-navy-700: #0B4465; --fac-navy-100: #C9DDE8; --fac-navy-50: #E5EEF3; --fac-action: #0F5C96; --fac-surface: #F6F8FA; --fac-border: #CFD6DD; --fac-text: #111820; --fac-secondary:#4A5666; --fac-subtle: #6B7684; --fac-gold: #B07A11; --fac-gold-bd: #EAD9AE; --fac-gold-bg: #FDF6E6; --fac-gold-ink: #6B4A05; --fac-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #lpen-fac { font-family: var(--fac-font); color: var(--fac-text); } #lpen-fac *, #lpen-fac *::before, #lpen-fac *::after { box-sizing: border-box; } /* ---------------------------------------------------------------- icons Tabler glyphs arrive as CSS mask data URIs, not inline on init, so it is id-scoped here rather than nested under #lpen-fac. ========================================================================== */ #lpen-fac-scrim { position: fixed; inset: 0; z-index: 100000; background: rgba(1,32,50,.62); display: none; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: var(--fac-font); } #lpen-fac-scrim.is-open { display: block; } #lpen-fac-scrim *, #lpen-fac-scrim *::before, #lpen-fac-scrim *::after { box-sizing: border-box; } @media (max-width: 767px) { #lpen-fac-scrim { padding: 0; } } #lpen-fac-scrim .lpen-fac__modal { position: relative; max-width: 760px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 64px rgba(1,32,50,.34); } @media (max-width: 767px) { #lpen-fac-scrim .lpen-fac__modal { border-radius: 0; min-height: 100%; } } #lpen-fac-scrim .lpen-fac__x { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #fff; background: rgba(1,32,50,.55); border: 0; border-radius: 999px; cursor: pointer; } #lpen-fac-scrim .lpen-fac__x:hover { background: var(--fac-navy-900); } #lpen-fac-scrim .lpen-fac__x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #lpen-fac-scrim .lpen-fac__panel { display: none; } #lpen-fac-scrim .lpen-fac__panel.is-on { display: block; } #lpen-fac-scrim .lpen-fac__head { display: flex; align-items: flex-start; gap: 20px; padding: 28px 28px 24px; background: var(--fac-navy-900); } @media (max-width: 560px) { #lpen-fac-scrim .lpen-fac__head { flex-direction: column; padding: 24px 20px 20px; } } #lpen-fac-scrim .lpen-fac__avatar { width: 108px; height: 108px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--fac-navy-700); } #lpen-fac-scrim .lpen-fac__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } #lpen-fac-scrim .lpen-fac__hmeta { min-width: 0; padding-right: 44px; } #lpen-fac-scrim .lpen-fac__hname { font: 700 28px/34px var(--fac-font); color: #fff; margin: 0 0 5px; } #lpen-fac-scrim .lpen-fac__hcreds { font: 600 14px/20px var(--fac-font); color: var(--fac-navy-100); margin: 0; } #lpen-fac-scrim .lpen-fac__hrole { font: 400 15px/22px var(--fac-font); color: var(--fac-navy-100); margin: 2px 0 0; } #lpen-fac-scrim .lpen-fac__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } #lpen-fac-scrim .lpen-fac__social a { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--fac-font); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 5px 12px; } #lpen-fac-scrim .lpen-fac__social a:hover { background: #fff; color: var(--fac-navy-900); border-color: #fff; } #lpen-fac-scrim .lpen-fac__content { padding: 26px 28px 32px; } @media (max-width: 560px) { #lpen-fac-scrim .lpen-fac__content { padding: 22px 20px 28px; } } #lpen-fac-scrim .lpen-fac__creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } #lpen-fac-scrim .lpen-fac__cred { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--fac-font); color: var(--fac-gold); background: var(--fac-gold-bg); border: 1px solid var(--fac-gold-bd); border-radius: 4px; padding: 5px 10px; } #lpen-fac-scrim .lpen-fac__sec { font: 600 12px/16px var(--fac-font); letter-spacing: .07em; text-transform: uppercase; color: var(--fac-subtle); margin: 24px 0 12px; padding-top: 22px; border-top: 1px solid var(--fac-navy-50); } #lpen-fac-scrim .lpen-fac__sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; } #lpen-fac-scrim .lpen-fac__prose p { font: 400 16px/27px var(--fac-font); color: var(--fac-secondary); margin: 0 0 14px; } #lpen-fac-scrim .lpen-fac__prose p:last-child { margin-bottom: 0; } #lpen-fac-scrim .lpen-fac__prose em { font-style: italic; } #lpen-fac-scrim .lpen-fac__areas { display: flex; flex-wrap: wrap; gap: 6px; } /* Its own class, not `.lpen-fac__areas span` — that descendant selector also matched the icon inside each pill at (1,1,1) and repainted the mask glyph with the pill's own background. */ #lpen-fac-scrim .lpen-fac__area { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--fac-font); color: var(--fac-navy-700); background: var(--fac-navy-50); border-radius: 4px; padding: 4px 9px; } #lpen-fac-scrim .lpen-fac__courses { list-style: none; margin: 0; padding: 0; } #lpen-fac-scrim .lpen-fac__courses li { border-bottom: 1px solid var(--fac-navy-50); } #lpen-fac-scrim .lpen-fac__courses li:last-child { border-bottom: 0; } #lpen-fac-scrim .lpen-fac__courses li[hidden] { display: none; } #lpen-fac-scrim .lpen-fac__courses a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 2px; text-decoration: none; color: var(--fac-action); font: 500 15px/22px var(--fac-font); } #lpen-fac-scrim .lpen-fac__courses a:hover { color: var(--fac-navy-800); text-decoration: underline; text-underline-offset: 2px; } #lpen-fac-scrim .lpen-fac__cwhen { flex: 0 0 auto; font: 400 13px/22px var(--fac-font); color: var(--fac-subtle); white-space: nowrap; } #lpen-fac-scrim .lpen-fac__rest { margin-top: 12px; font: 600 14px/20px var(--fac-font); color: var(--fac-action); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } #lpen-fac-scrim .lpen-fac__rest[hidden] { display: none; } #lpen-fac-scrim .lpen-fac__note { margin-top: 16px; padding: 12px 14px; background: var(--fac-gold-bg); border: 1px solid var(--fac-gold-bd); border-radius: 6px; font: 400 14px/21px var(--fac-font); color: var(--fac-gold-ink); } #lpen-fac-scrim .lpen-fac__none { font: 400 15px/24px var(--fac-font); color: var(--fac-subtle); margin: 0; } /* Scroll lock while the modal is up. */ .lpen-fac-locked { overflow: hidden !important; } /* ============ GENERATED ICONS — DO NOT EDIT ============ */ /* Tabler 3.46.0 — 23 glyphs, generated by build_instructors.py */ .lpen-i--alert-triangle{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--award{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--book{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--brand-linkedin{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--brand-x{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--briefcase{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--building{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--building-bank{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--certificate{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--chevron-right{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--clipboard-check{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--gavel{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--id-badge-2{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--route{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--scale{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--school{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--search{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--shield-half{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--star{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--users{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--users-group{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--world{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .lpen-i--x{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}