commit b355509a55573e36a7761c215a024df5b1df7167 Author: Paweł Domański Date: Wed Jul 22 07:44:25 2026 +0200 first commit diff --git a/images/server_room_hero.jpg b/images/server_room_hero.jpg new file mode 100644 index 0000000..0f82f88 Binary files /dev/null and b/images/server_room_hero.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0297700 --- /dev/null +++ b/index.html @@ -0,0 +1,332 @@ + + + + + + Start w Sieci | Tworzenie Stron Internetowych dla Małych Firm + + + + + + + + + + +
+ +
+
+ Nowoczesna serwerownia - niezawodny hosting i infrastruktura www +
+
+ +
+
+
+ + Dostępne wolne terminy w tym miesiącu +
+ +

+ Zbuduj swoją obecność w sieci.
+ Prosto, szybko i bez wodotrysków. +

+ +

+ Tworzę nowoczesne strony wizytówkowe dla małych firm i młodych przedsiębiorców, którzy chcą skutecznie pozyskiwać klientów w internecie – bez zawiłego języka i ukrytych kosztów. +

+ +
+ + Rozpocznij projekt + + + Zobacz usługi +
+ +
+
+ + 10 lat doświadczenia +
+
+ + 100% responsywne (RWD) +
+
+ + Optymalizacja i hosting +
+
+
+
+
+ + +
+
+
+
+ O mnie +

Doświadczenie, na którym możesz polegać

+

+ Od ponad 10 lat tworzę strony internetowe, które łączą przejrzysty styl z wysoki stopniem użyteczności. Doskonale rozumiem wyzwania, z jakimi mierzą się małe firmy oraz nowo powstałe biznesy. +

+

+ Nie narzucam skomplikowanych technologii ani zbędnych funkcji. Moim celem jest dostarczenie Ci strony, która jest czytelna, szybko się ładuje i od pierwszej sekundy buduje zaufanie Twoich przyszłych klientów. +

+

+ Stawiam na stały kontakt, jasne zasady i pomoc na każdym etapie – od wyboru domeny aż po publikację witryny w sieci. +

+
+ +
+
+
10+
+
Lat doświadczenia w branży web dev
+
+
+
100%
+
Stron dopasowanych do urządzeń mobilnych
+
+
+
24h
+
Maksymalny czas odpowiedzi na zapytanie
+
+
+
0 zł
+
Ukrytych opłat abonamentowych
+
+
+
+
+
+ + +
+
+
+ Oferta +

Co mogę dla Ciebie zrobić?

+

Kompleksowe rozwiązanie dopasowane do budżetu i potrzeb Twojej firmy.

+
+ +
+ +
+
+ +
+

Strona Wizytówkowa

+

+ Prosta, elegancka strona zawierająca najważniejsze informacje o Twojej firmie, ofercie orazdane kontaktowe. Idealny start w internecie. +

+
    +
  • Projekty One-Page / Kilka podstron
    • +
  • Dedykowany, stonowany styl
    • +
  • Formularz kontaktowy i mapa
    • +
+
+ + +
+
+ +
+

Landing Page Oferty

+

+ Skupiona na konwersji strona docelowa stworzona do promocji konkretnej usługi, produktu lub kampanii reklamowej. +

+
    +
  • Chwytliwe nagłówki i przyciski CTA
    • +
  • Integracja z systemami analityki
    • +
  • Błyskawiczne tempo ładowania
    • +
+
+ + +
+
+ +
+

Hosting & Domena

+

+ Wsparcie w wyborze serwera, rejestracji domeny oraz konfiguracji poczty e-mail w Twojej własnej domenie firmowej. +

+
    +
  • Instalacja certyfikatu SSL
    • +
  • Konfiguracja skrzynek pocztowych
    • +
  • Pomoc w sprawach technicznych
    • +
+
+ + +
+
+ +
+

Podstawowe SEO & RWD

+

+ Przygotowanie witryny pod kątem wyszukiwarki Google oraz zapewnienie idealnego działania na smartfonach i tabletach. +

+
    +
  • Optymalizacja słów kluczowych
    • +
  • Testy na urządzeniach mobilnych
    • +
  • Rejestracja w Google Search Console
    • +
+
+
+
+
+ + +
+
+
+ Zasady współpracy +

Dlaczego warto współpracować ze mną?

+

Prosty proces, przejrzystość i partnerstwo bez niedomówień.

+
+ +
+
+
⚡
+

