/* [2026-08-30] LOGIN MODAL — the stylesheet for the dialog bootstrap.php injects. Lifted VERBATIM out of assets/css/llos.css (sections "Premium auth modal v2" and the 2026-06-06 re-style, in that order, so the same rules still win) and moved here because llos.css is deliberately STRIPPED from pages by the standing rule in bootstrap.php. The markup was still injected there, so on those 82 pages the dialog had no styles at all: .llos-auth-hidden did not hide it and the whole thing printed as a column of raw text under the footer (reported on /student.php). bootstrap.php now links this sheet wherever it puts the markup, so stylesheet and dialog cannot be separated again. Nothing else on the site styles .llos-auth-* — this file is the only owner. */ /* [2026-05-14] Premium auth modal v2 — consumer-style: provider-first with RECOMMENDED Google CTA + email/SSO fallbacks. */ .llos-auth-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 1rem; } .llos-auth-hidden { opacity: 0; pointer-events: none; visibility: hidden; } .llos-auth-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.50); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .llos-auth-panel { position: relative; width: min(100%, 32rem); max-height: min(76vh, 42rem); background: #fffdf9; border: 1px solid #f1d4bc; border-radius: 0.55rem; box-shadow: 0 24px 64px rgba(152, 76, 16, 0.12); padding: 0; overflow: hidden; } .llos-auth-hero { padding: 1rem 1.1rem 0.8rem; background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 28%), linear-gradient(180deg, #fff6ea 0%, #fffdf8 84%); border-bottom: 1px solid #f3dcc7; } .llos-auth-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .llos-auth-eyebrow { display: block; color: var(--shell-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.35rem; } .llos-auth-header h2 { margin: 0; font-size: 1.28rem; line-height: 1.1; } .llos-auth-icon-btn { border: 1px solid #fb923c; background: #ffffff; color: #0f172a; border-radius: 0.35rem; width: 2rem; height: 2rem; font-size: 1rem; cursor: pointer; } .llos-auth-subtitle { margin: 0.45rem 0 0.65rem; color: var(--muted); font-size: 0.86rem; line-height: 1.45; } .llos-auth-steps { display: flex; flex-wrap: wrap; gap: 0.35rem; } .llos-auth-step { display: inline-flex; align-items: center; border-radius: 0.2rem; border: 1px solid #fb923c; background: #ffffff; color: #0f172a; padding: 0.28rem 0.58rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .llos-auth-form { display: grid; gap: 0.75rem; padding: 0.9rem 1.1rem 1rem; overflow: auto; } .llos-auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; padding: 0.7rem 1.1rem 0; } .llos-auth-tab { border: 1px solid #fb923c; border-radius: 0.25rem; background: #ffffff; color: #0f172a; padding: 0.5rem 0.75rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .llos-auth-tab.is-active { background: #fb923c; border-color: #fb923c; color: #0f172a; box-shadow: inset 0 -2px 0 #0f172a; } .llos-auth-pane { display: none; gap: 0.75rem; } .llos-auth-pane.is-active { display: grid; } .llos-auth-pane-otp { gap: 0.6rem; } .llos-auth-field-grid { display: grid; gap: 0.65rem; } .llos-auth-identity-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr); align-items: end; } .llos-auth-form label { display: grid; gap: 0.28rem; color: var(--text); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .llos-auth-optional { letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 0.72rem; } .llos-auth-form input { width: 100%; border: 1px solid #fb923c; border-radius: 0.2rem; background: #ffffff; padding: 0.68rem 0.82rem; font-size: 0.88rem; color: var(--text); } .llos-auth-form input:focus { outline: none; border-color: #0f172a; box-shadow: 0 0 0 4px #fb923c; background: #fff; } .llos-auth-actions { display: flex; } .llos-auth-submit { border: none; border-radius: 0.22rem; background: #0f172a; color: #fff; padding: 0.72rem 0.9rem; font-size: 0.84rem; font-weight: 800; cursor: pointer; } .llos-auth-submit:hover { background: #1e293b; } .llos-auth-secondary { background: #fb923c; color: #0f172a; border: 1px solid #fb923c; } .llos-auth-secondary:hover { background: #f97316; } .llos-auth-code-card { display: grid; gap: 0.5rem; padding: 0.7rem; border: 1px solid #fb923c; border-radius: 0.28rem; background: #ffffff; } .llos-auth-code-head { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; } .llos-auth-code-copy { display: grid; gap: 0.22rem; } .llos-auth-code-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .llos-auth-code-copy p { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.35; } .llos-auth-code-input input { letter-spacing: 0.18em; text-align: center; font-weight: 800; } .llos-auth-compact-submit { align-self: center; white-space: nowrap; padding-left: 0.8rem; padding-right: 0.8rem; } .llos-auth-provider-block { display: grid; gap: 0.85rem; } .llos-auth-provider-copy p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; } .llos-auth-providers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .llos-auth-providers button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid #fb923c; border-radius: 0.2rem; background: #ffffff; color: var(--text); padding: 0.62rem 0.5rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .llos-auth-providers button i { font-size: 0.9rem; } .llos-auth-providers button span { line-height: 1; } .llos-auth-providers button:hover { border-color: #f97316; background: #fff7ed; transform: translateY(-1px); } .llos-auth-social-note { color: var(--muted); font-size: 0.74rem; line-height: 1.45; padding: 0.7rem 0.8rem; border-radius: 0.22rem; background: #ffffff; border: 1px solid #fb923c; } .llos-auth-status { min-height: 1.25rem; margin: 0 1.1rem 1rem; color: var(--muted); font-size: 0.76rem; line-height: 1.45; } @media (max-width: 640px) { .llos-auth-panel { width: min(100%, 100%); max-height: 82vh; border-radius: 0.4rem; } .llos-auth-hero, .llos-auth-form { padding-left: 1rem; padding-right: 1rem; } .llos-auth-status { margin-left: 1rem; margin-right: 1rem; } .llos-auth-identity-grid, .llos-auth-code-head { grid-template-columns: 1fr; display: grid; } .llos-auth-compact-submit { width: 100%; } .llos-auth-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .llos-auth-steps { display: none; } } /* ============================================================================ [2026-06-06] LOGIN MODAL — re-style for the redesigned provider-based markup. The bootstrap.php auth modal was redesigned (stacked provider rows: Google/Microsoft/Apple/GitHub + email OTP + SSO), but llos.css still styled the OLD modal (hero/tabs/steps) and laid providers out in a squished 4-column grid. This block (last in source order) styles every current class and overrides the stale rules. Higher-specificity selectors (.llos-auth-providers .llos-auth-provider) are used where an old `.llos-auth-providers button` rule would otherwise win. ============================================================================ */ /* [2026-06-06] No scroll — panel sized to content; spacing tightened so the whole modal fits in one viewport without an internal scrollbar. */ .llos-auth-panel { display: flex; flex-direction: column; overflow: hidden; max-height: none; padding: 0 0 0.25rem; } .llos-auth-accent { flex: none; height: 4px; background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%); } .llos-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.15rem 0.1rem; } .llos-auth-brand-row { display: inline-flex; align-items: center; gap: 0.45rem; } .llos-auth-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 0.4rem; background: #0f172a; color: #fff; font-weight: 900; font-size: 0.9rem; } .llos-auth-brand-text { font-weight: 900; letter-spacing: 0.06em; font-size: 0.82rem; color: #0f172a; } .llos-auth-close { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .llos-auth-close:hover { background: #f8fafc; color: #0f172a; } .llos-auth-title { margin: 0.25rem 1.15rem 0; font-size: 1.1rem; line-height: 1.15; font-weight: 900; color: #0f172a; } .llos-auth-subtitle { margin: 0.2rem 1.15rem 0.55rem; color: var(--muted); font-size: 0.78rem; line-height: 1.32; } /* Provider rows — stacked, full width (override old repeat(4) grid) */ .llos-auth-providers { display: flex; flex-direction: column; grid-template-columns: none; gap: 0.38rem; padding: 0 1.15rem; } .llos-auth-providers .llos-auth-provider { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #0f172a; padding: 0.5rem 0.78rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .llos-auth-providers .llos-auth-provider:hover { border-color: #fb923c; background: #fff7ed; transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(234, 88, 16, 0.55); } .llos-auth-providers .llos-auth-provider.is-recommended { border-color: #fb923c; box-shadow: 0 0 0 1px #fdba74 inset; } .llos-auth-provider-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; flex: none; } .llos-auth-provider-icon svg { width: 100%; height: 100%; } .llos-auth-provider-label { flex: 1 1 auto; line-height: 1.2; } .llos-auth-provider-badge { flex: none; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; color: #9a3412; background: #ffedd5; border-radius: 999px; padding: 0.2rem 0.5rem; } .llos-auth-arrow { flex: none; color: #64748b; transition: color 0.15s ease, transform 0.15s ease; } .llos-auth-providers .llos-auth-provider:hover .llos-auth-arrow { color: #ea580c; transform: translateX(2px); } /* Secondary providers — compact 2-column grid (icon + short label, centered) */ .llos-auth-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.38rem; margin-top: 0.38rem; } .llos-auth-providers .llos-auth-provider-compact { justify-content: center; gap: 0.45rem; padding: 0.48rem 0.45rem; font-size: 0.82rem; font-weight: 700; } .llos-auth-provider-compact .llos-auth-provider-icon { width: 1.15rem; height: 1.15rem; } /* OR divider */ .llos-auth-divider { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 1.15rem; color: #64748b; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; } .llos-auth-divider::before, .llos-auth-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; } /* Email expand trigger */ .llos-auth-email-trigger { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 1.15rem; padding: 0.5rem; border: 1px dashed #cbd5e1; border-radius: 0.5rem; background: #fff; color: #475569; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .llos-auth-email-trigger:hover { border-color: #fb923c; color: #0f172a; background: #fff7ed; } .llos-auth-email-trigger.is-active { border-style: solid; border-color: #fb923c; color: #0f172a; background: #fff7ed; } .llos-auth-provider-icon-email { color: #ea580c; } /* Email form */ .llos-auth-form { gap: 0.5rem; padding: 0.6rem 1.15rem 0.3rem; } .llos-auth-form-collapsed { display: none !important; } .llos-auth-field { display: grid; gap: 0.3rem; margin: 0; color: #0f172a; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .llos-auth-field em { font-style: normal; color: #64748b; text-transform: none; letter-spacing: 0; } .llos-auth-otp-field { margin-top: 0.2rem; } /* SSO row */ .llos-auth-sso { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.45rem 1.15rem 0; font-size: 0.78rem; color: #64748b; } .llos-auth-sso-link { background: none; border: 0; color: #ea580c; font-weight: 800; cursor: pointer; padding: 0; } .llos-auth-sso-link:hover { text-decoration: underline; } /* Footer */ .llos-auth-footer { margin: 0.5rem 1.15rem 0.7rem; font-size: 0.68rem; color: #64748b; line-height: 1.4; text-align: center; } .llos-auth-footer a { color: #ea580c; text-decoration: none; } .llos-auth-footer a:hover { text-decoration: underline; } .llos-auth-status { margin: 0.1rem 1.15rem 0.3rem; min-height: 0; } @media (max-width: 640px) { .llos-auth-top, .llos-auth-title, .llos-auth-subtitle, .llos-auth-providers, .llos-auth-divider, .llos-auth-email-trigger, .llos-auth-form, .llos-auth-sso, .llos-auth-footer, .llos-auth-status { padding-left: 1rem; padding-right: 1rem; } .llos-auth-title, .llos-auth-subtitle, .llos-auth-divider, .llos-auth-email-trigger, .llos-auth-sso, .llos-auth-footer, .llos-auth-status { margin-left: 0; margin-right: 0; } .llos-auth-email-trigger { margin-left: 1rem; margin-right: 1rem; padding-left: 0.68rem; padding-right: 0.68rem; } }