@font-face { font-family: 'Helvetica Neue'; src: url('/fonts/HelveticaNeue-Roman.woff2') format('woff2'), url('/fonts/HelveticaNeue-Roman.woff') format('woff'); font-weight: 400; font-style: normal; } :root { /* Fonts */ --primary-font: 'Fredoka', sans-serif; --secondary-font: 'Helvetica Neue',sans-serif; --body-font: 'Inter', sans-serif; /* Color Scheme */ --blue:#0780B5; --dark: #061820; --dark-grey: #8C9FA7; --light-blue:#96D2ED; --light: #F4FBFE; --white:#fefefe; /* Dark Theme (Default) */ --bg-color: var(--dark); --login-bg: var(--dark); --primary-color: var(--blue); --primary-color-hover: var(--light-blue); --text-color: var(--white); --border-color: rgba(115, 210, 237, 0.2); --input-bg: rgba(244, 251, 254, 0.2); --input-border-focus: var(--primary-color); --error-color: #e57373; --border-radius-md: 8px; } /* Light Theme applied via class on tag */ html.light-theme { --bg-color: var(--white); --login-bg: var(--light); --text-color: var(--dark); --text-color-light: var(--dark-grey); --border-color: rgba(140, 159, 167, 0.2); --input-bg: var(--light); --error-color: #ef4444; } /* --- Base Typography --- */ h1{ font-family: var(--primary-font); font-weight: 500; font-size: 50px; letter-spacing: -2%; } p{ font-family: var(--body-font); font-weight: 400; font-size: 16px; line-height: 140%; } .smaller-text{ font-family: var(--body-font); font-weight: 500; font-size: 14px; letter-spacing: 3%; } .pre-title{ font-family: var(--secondary-font); font-weight: 400; font-size: 16px; letter-spacing: 3%; } /* --- Global Styles --- */ html, body { height: 100%; margin: 0; padding: 0; font-family: var(--body-font); background-color: var(--bg-color); color: var(--text-color); overflow: hidden; } .hidden { display: none !important; } /* --- Login View --- */ #login-view { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh; padding: 16px; background-color: var(--login-color); } #login-header{ display: flex; justify-content: center; align-items: center; } #login-header h1 { color:var(--text-color); } #login-form { padding: 40px; width: 100%; max-width: 450px; box-sizing: border-box; } #login-form .input-group { margin-bottom: 30px; } #login-form label { display: block; color: var(--text-color); text-transform: uppercase; margin-bottom: 10px; } #login-form input { width: 100%; padding: 15px 20px; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); background-color: var(--input-bg); color: var(--text-color); font-weight: 500; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } #login-form input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 2px rgba(32, 159, 213, 0.3); } #login-form button { width: 100%; padding: 15px 20px; border: none; border-radius: var(--border-radius-md); background-color: var(--blue); color: var(--white); cursor: pointer; transition: background-color 0.2s; font-family: var(--secondary-font); font-weight: 300; font-size: 16px; letter-spacing: 4%; } #login-form button:hover { background-color: var(--primary-color-hover); } #login-error { color: var(--error-color); text-align: center; min-height: 20px; margin-top: 16px; }