:root { --forest: #126c43; --ink: #17342a; --paper: #f8f7f1; --sun: #e5a43b; --line: #d9ddd2; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "DM Sans", sans-serif; background: var(--paper); } .login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); } .brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 12%; background: var(--forest); color: white; } .brand-panel::after { content: ""; position: absolute; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; bottom: -370px; right: -170px; } .brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .08em; } .brand img { width: 30px; height: 30px; } .eyebrow { margin: 0 0 10px; color: var(--sun); font-size: 12px; font-weight: 700; letter-spacing: .14em; } h1, h2 { margin: 0; font-family: "Playfair Display", serif; font-weight: 600; letter-spacing: 0; } h1 { max-width: 570px; font-size: 50px; line-height: 1.16; } .brand-note { margin: 0; position: relative; z-index: 1; color: #dce9dd; } .form-panel { display: grid; place-items: center; padding: 40px; background: white; } form { width: min(100%, 390px); } form .eyebrow { color: var(--forest); } h2 { font-size: 37px; margin-bottom: 32px; } label { display: grid; gap: 8px; margin: 18px 0; font-size: 14px; font-weight: 600; } input { width: 100%; border: 1px solid var(--line); padding: 13px; color: var(--ink); font: inherit; } input:focus { outline: 2px solid #8acfa7; outline-offset: 1px; border-color: var(--forest); } button { width: 100%; cursor: pointer; margin-top: 10px; border: 0; padding: 14px; color: white; background: var(--forest); font: inherit; font-weight: 700; } button:disabled { opacity: .7; cursor: wait; } .form-error { margin: 14px 0 0; color: #a6332a; font-size: 14px; line-height: 1.45; } @media (max-width: 760px) { .login-layout { grid-template-columns: 1fr; } .brand-panel { min-height: 310px; padding: 32px 28px; } h1 { font-size: 36px; } .form-panel { padding: 48px 28px; } }