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 1915d92..9c35de4 100644 --- a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css +++ b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css @@ -37,6 +37,7 @@ body.drill-login { radial-gradient(circle at 80% 82%, rgba(109, 70, 37, 0.34), transparent 26%), linear-gradient(145deg, #06070a 0%, #0a0d12 30%, #111622 68%, #171d29 100%); background-attachment: fixed; + animation: drillBackgroundShift 18s ease-in-out infinite alternate; } .drill-login__shell { @@ -59,6 +60,7 @@ body.drill-login { rgba(10, 13, 18, 0.72); box-shadow: var(--drill-shadow-lg), var(--drill-shadow-glow); backdrop-filter: blur(28px); + animation: drillFadeUp 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .drill-login__brand { @@ -104,6 +106,7 @@ body.drill-login { border-radius: 999px; border: 1px solid rgba(239, 214, 180, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); + animation: drillOrbitFloat 16s ease-in-out infinite; } .drill-login__brand-orbit--one { @@ -112,6 +115,7 @@ body.drill-login { top: -90px; right: 18%; transform: rotate(-18deg); + animation-duration: 14s; } .drill-login__brand-orbit--two { @@ -120,6 +124,8 @@ body.drill-login { bottom: -240px; left: -120px; opacity: 0.45; + animation-duration: 22s; + animation-direction: alternate-reverse; } .drill-login__brand-grid { @@ -130,6 +136,7 @@ body.drill-login { background-size: 72px 72px; mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), transparent 70%); opacity: 0.35; + animation: drillGridDrift 26s linear infinite; } .drill-login__brand-top { @@ -157,6 +164,7 @@ body.drill-login { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(185, 106, 51, 0.18); + animation: drillMarkGlow 8s ease-in-out infinite; } .drill-login__status-pill { @@ -234,6 +242,11 @@ body.drill-login { linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)), rgba(255, 255, 255, 0.012); border: 1px solid rgba(210, 161, 112, 0.12); + transition: + transform 220ms ease, + border-color 220ms ease, + box-shadow 220ms ease, + background 220ms ease; } .drill-login__metrics div::before { @@ -246,6 +259,15 @@ body.drill-login { background: linear-gradient(90deg, var(--drill-accent-secondary), transparent); } +.drill-login__metrics div:hover { + transform: translateY(-3px); + border-color: rgba(239, 214, 180, 0.2); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), + rgba(255, 255, 255, 0.016); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); +} + .drill-login__metrics strong { display: block; margin: 8px 0 10px; @@ -280,6 +302,11 @@ body.drill-login { border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(210, 161, 112, 0.12); + transition: + transform 220ms ease, + border-color 220ms ease, + background 220ms ease, + box-shadow 220ms ease; } .drill-login__feature-grid article::after { @@ -290,6 +317,13 @@ body.drill-login { background: linear-gradient(90deg, rgba(239, 214, 180, 0.18), transparent); } +.drill-login__feature-grid article:hover { + transform: translateY(-3px); + border-color: rgba(239, 214, 180, 0.2); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)); + box-shadow: 0 22px 42px rgba(0, 0, 0, 0.16); +} + .drill-login__feature-grid span { display: inline-block; color: var(--drill-accent-secondary); @@ -326,6 +360,7 @@ body.drill-login { border-radius: 50%; background: radial-gradient(circle, rgba(239, 214, 180, 0.12), transparent 68%); filter: blur(10px); + animation: drillGlowPulse 10s ease-in-out infinite; } .drill-login__panel-head { @@ -397,6 +432,12 @@ body.drill-login { .drill-login__field-row a { color: var(--drill-accent-secondary); text-decoration: none; + transition: color 180ms ease, opacity 180ms ease; +} + +.drill-login__field-row a:hover { + color: var(--drill-accent-tertiary); + opacity: 0.96; } .drill-login__field input { @@ -494,6 +535,116 @@ body.drill-login { text-decoration: none; } +@keyframes drillFadeUp { + from { + opacity: 0; + transform: translateY(18px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes drillOrbitFloat { + 0% { + transform: translate3d(0, 0, 0) rotate(-18deg); + } + + 50% { + transform: translate3d(8px, -10px, 0) rotate(-12deg); + } + + 100% { + transform: translate3d(-6px, 6px, 0) rotate(-22deg); + } +} + +@keyframes drillGridDrift { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(24px, 18px, 0); + } +} + +@keyframes drillGlowPulse { + 0% { + opacity: 0.45; + transform: scale(0.96); + } + + 50% { + opacity: 0.72; + transform: scale(1.04); + } + + 100% { + opacity: 0.5; + transform: scale(0.98); + } +} + +@keyframes drillMarkGlow { + 0% { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 18px 40px rgba(185, 106, 51, 0.18); + } + + 50% { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 22px 46px rgba(185, 106, 51, 0.24); + } + + 100% { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 18px 40px rgba(185, 106, 51, 0.18); + } +} + +@keyframes drillBackgroundShift { + 0% { + background-position: + 0% 0%, + 0% 0%, + 0% 0%, + 0% 0%; + } + + 100% { + background-position: + 2% -1%, + -2% 1%, + 1% 2%, + 0% 0%; + } +} + +@media (prefers-reduced-motion: reduce) { + body.drill-login, + .drill-login__brand, + .drill-login__panel, + .drill-login__brand-orbit, + .drill-login__brand-grid, + .drill-login__brand-mark, + .drill-login__panel-glow { + animation: none !important; + } + + .drill-login__metrics div, + .drill-login__feature-grid article, + .drill-login__submit, + .drill-login__field-row a { + transition: none !important; + } +} + @media (max-width: 1180px) { .drill-login__shell { grid-template-columns: 1fr;