commit eac620c532fec3c4a18f0513743d59fb8dc19ac1 Author: Jaakko Vanhala Date: Mon Mar 30 07:24:09 2026 +0300 init: uusi moderni kipinalomat webbisivu diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/index.html b/index.html new file mode 100644 index 0000000..a0d74f9 --- /dev/null +++ b/index.html @@ -0,0 +1,257 @@ + + + + + + + Kipinä Lomat - Tervetuloa luonnon rauhaan + + + + + + + + + +
+
+
+
+

Nauti luonnon rauhasta
Kipinässä!

+

Tervetuloa luonnonläheiseen aamiaismajoitukseen Sotkamon Iso-Sapsojärven rannalle.

+
+ Tutustu tiloihin + Palvelut +
+
+
+ +
+
+
+
+

Aamiaismajoitus & Juhlatilat

+

Käytettävissäsi on majoitustilat 24:lle hengelle sekä tilausravintola juhlien järjestämistä varten jopa 50:lle henkilölle.

+

Sijaitsemme luonnon keskellä, kohtuullisen välimatkan päästä Vuokatin (5 km) ja Sotkamon (6 km) sykkeestä, sekä Kajaanista ja vilskeestä. Täydellinen irtiotto arjesta.

+
    +
  • Majoitusrakennus ja rantasauna
    • +
  • Kaksi vuokramökkiä järvinäköalalla
    • +
  • Iso-Sapsojärven kauniit rannat
    • +
+
+
+
+ Sapsojärven ranta +
Rantasauna tilauksesta
+
+
+
+
+ +
+
+

Majoittujan palvelut

+

Kohteesta löytyy kaikki mitä tarvitset onnistuneeseen lomaan.

+ +
+ +
+
+ Viihtyisät huoneet +
+
+

Viihtyisät huoneet

+

Mukavilla sängyillä varustellut huoneet ja kaksi omaa mökkiä järvinäköalalla. Liinavaatteet ja pyyhkeet kuuluvat hintaan, kuten myös ilmainen WiFi.

+
+
+ + +
+
+ Aamiainen +
+
+

Aamiainen

+

Runsas ja ravitseva aamiainen mukavan päivän käynnistämiseksi. Herkullisia perinteisiä ja paikallisia makuja pöytään katettuna.

+
+
+ + +
+
+ Kotoisa tunnelma +
+
+

Kotoisa tunnelma

+

Tilat on kalustettu kodinomaisiksi. Käytössä on yhteiset oleskelutilat ja terassi, jossa voit istua iltaa nauttien luonnon äänistä.

+
+
+
+
+
+ +
+
+
+

Hinnasto

+

Valitse tarpeisiisi sopiva majoitusvaihtoehto.

+
+ +
+
+
+

Kahden hengen huone

+
98 € / yö
+

9 huonetta kahdella sängyllä (yhdistettävissä).

+
+
+ +
+
+

Perhehuone

+
135 € / yö
+

Tilaa 3-4 hengelle, minijääkaappi ja säilytystilat.

+
+
+ +
+
+

Näköalamökit (Tuli/Loimu)

+
135 € / yö
+

Oma rauha, aamuaurinko ja kaunis järvinäköala. Oma WC, suihku ja minikeittiö.

+
+
+ +
+
+

Aitta (kesäisin)

+
35 € / yö
+

Pieni aitta sähköllä ja kahdella vuoteella.

+
+
+
+ +
+
+

Lisäpalvelut

+
    +
  • Aamiainen 12,50 € / hlö
    • +
  • Telttapaikka & Matkaparkki 25 € / yö (sis. suihku & sähkö)
    • +
  • Sauna 30 € / h (rantasauna + tynnyrisauna)
    • +
  • SUP-lauta 7,50 € / h tai 40 € / päivä
    • +
+
+
+
+
+ + + +
+
+
+
+

Kiinnostuitko?

+

Varaa majoitus tai kysy lisää tilausravintolan ja rantasaunan käytöstä.

+ Ota meihin yhteyttä +
+
+ +
+
+
+

Yhteystiedot

+

Otamme sinut ilolla vastaan Sapsojärven rannalle.

+
+ +
+
+
📍
+

Osoite

+

Löydät meidät Vuokatin läheisyydestä, Iso-Sapsojärven rannalta.

+

Kipinäntie 10, 88600 Sotkamo

+
+ +
+
📞
+

Puhelinnumero

+

Voit soittaa tai laittaa viestiä Jaakolle alla olevaan numeroon.

+

+358 50 311 9461

+
+ +
+
✉️
+

Sähköposti

+

Tavoitat meidät tarvittaessa myös sähköpostilla.

+

jaakko@kipinalomat.com

+

Instagram: @kipinalomat

