/* Fonts: Make sure you included the Google Fonts link in the HTML or use your own preferred font. */ /* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Let html/body stretch full viewport height so we can center the .main-content properly */ html, body { height: 100%; } body { font-family: "Open Sans", sans-serif; /* A warm background color */ background-color: #fccc7e; display: flex; flex-direction: column; /* So footer is pushed to the bottom */ } /* MAIN CONTENT Flex: 1 => Takes remaining vertical space Center .login-container */ .main-content { flex: 1; display: flex; align-items: center; /* Vertically center */ justify-content: center; /* Horizontally center */ padding: 1rem; } /* Footer */ .footer { text-align: center; padding: 1rem 0; font-size: 0.9rem; color: #333; /* Remove or replace background so it blends with the page */ background: none; /* or background-color: #fccc7e; */ } /* LOGIN CONTAINER "Card" with slight roundness and shadow */ .login-container { display: flex; flex-direction: row; width: 900px; /* Adjust as needed */ max-width: 100%; background-color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); border-radius: 8px; overflow: hidden; /* Ensures no overlap on corner radius */ } /* Left Panel: Pattern + Logo */ .left-panel { flex: 1; background: url("/images/pattern.png") repeat; display: flex; align-items: center; justify-content: center; position: relative; } /* Semi-transparent overlay to unify pattern with brand color */ .overlay { background-color: rgb(247 183 22); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .restro-logo { max-width: 200px; z-index: 2; /* Above overlay */ } /* Right Panel: White background form area */ .right-panel { flex: 1.2; background-color: #ffffff; padding: 2rem; display: flex; flex-direction: column; justify-content: center; } .right-panel h1 { font-size: 1.5rem; margin-bottom: 0.5rem; text-align: left; color: #333; } /* Simple horizontal divider */ .divider { border: none; border-top: 1px solid #333; margin: 0.5rem 0 1.5rem; } /* Form styling */ .login-form { display: flex; flex-direction: column; } /* Input styling */ .input-group { margin-bottom: 1rem; } .input-group label { display: block; margin-bottom: 0.4rem; font-weight: 600; color: #333; } .input-group input { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 6px; font-size: 0.9rem; outline: none; transition: border 0.3s; } .input-group input:focus { border: 1px solid #f9b233; /* Highlight with brand color */ } /* Login Button */ .login-btn { background-color: #000; color: #fff; padding: 0.8rem; border: none; border-radius: 6px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; } .login-btn:hover { background-color: #333; } /* Responsive: stack panels on smaller screens */ @media (max-width: 768px) { .login-container { flex-direction: column; width: 90%; margin: 2rem auto; } .left-panel, .right-panel { flex: 1; width: 100%; } .restro-logo { max-width: 150px; } }