diff --git a/index.html b/index.html index 859ed47..52cd555 100644 --- a/index.html +++ b/index.html @@ -868,6 +868,8 @@

Kerro tarpeistasi, niin teemme sinulle tarjouksen

+ +
Yhteystiedot
@@ -884,15 +886,122 @@
+ + +
Laitepaikat
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
Yhteysnopeus
- - + + +
+
+ + +
+ + +
Site-to-Site VPN
+
+ + +
+ + +
Lisäpalvelut
+
+ + + + +
+ + +
Lisätiedot
+
+ +
- +
diff --git a/style.css b/style.css index 4af89a2..09d8e18 100644 --- a/style.css +++ b/style.css @@ -747,6 +747,102 @@ a:hover { min-height: 120px; } +.form-group select { + background: var(--color-white); + border: 1px solid var(--color-border); + border-radius: var(--radius); + padding: 10px 14px; + font-size: 0.95rem; + font-family: inherit; + color: var(--color-text); + transition: border-color 0.2s; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + padding-right: 36px; +} + +.form-group select:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.1); +} + +.form-section-title { + grid-column: 1 / -1; + font-size: 1.05rem; + font-weight: 700; + color: var(--color-text-heading); + padding-top: 20px; + margin-bottom: -4px; + border-top: 1px solid var(--color-border); +} + +.form-section-title:first-child { + border-top: none; + padding-top: 0; +} + +.checkbox-group { + grid-column: 1 / -1; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.checkbox-label { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.9rem; + color: var(--color-text); + cursor: pointer; + padding: 8px 14px; + border: 1px solid var(--color-border); + border-radius: var(--radius); + transition: border-color 0.2s, background 0.2s; + user-select: none; +} + +.checkbox-label:hover { + border-color: var(--color-primary-light); + background: rgba(232, 93, 74, 0.03); +} + +.checkbox-label:has(input:checked) { + border-color: var(--color-primary); + background: rgba(232, 93, 74, 0.06); +} + +.checkbox-label input[type="checkbox"] { + accent-color: var(--color-primary); + width: 16px; + height: 16px; + cursor: pointer; +} + +.unit-row { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 1fr 100px; + gap: 12px; + align-items: end; +} + +.unit-row .form-group { + margin: 0; +} + +.unit-row input[type="number"] { + text-align: center; + -moz-appearance: textfield; +} + +.unit-row input[type="number"]::-webkit-inner-spin-button { + opacity: 1; +} + .btn-submit { grid-column: 1 / -1; margin-top: 4px;