/* ============================================ STRONA BHP – STYLE GŁÓWNE Jasny, minimalny, elegancki (inspiracja: OstroVit) ============================================ */ /* --- ZMIENNE (Custom Properties) --- Warianty kolorystyczne: - nr 1: niebieski - nr 2: czerwony (PPOŻ) - nr 3: żółto-pomarańczowy (barwy BHP) */ :root { --color-bg: #f5f5f5; --color-bg-section: #ffffff; --color-text: #1f1f1f; --color-text-muted: #4a4a4a; --color-graphite: #2d2d2d; /* Domyślnie: wariant nr 2 (czerwony) */ --color-accent: #c41e3a; --color-accent-hover: #a01830; --color-border: #e0e0e0; --font-sans: 'DM Sans', system-ui, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --max-width: 1100px; --spacing-section: 5rem; --radius: 8px; /* Używane do cieni/poświaty (RGB bez kanału alfa) */ --color-accent-rgb: 196, 30, 58; } /* ========== WARIANTY KOLORÓW (ustaw na ) ========== */ body[data-variant="1"] { --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-rgb: 37, 99, 235; } body[data-variant="2"] { --color-accent: #c41e3a; --color-accent-hover: #a01830; --color-accent-rgb: 196, 30, 58; } /* Barwy BHP: żółto‑pomarańczowy (czytelny na bieli, mocny akcent) */ body[data-variant="3"] { --color-accent: #f59e0b; --color-accent-hover: #d97706; --color-accent-rgb: 245, 158, 11; } /* --- RESET / BAZA --- * = wszystkie elementy. box-sizing: border-box sprawia, że padding nie powiększa całkowitej szerokości elementu. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Płynne przewijanie do #o-nas, #uslugi itd. */ } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* --- KONTENER --- Ogranicza szerokość treści i wyśrodkowuje (margin: 0 auto). padding po bokach = treść nie przykleja się do krawędzi na mobile. */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } /* ========== NAWIGACJA ========== */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; position: relative; } .logo { font-weight: 700; font-size: 1.25rem; color: var(--color-text); text-decoration: none; } .logo:hover { text-decoration: none; } .logo span { color: var(--color-accent); } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } .nav a { display: block; width: 100%; color: var(--color-text); font-weight: 500; font-size: 0.9375rem; } .nav a:hover { color: var(--color-accent); text-decoration: none; } .menu-toggle { display: block; background: none; border: none; font-size: 1.5rem; cursor: pointer; } .nav.is-open { display: flex; } /* --- PRZYCISKI --- */ .btn { display: inline-block; padding: 0.75rem 1.5rem; font-weight: 600; font-size: 0.9375rem; border-radius: var(--radius); transition: background 0.2s, color 0.2s; text-decoration: none; border: 2px solid transparent; } .btn-small { padding: 0.5rem 1rem; } .btn-primary { background: var(--color-accent); color: white; } .btn-primary:hover { background: var(--color-accent-hover); text-decoration: none; } .btn-outline { border-color: var(--color-text); color: var(--color-text); } .btn-outline:hover { background: var(--color-text); color: white; text-decoration: none; } .btn-full { width: 100%; } /* ========== HERO ========== */ .hero { padding: 4rem 0 5rem; background: var(--color-bg-section); } .hero-inner { max-width: 640px; } .hero-badge { font-size: 0.875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; line-height: 1.2; margin-bottom: 1.25rem; color: var(--color-text); } .hero-lead { font-size: 1.125rem; color: var(--color-text-muted); margin-bottom: 2rem; } .hero-cta { display: flex; flex-direction: column; gap: 1rem; } .hero-cta .btn { width: 100%; text-align: center; } /* ========== PASEK ZAUFANIA ========== */ .trust-bar { padding: 2rem 0; background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .trust-inner { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .trust-item { text-align: center; } .trust-value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-accent); } .trust-label { font-size: 0.875rem; color: var(--color-text-muted); } /* ========== SEKCJE OGÓLNE ========== */ .section { padding: var(--spacing-section) 0; background: var(--color-bg-section); } .section:nth-child(even) { background: var(--color-bg); } .section-inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } .section-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; } .section-title-center { text-align: center; margin-bottom: 0.5rem; } .section-lead { text-align: center; color: var(--color-text-muted); max-width: 540px; margin: 0 auto 2.5rem; } /* ========== O NAS ========== */ .about-content .section-title { margin-bottom: 1rem; } .about-lead { color: var(--color-text-muted); margin-bottom: 1.5rem; } .about-list { list-style: none; } .about-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; } .about-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; } .about-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; } .about-card-text { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--color-text-muted); } .about-visual { order: -1; } /* ========== USŁUGI ========== */ .services { padding-bottom: var(--spacing-section); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .service-card { background: var(--color-bg-section); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; cursor: pointer; } .service-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(var(--color-accent-rgb), 0.12); transform: translateY(-2px); } .service-card:active { transform: translateY(0); } .service-icon { font-size: 2rem; margin-bottom: 1rem; } .service-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .service-card p { font-size: 0.9375rem; color: var(--color-text-muted); } /* ========== OPINIE ========== */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .testimonial-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; font-style: italic; } .testimonial-card p { margin-bottom: 1rem; color: var(--color-text); } .testimonial-card footer { font-size: 0.875rem; color: var(--color-text-muted); font-style: normal; } /* ========== KONTAKT (Wersja z poprawką na kursor i brak dymków) ========== */ /* ========== KONTAKT - FINALNA POPRAWKA ========== */ .contact-info .section-title { margin-bottom: 0.75rem; } .contact-info p { color: var(--color-text-muted); margin-bottom: 1.5rem; } .contact-list { list-style: none; } .contact-list li { margin-bottom: 0.5rem; } .contact-form label { display: block; font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; } .contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: 1rem; margin-bottom: 1rem; /* Naprawa kursora */ caret-color: #1f1f1f !important; color: #1f1f1f; background-color: #ffffff; /* Stabilizacja układu */ display: block; transform: translateZ(0); -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.1); } /* Klasa błędu dla Twojej walidacji */ .contact-form input.error, .contact-form textarea.error { border-color: #b91c1c !important; background-color: #fffafa; } .form-status { margin-top: 1rem; font-size: 0.95rem; } .form-status.is-error { color: #b91c1c; font-weight: 600; } /* ========== STATUS FORMULARZA ========== */ .form-status { margin-top: 1rem; font-size: 0.95rem; color: var(--color-text-muted); } .form-status.is-success { color: var(--color-accent); font-weight: 600; } .form-status.is-error { color: #b91c1c; font-weight: 600; } /* ========== STOPKA ========== */ .footer { padding: 2rem 0; background: var(--color-graphite); color: #a3a3a3; text-align: center; font-size: 0.875rem; } /* ========== RESPONSYWNOŚĆ (mobile-first) ========== */ @media (min-width: 481px) { .hero-cta { flex-direction: row; flex-wrap: wrap; } .hero-cta .btn { width: auto; text-align: left; } } @media (min-width: 769px) { .nav { display: flex; position: static; background: transparent; flex-direction: row; align-items: center; gap: 1.5rem; padding: 0; border-bottom: 0; } .nav a { display: inline-block; width: auto; } .menu-toggle { display: none; } .section-inner { grid-template-columns: 1fr 1fr; } .about-visual { order: 0; } .trust-inner { gap: 3rem; } }