/* * Login Lightbox styles. * * Scope every selector to #jadc__modal-signup wherever practical so the plugin * can coexist with Moodle themes without leaking modal styles into the page. */ /* Use border-box inside the modal to make the two-column layout predictable. */ #jadc__modal-signup, #jadc__modal-signup * { box-sizing: border-box; } /* Full-screen overlay and design tokens shared by the modal children. */ #jadc__modal-signup { --jadc-text: #22404d; --jadc-panel: #f7fbf4; --jadc-orange: #f58220; --jadc-blue: #005aaa; --jadc-left-bg: #285f74; --jadc-line: #dbe5d8; position: fixed; inset: 0; z-index: 1055; display: block; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; color: #000; font-family: "Montserrat", sans-serif; background: rgba(0,0,0,.36); } /* Applied to while the modal is open so the background page cannot scroll. */ .ja-loginlightbox-lock { overflow: hidden; } /* Desktop modal shell. Bootstrap class names are reused because Moodle themes commonly style them already. */ #jadc__modal-signup .modal-dialog { position: relative; width: 50vw; max-width: 1000px; min-width: 760px; margin: 1.75rem auto; pointer-events: none; background-color: var(--jadc-panel); } #jadc__modal-signup .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1000px; margin: 0 auto; border: unset; border-radius: unset; background-color: var(--jadc-panel); padding: 0 0 2rem !important; pointer-events: auto; } /* Top-right close affordance. */ #jadc__modal-signup .ja-loginlightbox-close { position: absolute; top: 2rem; right: 4.5rem; z-index: 5; width: 34px; height: 34px; border: 0; background: transparent; color: var(--jadc-text); font-size: 34px; line-height: 30px; opacity: .75; cursor: pointer; } /* Primary split layout: registration content on the left, sign-in content on the right. */ #jadc__modal-signup .ja-loginlightbox-content-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; color: var(--jadc-text); } #jadc__modal-signup .ja-loginlightbox-register, #jadc__modal-signup .ja-loginlightbox-card { min-height: 720px; } #jadc__modal-signup .ja-loginlightbox-card { background: var(--jadc-panel); } /* Left registration/marketing panel. */ #jadc__modal-signup .ja-loginlightbox-register { display: flex; align-items: center; padding: 4.4rem 3rem; background: var(--jadc-left-bg); } #jadc__modal-signup .ja-loginlightbox-register h2 { margin: 0 0 1.65rem; color: #fff; font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: -.055em; line-height: .98; } #jadc__modal-signup .ja-loginlightbox-register h2 span, #jadc__modal-signup .ja-loginlightbox-register h2 strong { display: block; } #jadc__modal-signup .ja-loginlightbox-register h2 span { font-size: clamp(2.6rem, 4.2vw, 5.05rem); font-weight: 700; } #jadc__modal-signup .ja-loginlightbox-register h2 strong { font-size: clamp(3.35rem, 5.4vw, 6.85rem); font-weight: 800; } #jadc__modal-signup .ja-loginlightbox-intro { max-width: 610px; margin: 0 0 4.1rem; color: #fff; font-size: 1.08rem; line-height: 1.55; } #jadc__modal-signup .ja-loginlightbox-register h3 { margin: 0 0 .7rem; color: #fff; font-size: 1.55rem; font-weight: 800; line-height: 1.2; } #jadc__modal-signup .ja-loginlightbox-register-copy { margin: 0 0 1.35rem; color: #fff; font-size: 1rem; line-height: 1.45; } #jadc__modal-signup .ja-loginlightbox-register-actions { display: flex; flex-wrap: wrap; gap: .9rem; } #jadc__modal-signup .ja-loginlightbox-register-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.55rem; border: 0; border-radius: 0; background: var(--jadc-orange); color: #fff !important; font-size: .95rem; font-weight: 700; text-decoration: none !important; } /* Right login panel. */ #jadc__modal-signup .ja-loginlightbox-card { display: flex; flex-direction: column; justify-content: center; padding: 4.4rem 3rem; } #jadc__modal-signup .ja-loginlightbox-card h3 { margin: 0 0 1.75rem; color: var(--jadc-text); font-family: "Montserrat", sans-serif; font-size: clamp(2.8rem, 4.6vw, 5.8rem); font-weight: 800; line-height: .98; letter-spacing: -.055em; } #jadc__modal-signup .ja-loginlightbox-subtitle { margin: 0 0 1.1rem; color: var(--jadc-text); font-size: 1.8rem; font-weight: 800; line-height: 1.2; } #jadc__modal-signup #ja-loginlightbox-okta { max-width: 520px; min-height: 330px; } #jadc__modal-signup .ja-loginlightbox-signin-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin: 0 0 1.35rem; padding: 0 2rem; border: 0; border-radius: 0; background: var(--jadc-orange); color: #fff; font-size: .98rem; font-weight: 700; } #jadc__modal-signup .ja-loginlightbox-field-label { display: block; margin: 0 0 .45rem; color: var(--jadc-text); font-size: 1rem; font-weight: 500; } /* Static fallback input styling. The fallback form is only a visual bridge to SAML. */ #jadc__modal-signup .ja-loginlightbox-input { display: block; width: 100%; height: 46px; margin: 0 0 1rem; border: 1px solid var(--jadc-line); border-radius: 0; background: #fff; color: var(--jadc-text); font: inherit; padding: 0 .8rem; } #jadc__modal-signup .ja-loginlightbox-check { display: flex; align-items: center; gap: .55rem; margin: 0 0 .75rem; color: var(--jadc-text); font-size: .98rem; } #jadc__modal-signup .ja-loginlightbox-help, #jadc__modal-signup .ja-loginlightbox-support a { color: var(--jadc-blue) !important; font-weight: 600; text-decoration: none; } #jadc__modal-signup .ja-loginlightbox-cookies, #jadc__modal-signup .ja-loginlightbox-support { margin: 1rem 0 0; color: var(--jadc-text); font-size: .95rem; line-height: 1.45; } /* Prevent oversized desktop dialogs from overflowing shorter screens. */ @media only screen and (max-width: 1680px), only screen and (max-height: 900px) { #jadc__modal-signup .modal-dialog .modal-content { max-height: 95vh; overflow-y: auto; } } /* Collapse to a single-column modal on tablets and phones. */ @media only screen and (max-width: 1199px) { #jadc__modal-signup .modal-dialog { width: auto; min-width: 0; max-width: 500px; } #jadc__modal-signup .modal-content { padding-left: 0 !important; padding-right: 0 !important; } #jadc__modal-signup .ja-loginlightbox-content-body { grid-template-columns: 1fr; min-height: auto; } #jadc__modal-signup .ja-loginlightbox-register, #jadc__modal-signup .ja-loginlightbox-card { min-height: auto; padding: 3rem 2rem; } } /* Match the source JA modal heading typography Andre provided. */ #jadc__modal-signup .modal-dialog .modal-content .ja-loginlightbox-register h2, #jadc__modal-signup .modal-dialog .modal-content .ja-loginlightbox-register h2 span, #jadc__modal-signup .modal-dialog .modal-content .ja-loginlightbox-register h2 strong, #jadc__modal-signup .modal-dialog .modal-content .ja-loginlightbox-register h3 { font-size: 42px; line-height: 45px; font-weight: normal; color: #e2e2e2; letter-spacing: normal; } /* Support contact block shown below the static fallback or widget. */ #jadc__modal-signup #jadc__help p { margin: 0; font-size: 25px; font-weight: 600; color: #084c61; line-height: 1.25; } #jadc__modal-signup #jadc__help a { color: #084c61 !important; font-weight: 600; text-decoration: none; } /* Keep modal-content and the visible split body exactly the same height. */ #jadc__modal-signup .modal-dialog .modal-content.ja-loginlightbox-content { padding-bottom: 0 !important; } #jadc__modal-signup .modal-dialog .modal-content.ja-loginlightbox-content::before { display: none; } /* Match source JA modal login heading typography. */ #jadc__modal-signup .modal-dialog .modal-content .ja-loginlightbox-card h3#ja-loginlightbox-title { color: #22404d; font-family: "Montserrat", sans-serif; opacity: 1; font-weight: 500; font-size: 1.25em; line-height: 28px; margin-top: 0; margin-bottom: 1.75rem; letter-spacing: normal; } /* Match source JA modal primary button styling. */ #jadc__modal-signup .modal-dialog .modal-content #jadc__btn-sign-up, /* Static fallback sign-in button: visually matches the Okta primary action. */ #jadc__modal-signup .modal-dialog .modal-content #jadc__btn-sign-in { display: block; padding: 0.5rem; text-align: center; text-decoration: none; max-width: 450px; background: #ffffff !important; border: 2px solid #00763d; box-sizing: border-box; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 4px; font-weight: 300; font-size: 1em; line-height: 18px; color: #000000 !important; letter-spacing: 0.09em; margin-top: 1rem; } /* Source modal content starts at the top of each column, not vertically centered. */ #jadc__modal-signup .ja-loginlightbox-register, #jadc__modal-signup .ja-loginlightbox-card { align-items: stretch; justify-content: flex-start; } /* Final source-aligned split button rules: left signup and right Okta sign-in differ. */ #jadc__modal-signup .modal-dialog .modal-content #jadc__btn-sign-up { display: block; width: 100%; max-width: 450px; padding: 0.5rem; text-align: center; text-decoration: none; background: #ffffff !important; border: 2px solid #00763d; box-sizing: border-box; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 4px; font-weight: 300; font-size: 1em; line-height: 18px; color: #000000 !important; letter-spacing: 0.09em; margin-top: 1rem; } #jadc__modal-signup .modal-dialog .modal-content #jadc__btn-sign-in { display: block; height: 50px; width: 100%; max-width: 450px; padding: 0 15px; border: 1px solid; border-color: #004b75 #004b75 #00456a; border-radius: 3px; box-sizing: border-box; background-color: #007dc1; background: linear-gradient(#007dc1, #0073b2); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), inset 0 1px 0 0 hsla(0, 0%, 100%, .1); color: #ffffff; font-family: proxima nova, montserrat-okta, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 36px; margin: 0 0 1.35rem; } #jadc__modal-signup .modal-dialog .modal-content .ja-loginlightbox-input { background: #285f74; border: 2px solid #aaaaaa; border-radius: 4px; width: 325px; max-width: 450px; height: 2.5rem; display: block; padding: 0 0.5rem; color: #ffffff; } /* Embedded Okta widget: the widget owns the whole right-hand panel and sits in its white card. */ /* Widget mode: center the Okta card in the right panel and let Okta own inner form spacing. */ #jadc__modal-signup .ja-loginlightbox-card-okta-widget { align-items: center; padding-top: 3.25rem; } #jadc__modal-signup #ja-loginlightbox-okta { width: 100%; max-width: 450px; min-height: 0; } #jadc__modal-signup .ja-loginlightbox-okta-widget-card { width: 100%; max-width: 400px; margin: 0 auto; background: #f9f9f9; border: 1px solid #dddddd; border-radius: 3px; box-shadow: 0 1px 1px hsla(0, 0%, 69%, .16); overflow: hidden; } #jadc__modal-signup #okta-sign-in.auth-container, #jadc__modal-signup #okta-sign-in.auth-container.main-container { width: 100% !important; min-width: 300px; margin: 0 !important; border: 0 !important; border-radius: 3px; background: #f9f9f9; box-shadow: none !important; } #jadc__modal-signup #okta-sign-in .o-form-button-bar .button, #jadc__modal-signup #okta-sign-in.auth-container .button-primary { display: block; height: 50px; width: 100%; cursor: pointer; } #jadc__modal-signup #okta-sign-in input, #jadc__modal-signup #okta-sign-in button, #jadc__modal-signup #okta-sign-in select, #jadc__modal-signup #okta-sign-in textarea { pointer-events: auto; } /* Friendly failure state if Okta assets cannot load or initialize. */ #jadc__modal-signup .ja-loginlightbox-okta-error { width: 100%; max-width: 400px; margin: 0 auto; padding: 1rem; background: #fff3f3; border: 1px solid #d9534f; border-radius: 4px; color: #842029; font-size: 14px; line-height: 1.4; } /* Trim embedded Okta widget chrome so only the active form content remains. */ #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .okta-sign-in-header.auth-header, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-footer { display: none !important; } #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card { height: auto !important; min-height: 0 !important; } #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card #okta-sign-in, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card #okta-sign-in.auth-container, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card #okta-sign-in.auth-container.main-container, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .siw-main-view, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-content, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-content-inner, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .primary-auth, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .o-form, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .o-form-content { height: auto !important; min-height: 0 !important; } #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-content { padding-bottom: 0 !important; } /* Show only the Okta widget auth-content; make outer Okta shells visually disappear. */ #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card #okta-sign-in, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card #okta-sign-in.auth-container, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card #okta-sign-in.auth-container.main-container, #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .siw-main-view { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-content { display: block !important; width: 100% !important; max-width: 400px !important; margin: 0 auto !important; padding: 0 !important; background: #f9f9f9 !important; border: 1px solid #dddddd !important; border-radius: 3px !important; box-shadow: 0 1px 1px hsla(0, 0%, 69%, .16) !important; overflow: hidden !important; } #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-content { padding: 5px !important; } #jadc__modal-signup #okta-login-container.ja-loginlightbox-okta-widget-card .auth-content { margin: 5px auto !important; padding: 5px !important; }