Szybka realizacja

+

Stronę wizytówkową otrzymasz zazwyczaj w ciągu 5-7 dni roboczych od ustalenia szczegółów.

+
+ +
+
💬
+

Prosty język

+

Rozmawiamy o biznesie, nie o kodzie. Wyjaśniam wszystko w zrozumiały sposób.

+
+ +
+
🏷️
+

Jasny cennik

+

Znasz ostateczny koszt przed rozpoczęciem prac. Zero ukrytych opłat po wdrożeniu.

+
+ +
+
🤝
+

Wsparcie po wdrożeniu

+

Nie zostawiam Cię samego ze stroną. Pomagam we wprowadzaniu zmian i aktualizacjach.

+
+
+
+
+ + +
+
+
+
+ Kontakt +

Porozmawiajmy o Twojej nowej stronie

+

+ Masz pytania lub chcesz wycenić projekt? Wypełnij krótki formularz lub skontaktuj się ze mną bezpośrednio. Odpowiadam w ciągu kilkunastu godzin. +

+ +
+
+
+ +
+
+ + kontakt@startwsieci.eu +
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+ +

+ * Administratorem Twoich danych osobowych jest Jan Domański (Start w Sieci, e-mail: kontakt@startwsieci.eu). Podanie danych jest dobrowolne, ale niezbędne do obsługi zapytania. Masz prawo dostępu do treści swoich danych oraz ich poprawiania lub usunięcia. +

