422 lines
8.5 KiB
CSS
422 lines
8.5 KiB
CSS
/* ===== CSS custom properties ===== */
|
|
:root {
|
|
--bg: #0d1117;
|
|
--bg-card: rgba(22, 30, 43, 0.85);
|
|
--bg-card-2: rgba(30, 40, 58, 0.7);
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--text: #e6edf3;
|
|
--text-muted: #8b949e;
|
|
--text-hint: #6e7681;
|
|
|
|
--buy: #f59e0b; /* amber */
|
|
--buy-glow: rgba(245, 158, 11, 0.18);
|
|
--buy-muted: rgba(245, 158, 11, 0.35);
|
|
|
|
--rent: #2dd4bf; /* teal */
|
|
--rent-glow: rgba(45, 212, 191, 0.18);
|
|
--rent-muted: rgba(45, 212, 191, 0.35);
|
|
|
|
--green: #3fb950;
|
|
--radius: 14px;
|
|
--font: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
/* ===== Reset & base ===== */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html { font-size: 16px; scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: var(--font);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== Header ===== */
|
|
header {
|
|
background: linear-gradient(135deg, #161b27 0%, #0d1117 100%);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 2.5rem 1.5rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.header-inner { max-width: 900px; margin: 0 auto; }
|
|
|
|
h1 {
|
|
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
background: linear-gradient(90deg, var(--buy) 0%, var(--rent) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: 0.4rem;
|
|
color: var(--text-muted);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
/* ===== Main layout ===== */
|
|
main {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1.25rem 4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* ===== Card ===== */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
/* ===== Shared inputs ===== */
|
|
.inputs-shared {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.25rem 2rem;
|
|
}
|
|
|
|
/* ===== Two-column inputs ===== */
|
|
.inputs-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.inputs-columns { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.col-header {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 0.6rem;
|
|
border-bottom: 2px solid;
|
|
}
|
|
|
|
.buy-header { color: var(--buy); border-color: var(--buy); }
|
|
.rent-header { color: var(--rent); border-color: var(--rent); }
|
|
|
|
/* ===== Input group ===== */
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
margin-bottom: 1.1rem;
|
|
}
|
|
|
|
.input-group:last-child { margin-bottom: 0; }
|
|
|
|
label {
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 0.72rem;
|
|
color: var(--text-hint);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ===== Slider row ===== */
|
|
.slider-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.slider-row input[type="range"] {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ===== Number + unit ===== */
|
|
.num-unit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.num-unit input[type="number"] {
|
|
width: 72px;
|
|
padding: 0.3rem 0.5rem;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid var(--border);
|
|
border-radius: 7px;
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 0.9rem;
|
|
text-align: right;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.num-unit input[type="number"]:focus {
|
|
outline: none;
|
|
border-color: rgba(255,255,255,0.25);
|
|
}
|
|
|
|
.unit {
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ===== Euro prefix input ===== */
|
|
.euro-input {
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid var(--border);
|
|
border-radius: 7px;
|
|
padding: 0.3rem 0.5rem;
|
|
width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.euro-input input[type="number"] {
|
|
width: 110px;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.euro-input input[type="number"]:focus { outline: none; }
|
|
|
|
.unit.prefix { color: var(--text-muted); }
|
|
|
|
/* ===== Range slider styling ===== */
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.12);
|
|
border-radius: 99px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--text);
|
|
border: 2px solid var(--bg);
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 16px; height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--text);
|
|
border: 2px solid var(--bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ===== Hide number spinners ===== */
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
|
|
input[type="number"] { -moz-appearance: textfield; }
|
|
|
|
/* ===== Info box ===== */
|
|
.info-box {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px dashed var(--border);
|
|
border-radius: 10px;
|
|
padding: 0.9rem 1rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-hint);
|
|
line-height: 1.6;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ===== Results ===== */
|
|
.results { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
|
|
.result-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.result-cards { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.result-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.25rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
transition: box-shadow 0.2s;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.buy-card { border-top: 3px solid var(--buy); }
|
|
.rent-card { border-top: 3px solid var(--rent); }
|
|
.breakeven-card { border-top: 3px solid var(--text-hint); }
|
|
|
|
.result-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.result-value {
|
|
font-size: 1.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.buy-card .result-value { color: var(--buy); }
|
|
.rent-card .result-value { color: var(--rent); }
|
|
|
|
.result-sub {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.winner-badge {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 0.15rem 0.6rem;
|
|
border-radius: 99px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.winner-buy { background: var(--buy-muted); color: var(--buy); }
|
|
.winner-rent { background: var(--rent-muted); color: var(--rent); }
|
|
|
|
.monthly-payment-note {
|
|
font-size: 0.83rem;
|
|
color: var(--text-hint);
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
/* ===== Charts ===== */
|
|
.chart-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.chart-legend {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.legend-dot {
|
|
display: inline-block;
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.buy-dot { background: var(--buy); }
|
|
.rent-dot { background: var(--rent); }
|
|
|
|
.chart-wrap {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
/* ===== Table ===== */
|
|
.table-section { overflow: hidden; }
|
|
|
|
.table-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-family: var(--font);
|
|
font-size: 0.88rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.table-toggle:hover { color: var(--text); }
|
|
|
|
.toggle-icon {
|
|
display: inline-block;
|
|
transition: transform 0.2s;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.table-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); }
|
|
|
|
.table-wrap {
|
|
margin-top: 1.25rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.6rem 1rem;
|
|
text-align: right;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
th:first-child, td:first-child { text-align: left; }
|
|
|
|
th {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
tbody tr:hover { background: rgba(255,255,255,0.03); }
|
|
|
|
tr.winner-row td { font-weight: 600; }
|
|
|
|
/* ===== Footer ===== */
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem 1rem;
|
|
color: var(--text-hint);
|
|
font-size: 0.8rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|