diff --git a/index.html b/index.html index c85b3e5..de972da 100644 --- a/index.html +++ b/index.html @@ -25,8 +25,8 @@ +
+

Colocation (kolokointipalvelu) tarkoittaa, että sijoitat oman palvelimesi tai muun laitteesi meidän konesaliimme. Me tarjoamme sähkön, jäähdytyksen, verkkoyhteyden ja fyysisen turvallisuuden — sinä hallitset itse laitettasi ja sen ohjelmistoja. Tämä on kustannustehokas tapa saada konesalitason infrastruktuuri ilman omaa laitetilaa.

+
+ +
+ +
+

Kyllä. Konesali on käytettävissäsi 24/7 ympäri vuoden. Toimistoaikana (ma–pe 8–17) voit tulla suoraan, muina aikoina ilmoita tulostasi etukäteen. Pääsy tiloihin tapahtuu kulunvalvontajärjestelmän kautta henkilökohtaisella kulkukortilla ja PIN-koodilla.

+
+
+
+ +
+

Voit tuoda laitteesi itse tai lähettää ne meille. Autamme tarvittaessa laitteiden asennuksessa kaappiin (racking), kaapeloinnissa ja verkkoyhteyden konfiguroinnissa. Sovitaan yhdessä toimitus- ja asennusaikataulu.

+
+
+
+ +
+

SLA:mme takaa 99,9% käytettävyyden sähkön ja verkkoyhteyden osalta. Jos käytettävyys jää alle sovitun tason, hyvitämme vastaavan osuuden kuukausimaksusta. SLA kattaa myös vasteajat vikatilanteisiin ja suunnitellut huoltokatkot ilmoitetaan aina etukäteen.

+
+
+
+ +
+

Laskutus tapahtuu kuukausittain. Laitepaikka ja peruspalvelut laskutetaan kiinteällä kuukausihinnalla. Sähkönkulutus mitataan ja laskutetaan erikseen toteutuneen kulutuksen mukaan. Sopimuksen minimikesto on 1 kuukausi, joten et sitoudu pitkiin sopimuskausiin.

+
+
+
+ +
+

Kyllä, palvelu skaalautuu tarpeidesi mukaan. Voit aloittaa yhdellä 1U-laitepaikalla ja laajentaa myöhemmin useampaan laitepaikkaan tai kokokaappiin. Myös yhteysnopeus on päivitettävissä 1 Gbit/s:sta aina 100 Gbit/s asti.

+
+
+ + + + -
+

Ota yhteyttä

Kerro tarpeistasi, niin teemme sinulle tarjouksen

diff --git a/script.js b/script.js index 2480463..0f6fabc 100644 --- a/script.js +++ b/script.js @@ -43,11 +43,20 @@ document.addEventListener('DOMContentLoaded', () => { }, observerOptions); // Add fade-in to sections - document.querySelectorAll('.service-card, .feature, .pricing-card, .contact-form, .contact-info').forEach(el => { + document.querySelectorAll('.service-card, .feature, .pricing-card, .faq-item, .contact-form, .contact-info').forEach(el => { el.classList.add('fade-in'); observer.observe(el); }); + // === FAQ toggle === + document.querySelectorAll('.faq-question').forEach(btn => { + btn.addEventListener('click', () => { + const expanded = btn.getAttribute('aria-expanded') === 'true'; + btn.setAttribute('aria-expanded', !expanded); + btn.nextElementSibling.classList.toggle('open'); + }); + }); + // === Contact form === const form = document.getElementById('contact-form'); const formStatus = document.getElementById('form-status'); diff --git a/style.css b/style.css index f82f416..72f098c 100644 --- a/style.css +++ b/style.css @@ -996,6 +996,71 @@ a:hover { } } +/* === FAQ === */ +.faq-list { + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 12px; +} + +.faq-item { + background: var(--color-bg-card); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + overflow: hidden; + transition: border-color var(--transition); +} + +.faq-item:hover { + border-color: var(--color-primary); +} + +.faq-question { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; + background: none; + border: none; + color: var(--color-text-heading); + font-size: 1.05rem; + font-weight: 600; + font-family: var(--font-family); + cursor: pointer; + text-align: left; + gap: 16px; +} + +.faq-question svg { + flex-shrink: 0; + color: var(--color-text-muted); + transition: transform var(--transition); +} + +.faq-question[aria-expanded="true"] svg { + transform: rotate(180deg); +} + +.faq-answer { + max-height: 0; + overflow: hidden; + transition: max-height 0.35s ease, padding 0.35s ease; +} + +.faq-answer.open { + max-height: 300px; +} + +.faq-answer p { + padding: 0 24px 20px; + color: var(--color-text-muted); + font-size: 0.95rem; + line-height: 1.7; +} + /* === Animations === */ .fade-in { opacity: 0;