:root { --drill-bg-primary: #0b0d12; --drill-bg-secondary: #141820; --drill-bg-tertiary: #1c2230; --drill-accent-primary: #b96a33; --drill-accent-secondary: #d2a170; --drill-accent-tertiary: #efd6b4; --drill-accent-quaternary: #fff1df; --drill-text-primary: #f7f4ee; --drill-text-secondary: #d0d7e4; --drill-text-muted: #90a0b7; --drill-border: rgba(210, 161, 112, 0.16); --drill-border-strong: rgba(239, 214, 180, 0.24); --drill-shadow-lg: 0 40px 120px rgba(0, 0, 0, 0.55); --drill-shadow-glow: 0 0 60px rgba(185, 106, 51, 0.14); } * { box-sizing: border-box; } body.drill-login { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: "Georgia", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--drill-text-primary); background: radial-gradient(circle at 10% 12%, rgba(185, 106, 51, 0.18), transparent 20%), radial-gradient(circle at 84% 14%, rgba(239, 214, 180, 0.08), transparent 18%), 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 { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(390px, 520px); gap: clamp(18px, 2vw, 30px); align-items: stretch; padding: clamp(16px, 2.4vh, 30px) clamp(16px, 2vw, 30px); } .drill-login__brand, .drill-login__panel { position: relative; overflow: hidden; border-radius: 36px; border: 1px solid var(--drill-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)), 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 { padding: clamp(28px, 3.8vh, 50px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(18px, 2.2vh, 32px); } .drill-login__brand::before, .drill-login__panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 24%, transparent 48%), radial-gradient(circle at top right, rgba(232, 201, 160, 0.12), transparent 32%); pointer-events: none; } .drill-login__brand::after { content: ""; position: absolute; inset: auto -10% -16% auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 106, 51, 0.18) 0%, rgba(185, 106, 51, 0.04) 42%, transparent 70%); filter: blur(18px); pointer-events: none; } .drill-login__brand-orbit, .drill-login__brand-grid, .drill-login__panel-glow { pointer-events: none; position: absolute; } .drill-login__brand-orbit { 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 { width: 220px; height: 220px; top: -90px; right: 18%; transform: rotate(-18deg); animation-duration: 14s; } .drill-login__brand-orbit--two { width: 460px; height: 460px; bottom: -240px; left: -120px; opacity: 0.45; animation-duration: 22s; animation-direction: alternate-reverse; } .drill-login__brand-grid { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); 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 { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .drill-login__brand-mark { width: 70px; height: 70px; display: inline-flex; align-items: center; justify-content: center; border-radius: 24px; background: linear-gradient(145deg, rgba(185, 106, 51, 0.24), rgba(239, 214, 180, 0.1)), rgba(255, 255, 255, 0.02); border: 1px solid rgba(210, 161, 112, 0.3); color: var(--drill-accent-quaternary); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1em; 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; overflow: hidden; } .drill-login__brand-mark-core, .drill-login__brand-mark-bar, .drill-login__brand-mark-ring { position: absolute; } .drill-login__brand-mark-core { position: relative; z-index: 2; } .drill-login__brand-mark-bar { right: 14px; top: 16px; width: 8px; height: 40px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 241, 223, 0.88), rgba(210, 161, 112, 0.25)); box-shadow: 0 0 18px rgba(239, 214, 180, 0.24); } .drill-login__brand-mark-ring { inset: 8px; border-radius: 22px; border: 1px solid rgba(255, 241, 223, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .drill-login__status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(210, 161, 112, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); color: var(--drill-accent-tertiary); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .drill-login__brand-copy { position: relative; z-index: 1; max-width: 720px; } .drill-login__eyebrow { display: inline-block; color: var(--drill-accent-secondary); text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.74rem; margin-bottom: 14px; } .drill-login__brand h1, .drill-login__panel h2 { margin: 0; font-weight: 500; letter-spacing: -0.04em; line-height: 1; } .drill-login__brand h1 { max-width: 760px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 4.8vw, 5.1rem); line-height: 0.92; text-wrap: balance; } .drill-login__brand p, .drill-login__panel p, .drill-login__feature-grid p { color: var(--drill-text-secondary); line-height: 1.55; font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif; font-size: 0.95rem; } .drill-login__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .drill-login__metrics div { position: relative; padding: 16px 18px; border-radius: 26px; background: 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 { content: ""; position: absolute; top: 14px; left: 20px; width: 32px; height: 1px; 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: 6px 0 8px; color: var(--drill-accent-tertiary); font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; font-weight: 600; letter-spacing: 0.03em; } .drill-login__metrics span { display: block; color: var(--drill-text-secondary); line-height: 1.42; font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif; font-size: 0.88rem; } .drill-login__feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .drill-login__feature-grid article { position: relative; padding: 18px; 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 { content: ""; position: absolute; inset: auto 22px 0 22px; height: 1px; 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); font-size: 0.8rem; margin-bottom: 8px; } .drill-login__feature-grid strong { display: block; margin-bottom: 8px; font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif; font-size: 0.94rem; } .drill-login__panel { padding: clamp(24px, 3.2vh, 38px) clamp(24px, 2vw, 36px); display: flex; flex-direction: column; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--drill-shadow-lg), var(--drill-shadow-glow); } .drill-login__panel-glow { inset: -20% auto auto -30%; width: 200px; height: 200px; 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 { margin-bottom: 22px; } .drill-login__panel h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 10px; line-height: 0.98; } .drill-login__alert { margin-bottom: 14px; padding: 13px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: var(--drill-text-primary); font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif; } .drill-login__alert--error { border-color: rgba(248, 113, 113, 0.34); background: rgba(127, 29, 29, 0.28); } .drill-login__alert--success, .drill-login__alert--info { border-color: rgba(74, 222, 128, 0.24); background: rgba(20, 83, 45, 0.22); } .drill-login__form { display: flex; flex-direction: column; gap: 14px; } .drill-login__field { display: flex; flex-direction: column; gap: 6px; } .drill-login__field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .drill-login__field label, .drill-login__remember span, .drill-login__field-row a { font-size: 0.92rem; font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif; } .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 { width: 100%; border: 1px solid rgba(210, 161, 112, 0.14); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.025)), rgba(255, 255, 255, 0.02); color: var(--drill-text-primary); padding: 14px 16px; font: 500 0.95rem/1.25 "Inter Variable", "Inter", "Segoe UI", sans-serif; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .drill-login__field input::placeholder { color: var(--drill-text-muted); } .drill-login__field input:focus { border-color: rgba(210, 161, 112, 0.44); box-shadow: 0 0 0 4px rgba(185, 106, 51, 0.14), 0 12px 30px rgba(0, 0, 0, 0.16); background: rgba(255, 255, 255, 0.055); } .drill-login__remember { display: inline-flex; align-items: center; gap: 10px; color: var(--drill-text-secondary); } .drill-login__submit { margin-top: 4px; border: none; border-radius: 22px; padding: 15px 18px; font: 700 0.96rem/1.2 "Inter Variable", "Inter", "Segoe UI", sans-serif; font-weight: 600; letter-spacing: 0.03em; color: #1c1208; cursor: pointer; background: linear-gradient(135deg, #b96a33 0%, #d2a170 52%, #efd6b4 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 20px 36px rgba(185, 106, 51, 0.26); transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; } .drill-login__submit:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 26px 44px rgba(185, 106, 51, 0.34); filter: saturate(1.05); } .drill-login__submit-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .drill-login__footer { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; color: var(--drill-text-muted); font-size: 0.82rem; letter-spacing: 0.02em; font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif; } @media (max-height: 900px) { body.drill-login { overflow: hidden; } .drill-login__shell { gap: 16px; padding: 16px; height: 100vh; height: 100dvh; } .drill-login__brand, .drill-login__panel { border-radius: 28px; } .drill-login__brand { padding: 24px; gap: 14px; } .drill-login__brand-orbit--one { width: 180px; height: 180px; top: -72px; } .drill-login__brand-orbit--two { width: 320px; height: 320px; bottom: -180px; left: -96px; } .drill-login__brand h1 { font-size: clamp(2rem, 3.8vw, 3.8rem); } .drill-login__brand p, .drill-login__panel p, .drill-login__feature-grid p { font-size: 0.88rem; line-height: 1.45; } .drill-login__metrics div, .drill-login__feature-grid article { padding: 14px; } .drill-login__metrics strong { font-size: 1rem; } .drill-login__metrics span { font-size: 0.82rem; } .drill-login__feature-grid strong { font-size: 0.9rem; } .drill-login__panel { padding: 22px; } .drill-login__panel h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); } .drill-login__field input { padding: 13px 15px; } .drill-login__submit { padding: 14px 16px; } .drill-login__feature-grid article p:last-child { display: none; } } @media (max-height: 760px) { .drill-login__shell { height: 100vh; height: 100dvh; } .drill-login__brand-copy p { display: none; } .drill-login__metrics { display: none; } .drill-login__feature-grid article p { display: none; } .drill-login__metrics, .drill-login__feature-grid { gap: 10px; } .drill-login__metrics div, .drill-login__feature-grid article { padding: 12px; border-radius: 20px; } .drill-login__eyebrow { margin-bottom: 10px; } .drill-login__footer { margin-top: 12px; font-size: 0.76rem; } } @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; height: 100vh; height: 100dvh; } .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__brand-copy > p { display: none; } .drill-login__metrics, .drill-login__feature-grid { gap: 10px; } .drill-login__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .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__feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .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 (max-width: 1440px) and (max-height: 768px) { .drill-login__shell { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 12px; padding: 12px; height: 100vh; height: 100dvh; } .drill-login__brand, .drill-login__panel { border-radius: 22px; } .drill-login__brand { padding: 18px; gap: 10px; } .drill-login__brand-orbit, .drill-login__brand-grid, .drill-login__panel-glow { opacity: 0.45; } .drill-login__brand-orbit--two { width: 260px; height: 260px; bottom: -150px; left: -80px; } .drill-login__brand-mark { width: 56px; height: 56px; font-size: 1.4rem; } .drill-login__status-pill { min-height: 32px; padding: 6px 10px; font-size: 0.62rem; } .drill-login__eyebrow { margin-bottom: 6px; font-size: 0.64rem; } .drill-login__brand h1 { font-size: clamp(1.7rem, 2.8vw, 2.8rem); max-width: 11ch; } .drill-login__brand-copy > p, .drill-login__metrics, .drill-login__feature-grid article p { display: none; } .drill-login__feature-grid { gap: 8px; } .drill-login__feature-grid article { padding: 10px; border-radius: 16px; } .drill-login__feature-grid strong { font-size: 0.8rem; } .drill-login__panel { padding: 18px 16px; } .drill-login__panel-head { margin-bottom: 14px; } .drill-login__panel h2 { font-size: clamp(1.45rem, 2vw, 1.9rem); margin-bottom: 6px; } .drill-login__panel-head p { font-size: 0.8rem; line-height: 1.35; } .drill-login__alert { margin-bottom: 8px; padding: 9px 10px; border-radius: 14px; font-size: 0.8rem; } .drill-login__form { gap: 8px; } .drill-login__field label, .drill-login__remember span, .drill-login__field-row a { font-size: 0.8rem; } .drill-login__field input { padding: 10px 12px; border-radius: 14px; font-size: 0.84rem; } .drill-login__submit { padding: 11px 14px; border-radius: 16px; font-size: 0.84rem; } .drill-login__footer { margin-top: 8px; font-size: 0.68rem; } } @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; } @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; } .drill-login__brand { min-height: 420px; } .drill-login__metrics, .drill-login__feature-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .drill-login__shell { padding: 16px; } .drill-login__brand, .drill-login__panel { padding: 22px; border-radius: 26px; } .drill-login__field-row, .drill-login__brand-top, .drill-login__footer { flex-direction: column; align-items: flex-start; } .drill-login__status-pill { white-space: normal; } }