120 lines
2.1 KiB
CSS
120 lines
2.1 KiB
CSS
/*
|
|
* Custom Styles for Calc.io
|
|
* Palette:
|
|
* Primary: #6C63FF (Violet)
|
|
* Secondary: #4CC9F0 (Cyan)
|
|
* Background: #F8F9FA (Light Grey)
|
|
* Surface: #FFFFFF (White)
|
|
* Text: #212529 (Dark Grey)
|
|
*/
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #F8F9FA;
|
|
color: #212529;
|
|
}
|
|
|
|
.navbar {
|
|
transition: background-color 0.3s ease-in-out;
|
|
}
|
|
|
|
.navbar-brand {
|
|
color: #6C63FF !important;
|
|
}
|
|
|
|
.hero-section {
|
|
background: linear-gradient(45deg, rgba(108, 99, 255, 0.9), rgba(76, 201, 240, 0.9)), url('https://picsum.photos/seed/finance-hero/1600/900') no-repeat center center;
|
|
background-size: cover;
|
|
padding: 10rem 0;
|
|
margin-top: 56px; /* Offset for fixed navbar */
|
|
}
|
|
|
|
.calculator-widget {
|
|
background-color: #FFFFFF;
|
|
color: #212529;
|
|
border-radius: 0.75rem;
|
|
padding: 2.5rem;
|
|
margin-top: 2rem;
|
|
text-align: left;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.form-range {
|
|
--bs-primary: #6C63FF;
|
|
}
|
|
|
|
.form-range::-webkit-slider-thumb {
|
|
background-color: #6C63FF;
|
|
}
|
|
.form-range::-moz-range-thumb {
|
|
background-color: #6C63FF;
|
|
}
|
|
.form-range::-ms-thumb {
|
|
background-color: #6C63FF;
|
|
}
|
|
|
|
|
|
.results-panel {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--bs-border-radius);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.interest-rates {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: var(--bs-border-radius);
|
|
padding: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.interest-rates h6 {
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rates-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.rate-item {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.rate-name {
|
|
font-size: 0.85rem;
|
|
color: #f8f9fa;
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.rate-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.results-panel h3 {
|
|
color: #6C63FF;
|
|
}
|
|
|
|
section {
|
|
padding: 5rem 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.fw-bold {
|
|
font-weight: 600 !important;
|
|
}
|