+
+
+ +
+ +
+
+
+
+ + + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..4dbf92c --- /dev/null +++ b/main.js @@ -0,0 +1,172 @@ +import './style.css' + +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + window.scrollTo({ + top: target.offsetTop, + behavior: 'smooth' + }); + } + }); +}); + +// Update navbar styling on scroll +const navbar = document.getElementById('navbar'); +window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } +}); + +// Scroll Reveal Animation Initialization using IntersectionObserver +const revealElements = document.querySelectorAll('.scroll-reveal'); + +const revealOptions = { + threshold: 0.15, + rootMargin: "0px 0px -50px 0px" +}; + +const scrollObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('active'); + // Optional: stop observing once revealed + // observer.unobserve(entry.target); + } + }); +}, revealOptions); + +revealElements.forEach(el => { + scrollObserver.observe(el); +}); + +// Theme toggling logic +const themeToggleBtn = document.getElementById('theme-toggle'); +const moonIcon = document.getElementById('moon-icon'); +const sunIcon = document.getElementById('sun-icon'); + +// Check for saved theme preference or use system preference (default to light) +const savedTheme = localStorage.getItem('theme'); +const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; +let currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light'); + +function applyTheme(theme) { + if (theme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + moonIcon.style.display = 'none'; + sunIcon.style.display = 'block'; + } else { + document.documentElement.removeAttribute('data-theme'); + moonIcon.style.display = 'block'; + sunIcon.style.display = 'none'; + } +} + +// Initial appliance +applyTheme(currentTheme); + +themeToggleBtn.addEventListener('click', () => { + currentTheme = currentTheme === 'dark' ? 'light' : 'dark'; + localStorage.setItem('theme', currentTheme); + applyTheme(currentTheme); +}); + +// Gallery Grid & Lightbox Logic +const finalImages = [ + "aamiainen-2-768x432.jpeg", "kipinatie10.jpeg", "kipinatie10_13.jpeg", "kipinatie10_14.jpeg", + "kipinatie10_15.jpeg", "kipinatie10_2-2.jpeg", "kipinatie10_20.jpeg", "kipinatie10_28.jpeg", + "kipinatie10_3.jpeg", "kipinatie10_36-7.jpeg", "kipinatie10_37.jpeg", "kipinatie10_5.jpeg", + "kipinatie10_50-5.jpeg", "kipinatie10_52.jpeg", "kipinatie10_53.jpeg", "kipinatie10_54.jpeg", + "kipinatie10_57.jpeg", "kipinatie10_58-2.jpeg", "kipinatie10_59.jpeg", "kipinatie10_6.jpeg", + "kipinatie10_60.jpeg", "kipinatie10_61.jpeg", "kipinatie10_62.jpeg", "kipinatie10_64.jpeg", + "kipinatie10_65.jpeg", "kipinatie10_68.jpeg", "kipinatie10_69-0.jpeg", "kipinatie10_70-2.jpeg", + "kipinatie10_71-3.jpeg", "kipinatie10_8.jpeg", "kipinatie10_9.jpeg", "ranta-aurinko.jpeg" +]; + +const galleryImages = finalImages.map(src => ({ src, title: 'Kipinä Lomat Kuvagalleria' })); + +const galleryGrid = document.getElementById('gallery-grid'); +const lightbox = document.getElementById('lightbox'); +const lightboxImg = document.getElementById('lightbox-img'); +const lightboxCaption = document.getElementById('lightbox-caption'); +const lightboxClose = document.getElementById('lightbox-close'); +const lightboxPrev = document.getElementById('lightbox-prev'); +const lightboxNext = document.getElementById('lightbox-next'); + +let currentLightboxIndex = 0; + +if (galleryGrid && lightbox) { + galleryGrid.innerHTML = ''; + // Populate Gallery Grid + galleryImages.forEach((item, index) => { + const galleryItem = document.createElement('div'); + galleryItem.className = 'gallery-item'; + + const imgEl = document.createElement('img'); + imgEl.src = `/img/${item.src}`; + imgEl.alt = item.title; + imgEl.loading = 'lazy'; + + galleryItem.appendChild(imgEl); + galleryGrid.appendChild(galleryItem); + + // Open Lightbox on Click + galleryItem.addEventListener('click', () => openLightbox(index)); + }); + + // Lightbox Functions + function openLightbox(index) { + currentLightboxIndex = index; + updateLightboxImage(); + lightbox.classList.add('active'); + document.body.style.overflow = 'hidden'; + } + + function closeLightbox() { + lightbox.classList.remove('active'); + document.body.style.overflow = 'auto'; + } + + function updateLightboxImage() { + lightboxImg.classList.remove('loaded'); + const currentItem = galleryImages[currentLightboxIndex]; + setTimeout(() => { + lightboxImg.src = `/img/${currentItem.src}`; + lightboxCaption.textContent = currentItem.title; + setTimeout(() => lightboxImg.classList.add('loaded'), 50); + }, 200); + } + + function showNext() { + currentLightboxIndex = (currentLightboxIndex + 1) % galleryImages.length; + updateLightboxImage(); + } + + function showPrev() { + currentLightboxIndex = (currentLightboxIndex - 1 + galleryImages.length) % galleryImages.length; + updateLightboxImage(); + } + + lightboxClose.addEventListener('click', closeLightbox); + lightboxNext.addEventListener('click', (e) => { e.stopPropagation(); showNext(); }); + lightboxPrev.addEventListener('click', (e) => { e.stopPropagation(); showPrev(); }); + + lightbox.addEventListener('click', (e) => { + if (e.target === lightbox || e.target === document.querySelector('.lightbox-content-wrapper')) { + closeLightbox(); + } + }); + + document.addEventListener('keydown', (e) => { + if (!lightbox.classList.contains('active')) return; + if (e.key === 'Escape') closeLightbox(); + if (e.key === 'ArrowRight') showNext(); + if (e.key === 'ArrowLeft') showPrev(); + }); +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e130bb2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,873 @@ +{ + "name": "kipina-lomat-nordic", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "kipina-lomat-nordic", + "version": "0.0.0", + "devDependencies": { + "vite": "^8.0.1" + } + }, + "node_modules/@emnapi/core": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz", + "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@emnapi/wasi-threads": "1.2.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@emnapi/runtime": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz", + "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@emnapi/wasi-threads": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz", + "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@napi-rs/wasm-runtime": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz", + "integrity": "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@tybys/wasm-util": "^0.10.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "peerDependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1" + } + }, + "node_modules/@oxc-project/types": { + "version": "0.122.0", + "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz", + "integrity": "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Boshen" + } + }, + "node_modules/@rolldown/binding-android-arm64": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz", + "integrity": "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-arm64": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.12.tgz", + "integrity": "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-x64": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.12.tgz", + "integrity": "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-freebsd-x64": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.12.tgz", + "integrity": "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm-gnueabihf": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.12.tgz", + "integrity": "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-gnu": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.12.tgz", + "integrity": "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-musl": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.12.tgz", + "integrity": "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-ppc64-gnu": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.12.tgz", + "integrity": "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-s390x-gnu": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.12.tgz", + "integrity": "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-gnu": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.12.tgz", + "integrity": "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-musl": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.12.tgz", + "integrity": "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-openharmony-arm64": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.12.tgz", + "integrity": "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-wasm32-wasi": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.12.tgz", + "integrity": "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==", + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@napi-rs/wasm-runtime": "^1.1.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@rolldown/binding-win32-arm64-msvc": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.12.tgz", + "integrity": "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-x64-msvc": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.12.tgz", + "integrity": "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.12.tgz", + "integrity": "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tybys/wasm-util": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", + "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/nanoid": { + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.8", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz", + "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.11", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rolldown": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.12.tgz", + "integrity": "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@oxc-project/types": "=0.122.0", + "@rolldown/pluginutils": "1.0.0-rc.12" + }, + "bin": { + "rolldown": "bin/cli.mjs" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "optionalDependencies": { + "@rolldown/binding-android-arm64": "1.0.0-rc.12", + "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", + "@rolldown/binding-darwin-x64": "1.0.0-rc.12", + "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", + "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", + "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", + "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", + "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", + "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", + "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", + "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", + "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", + "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", + "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", + "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD", + "optional": true + }, + "node_modules/vite": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.3.tgz", + "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "lightningcss": "^1.32.0", + "picomatch": "^4.0.4", + "postcss": "^8.5.8", + "rolldown": "1.0.0-rc.12", + "tinyglobby": "^0.2.15" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "@vitejs/devtools": "^0.1.0", + "esbuild": "^0.27.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "@vitejs/devtools": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..4cc9e89 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "kipina-lomat-nordic", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^8.0.1" + } +} diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..0906f9c --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + diff --git a/public/icons.svg b/public/icons.svg new file mode 100644 index 0000000..e952219 --- /dev/null +++ b/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/3pq60x.png b/public/img/3pq60x.png new file mode 100644 index 0000000..f610a9a Binary files /dev/null and b/public/img/3pq60x.png differ diff --git a/public/img/aamiainen-2-768x432.jpeg b/public/img/aamiainen-2-768x432.jpeg new file mode 100644 index 0000000..5f4729b Binary files /dev/null and b/public/img/aamiainen-2-768x432.jpeg differ diff --git a/public/img/aamiainen-2-768x432.webp b/public/img/aamiainen-2-768x432.webp new file mode 100644 index 0000000..ec9bf6e Binary files /dev/null and b/public/img/aamiainen-2-768x432.webp differ diff --git a/public/img/kipinatie10.jpeg b/public/img/kipinatie10.jpeg new file mode 100644 index 0000000..c489ef6 Binary files /dev/null and b/public/img/kipinatie10.jpeg differ diff --git a/public/img/kipinatie10_13.jpeg b/public/img/kipinatie10_13.jpeg new file mode 100644 index 0000000..78a458e Binary files /dev/null and b/public/img/kipinatie10_13.jpeg differ diff --git a/public/img/kipinatie10_14.jpeg b/public/img/kipinatie10_14.jpeg new file mode 100644 index 0000000..4295228 Binary files /dev/null and b/public/img/kipinatie10_14.jpeg differ diff --git a/public/img/kipinatie10_15.jpeg b/public/img/kipinatie10_15.jpeg new file mode 100644 index 0000000..428d6c2 Binary files /dev/null and b/public/img/kipinatie10_15.jpeg differ diff --git a/public/img/kipinatie10_2-2.jpeg b/public/img/kipinatie10_2-2.jpeg new file mode 100644 index 0000000..3c72700 Binary files /dev/null and b/public/img/kipinatie10_2-2.jpeg differ diff --git a/public/img/kipinatie10_20.jpeg b/public/img/kipinatie10_20.jpeg new file mode 100644 index 0000000..8d8f215 Binary files /dev/null and b/public/img/kipinatie10_20.jpeg differ diff --git a/public/img/kipinatie10_20.webp b/public/img/kipinatie10_20.webp new file mode 100644 index 0000000..c43201c Binary files /dev/null and b/public/img/kipinatie10_20.webp differ diff --git a/public/img/kipinatie10_28.jpeg b/public/img/kipinatie10_28.jpeg new file mode 100644 index 0000000..ede7f41 Binary files /dev/null and b/public/img/kipinatie10_28.jpeg differ diff --git a/public/img/kipinatie10_28.webp b/public/img/kipinatie10_28.webp new file mode 100644 index 0000000..3ccf709 Binary files /dev/null and b/public/img/kipinatie10_28.webp differ diff --git a/public/img/kipinatie10_3.jpeg b/public/img/kipinatie10_3.jpeg new file mode 100644 index 0000000..60e92f1 Binary files /dev/null and b/public/img/kipinatie10_3.jpeg differ diff --git a/public/img/kipinatie10_3.webp b/public/img/kipinatie10_3.webp new file mode 100644 index 0000000..7431d9d Binary files /dev/null and b/public/img/kipinatie10_3.webp differ diff --git a/public/img/kipinatie10_36-7.jpeg b/public/img/kipinatie10_36-7.jpeg new file mode 100644 index 0000000..d242b08 Binary files /dev/null and b/public/img/kipinatie10_36-7.jpeg differ diff --git a/public/img/kipinatie10_37.jpeg b/public/img/kipinatie10_37.jpeg new file mode 100644 index 0000000..d0ca2b4 Binary files /dev/null and b/public/img/kipinatie10_37.jpeg differ diff --git a/public/img/kipinatie10_5.jpeg b/public/img/kipinatie10_5.jpeg new file mode 100644 index 0000000..620d3ff Binary files /dev/null and b/public/img/kipinatie10_5.jpeg differ diff --git a/public/img/kipinatie10_50-5.jpeg b/public/img/kipinatie10_50-5.jpeg new file mode 100644 index 0000000..366d618 Binary files /dev/null and b/public/img/kipinatie10_50-5.jpeg differ diff --git a/public/img/kipinatie10_52.jpeg b/public/img/kipinatie10_52.jpeg new file mode 100644 index 0000000..9591d2a Binary files /dev/null and b/public/img/kipinatie10_52.jpeg differ diff --git a/public/img/kipinatie10_53.jpeg b/public/img/kipinatie10_53.jpeg new file mode 100644 index 0000000..fbc355b Binary files /dev/null and b/public/img/kipinatie10_53.jpeg differ diff --git a/public/img/kipinatie10_54.jpeg b/public/img/kipinatie10_54.jpeg new file mode 100644 index 0000000..49b303c Binary files /dev/null and b/public/img/kipinatie10_54.jpeg differ diff --git a/public/img/kipinatie10_57.jpeg b/public/img/kipinatie10_57.jpeg new file mode 100644 index 0000000..4a5f4e4 Binary files /dev/null and b/public/img/kipinatie10_57.jpeg differ diff --git a/public/img/kipinatie10_58-2.jpeg b/public/img/kipinatie10_58-2.jpeg new file mode 100644 index 0000000..3b03168 Binary files /dev/null and b/public/img/kipinatie10_58-2.jpeg differ diff --git a/public/img/kipinatie10_59.jpeg b/public/img/kipinatie10_59.jpeg new file mode 100644 index 0000000..f24bfc4 Binary files /dev/null and b/public/img/kipinatie10_59.jpeg differ diff --git a/public/img/kipinatie10_6.jpeg b/public/img/kipinatie10_6.jpeg new file mode 100644 index 0000000..dc03a23 Binary files /dev/null and b/public/img/kipinatie10_6.jpeg differ diff --git a/public/img/kipinatie10_60.jpeg b/public/img/kipinatie10_60.jpeg new file mode 100644 index 0000000..39f8717 Binary files /dev/null and b/public/img/kipinatie10_60.jpeg differ diff --git a/public/img/kipinatie10_61.jpeg b/public/img/kipinatie10_61.jpeg new file mode 100644 index 0000000..8080576 Binary files /dev/null and b/public/img/kipinatie10_61.jpeg differ diff --git a/public/img/kipinatie10_62.jpeg b/public/img/kipinatie10_62.jpeg new file mode 100644 index 0000000..4459b7f Binary files /dev/null and b/public/img/kipinatie10_62.jpeg differ diff --git a/public/img/kipinatie10_64.jpeg b/public/img/kipinatie10_64.jpeg new file mode 100644 index 0000000..1fd744d Binary files /dev/null and b/public/img/kipinatie10_64.jpeg differ diff --git a/public/img/kipinatie10_65.jpeg b/public/img/kipinatie10_65.jpeg new file mode 100644 index 0000000..b1d063d Binary files /dev/null and b/public/img/kipinatie10_65.jpeg differ diff --git a/public/img/kipinatie10_65.webp b/public/img/kipinatie10_65.webp new file mode 100644 index 0000000..def9ec3 Binary files /dev/null and b/public/img/kipinatie10_65.webp differ diff --git a/public/img/kipinatie10_68.jpeg b/public/img/kipinatie10_68.jpeg new file mode 100644 index 0000000..e3e05ef Binary files /dev/null and b/public/img/kipinatie10_68.jpeg differ diff --git a/public/img/kipinatie10_69-0.jpeg b/public/img/kipinatie10_69-0.jpeg new file mode 100644 index 0000000..ac7f6d1 Binary files /dev/null and b/public/img/kipinatie10_69-0.jpeg differ diff --git a/public/img/kipinatie10_70-2.jpeg b/public/img/kipinatie10_70-2.jpeg new file mode 100644 index 0000000..fe2a242 Binary files /dev/null and b/public/img/kipinatie10_70-2.jpeg differ diff --git a/public/img/kipinatie10_71-3.jpeg b/public/img/kipinatie10_71-3.jpeg new file mode 100644 index 0000000..687f37f Binary files /dev/null and b/public/img/kipinatie10_71-3.jpeg differ diff --git a/public/img/kipinatie10_8.jpeg b/public/img/kipinatie10_8.jpeg new file mode 100644 index 0000000..58ea48a Binary files /dev/null and b/public/img/kipinatie10_8.jpeg differ diff --git a/public/img/kipinatie10_9.jpeg b/public/img/kipinatie10_9.jpeg new file mode 100644 index 0000000..d0b08f1 Binary files /dev/null and b/public/img/kipinatie10_9.jpeg differ diff --git a/public/img/ranta-aurinko.jpeg b/public/img/ranta-aurinko.jpeg new file mode 100644 index 0000000..edd67d8 Binary files /dev/null and b/public/img/ranta-aurinko.jpeg differ diff --git a/public/img/ranta-aurinko.webp b/public/img/ranta-aurinko.webp new file mode 100644 index 0000000..5231cff Binary files /dev/null and b/public/img/ranta-aurinko.webp differ diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..cc51a3d Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/javascript.svg b/src/assets/javascript.svg new file mode 100644 index 0000000..bebbfc1 --- /dev/null +++ b/src/assets/javascript.svg @@ -0,0 +1 @@ + diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ +Vite diff --git a/src/counter.js b/src/counter.js new file mode 100644 index 0000000..12bf115 --- /dev/null +++ b/src/counter.js @@ -0,0 +1,9 @@ +export function setupCounter(element) { + let counter = 0 + const setCounter = (count) => { + counter = count + element.innerHTML = `Count is ${counter}` + } + element.addEventListener('click', () => setCounter(counter + 1)) + setCounter(0) +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..c53b547 --- /dev/null +++ b/src/main.js @@ -0,0 +1,60 @@ +import './style.css' +import javascriptLogo from './assets/javascript.svg' +import viteLogo from './assets/vite.svg' +import heroImg from './assets/hero.png' +import { setupCounter } from './counter.js' + +document.querySelector('#app').innerHTML = ` +
+
+ + JavaScript logo + Vite logo +
+
+

