.s4u-login{ position:relative; min-height:100vh; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:96px 24px; background:var(--ink); } .s4u-login__bg{ position:absolute; inset:0; z-index:0; background: radial-gradient(95% 75% at 80% 12%, rgba(82,90,116,0.30) 0%, rgba(20,20,30,0) 56%), radial-gradient(75% 65% at 8% 92%, rgba(54,46,68,0.22) 0%, rgba(10,10,14,0) 52%), linear-gradient(135deg, #16161f 0%, #0c0c12 50%, #070709 100%); } .s4u-login__bg::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(135% 105% at 50% 22%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.55) 100%); } .s4u-login__top{ position:absolute; top:0; left:0; right:0; z-index:3; padding:28px 56px; display:flex; align-items:center; justify-content:space-between; } .s4u-wordmark{ display:flex; align-items:center; gap:10px; } .s4u-wordmark img{ width:40px; height:auto; } .s4u-wordmark .mark{ font-size:22px; font-weight:500; letter-spacing:-0.01em; color:#e9c878; background:linear-gradient(180deg, #f7e6ad 0%, #e9c878 38%, #cda154 70%, #b08a3c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .s4u-login__top .top-link{ font-size:13px; color:var(--t-secondary); } .s4u-login__top .top-link a{ color:var(--accent); border-bottom:1px solid rgba(212,175,107,0.5); padding-bottom:1px; } .s4u-login__top .top-link a:hover{ border-bottom-color:var(--accent); } .s4u-card{ position:relative; z-index:3; width:420px; max-width:100%; padding:52px 48px; background:rgba(14,14,18,0.62); -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); border:1px solid var(--hairline); border-radius:4px; box-shadow:0 30px 80px -40px rgba(0,0,0,0.8); } .s4u-card .eyebrow{ color:var(--t-muted); margin-bottom:18px; } .s4u-card h1{ font-size:34px; font-weight:400; line-height:1.05; margin:0 0 8px; } .s4u-card .lead{ font-size:13.5px; color:var(--t-secondary); margin:0 0 32px; line-height:1.5; } .s4u .field + .field{ margin-top:22px; } .s4u-field-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; } .s4u-field-top a{ font-size:12px; color:var(--t-secondary); } .s4u-field-top a:hover{ color:#fff; } .s4u-remember{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:13px; color:var(--t-secondary); cursor:pointer; } .s4u-remember input{ width:14px; height:14px; accent-color:var(--accent); } .s4u-card .btn-primary{ margin-top:28px; } .s4u-promo{ margin:0 0 24px; padding:14px 16px; border-radius:4px; background:rgba(255,255,255,0.04); border:1px solid var(--hairline); border-left:2px solid var(--accent); font-size:13px; line-height:1.5; color:var(--t-secondary); cursor:pointer; } .s4u-promo b{ color:#fff; font-weight:600; } .s4u-card__alt{ margin-top:22px; font-size:13px; color:var(--t-secondary); } .s4u-card__alt a{ color:var(--accent); border-bottom:1px solid rgba(212,175,107,0.45); padding-bottom:1px; } .s4u-card__alt a:hover{ border-bottom-color:var(--accent); } .s4u-note{ margin-top:14px; font-size:12.5px; color:var(--t-tertiary); line-height:1.5; } .s4u-card .validation-summary-errors{ margin:0 0 16px; } .s4u-progress{ height:2px; width:100%; overflow:hidden; margin:0 0 18px; background:rgba(255,255,255,0.08); } .s4u-progress .bar{ height:100%; width:40%; background:var(--accent); animation:s4u-indeterminate 1.1s infinite ease-in-out; } @keyframes s4u-indeterminate{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } } .s4u-login__footer{ position:absolute; bottom:24px; right:56px; z-index:3; font-size:11.5px; color:var(--t-tertiary); letter-spacing:0.04em; } @media (max-width:640px){ .s4u-login{ padding:88px 18px 64px; align-items:flex-start; } .s4u-login__top{ padding:20px; } .s4u-card{ width:100%; max-width:420px; padding:40px 28px; } .s4u-login__footer{ left:0; right:0; bottom:16px; text-align:center; } } @media (max-width:380px){ .s4u-card{ padding:32px 20px; } }