diff --git a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css index 7f5ab6f..36638f7 100644 --- a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css +++ b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css @@ -665,6 +665,216 @@ body.drill-login { } } +@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 820px) { + body.drill-login { + overflow: hidden; + } + + .drill-login__shell { + grid-template-columns: minmax(0, 1.08fr) minmax(360px, 430px); + gap: 14px; + padding: 14px; + } + + .drill-login__brand, + .drill-login__panel { + border-radius: 24px; + } + + .drill-login__brand { + padding: 20px; + gap: 12px; + } + + .drill-login__brand-top { + gap: 12px; + } + + .drill-login__brand-mark { + width: 60px; + height: 60px; + border-radius: 20px; + font-size: 1.55rem; + } + + .drill-login__brand-mark-bar { + top: 13px; + right: 12px; + height: 34px; + } + + .drill-login__status-pill { + min-height: 34px; + padding: 7px 12px; + font-size: 0.66rem; + letter-spacing: 0.14em; + } + + .drill-login__eyebrow { + margin-bottom: 8px; + font-size: 0.68rem; + } + + .drill-login__brand h1 { + font-size: clamp(1.9rem, 3.2vw, 3.2rem); + line-height: 0.92; + max-width: 12ch; + } + + .drill-login__brand p, + .drill-login__panel p, + .drill-login__feature-grid p { + font-size: 0.82rem; + line-height: 1.38; + } + + .drill-login__metrics, + .drill-login__feature-grid { + gap: 10px; + } + + .drill-login__metrics div, + .drill-login__feature-grid article { + padding: 12px; + border-radius: 18px; + } + + .drill-login__metrics strong { + margin: 4px 0 6px; + font-size: 0.92rem; + } + + .drill-login__metrics span { + font-size: 0.77rem; + line-height: 1.32; + } + + .drill-login__feature-grid span { + margin-bottom: 6px; + font-size: 0.72rem; + } + + .drill-login__feature-grid strong { + margin-bottom: 0; + font-size: 0.84rem; + } + + .drill-login__feature-grid article p { + display: none; + } + + .drill-login__panel { + padding: 20px 18px; + justify-content: center; + } + + .drill-login__panel-head { + margin-bottom: 16px; + } + + .drill-login__panel h2 { + font-size: clamp(1.55rem, 2.3vw, 2.1rem); + margin-bottom: 8px; + } + + .drill-login__alert { + margin-bottom: 10px; + padding: 10px 12px; + border-radius: 16px; + font-size: 0.84rem; + } + + .drill-login__form { + gap: 10px; + } + + .drill-login__field { + gap: 5px; + } + + .drill-login__field label, + .drill-login__remember span, + .drill-login__field-row a { + font-size: 0.84rem; + } + + .drill-login__field input { + padding: 12px 14px; + border-radius: 16px; + font-size: 0.88rem; + } + + .drill-login__submit { + margin-top: 2px; + padding: 13px 16px; + border-radius: 18px; + font-size: 0.88rem; + } + + .drill-login__footer { + margin-top: 10px; + font-size: 0.72rem; + } +} + +@media (min-width: 1800px) and (min-height: 980px) { + .drill-login__shell { + grid-template-columns: minmax(0, 1.22fr) minmax(430px, 520px); + gap: 22px; + padding: 22px; + } + + .drill-login__brand { + padding: 34px; + gap: 20px; + } + + .drill-login__brand h1 { + font-size: clamp(3rem, 4.1vw, 4.6rem); + max-width: 13ch; + } + + .drill-login__brand p, + .drill-login__panel p, + .drill-login__feature-grid p { + font-size: 0.93rem; + line-height: 1.5; + } + + .drill-login__metrics div, + .drill-login__feature-grid article { + padding: 16px; + } + + .drill-login__metrics strong { + font-size: 1.04rem; + } + + .drill-login__metrics span { + font-size: 0.84rem; + } + + .drill-login__feature-grid strong { + font-size: 0.92rem; + } + + .drill-login__panel { + padding: 28px; + } + + .drill-login__panel h2 { + font-size: clamp(2rem, 2.4vw, 2.6rem); + } + + .drill-login__field input { + padding: 13px 16px; + } + + .drill-login__submit { + padding: 14px 18px; + } +} + .drill-login__footer a { color: var(--drill-accent-secondary); text-decoration: none;