diff --git a/sites/billableaua.de/index.html b/sites/billableaua.de/index.html index 0c50d53..6430cf7 100644 --- a/sites/billableaua.de/index.html +++ b/sites/billableaua.de/index.html @@ -157,6 +157,91 @@ font-weight: 300; } + /* Rechner */ + .rechner { + padding: 120px 0; + } + + .rechner h2 { + font-size: clamp(2.5rem, 7vw, 4rem); + font-weight: 900; + letter-spacing: -0.02em; + text-transform: uppercase; + margin-bottom: 48px; + } + + .rechner h2 .dot { color: var(--red); } + + .rechner-grid { + display: flex; + gap: 32px; + margin-bottom: 48px; + } + + .rechner-input { + flex: 1; + } + + .rechner-input label { + display: block; + font-size: 0.9rem; + color: var(--text-dim); + font-weight: 300; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 8px; + } + + .rechner-input input { + width: 100%; + background: transparent; + border: 1px solid var(--text-muted); + color: var(--text); + font-family: inherit; + font-size: 2.4rem; + font-weight: 700; + padding: 12px 16px; + text-align: center; + outline: none; + transition: border-color 0.3s; + -moz-appearance: textfield; + } + + .rechner-input input::-webkit-inner-spin-button, + .rechner-input input::-webkit-outer-spin-button { + -webkit-appearance: none; + } + + .rechner-input input:focus { + border-color: var(--red); + } + + .rechner-result { + font-size: clamp(1.3rem, 3vw, 1.8rem); + font-weight: 300; + color: var(--text-dim); + line-height: 2; + } + + .rechner-result .num { + color: var(--red); + font-weight: 700; + font-size: 1.15em; + } + + .rechner-result .verdict { + display: block; + margin-top: 24px; + font-size: clamp(1.5rem, 4vw, 2.2rem); + font-weight: 600; + color: var(--text); + } + + @media (max-width: 640px) { + .rechner { padding: 80px 0; } + .rechner-grid { flex-direction: column; gap: 24px; } + } + /* Silence */ .silence { padding: 160px 0; @@ -227,6 +312,25 @@
+