.ltxe-auth { --ltxe-af-accent: #1d4ed8; --ltxe-af-border: #d1d5db; --ltxe-af-bg: #fff; --ltxe-af-muted: #6b7280; --ltxe-af-error: #b91c1c; max-width: 24rem; font-size: 1rem; } .ltxe-auth__title { margin: 0 0 1rem; font-size: 1.35rem; } .ltxe-auth__form { display: grid; gap: 0.85rem; } .ltxe-auth__form label { display: grid; gap: 0.3rem; } .ltxe-auth__form input[type="text"], .ltxe-auth__form input[type="email"], .ltxe-auth__form input[type="password"] { width: 100%; min-height: 2.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--ltxe-af-border); background: var(--ltxe-af-bg); border-radius: 0.25rem; } .ltxe-auth__pwd { display: grid; gap: 0.35rem; } .ltxe-auth__toggle { justify-self: start; border: 0; background: transparent; color: var(--ltxe-af-accent); padding: 0; cursor: pointer; text-decoration: underline; } .ltxe-auth__check { display: flex; align-items: center; gap: 0.4rem; } .ltxe-auth__submit { min-height: 2.5rem; border: 0; border-radius: 0.25rem; background: var(--ltxe-af-accent); color: #fff; cursor: pointer; } .ltxe-auth__submit:disabled { opacity: 0.6; cursor: wait; } .ltxe-auth__lost, .ltxe-auth__hello { margin: 0; } .ltxe-auth__status { margin: 0.75rem 0 0; color: var(--ltxe-af-muted); } .ltxe-auth__status.is-error { color: var(--ltxe-af-error); } .ltxe-auth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ltxe-icon-box { container-type: inline-size; display: flex; gap: 16px; padding: 20px; background: #f6f7fb; border-radius: 16px; color: #1b2433; text-decoration: none; box-sizing: border-box; transition: transform 0.25s ease, box-shadow 0.25s ease; } .ltxe-icon-box--top { flex-direction: column; align-items: flex-start; } .ltxe-icon-box--left { flex-direction: row; align-items: flex-start; } .ltxe-icon-box--right { flex-direction: row-reverse; align-items: flex-start; } .ltxe-icon-box__mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #fff; transition: transform 0.45s ease; } .ltxe-icon-box__mark img { width: 60%; height: 60%; object-fit: contain; } .ltxe-icon-box--shape-none .ltxe-icon-box__mark { background: transparent; width: auto; height: auto; } .ltxe-icon-box--shape-circle .ltxe-icon-box__mark { border-radius: 50%; } .ltxe-icon-box--shape-square .ltxe-icon-box__mark { border-radius: 0; } .ltxe-icon-box--shape-rounded .ltxe-icon-box__mark { border-radius: 14px; } .ltxe-icon-box__title { margin: 0 0 8px; font-size: 1.15rem; } .ltxe-icon-box__desc { margin: 0 0 12px; } .ltxe-icon-box__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #1b2433; color: #fff; } .ltxe-icon-box--float:hover { transform: translateY(-6px); } .ltxe-icon-box--grow:hover { transform: scale(1.03); } .ltxe-icon-box--spin:hover .ltxe-icon-box__mark { transform: rotate(360deg); } .ltxe-icon-box--bounce:hover .ltxe-icon-box__mark { animation: ltxe-ib-bounce 0.55s ease; } .ltxe-icon-box--glow:hover { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25); } @keyframes ltxe-ib-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .ltxe-icon-box, .ltxe-icon-box__mark { transition: none; } .ltxe-icon-box--float:hover, .ltxe-icon-box--grow:hover { transform: none; } .ltxe-icon-box--spin:hover .ltxe-icon-box__mark, .ltxe-icon-box--bounce:hover .ltxe-icon-box__mark { transform: none; animation: none; } }