diff --git a/index.html b/index.html index 36d0c90..78a182c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Cuitunet – Nopeinta kaistaa verkkoon - + @@ -12,111 +12,144 @@
-
- +
-
-
-

Nopeat yhteydet avaimet käteen ‑periaatteella

-

Cuitunet on uudenaikainen teleoperaattori, jonka tehtävänä on tuoda vähintään gigabitin nopeudet yrityksille ja taloyhtiöille. Huippunopeuden ansiosta voit nauttia pätkimättömästä etäyhteyksistä ja ‑palavereista, videoiden toistosta ja tiedostojen siirroista.

+
+
Turkulainen valokuituoperaattori
+

Symmetristä valokuitua
jopa 100 Gbps

+

Rakennamme nopeimmat ja luotettavimmat yhteydet yrityksille, taloyhtiöille ja konesaleihin. Ei kompromisseja nopeuden tai laadun suhteen.

+
Tee saatavuuskysely + Tutustu palveluihin
-
- Nopeat valokuituyhteydet +
+
+ 100 Gbps + Maksiminopeus +
+
+ 100% + Valokuitua +
+
+ Symmetrinen + Lataus = lähetys +
+
- - -
-
01
-
- Yritys Internet -
-
- Yritysyhteydet -

Yritys Internet

-

Nopeita, turvallisia ja luotettavia valokuituyhteyksiä kaikenkokoisille yrityksille. Lisäpalveluina tarjoamme esimerkiksi palomuurit, langattomat tukiasemat tai vaikka IP‑transit.

-
+
+ Palvelut +

Yhteydet joka tarpeeseen

+

Toimitamme valokuituyhteydet avaimet käteen ‑periaatteella. Kaikki yhteystemme ovat symmetrisiä — lataus- ja lähetysnopeus ovat aina samat.

- -
-
02
-
- Konesalipalvelut +
+
+
+ +
+

Yritysliittymät

+

Nopeita ja turvallisia valokuituyhteyksiä kaikenkokoisille yrityksille. Palomuurit, tukiasemat ja IP-transit lisäpalveluina.

+ 1–100 Gbps
-
- Palvelinten yhteydet -

Konesali

-

Yhteystemme sopii erinomaisesti myös yritysten omiin laitetiloihin ja kolmansien osapuolien konesaleihin johon halutaan nopeaa ja turvallista yhteyttä. Toimitamme yrityksille jopa 10 Gigabitin yhteyksiä.

+ +
+
+ +
+

Konesaliyhteydet

+

Yhteydet omiin laitetiloihin ja kolmansien osapuolien konesaleihin. Skaalautuvat tarpeen mukaan aina 100 gigabittiin asti.

+ Jopa 100 Gbps +
+ +
+
+ +
+

Kiinteistöliittymät

+

Symmetriset kuituyhteydet taloyhtiöille. Etätyö, suoratoisto ja pelaaminen sujuvat ilman katkoja ja hidastumisia.

+ Symmetrinen +
+ +
+
+ +
+

VPN-yhteydet

+

Virtuaaliset erillisverkot toimipisteiden turvalliseen yhdistämiseen. Varmennetut ja kahdennetut yhteydet.

+ Salattu
- - -
-
03
-
- Kiinteistöliittymä -
-
- Kiinteistöliittymät -

Kiinteistöliittymä

-

Tasalaatuinen ja nopea netti kiinteistöille tuo päivittäiset palvelut kaikille käyttäjille jouhevasti. Etätyöskentely, suoratoistopalvelut, 4K‑videoiden toisto ja pelaaminen vaativat nopeampaa ja vakaampaa nettiyhteyttä.

-
-
- - -
-
04
-
- VPN-yhteydet -
-
- Toimipisteiden yhdistäminen -

VPN‑yhteys

-

VPN eli virtuaalinen erillisverkko mahdollistaa yrityksesi eri toimipisteiden yhdistämisen turvallisesti yhdeksi verkoksi. Tarjoamme varmennetut ja kahdennetut yhteydet.

-
-
-
- -
-
-
- Tietoa meistä -

