border: 1px solid #e5e7eb; /* Subtle border */ margin: 0 auto; /* Essential for centering the container horizontally within its parent */ font-family: 'Assistant', sans-serif; /* Changed font family to match website */ } /* Styling for main heading */ .container h1 { font-size: 2.25rem; /* Larger font for main title */ font-weight: 700; /* Bold font */ text-align: center; color: #374151; /* Dark gray text */ margin-bottom: 24px; } /* Styling for section sub-headings */ .container h2 { font-size: 1.5rem; /* Larger font for section titles on mobile */ font-weight: 600; /* Semi-bold font */ color: #4b5563; /* Medium dark gray text */ margin-bottom: 16px; } @media (min-width: 768px) { /* Medium screens and up */ .container h2 { font-size: 1.7rem; /* Slightly larger on desktop for distinction */ } } /* Styling for input groups (label and input field) */ .input-group label { font-weight: 600; color: #374151; margin-bottom: 8px; display: block; /* Ensure label is on its own line */ font-size: 1.4rem; /* Adjusted font size for better match */ } .input-group input[type="number"], .input-group select { /* Apply similar styling to select dropdown */ width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; /* Light gray border */ border-radius: 8px; /* Rounded input fields */ font-size: 1.4rem; /* Adjusted font size for better match */ color: #1f2937; /* Dark text for input values */ background-color: #ffffff; box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle inner shadow */ transition: border-color 0.2s, box-shadow 0.2s; /* Smooth transition for focus effect */ } /* Focus state for input fields and select */ .input-group input[type="number"]:focus, .input-group select:focus { outline: none; /* Remove default outline */ border-color: #3b82f6; /* Blue border on focus */ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* Blue glow on focus */ } /* Spacing between sections */ .space-y-6 > div { border-bottom: 1px solid #e5e7eb; /* Separator line between sections */ padding-bottom: 24px; margin-bottom: 24px; } /* Remove separator and bottom margin for the last section */ .space-y-6 > div:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } /* Responsive grid for inputs */ .grid-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; } @media (min-width: 768px) { /* Medium screens and up */ .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); /* Two columns on larger screens */ } } @media (min-width: 768px) { /* Adjust grid for three columns on wider screens */ .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Button styling */ .calculate-btn { background-color: #152FA3; /* Dark blue button */ color: white; font-weight: 700; padding: 1rem 1.5rem; /* Generous padding for good touch target */ border-radius: 0.75rem; /* Rounded corners */ transition: background-color 0.2s, transform 0.1s; /* Smooth hover/active effects */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Subtle shadow */ width: 100%; /* Full width button */ cursor: pointer; margin-top: 32px; } .calculate-btn:hover { background-color: #102580; /* Darker blue on hover */ transform: translateY(-2px); /* Slight lift effect */ } .calculate-btn:active { transform: translateY(0); /* Press down effect */ box-shadow: none; /* Remove shadow on press */ } /* Result display box styling */ .result-box { background-color: #838386; /* Medium gray background */ border: 1px solid #6b7280; /* Adjusted border to suit new background */ color: white; /* White text */ padding: 1.5rem; border-radius: 0.75rem; margin-top: 1.5rem; font-size: 1.5rem; /* Adjusted font size to match website's body text */ font-weight: 500; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .result-box strong { color: white; /* White for emphasized text in results */ } /* Hidden state for results box */ .result-box.hidden { display: none; } /* Error message styling */ .error-message { color: #dc2626; /* Red text for errors */ font-weight: 600; margin-top: 1rem; text-align: center; } /* Hidden state for error message */ .error-message.hidden { display: none; } /* Disclaimer styling */ .disclaimer-text { font-size: 1.2rem; /* Smaller font for disclaimer */ color: #6b7280; /* Gray text for a subtle look */ text-align: center; margin-top: 24px; /* Space above the disclaimer */ }