/* === 🌊 Hydration Tracker – Polished Responsive Theme === */
/* === Base Variables (Light Mode) === */
:root {
–primary: #0077b6;
–accent: #48cae4;
–bg-card: rgba(255, 255, 255, 0.85);
–bg-input: #ffffff;
–text: #03045e;
–text-light: #333;
–shadow: rgba(0, 0, 0, 0.15);
–gradient-morning: linear-gradient(135deg, #a8edea, #fed6e3);
–gradient-day: linear-gradient(135deg, #89f7fe, #66a6ff);
–gradient-evening: linear-gradient(135deg, #f6d365, #fda085);
–gradient-night: linear-gradient(135deg, #141E30, #243B55);
}
/* === Dark Mode Variables === */
[data-theme=”dark”] {
–primary: #90e0ef;
–accent: #00b4d8;
–bg-card: rgba(25, 25, 35, 0.9);
–bg-input: #1e293b;
–text: #e0f7fa;
–text-light: #cbd5e1;
–shadow: rgba(0, 0, 0, 0.6);
–gradient-morning: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
–gradient-day: linear-gradient(135deg, #243b55, #141e30);
–gradient-evening: linear-gradient(135deg, #42275a, #734b6d);
–gradient-night: linear-gradient(135deg, #000000, #232526);
}
/* === Global Reset === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
transition: background 0.6s ease, color 0.3s ease;
}
/* === App Wrapper === */
.app {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
transition: background 1s ease-in-out;
}
/* === Container === */
.container {
background: var(–bg-card);
backdrop-filter: blur(8px);
border-radius: 18px;
box-shadow: 0 10px 25px var(–shadow);
padding: 35px 45px;
max-width: 480px;
width: 100%;
text-align: center;
animation: fadeIn 0.8s ease-in-out;
}
/* === Typography === */
h1 {
color: var(–primary);
font-size: 1.9rem;
margin-bottom: 0.6em;
}
h2 {
color: var(–text);
font-size: 1.4rem;
margin-bottom: 0.4em;
}
h3 {
color: var(–text);
margin-top: 1em;
}
p,
label {
color: var(–text-light);
}
/* === Clock === */
.clock {
font-size: 1rem;
color: var(–text);
margin-bottom: 1.2em;
font-weight: 500;
}
/* === Input Section === */
.input-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
margin-bottom: 25px;
}
.input-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.input-group label {
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 4px;
}
.input-group input,
.input-group select {
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #ccc;
background-color: var(–bg-input);
color: var(–text);
font-size: 0.95rem;
transition: border 0.2s ease, box-shadow 0.2s ease;
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border: 1px solid var(–accent);
box-shadow: 0 0 8px rgba(0, 180, 216, 0.25);
}
/* === Buttons === */
.calculate-btn,
.unit-btn,
.theme-toggle {
background-color: var(–primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
padding: 10px 16px;
margin-top: 16px;
transition: all 0.3s ease;
}
.calculate-btn:hover,
.unit-btn:hover,
.theme-toggle:hover {
background-color: var(–accent);
transform: scale(1.05);
}
.unit-btn {
background-color: var(–accent);
font-size: 0.9rem;
margin-top: 10px;
}
/* === Theme Toggle Button === */
.theme-toggle {
background: linear-gradient(90deg, var(–primary), var(–accent));
margin-top: 1rem;
}
/* === Weather Section === */
.weather-section {
background-color: rgba(240, 248, 255, 0.6);
border-radius: 12px;
padding: 15px;
margin-bottom: 25px;
box-shadow: inset 0 0 10px rgba(173, 216, 230, 0.3);
}
.weather-section p {
margin: 5px 0;
}
/* === Results Section === */
.results-section {
background-color: rgba(236, 252, 255, 0.7);
border-radius: 12px;
padding: 20px;
margin-top: 20px;
text-align: left;
box-shadow: 0 4px 12px rgba(0, 119, 182, 0.1);
}
.results-section p {
font-size: 1rem;
color: var(–text);
margin: 4px 0;
}
.results-section ul {
margin-top: 10px;
padding-left: 18px;
}
.results-section li {
margin-bottom: 6px;
}
/* === Responsive === */
@media (max-width: 540px) {
.container {
padding: 25px 25px;
}
.input-section {
grid-template-columns: 1fr;
}
.calculate-btn {
width: 100%;
}
}
/* === Animations === */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}