Nopeat symmetriset yhteydet järkevään hintaan

-

Kun lähdimme suunnittelemaan uutta operaattoritoimintaa, halusimme viedä yhteydet pidemmälle kuin perinteisemmät operaattorit oletuksena pystyvät.

-

Nykyaikaan kuuluu symmetriset yhteydet, jotka ovat molempiin suuntiin yhtä nopeat — joka osaltaan mahdollistaa pätkimättömät etätyöpalaverit ja tiedostojen nopean siirron.

-
-
- 1–10 Gbps - Symmetriset nopeudet + +
+
+
+
+ Miksi Cuitunet +

Viedään yhteydet pidemmälle

+

Halusimme rakentaa operaattorin, joka ei tyydy perinteisiin ratkaisuihin. Kaikki yhteystemme perustuvat valokuituun ja ovat oletuksena symmetrisiä — lataus ja lähetys samalla nopeudella.

+

Tämä tarkoittaa pätkimättömiä etäpalavereita, nopeita tiedostosiirtoja ja luotettavaa yhteyttä myös silloin kun sitä eniten tarvitset.

+
+
+
+
+ +
+
+ Jopa 100 Gbps +

Skaalautuva kapasiteetti kasvun mukaan

+
-
- 24/7 - Vikapalvelu +
+
+ +
+
+ Palvelutasotakuu +

SLA-sopimukset ja varmennetut yhteydet

+
-
- 100% - Valokuitu +
+
+ +
+
+ Paikallinen toimija +

Turkulainen operaattori, nopea palvelu

+
+
+
+
+ +
+
+ Avaimet käteen +

Hoidamme asennuksen ja konfiguroinnin

+
@@ -125,73 +158,75 @@
-
-
-

Saatavuuskysely

-

Lähetä meille allaoleva lomake niin tarkistamme saatavuuden kyseisessä osoitteessa. Vastauksen saaminen kestää yleensä 1–2 vuorokautta. Vastauksen saat sähköpostilla. Saatavuuskysely ei velvoita mihinkään.

+
+
+
+ Saatavuuskysely +

Tarkista saatavuus osoitteessasi

+

Täytä lomake ja selvitämme valokuidun saatavuuden osoitteessasi. Vastaamme yleensä 1–2 arkipäivän kuluessa. Kysely ei velvoita mihinkään.

