/* ------- globals ------- */ @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } html, body { margin: 0px; height: 100%; } /* a blue color as a generic focus style */ button:focus-visible { outline: 2px solid #4a90e2 !important; outline: -webkit-focus-ring-color auto 5px !important; } a { text-decoration: none; } body { font-family: "Poppins", "Roboto", sans-serif; line-height: 1.6; color: var(--color-foreground-high); background-color: var(--color-background-mode); } img { max-width: 100%; height: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------- styleguide ------- */ :root { --textsecondary: rgba(90, 90, 93, 1); --heading-font-family: "Poppins", Helvetica; --heading-font-weight: 600; --heading-font-size: 28px; --heading-letter-spacing: 0px; --heading-line-height: 100%; --heading-font-style: normal; --color-foreground-high: var(--primitives-colors-gray-light-mode-900); --color-background-mode: var(--primitives-colors-base-white); --primitives-colors-gray-light-mode-900: rgba(16, 24, 40, 1); --primitives-colors-base-white: rgba(255, 255, 255, 1); --primitives-colors-gray-iron-50: rgba(250, 250, 250, 1); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-color-mode="light-mode"] { --color-foreground-high: var(--primitives-colors-gray-light-mode-900); --color-background-mode: var(--primitives-colors-base-white); } [data-color-mode="dark-mode"] { --color-foreground-high: var(--primitives-colors-gray-iron-50); --color-background-mode: rgba(19, 19, 22, 0.8); } /* ------- style ------- */ .login { background-color: #f4d6b7; display: flex; flex-direction: row; justify-content: center; width: 100vw; height: 100vh; overflow: hidden; min-height: 550px; } .login .overlap-group-wrapper { background-color: #f4d6b7; width: 100%; height: 100%; } .login .overlap-group { position: relative; height: 100%; } .login .logo { position: absolute; top: 3%; left: 3%; } .login .eustylelab-logo-yoko { position: relative; width: 364px; height: 70px; object-fit: cover; } .login .bg { position: absolute; width: 1440px; height: 1024px; top: 0; left: 0; } .login .ellipse-bottom-left { top: 830px; left: -100px; filter: blur(190px); position: absolute; width: 379px; height: 379px; background-color: #f2aa34; border-radius: 189.5px; } .login .ellipse-top-right { top: 0; left: 1359px; filter: blur(250px); position: absolute; width: 379px; height: 379px; background-color: #f2aa34; border-radius: 189.5px; } .login .form { display: flex; flex-direction: column; width: 540px; align-items: center; justify-content: center; gap: 32px; padding: 48px 72px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); background-color: var(--color-background-mode); border-radius: 20px; } .login .title { position: relative; align-self: stretch; margin-top: -1px; font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); color: var(--color-foreground-high); font-size: var(--heading-font-size); text-align: center; letter-spacing: var(--heading-letter-spacing); line-height: var(--heading-line-height); font-style: var(--heading-font-style); } .login .login-btn-google { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 3px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-radius: 8px; } .login .text { font-family: "Roboto-Regular", Helvetica; color: #000000; font-size: 18px; line-height: normal; position: relative; width: fit-content; font-weight: 400; letter-spacing: 0; white-space: nowrap; } /* Inject original CSS here */ .login .welcome-message, .login .text-message { margin-top: -1px; font-family: "Poppins-Regular", Helvetica; color: var(--textsecondary); font-size: 16px; line-height: 16px; } .login .text-message { color: #444; font-size: 14px; margin-top: -10px; } .login .official-button { display: flex; height: 46.8px; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; position: relative; align-self: stretch; width: 100%; background-color: #ffffff; border-radius: 8px; border: 1px solid #747775; cursor: pointer; transition: background-color 0.3s ease; } .login .official-button:hover { background-color: #f5f5f5; } .login .official-button:focus { outline: 2px solid #4a90e2; border: none; } .login .text-message-link { color: #4a90e2; font-weight: 600; } .login .text-message-link:hover { text-decoration: underline; } @media (max-width: 768px) { .login .overlap-group-wrapper { width: 100%; height: auto; } .login .form { width: 90%; } .login .title { font-size: 24px; } }