+ +
+ Dziękuję za wiadomość! Skontaktuję się z Tobą w ciągu 24 godzin. +
+ + +
+
+
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ff2b1e0 --- /dev/null +++ b/script.js @@ -0,0 +1,118 @@ +// ========================================================================== +// Konfiguracja EmailJS +// ========================================================================== +const EMAILJS_PUBLIC_KEY = "TxpnuzLYOz70x6lLo"; +const EMAILJS_SERVICE_ID = "service_ynkmge1"; +const EMAILJS_TEMPLATE_ID = "template_vkqg8ch"; + +document.addEventListener('DOMContentLoaded', () => { + // Inicjalizacja EmailJS SDK jeśli podano klucz + if (typeof emailjs !== 'undefined' && EMAILJS_PUBLIC_KEY !== "TWOJ_PUBLIC_KEY") { + emailjs.init(EMAILJS_PUBLIC_KEY); + } + + const header = document.getElementById('header'); + const mobileToggle = document.getElementById('mobile-toggle'); + const navMenu = document.getElementById('nav-menu'); + const contactForm = document.getElementById('contact-form'); + const formSuccess = document.getElementById('form-success'); + const formSubmitBtn = document.getElementById('form-submit-btn'); + + // 1. Efekt przyklejonego header-a przy przewijaniu + window.addEventListener('scroll', () => { + if (window.scrollY > 30) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + }); + + // 2. Obsługa nawigacji mobilnej + if (mobileToggle && navMenu) { + mobileToggle.addEventListener('click', () => { + navMenu.classList.toggle('active'); + const isExpanded = navMenu.classList.contains('active'); + mobileToggle.setAttribute('aria-expanded', isExpanded); + }); + + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + navMenu.classList.remove('active'); + }); + }); + } + + // 3. Wysyłka formularza kontaktowego przez EmailJS + if (contactForm) { + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const name = document.getElementById('name').value.trim(); + const email = document.getElementById('email').value.trim(); + const phone = document.getElementById('phone') ? document.getElementById('phone').value.trim() : ''; + const message = document.getElementById('message').value.trim(); + const rodo = document.getElementById('rodo'); + + if (!name || !email || !phone || !message) { + alert('Proszę wypełnić wszystkie wymagane pola.'); + return; + } + + if (rodo && !rodo.checked) { + alert('Wymagana jest akceptacja zgody na przetwarzanie danych osobowych (RODO).'); + return; + } + + formSubmitBtn.disabled = true; + formSubmitBtn.innerText = 'Wysyłanie...'; + + // Jeśli klucze są ustawione, wysyłamy przez EmailJS + if (typeof emailjs !== 'undefined' && EMAILJS_PUBLIC_KEY !== "TWOJ_PUBLIC_KEY") { + emailjs.sendForm(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, contactForm) + .then(() => { + formSubmitBtn.style.display = 'none'; + formSuccess.style.display = 'block'; + contactForm.reset(); + }) + .catch((error) => { + console.error('Błąd wysyłania EmailJS:', error); + alert('Wystąpił błąd podczas wysyłania wiadomości. Spróbuj ponownie.'); + formSubmitBtn.disabled = false; + formSubmitBtn.innerText = 'Wyślij zapytanie o bezpłatną wycenę'; + }); + } else { + // Tryb demonstracyjny (gdy klucze nie są jeszcze podmienione) + setTimeout(() => { + formSubmitBtn.style.display = 'none'; + formSuccess.style.display = 'block'; + contactForm.reset(); + }, 1000); + } + }); + } + + // 4. Subtelne animacje pojawiania się przy skrolowaniu + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.15 + }; + + const observer = new IntersectionObserver((entries, obs) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + obs.unobserve(entry.target); + } + }); + }, observerOptions); + + const animatedElements = document.querySelectorAll('.service-card, .why-card, .stat-card'); + animatedElements.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'all 0.5s ease-out'; + observer.observe(el); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1672465 --- /dev/null +++ b/styles.css @@ -0,0 +1,830 @@ +/* ========================================================================== + Strona Wizytówkowa - Tworzenie Stron Internetowych + Paleta: Tonalne Szarości / Modern Slate Minimalist + ========================================================================== */ + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); + +:root { + /* Paleta szarości */ + --bg-dark: #0b0f17; + --bg-surface: #131a26; + --bg-card: #1a2332; + --bg-card-hover: #222d40; + --bg-light: #f8fafc; + + --text-primary: #f8fafc; + --text-secondary: #94a3b8; + --text-muted: #64748b; + --text-dark: #0f172a; + + --accent-light: #e2e8f0; + --accent-gray: #475569; + --border-color: rgba(255, 255, 255, 0.08); + --border-focus: rgba(226, 232, 240, 0.3); + + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); + --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.4); + --shadow-glow: 0 0 25px rgba(255, 255, 255, 0.05); + + --radius-sm: 8px; + --radius-md: 14px; + --radius-lg: 20px; + --radius-full: 9999px; + + --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + --font-heading: 'Plus Jakarta Sans', sans-serif; + --font-body: 'Inter', sans-serif; +} + +/* Reset i bazy */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-body); + background-color: var(--bg-dark); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* Kontenery i układy */ +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.section { + padding: 6rem 0; + position: relative; +} + +.section-darker { + background-color: var(--bg-surface); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); +} + +/* Typografia nagłówkowa */ +.section-header { + text-align: center; + max-width: 720px; + margin: 0 auto 4rem auto; +} + +.section-tag { + display: inline-block; + padding: 0.35rem 1rem; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: var(--radius-full); + font-size: 0.85rem; + font-weight: 600; + color: var(--text-secondary); + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 1rem; +} + +.section-title { + font-family: var(--font-heading); + font-size: 2.25rem; + font-weight: 700; + color: var(--text-primary); + line-height: 1.25; + margin-bottom: 1rem; +} + +.section-subtitle { + font-size: 1.1rem; + color: var(--text-secondary); + font-weight: 400; +} + +/* Przycisk (Buttons) */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.6rem; + padding: 0.85rem 1.8rem; + border-radius: var(--radius-md); + font-family: var(--font-heading); + font-weight: 600; + font-size: 0.95rem; + cursor: pointer; + transition: all var(--transition-fast); + border: none; + outline: none; +} + +.btn-primary { + background-color: var(--text-primary); + color: var(--text-dark); + box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15); +} + +.btn-primary:hover { + background-color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25); +} + +.btn-secondary { + background-color: rgba(255, 255, 255, 0.06); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.btn-secondary:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.btn-block { + width: 100%; +} + +/* ========================================================================== + NAWIGACJA (Header) + ========================================================================== */ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + padding: 1.25rem 0; + transition: all var(--transition-smooth); +} + +.header.scrolled { + background-color: rgba(11, 15, 23, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + padding: 0.85rem 0; + border-bottom: 1px solid var(--border-color); +} + +.nav-wrapper { + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + font-family: var(--font-heading); + font-size: 1.35rem; + font-weight: 800; + color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; + letter-spacing: -0.02em; +} + +.logo span { + color: var(--text-muted); + font-weight: 500; +} + +.nav-menu { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-link { + font-size: 0.95rem; + font-weight: 500; + color: var(--text-secondary); + transition: color var(--transition-fast); +} + +.nav-link:hover { + color: var(--text-primary); +} + +.mobile-toggle { + display: none; + background: none; + border: none; + color: var(--text-primary); + font-size: 1.5rem; + cursor: pointer; +} + +/* ========================================================================== + HERO SECTION + ========================================================================== */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + padding-top: 7rem; + padding-bottom: 5rem; + overflow: hidden; + background-color: var(--bg-dark); +} + +/* Tło z serwerownią i gradientowym overlayem */ +.hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +.hero-bg img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + filter: grayscale(80%) brightness(0.35) contrast(1.1); + transform: scale(1.05); + transition: transform 10s ease-out; +} + +.hero-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient(circle at 50% 30%, rgba(11, 15, 23, 0.6) 0%, rgba(11, 15, 23, 0.95) 100%), + linear-gradient(to bottom, rgba(11, 15, 23, 0.4), var(--bg-dark)); +} + +.hero-content { + position: relative; + z-index: 2; + max-width: 820px; + margin: 0 auto; + text-align: center; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 1.1rem; + background: rgba(255, 255, 255, 0.07); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-full); + font-size: 0.85rem; + color: var(--text-primary); + margin-bottom: 1.75rem; +} + +.badge-dot { + width: 8px; + height: 8px; + background-color: #10b981; + border-radius: 50%; + box-shadow: 0 0 8px #10b981; +} + +.hero-title { + font-family: var(--font-heading); + font-size: 3.25rem; + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.03em; + margin-bottom: 1.5rem; + color: #ffffff; +} + +.hero-title .highlight { + color: #94a3b8; + font-weight: 600; +} + +.hero-description { + font-size: 1.2rem; + color: var(--text-secondary); + margin-bottom: 2.5rem; + max-width: 680px; + margin-left: auto; + margin-right: auto; +} + +.hero-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + margin-bottom: 3.5rem; +} + +/* Pasek zaufania */ +.hero-features { + display: flex; + align-items: center; + justify-content: center; + gap: 2.5rem; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.feature-item { + display: flex; + align-items: center; + gap: 0.6rem; + font-size: 0.9rem; + color: var(--text-secondary); +} + +.feature-item svg { + width: 18px; + height: 18px; + stroke: var(--text-primary); +} + +/* ========================================================================== + SEKCJA O MNIE + ========================================================================== */ +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.about-text h3 { + font-family: var(--font-heading); + font-size: 1.85rem; + font-weight: 700; + margin-bottom: 1.25rem; + color: var(--text-primary); +} + +.about-text p { + color: var(--text-secondary); + margin-bottom: 1.25rem; + font-size: 1.05rem; +} + +.about-text p strong { + color: var(--text-primary); + font-weight: 600; +} + +.about-stats { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; +} + +.stat-card { + background-color: var(--bg-card); + border: 1px solid var(--border-color); + padding: 1.75rem; + border-radius: var(--radius-md); + transition: transform var(--transition-fast), border-color var(--transition-fast); +} + +.stat-card:hover { + transform: translateY(-3px); + border-color: var(--border-focus); +} + +.stat-number { + font-family: var(--font-heading); + font-size: 2.5rem; + font-weight: 800; + color: var(--text-primary); + line-height: 1; + margin-bottom: 0.5rem; +} + +.stat-label { + font-size: 0.9rem; + color: var(--text-secondary); +} + +/* ========================================================================== + SEKCJA USŁUGI + ========================================================================== */ +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + gap: 2rem; +} + +.service-card { + background-color: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 2.25rem; + transition: all var(--transition-smooth); + display: flex; + flex-direction: column; +} + +.service-card:hover { + background-color: var(--bg-card-hover); + border-color: var(--border-focus); + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.service-icon { + width: 52px; + height: 52px; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; +} + +.service-icon svg { + width: 26px; + height: 26px; + stroke: var(--text-primary); +} + +.service-title { + font-family: var(--font-heading); + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 0.85rem; + color: var(--text-primary); +} + +.service-description { + font-size: 0.95rem; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1.5rem; + flex-grow: 1; +} + +.service-list { + border-top: 1px solid var(--border-color); + padding-top: 1.25rem; +} + +.service-list li { + font-size: 0.85rem; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.service-list li svg { + width: 14px; + height: 14px; + stroke: var(--text-secondary); +} + +/* ========================================================================== + DLACZEGO WARTO + ========================================================================== */ +.why-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; +} + +.why-card { + background-color: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: 1.75rem; + text-align: left; +} + +.why-icon { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.why-card h4 { + font-family: var(--font-heading); + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.why-card p { + font-size: 0.9rem; + color: var(--text-secondary); +} + +/* ========================================================================== + SEKCJA KONTAKT + ========================================================================== */ +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 3.5rem; + background-color: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 3.5rem; + box-shadow: var(--shadow-lg); +} + +.contact-info h3 { + font-family: var(--font-heading); + font-size: 2rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.contact-info p { + color: var(--text-secondary); + margin-bottom: 2rem; + font-size: 1.05rem; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.detail-item { + display: flex; + align-items: center; + gap: 1rem; +} + +.detail-icon { + width: 44px; + height: 44px; + background-color: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; +} + +.detail-icon svg { + width: 20px; + height: 20px; + stroke: var(--text-primary); +} + +.detail-text label { + display: block; + font-size: 0.75rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.detail-text span { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); +} + +/* Formularz */ +.contact-form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.form-group label { + font-size: 0.85rem; + font-weight: 600; + color: var(--text-secondary); +} + +.form-input, .form-textarea { + width: 100%; + padding: 0.85rem 1.1rem; + background-color: var(--bg-surface); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + color: var(--text-primary); + font-family: var(--font-body); + font-size: 0.95rem; + outline: none; + transition: border-color var(--transition-fast); +} + +.form-input:focus, .form-textarea:focus { + border-color: var(--accent-light); + box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); +} + +.form-textarea { + resize: vertical; + min-height: 120px; +} + +/* RODO Styles */ +.form-checkbox { + margin-top: 0.5rem; +} + +.checkbox-label { + display: flex; + align-items: flex-start; + gap: 0.75rem; + font-size: 0.82rem; + color: var(--text-secondary); + line-height: 1.4; + cursor: pointer; +} + +.checkbox-label input[type="checkbox"] { + width: 18px; + height: 18px; + margin-top: 2px; + accent-color: var(--text-primary); + cursor: pointer; + flex-shrink: 0; +} + +.rodo-notice { + font-size: 0.75rem; + color: var(--text-muted); + line-height: 1.45; + margin-top: 0.25rem; + margin-bottom: 0.5rem; + border-left: 2px solid var(--border-color); + padding-left: 0.75rem; +} + +.form-success-msg { + display: none; + padding: 1rem; + background-color: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.3); + border-radius: var(--radius-sm); + color: #10b981; + font-size: 0.9rem; + text-align: center; +} + +/* ========================================================================== + STOPKA (Footer) + ========================================================================== */ +.footer { + padding: 3rem 0; + border-top: 1px solid var(--border-color); + background-color: var(--bg-dark); +} + +.footer-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; +} + +.footer-copy { + font-size: 0.85rem; + color: var(--text-muted); +} + +.footer-links { + display: flex; + gap: 1.5rem; +} + +.footer-links a { + font-size: 0.85rem; + color: var(--text-muted); + transition: color var(--transition-fast); +} + +.footer-links a:hover { + color: var(--text-primary); +} + +/* ========================================================================== + RESPONSYWNOŚĆ (RWD) + ========================================================================== */ +@media (max-width: 992px) { + .hero-title { + font-size: 2.6rem; + } + + .about-grid { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .why-grid { + grid-template-columns: repeat(2, 1fr); + } + + .contact-wrapper { + grid-template-columns: 1fr; + padding: 2.5rem; + } +} + +@media (max-width: 768px) { + .section { + padding: 4rem 0; + } + + .hero-title { + font-size: 2.1rem; + } + + .hero-description { + font-size: 1rem; + } + + .hero-features { + flex-direction: column; + gap: 1rem; + } + + .hero-actions { + flex-direction: column; + width: 100%; + } + + .hero-actions .btn { + width: 100%; + } + + .nav-menu { + position: fixed; + top: 0; + right: -100%; + width: 80%; + max-width: 320px; + height: 100vh; + background-color: var(--bg-surface); + flex-direction: column; + align-items: flex-start; + padding: 5rem 2rem 2rem 2rem; + transition: right var(--transition-smooth); + border-left: 1px solid var(--border-color); + } + + .nav-menu.active { + right: 0; + } + + .mobile-toggle { + display: block; + z-index: 1001; + } + + .why-grid { + grid-template-columns: 1fr; + } + + .footer-content { + flex-direction: column; + text-align: center; + } +}