+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
-
- - -
- -
- - diff --git a/style.css b/style.css index ef7cdff..e7c8f35 100644 --- a/style.css +++ b/style.css @@ -7,37 +7,34 @@ :root { --orange: #e8891d; --orange-dark: #c67015; - --orange-light: #f5a623; - --beige: #d4bb8a; - --dark: #2d2d2d; - --dark-bg: #1a1a1a; - --gray: #f5f5f5; - --gray-medium: #888; - --text: #444; - --white: #fff; - --radius: 8px; + --orange-light: #fef3e2; + --dark: #111; + --dark-soft: #1a1a1a; + --text: #374151; + --text-light: #6b7280; + --border: #e5e7eb; + --bg: #fff; + --bg-alt: #f9fafb; + --radius: 12px; + --radius-lg: 20px; } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif; color: var(--text); line-height: 1.7; + -webkit-font-smoothing: antialiased; } .container { - max-width: 1100px; + max-width: 1120px; margin: 0 auto; padding: 0 24px; } a { - color: var(--orange); + color: inherit; text-decoration: none; - transition: color 0.2s; -} - -a:hover { - color: var(--orange-dark); } img { @@ -45,255 +42,367 @@ img { height: auto; } +/* ---- Utilities ---- */ +.overline { + display: inline-block; + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1.5px; + color: var(--orange); + margin-bottom: 12px; +} + +.section-header { + text-align: center; + max-width: 600px; + margin: 0 auto 56px; +} + +.section-header h2 { + font-size: 2.2rem; + font-weight: 700; + color: var(--dark); + margin-bottom: 12px; +} + +.section-header p { + color: var(--text-light); + font-size: 1.05rem; +} + +.optional { + color: var(--text-light); + font-weight: 400; +} + +/* ---- Buttons ---- */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 28px; + font-size: 0.95rem; + font-weight: 600; + border: none; + border-radius: 10px; + cursor: pointer; + transition: all 0.2s; + background: var(--orange); + color: #fff; +} + +.btn:hover { + background: var(--orange-dark); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(232, 137, 29, 0.3); +} + +.btn-outline { + background: transparent; + color: var(--dark); + border: 1.5px solid var(--border); +} + +.btn-outline:hover { + background: var(--bg-alt); + border-color: #d1d5db; + box-shadow: none; + transform: translateY(-1px); +} + +.btn-full { + width: 100%; +} + +.btn-sm { + padding: 10px 20px; + font-size: 0.85rem; +} + /* ---- Header ---- */ .header { position: fixed; top: 0; left: 0; right: 0; - background: var(--white); - box-shadow: 0 1px 12px rgba(0,0,0,0.06); + background: rgba(255,255,255,0.92); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border); z-index: 100; } .header-inner { display: flex; align-items: center; - justify-content: space-between; - height: 72px; + gap: 32px; + height: 68px; } .logo img { - height: 40px; + height: 32px; width: auto; } .nav { display: flex; - gap: 32px; + gap: 28px; + margin-left: auto; } .nav a { - color: var(--dark); + font-size: 0.9rem; font-weight: 500; - font-size: 0.95rem; + color: var(--text-light); + transition: color 0.2s; } .nav a:hover { - color: var(--orange); + color: var(--dark); +} + +.header-cta { + margin-left: 8px; } .nav-toggle { display: none; background: none; border: none; - font-size: 1.5rem; cursor: pointer; color: var(--dark); + margin-left: auto; } /* ---- Hero ---- */ .hero { - padding: 120px 0 80px; - background: var(--white); + position: relative; + padding: 160px 0 100px; + text-align: center; + overflow: hidden; } -.hero-inner { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 48px; - align-items: center; +.hero-bg { + position: absolute; + inset: 0; + background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--orange-light) 0%, transparent 70%); + z-index: -1; } -.hero-text h1 { - font-size: 2.6rem; - font-weight: 800; - line-height: 1.2; - color: var(--dark); - margin-bottom: 20px; -} - -.hero-text p { - font-size: 1.05rem; - color: var(--gray-medium); - margin-bottom: 32px; - line-height: 1.8; -} - -.hero-image img { - border-radius: var(--radius); - width: 100%; - object-fit: cover; -} - -.btn { +.hero-badge { display: inline-block; - padding: 14px 32px; - background: var(--orange); - color: var(--white); - font-size: 0.95rem; + padding: 6px 16px; + background: var(--orange-light); + color: var(--orange-dark); + font-size: 0.82rem; font-weight: 600; - border: none; - border-radius: var(--radius); - cursor: pointer; - transition: background 0.2s, transform 0.15s; - letter-spacing: 0.3px; + border-radius: 100px; + margin-bottom: 24px; } -.btn:hover { - background: var(--orange-dark); - color: var(--white); - transform: translateY(-1px); +.hero h1 { + font-size: 3.4rem; + font-weight: 800; + color: var(--dark); + line-height: 1.15; + margin-bottom: 20px; + letter-spacing: -0.5px; +} + +.highlight { + color: var(--orange); +} + +.hero-sub { + font-size: 1.15rem; + color: var(--text-light); + max-width: 560px; + margin: 0 auto 36px; + line-height: 1.7; +} + +.hero-actions { + display: flex; + gap: 12px; + justify-content: center; + margin-bottom: 64px; +} + +.hero-stats { + display: flex; + justify-content: center; + gap: 64px; +} + +.hero-stat strong { + display: block; + font-size: 1.4rem; + font-weight: 700; + color: var(--dark); +} + +.hero-stat span { + font-size: 0.85rem; + color: var(--text-light); } /* ---- Services ---- */ .services { - padding: 60px 0; - background: var(--gray); + padding: 100px 0; + background: var(--bg-alt); } -.service-row { +.services-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} + +.service-card { + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 32px 24px; + transition: box-shadow 0.3s, transform 0.2s; +} + +.service-card:hover { + box-shadow: 0 8px 30px rgba(0,0,0,0.06); + transform: translateY(-2px); +} + +.service-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--orange-light); + color: var(--orange); + border-radius: 12px; + margin-bottom: 20px; +} + +.service-card h3 { + font-size: 1.15rem; + font-weight: 650; + color: var(--dark); + margin-bottom: 8px; +} + +.service-card p { + font-size: 0.92rem; + color: var(--text-light); + line-height: 1.6; + margin-bottom: 16px; +} + +.service-speed { + display: inline-block; + font-size: 0.8rem; + font-weight: 600; + color: var(--orange); + padding: 4px 10px; + background: var(--orange-light); + border-radius: 6px; +} + +/* ---- Why ---- */ +.why { + padding: 100px 0; +} + +.why-inner { display: grid; grid-template-columns: 1fr 1fr; - gap: 48px; - align-items: center; - padding: 60px 0; - position: relative; + gap: 80px; + align-items: start; } -.service-row + .service-row { - border-top: 1px solid #e8e8e8; -} - -.service-number { - position: absolute; - top: 60px; - right: 0; - font-size: 8rem; - font-weight: 900; - color: rgba(232, 137, 29, 0.08); - line-height: 1; - pointer-events: none; -} - -.service-image img { - border-radius: var(--radius); - width: 100%; - aspect-ratio: 4/3; - object-fit: cover; -} - -.service-label { - display: inline-block; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 0.75rem; - color: var(--gray-medium); - margin-bottom: 8px; -} - -.service-content h2 { +.why-content h2 { font-size: 2.2rem; - font-weight: 800; + font-weight: 700; color: var(--dark); - margin-bottom: 16px; + margin-bottom: 20px; } -.service-content p { - font-size: 1rem; - color: var(--gray-medium); +.why-content p { + color: var(--text-light); + font-size: 1.02rem; + margin-bottom: 16px; line-height: 1.8; } -.service-row.reverse .service-image { - order: 2; -} - -.service-row.reverse .service-content { - order: 1; -} - -.service-row.reverse .service-number { - left: 0; - right: auto; -} - -/* ---- About ---- */ -.about { - padding: 100px 0; - background: var(--white); -} - -.section-label { - display: inline-block; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 0.75rem; - color: var(--gray-medium); - margin-bottom: 8px; -} - -.about-content h2 { - font-size: 2.4rem; - font-weight: 800; - color: var(--dark); - margin-bottom: 24px; - max-width: 600px; -} - -.about-content p { - font-size: 1.05rem; - color: var(--gray-medium); - line-height: 1.8; - max-width: 700px; - margin-bottom: 16px; -} - -.about-stats { +.why-features { display: flex; - gap: 48px; - margin-top: 40px; - padding-top: 40px; - border-top: 1px solid #e8e8e8; + flex-direction: column; + gap: 24px; } -.stat strong { - display: block; - font-size: 1.8rem; - font-weight: 800; +.feature { + display: flex; + gap: 16px; + align-items: flex-start; +} + +.feature-icon { + flex-shrink: 0; + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--orange-light); color: var(--orange); + border-radius: 10px; } -.stat span { - font-size: 0.9rem; - color: var(--gray-medium); +.feature strong { + display: block; + font-size: 0.95rem; + color: var(--dark); + margin-bottom: 2px; } -/* ---- Availability / Form ---- */ +.feature p { + font-size: 0.88rem; + color: var(--text-light); + margin: 0; +} + +/* ---- Availability ---- */ .availability { - padding: 80px 0; - background: var(--gray); + padding: 100px 0; + background: var(--bg-alt); } .availability-inner { display: grid; grid-template-columns: 1fr 1fr; - gap: 60px; + gap: 64px; align-items: start; } .availability-text h2 { font-size: 2rem; - font-weight: 800; + font-weight: 700; color: var(--dark); margin-bottom: 16px; } .availability-text p { - color: var(--gray-medium); + color: var(--text-light); line-height: 1.8; } +.form { + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 32px; +} + .form-group { margin-bottom: 16px; } @@ -309,87 +418,103 @@ img { .form-row { display: grid; grid-template-columns: 1fr 1fr; - gap: 16px; + gap: 12px; } .form-group input, .form-group textarea { width: 100%; - padding: 12px 16px; - border: 1px solid #ddd; - border-radius: var(--radius); + padding: 11px 14px; + border: 1.5px solid var(--border); + border-radius: 8px; font-size: 0.95rem; font-family: inherit; - transition: border-color 0.2s; - background: var(--white); + transition: border-color 0.2s, box-shadow 0.2s; + background: var(--bg); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--orange); + box-shadow: 0 0 0 3px rgba(232, 137, 29, 0.1); } /* ---- Footer ---- */ .footer { - background: linear-gradient(135deg, #4a3d8f, #8e5a7a, #c47a5a); - color: var(--white); - padding: 60px 0 0; + background: var(--dark-soft); + color: #d1d5db; + padding: 64px 0 0; } -.footer-inner { +.footer-top { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; - padding-bottom: 40px; + padding-bottom: 48px; } -.footer-col h3 { - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 2px; +.footer-logo { + height: 28px; margin-bottom: 16px; - font-weight: 700; + filter: brightness(0) invert(1); } -.footer-col p { - font-size: 0.95rem; - line-height: 1.8; - opacity: 0.9; +.footer-brand p { + font-size: 0.9rem; + color: #9ca3af; + line-height: 1.7; +} + +.footer-links h4 { + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + color: #fff; + margin-bottom: 16px; +} + +.footer-links a, +.footer-links p { + display: block; + font-size: 0.9rem; + color: #9ca3af; margin-bottom: 8px; + transition: color 0.2s; } -.footer-col a { - color: var(--white); - opacity: 0.9; -} - -.footer-col a:hover { - opacity: 1; - color: var(--white); +.footer-links a:hover { + color: #fff; } .footer-bottom { - border-top: 1px solid rgba(255,255,255,0.15); + border-top: 1px solid #2d2d2d; padding: 20px 0; - text-align: center; font-size: 0.85rem; - opacity: 0.7; + color: #6b7280; } /* ---- Mobile ---- */ +@media (max-width: 1024px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + } +} + @media (max-width: 768px) { .nav { display: none; position: absolute; - top: 72px; + top: 68px; left: 0; right: 0; - background: var(--white); + background: rgba(255,255,255,0.98); + backdrop-filter: blur(12px); flex-direction: column; - padding: 20px 24px; - gap: 16px; - box-shadow: 0 8px 20px rgba(0,0,0,0.08); + padding: 16px 24px; + gap: 12px; + border-bottom: 1px solid var(--border); } .nav.open { @@ -400,39 +525,42 @@ img { display: block; } - .hero { - padding: 100px 0 60px; - } - - .hero-inner { - grid-template-columns: 1fr; - gap: 32px; - } - - .hero-text h1 { - font-size: 2rem; - } - - .service-row, - .service-row.reverse { - grid-template-columns: 1fr; - gap: 24px; - } - - .service-row.reverse .service-image, - .service-row.reverse .service-content { - order: unset; - } - - .service-number { + .header-cta { display: none; } - .about-stats { + .hero { + padding: 120px 0 64px; + } + + .hero h1 { + font-size: 2.2rem; + } + + .hero-sub { + font-size: 1rem; + } + + .hero-actions { + flex-direction: column; + align-items: center; + margin-bottom: 48px; + } + + .hero-stats { flex-direction: column; gap: 24px; } + .services-grid { + grid-template-columns: 1fr; + } + + .why-inner { + grid-template-columns: 1fr; + gap: 40px; + } + .availability-inner { grid-template-columns: 1fr; gap: 32px; @@ -442,7 +570,7 @@ img { grid-template-columns: 1fr; } - .footer-inner { + .footer-top { grid-template-columns: 1fr; gap: 32px; }