Get started

+

Edit src/main.js and save to test HMR

+
+ +
+ +
+ +
+
+ +

Documentation

+

Your questions, answered

+ +
+
+ +

Connect with us

+

Join the Vite community

+ +
+
+ +
+
+` + +setupCounter(document.querySelector('#counter')) diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..527d4fb --- /dev/null +++ b/src/style.css @@ -0,0 +1,296 @@ +:root { + --text: #6b6375; + --text-h: #08060d; + --bg: #fff; + --border: #e5e4e7; + --code-bg: #f4f3ec; + --accent: #aa3bff; + --accent-bg: rgba(170, 59, 255, 0.1); + --accent-border: rgba(170, 59, 255, 0.5); + --social-bg: rgba(244, 243, 236, 0.5); + --shadow: + rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; + + --sans: system-ui, 'Segoe UI', Roboto, sans-serif; + --heading: system-ui, 'Segoe UI', Roboto, sans-serif; + --mono: ui-monospace, Consolas, monospace; + + font: 18px/145% var(--sans); + letter-spacing: 0.18px; + color-scheme: light dark; + color: var(--text); + background: var(--bg); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @media (max-width: 1024px) { + font-size: 16px; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #9ca3af; + --text-h: #f3f4f6; + --bg: #16171d; + --border: #2e303a; + --code-bg: #1f2028; + --accent: #c084fc; + --accent-bg: rgba(192, 132, 252, 0.15); + --accent-border: rgba(192, 132, 252, 0.5); + --social-bg: rgba(47, 48, 58, 0.5); + --shadow: + rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; + } + + #social .button-icon { + filter: invert(1) brightness(2); + } +} + +body { + margin: 0; +} + +h1, +h2 { + font-family: var(--heading); + font-weight: 500; + color: var(--text-h); +} + +h1 { + font-size: 56px; + letter-spacing: -1.68px; + margin: 32px 0; + @media (max-width: 1024px) { + font-size: 36px; + margin: 20px 0; + } +} +h2 { + font-size: 24px; + line-height: 118%; + letter-spacing: -0.24px; + margin: 0 0 8px; + @media (max-width: 1024px) { + font-size: 20px; + } +} +p { + margin: 0; +} + +code, +.counter { + font-family: var(--mono); + display: inline-flex; + border-radius: 4px; + color: var(--text-h); +} + +code { + font-size: 15px; + line-height: 135%; + padding: 4px 8px; + background: var(--code-bg); +} + +.counter { + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + color: var(--accent); + background: var(--accent-bg); + border: 2px solid transparent; + transition: border-color 0.3s; + margin-bottom: 24px; + + &:hover { + border-color: var(--accent-border); + } + &:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } +} + +.hero { + position: relative; + + .base, + .framework, + .vite { + inset-inline: 0; + margin: 0 auto; + } + + .base { + width: 170px; + position: relative; + z-index: 0; + } + + .framework, + .vite { + position: absolute; + } + + .framework { + z-index: 1; + top: 34px; + height: 28px; + transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) + scale(1.4); + } + + .vite { + z-index: 0; + top: 107px; + height: 26px; + width: auto; + transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) + scale(0.8); + } +} + +#app { + width: 1126px; + max-width: 100%; + margin: 0 auto; + text-align: center; + border-inline: 1px solid var(--border); + min-height: 100svh; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +#center { + display: flex; + flex-direction: column; + gap: 25px; + place-content: center; + place-items: center; + flex-grow: 1; + + @media (max-width: 1024px) { + padding: 32px 20px 24px; + gap: 18px; + } +} + +#next-steps { + display: flex; + border-top: 1px solid var(--border); + text-align: left; + + & > div { + flex: 1 1 0; + padding: 32px; + @media (max-width: 1024px) { + padding: 24px 20px; + } + } + + .icon { + margin-bottom: 16px; + width: 22px; + height: 22px; + } + + @media (max-width: 1024px) { + flex-direction: column; + text-align: center; + } +} + +#docs { + border-right: 1px solid var(--border); + + @media (max-width: 1024px) { + border-right: none; + border-bottom: 1px solid var(--border); + } +} + +#next-steps ul { + list-style: none; + padding: 0; + display: flex; + gap: 8px; + margin: 32px 0 0; + + .logo { + height: 18px; + } + + a { + color: var(--text-h); + font-size: 16px; + border-radius: 6px; + background: var(--social-bg); + display: flex; + padding: 6px 12px; + align-items: center; + gap: 8px; + text-decoration: none; + transition: box-shadow 0.3s; + + &:hover { + box-shadow: var(--shadow); + } + .button-icon { + height: 18px; + width: 18px; + } + } + + @media (max-width: 1024px) { + margin-top: 20px; + flex-wrap: wrap; + justify-content: center; + + li { + flex: 1 1 calc(50% - 8px); + } + + a { + width: 100%; + justify-content: center; + box-sizing: border-box; + } + } +} + +#spacer { + height: 88px; + border-top: 1px solid var(--border); + @media (max-width: 1024px) { + height: 48px; + } +} + +.ticks { + position: relative; + width: 100%; + + &::before, + &::after { + content: ''; + position: absolute; + top: -4.5px; + border: 5px solid transparent; + } + + &::before { + left: 0; + border-left-color: var(--border); + } + &::after { + right: 0; + border-right-color: var(--border); + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..d78552f --- /dev/null +++ b/style.css @@ -0,0 +1,887 @@ +/* --- KIPINA LOMAT MODERN NORDIC SAAS STYLES --- */ +:root { + --font-body: 'Inter', sans-serif; + --font-heading: 'Outfit', sans-serif; + + /* Vaalea teema (oletus) */ + --bg-primary: #ffffff; + --bg-secondary: #f8f9fa; + --bg-tertiary: rgba(0, 0, 0, 0.03); + + --text-primary: #18181b; + --text-secondary: #52525b; + + --aurora-green: #10b981; /* Syvempi vihreä vaalealle taustalle */ + --ice-blue: #0284c7; + + --glass-bg: rgba(255, 255, 255, 0.85); + --glass-border: rgba(0, 0, 0, 0.08); + + --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1); + + --radius-sm: 8px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-xl: 32px; + + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +html[data-theme='dark'] { + --bg-primary: #0a0a0b; + --bg-secondary: #141416; + --bg-tertiary: rgba(255, 255, 255, 0.03); + + --text-primary: #f8f9fa; + --text-secondary: #a1a1aa; + + --aurora-green: #34d399; /* Raikas vihreä tummalle */ + --ice-blue: #38bdf8; + + --glass-bg: rgba(10, 10, 11, 0.75); + --glass-border: rgba(255, 255, 255, 0.08); + + --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5); + --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.8); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-body); + background-color: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + font-weight: 700; + line-height: 1.2; +} + +p { + color: var(--text-secondary); + margin-bottom: 1rem; +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition); +} + +ul { + list-style: none; +} + +img { + max-width: 100%; + display: block; +} + +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +.text-center { + text-align: center; +} + +.mt-4 { + margin-top: 2rem; +} + +/* --- BUTTONS --- */ +.btn-primary { + display: inline-block; + background: linear-gradient(135deg, var(--aurora-green) 0%, var(--ice-blue) 100%); + color: #000; + font-weight: 600; + padding: 0.8rem 2rem; + border-radius: var(--radius-xl); + font-family: var(--font-heading); + transition: var(--transition); + box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(52, 211, 153, 0.5); + color: #000; +} + +.btn-primary-sm { + display: inline-block; + background: linear-gradient(135deg, var(--aurora-green) 0%, var(--ice-blue) 100%); + color: #000 !important; + font-weight: 600; + padding: 0.5rem 1.2rem; + border-radius: var(--radius-xl); + font-family: var(--font-heading); +} + +.btn-primary-sm:hover { + transform: translateY(-2px); +} + +.btn-outline { + display: inline-block; + background: transparent; + color: var(--text-primary); + font-weight: 600; + padding: 0.8rem 2rem; + border-radius: var(--radius-xl); + font-family: var(--font-heading); + border: 1px solid var(--glass-border); + backdrop-filter: blur(10px); + transition: var(--transition); +} + +.btn-outline:hover { + background: var(--bg-tertiary); + border-color: rgba(255, 255, 255, 0.2); +} + +/* --- NAVIGATION --- */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 100; + transition: var(--transition); + padding: 1.5rem 0; +} + +.navbar.scrolled { + padding: 1rem 0; + background: var(--glass-bg); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid var(--glass-border); +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo h1 { + font-size: 1.5rem; + letter-spacing: -0.5px; +} + +.logo span { + font-weight: 300; + color: var(--text-secondary); +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-links li a { + font-weight: 500; + font-size: 0.95rem; +} + +.nav-links li a:not(.btn-primary-sm):hover { + color: var(--aurora-green); +} + +.theme-toggle { + background: transparent; + border: 1px solid var(--glass-border); + color: var(--text-primary); + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition); +} + +.theme-toggle:hover { + background: var(--bg-tertiary); + color: var(--aurora-green); +} + +/* --- HERO SECTION --- */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + z-index: -2; + transform: scale(1.05); /* helps with parallax/animations */ +} + +.hero-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(10, 10, 11, 0.4) 0%, rgba(10, 10, 11, 1) 100%); + z-index: -1; +} + +.hero-content { + text-align: center; + max-width: 800px; + margin-top: 5rem; +} + +.hero-title { + font-size: clamp(3rem, 5vw, 5rem); + letter-spacing: -1.5px; + margin-bottom: 1.5rem; + background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +/* --- PRICING SECTION --- */ +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.price-card { + background: var(--bg-secondary); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius); + padding: 2.5rem; + transition: var(--transition); +} + +.price-card:hover { + transform: translateY(-5px); + border-color: var(--aurora-green); + box-shadow: 0 10px 30px rgba(0,255,163,0.1); +} + +.price-header h3 { + margin-bottom: 1rem; + font-size: 1.5rem; + color: var(--text-primary); +} + +.price-header.highlight h3 { + color: var(--aurora-green); +} + +.price { + font-family: 'Outfit', sans-serif; + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.price span { + font-size: 1.25rem; + font-weight: 500; + color: var(--text-secondary); +} + +.extras-grid { + margin-top: 3rem; + background: var(--bg-secondary); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius); + padding: 2.5rem; +} + +.extras-grid h4 { + font-size: 1.5rem; + margin-bottom: 1.5rem; + color: var(--aurora-green); +} + +.extras-grid ul { + list-style: none; +} + +.extras-grid ul li { + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--glass-border); + display: flex; + justify-content: space-between; + color: var(--text-secondary); +} + +.extras-grid ul li:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; +} + +.extras-grid ul li span { + font-weight: 500; + color: var(--text-primary); +} + +/* --- GALLERY SECTION --- */ +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 0.75rem; + margin-top: 3rem; + max-width: 1400px; + margin-left: auto; + margin-right: auto; + padding: 0 1rem; +} + +.gallery-item { + position: relative; + overflow: hidden; + border-radius: var(--border-radius); + aspect-ratio: 4/3; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); +} + +.gallery-item img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; + display: block; +} + +.gallery-item:hover img { + transform: scale(1.05); +} + +.gallery-item::after { + content: ''; + position: absolute; + inset: 0; + background: rgba(0,0,0,0.2); + opacity: 0; + transition: opacity 0.3s ease; +} + +.gallery-item:hover::after { + opacity: 1; +} + +/* --- LIGHTBOX --- */ +.lightbox { + display: none; + position: fixed; + z-index: 1000; + padding-top: 60px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); +} + +.lightbox.active { + display: flex; + align-items: center; + justify-content: center; +} + +.lightbox-content-wrapper { + position: relative; + margin: auto; + max-width: 90%; + max-height: 80vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.lightbox-image { + max-width: 100%; + max-height: 80vh; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 10px 40px rgba(0,0,0,0.5); + opacity: 0; + transform: scale(0.95); + transition: all 0.3s ease; +} + +.lightbox-image.loaded { + opacity: 1; + transform: scale(1); +} + +.lightbox-caption { + margin-top: 1rem; + color: #fff; + text-align: center; + font-size: 1.1rem; + font-family: 'Outfit', sans-serif; + letter-spacing: 0.5px; +} + +.lightbox-close { + position: absolute; + top: 20px; + right: 35px; + color: #f1f1f1; + font-size: 40px; + font-weight: bold; + transition: 0.3s; + cursor: pointer; + z-index: 1001; +} + +.lightbox-close:hover, +.lightbox-close:focus { + color: var(--aurora-green); + text-decoration: none; + cursor: pointer; +} + +.lightbox-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255,255,255,0.2); + color: white; + width: 60px; + height: 60px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + transition: var(--transition); + backdrop-filter: blur(5px); + z-index: 1001; +} + +.lightbox-btn:hover { + background: var(--aurora-green); + color: var(--bg-primary); + border-color: var(--aurora-green); +} + +.lightbox-btn.prev { + left: 5%; +} + +.lightbox-btn.next { + right: 5%; +} + +@media (max-width: 768px) { + .lightbox-btn { + width: 40px; + height: 40px; + font-size: 1rem; + } + .lightbox-btn.prev { left: 10px; } + .lightbox-btn.next { right: 10px; } + .lightbox-image { max-height: 70vh; } +} + +/* --- CONTACT SECTION --- */ +.contact-section { + padding: 6rem 0; +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 3rem; + margin-bottom: 3rem; +} + +.contact-card { + background: var(--bg-secondary); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius); + padding: 2.5rem; + text-align: center; + transition: var(--transition); +} + +.contact-card:hover { + transform: translateY(-5px); + border-color: var(--aurora-green); + box-shadow: 0 10px 30px rgba(0,255,163,0.1); +} + +.contact-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.contact-card h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--aurora-green); +} + +.contact-card h4 { + font-family: 'Outfit', sans-serif; + font-size: 1.25rem; + font-weight: 700; + margin-top: 1rem; + color: var(--text-primary); +} + +.mt-2 { + margin-top: 0.5rem; +} + +.text-sm { + font-size: 0.875rem; +} + +.instagram-link { + color: var(--aurora-green); + font-weight: 500; +} + +.instagram-link:hover { + text-decoration: underline; +} + +.map-container { + width: 100%; + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0 10px 40px rgba(0,0,0,0.2); + background: var(--bg-secondary); + padding: 10px; + border: 1px solid var(--glass-border); +} + +.map-container iframe { + border-radius: calc(var(--border-radius) - 5px) !important; + display: block; +} + +.hero-subtitle { + font-size: 1.25rem; + max-width: 600px; + margin: 0 auto 2.5rem; + color: var(--text-secondary); +} + +.hero-actions { + display: flex; + justify-content: center; + gap: 1rem; +} + +/* --- SECTIONS --- */ +.section { + padding: 8rem 0; +} + +.section-title { + font-size: 2.5rem; + margin-bottom: 1rem; + position: relative; + display: inline-block; +} + +.section-desc { + max-width: 600px; + margin: 0 auto 4rem; + font-size: 1.1rem; +} + +/* --- ABOUT SECTION --- */ +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + align-items: center; +} + +.lead { + font-size: 1.25rem; + font-weight: 500; + color: var(--text-primary); + margin-bottom: 2rem; +} + +.feature-list { + margin-top: 2.5rem; +} + +.feature-list li { + position: relative; + padding-left: 2rem; + margin-bottom: 1rem; + font-weight: 500; +} + +.feature-list li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--aurora-green); + font-weight: bold; +} + +.about-image-wrapper { + position: relative; +} + +.about-image-card { + position: relative; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-lg); +} + +.about-image-card::after { + content: ''; + position: absolute; + inset: 0; + border-radius: var(--radius-lg); + border: 1px solid var(--glass-border); + pointer-events: none; +} + +.about-img { + width: 100%; + height: 600px; + object-fit: cover; + transition: transform 0.7s ease; +} + +.about-image-card:hover .about-img { + transform: scale(1.05); +} + +.img-badge { + position: absolute; + bottom: 2rem; + right: -1rem; + background: var(--glass-bg); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + padding: 1rem 2rem; + border-radius: var(--radius-xl); + border: 1px solid var(--glass-border); + font-family: var(--font-heading); + font-weight: 600; + box-shadow: var(--shadow-lg); + z-index: 10; +} + +/* --- SERVICES GRID --- */ +.features-section { + background-color: var(--bg-secondary); + border-top: 1px solid var(--glass-border); + border-bottom: 1px solid var(--glass-border); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.feature-card { + background: var(--bg-primary); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + overflow: hidden; + transition: var(--transition); + text-align: left; +} + +.feature-card:hover { + transform: translateY(-10px); + border-color: rgba(255, 255, 255, 0.15); + box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5); +} + +.card-img-wrapper { + height: 220px; + overflow: hidden; + position: relative; +} + +.card-img-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.feature-card:hover .card-img-wrapper img { + transform: scale(1.05); +} + +.card-img-wrapper::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%); + pointer-events: none; +} + +.card-content { + padding: 2rem; +} + +.card-content h3 { + font-size: 1.4rem; + margin-bottom: 1rem; +} + +/* --- CTA SECTION --- */ +.cta-section { + position: relative; + min-height: 60vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.cta-bg { + z-index: -2; +} + +.cta-overlay { + background: linear-gradient(to bottom, var(--bg-primary) 0%, rgba(10, 10, 11, 0.7) 50%, var(--bg-primary) 100%); +} + +.cta-content { + max-width: 600px; +} + +/* --- FOOTER --- */ +.footer { + border-top: 1px solid var(--glass-border); + padding: 4rem 0 2rem; +} + +.footer-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + margin-bottom: 4rem; +} + +.footer-brand h2 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.footer-brand span { + font-weight: 300; + color: var(--text-secondary); +} + +.footer-contact h3 { + font-size: 1.1rem; + margin-bottom: 1.5rem; + color: var(--text-primary); +} + +.footer-bottom { + border-top: 1px solid var(--glass-border); + padding-top: 2rem; + color: var(--text-secondary); + font-size: 0.9rem; +} + +/* --- ANIMATIONS --- */ +.reveal-up { + opacity: 0; + transform: translateY(30px); + animation: revealUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} + +.scroll-reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.scroll-reveal.active { + opacity: 1; + transform: translateY(0); +} + +.delay-1 { animation-delay: 0.2s; transition-delay: 0.2s; } +.delay-2 { animation-delay: 0.4s; transition-delay: 0.4s; } + +@keyframes revealUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* --- RESPONSIVE --- */ +@media (max-width: 768px) { + .nav-links { + display: none; /* simple mobile nav override */ + } + + .about-grid, .footer-grid { + grid-template-columns: 1fr; + gap: 3rem; + } + + .hero-actions { + flex-direction: column; + } + + .img-badge { + position: static; + display: inline-block; + margin-top: 1rem; + transform: none; + } +}