:root { --color-bg: #dadada; --color-card: linear-gradient(135deg, #f0efef, #d4d4d4); --color-light-card: #ebebeb; --color-dark-card: #dbd9d9; --color-text: #222; --color-subtext: #4e4e4e; --color-title: #ffffff; --color-primary: #731d2d; --color-gold: #ddaf3f; --color-accent: var(--color-primary); --color-success: #27ae60; --color-danger: #e74c3c; --color-warning: #f39c12; --logo-image: url('../assets/images/logo-light.png'); --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --inset-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1); } [data-theme="dark"] { --color-bg: #121212; --color-card: linear-gradient(135deg, #383838, #1f1f1f); --color-light-card: #2c2c2c; --color-dark-card: #1f1f1f; --color-text: #f7f7f7; --color-subtext: #6f6f6f; --color-title: #ffffff; --color-accent: var(--color-primary); --color-danger: #e74c3c; --color-success: #27ae60; --color-warning: #f39c12; --shadow: 0 2px 8px rgba(0, 0, 0, 0.6); --color-primary: #b9890e; --color-gold: #731d2d; --inset-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); --svg-color: #f7f7f7; --logo-image: url('../assets/images/logo-dark.png'); } /* Layout: make footer stick to bottom without overlapping content */ html, body { height: 100%; background: #121212; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); margin: 0; } /* Transitions are enabled only after the page finishes loading to avoid a visible light<->dark animation during refresh. The script will add the `transitions` class to when it's safe to allow them. */ .transitions { transition: background 0.2s, color 0.2s; } /* container grows so footer will sit at bottom */ .container { max-width: 1000px; margin: 3rem auto; padding: 2rem; background: var(--color-card); border-radius: 16px; box-shadow: var(--shadow); min-width: 600px; } .containerHead { padding-bottom: 1rem; } h1, h2, h3 { font-weight: 600; color: var(--color-text); } button, input, select { font-family: inherit; font-size: 1rem; border: none; border-radius: 8px; padding: 0.6rem 1rem; box-shadow: var(--shadow); } button { background: var(--color-accent); color: white; cursor: pointer; } .transitions button { transition: background 0.2s; } .transitions button:hover { background: var(--color-gold); color: var(--color-primary); } .navbar { background: linear-gradient(90deg, var(--color-primary), var(--color-gold)); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; color: white; min-width: 600px; } .navbar h1 { font-size: 1.5rem; color: var(--color-title); margin: auto; margin-left: 25px; } .navbar a { text-decoration: none; color: white; margin-left: 1rem; font-weight: 500; } .navbar a:hover { text-decoration: underline; } .toggle { background: transparent; border: 1px solid white; color: white; padding: 0.4rem 0.4rem; border-radius: 8px; margin: 10px; } #newRequest { float: right; } .card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 20%, var(--color-card) 100%); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1rem; border-top: 3px solid rgba(255, 255, 255, 0.6); } .transitions .card { transition: background 0.3s, color 0.3s; } .footer { text-align: center; padding: 1rem; color: var(--color-subtext); font-size: 0.9rem; clear: both; float: bottom; } .center { text-align: center; } .availabilityTable { width: 100%; margin-top: 1rem; padding: 20px; align-items: center; vertical-align: middle; border-radius: 15px; background-color: var(--color-dark-card); box-shadow: var(--shadow); } td { padding: 0.5rem; text-align: center; vertical-align: middle; } .available { background-color: #155724; color: white; border-radius: 8px; padding: 0.3rem 0.6rem; cursor: pointer; width: min-content; vertical-align: middle; margin-left: auto; margin-right: auto; box-shadow: var(--shadow); } .notAvailable { background-color: #721c24; color: white; border-radius: 8px; padding: 0.3rem 0.6rem; cursor: not-allowed; width: fit-content; margin-left: auto; margin-right: auto; box-shadow: var(--shadow); } /* enable transitions only when body has the helper class */ .transitions .available, .transitions .notAvailable, .transitions button, .transitions select { transition: background 0.2s, color 0.2s; } /* Themed select styling (custom arrow + matching colors) */ select { background: var(--color-dark-card); color: var(--color-text); border: 1px solid rgba(0,0,0,0.08); padding: 0.6rem 2.5rem 0.6rem 1rem; /* room for custom arrow */ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; cursor: pointer; float: right; box-shadow: var(--inset-shadow); } svg { color: var(--svg-color); } /* Place a simple SVG arrow that inherits current color */ select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1rem; } select:focus { outline: none; } option { background: var(--color-light-card); color: var(--color-text); } /* Load Page Button */ .loader { display: flex; justify-content: center; align-items: center; gap: 0.4rem; height: 2rem; } .loader div { width: 0.6rem; height: 0.6rem; background-color: var(--color-accent); border-radius: 50%; animation: throb 1.2s infinite ease-in-out; } .loader div:nth-child(1) { animation-delay: 0s; } .loader div:nth-child(2) { animation-delay: 0.2s; } .loader div:nth-child(3) { animation-delay: 0.4s; } @keyframes throb { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } 40% { transform: scale(1.2); opacity: 1; } } .logo { content: var(--logo-image); height: 60px; }