/* --- style.css --- */ /* 1. Zmienne i Ogólne */ /* Fonty są teraz ładowane w plików HTML/PHP dla lepszej wydajności */ :root { /* KOLOR GŁÓWNY: #8B0000 (DarkRed) */ --primary-color: #8B0000; --primary-hover: #600000; --dark-bg: #111111; --card-bg: #1a1a1a; --text-dark: #222222; --text-light: #ffffff; --font-heading: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; --font-artistic: 'Dancing Script', cursive; } body { font-family: var(--font-body); color: var(--text-dark); font-size: 18px; line-height: 1.8; overflow-x: hidden; font-weight: 400; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; } h1.display-3 { font-size: 3.5rem; text-shadow: 2px 2px 10px rgba(0,0,0,0.7); } p.lead { font-size: 1.25rem; font-weight: 400; } a { text-decoration: none; transition: all 0.3s ease; } /* 2. Nawigacja */ .navbar { padding: 15px 0; transition: all 0.4s ease; background: transparent; } .navbar.scrolled { background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(15px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .nav-link { color: #fff !important; text-transform: uppercase; font-weight: 800; font-size: 0.95rem; letter-spacing: 1px; margin: 0 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); } .nav-link:hover, .nav-link.active { color: var(--primary-color) !important; } .nav-link::after { content: ''; display: block; width: 0; height: 3px; background: var(--primary-color); transition: width 0.3s; margin-top: 2px; } .nav-link:hover::after { width: 100%; } /* 3. Sekcje i Tła */ .parallax-section, .section-padding { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .section-padding { padding: 120px 0; } /* Overlays */ .overlay-hero { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* ZMIANA: Jeszcze jaśniej. Góra całkowicie przezroczysta (0.0), dół delikatny (0.4) */ background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4)); z-index: 1; } .overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 1; } .overlay-very-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1; } /* 4. Hero Section */ #hero { height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; margin-top: 0; } .hero-content { position: relative; z-index: 2; padding-top: 80px; } .hero-slogan { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 1.4rem; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.8); margin-bottom: 30px; } /* 5. Przyciski */ .btn-main, .btn-main-lg { background-color: var(--primary-color); color: #fff !important; border-radius: 50px; font-weight: 800; text-transform: uppercase; transition: all 0.3s; border: 2px solid var(--primary-color); /* Cień RGB(139, 0, 0) */ box-shadow: 0 5px 20px rgba(139, 0, 0, 0.5); letter-spacing: 1px; font-family: var(--font-heading); } .btn-main { padding: 10px 30px; font-size: 0.95rem; } .btn-main-lg { padding: 18px 50px; font-size: 1.1rem; margin-top: 30px; } .btn-main:hover, .btn-main-lg:hover { background-color: transparent; border-color: #fff; transform: translateY(-3px); /* Cień RGB(139, 0, 0) */ box-shadow: 0 10px 25px rgba(139, 0, 0, 0.6); background-color: rgba(0,0,0,0.2); } /* 6. Nagłówki Sekcji */ .section-header { font-size: 3rem; font-weight: 900; position: relative; display: inline-block; z-index: 2; margin-bottom: 40px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); } .section-header::after { content: ''; display: block; width: 80px; height: 6px; background: var(--primary-color); margin: 20px 0 0; } .text-center .section-header::after { margin: 20px auto 0; } /* 7. OFERTA */ #offer { color: #fff; background-image: url('images/6_background_main_web_q90.webp'); background-size: cover; background-attachment: fixed; position: relative; box-shadow: inset 0 0 150px rgba(0,0,0,0.8); } #offer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 0; } #offer .container { position: relative; z-index: 2; } .offer-bg-card { position: relative; background-size: cover; background-position: center; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 20px 50px rgba(0,0,0,0.7) !important; border-radius: 20px !important; height: 100%; } .offer-bg-card:hover { transform: translateY(-10px); /* Cień RGB(139, 0, 0) */ box-shadow: 0 30px 60px rgba(139, 0, 0, 0.3) !important; border-color: var(--primary-color); } .offer-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1; transition: background 0.3s; } .offer-bg-card:hover .offer-overlay-dark { background: rgba(0, 0, 0, 0.75); } .list-unstyled li { font-size: 1.1rem; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; } .list-unstyled li:last-child { border-bottom: none; } /* 8. INFO CAROUSEL */ #info-carousel-section { background-image: url('images/7_background_OFERTA_web_q90.webp'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; } .carousel-indicators { bottom: 20px; } #infoCarousel .carousel-item { padding-bottom: 60px; } /* 9. Opinie */ .review-box { background: rgba(255,255,255,0.05); padding: 50px; border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .review-box p { font-size: 1.4rem; font-style: italic; font-weight: 300; } /* 10. Formularz Kontaktowy */ .contact-form { border-top: 6px solid var(--primary-color); background: rgba(10, 10, 10, 0.9) !important; padding: 50px !important; backdrop-filter: blur(10px); } .form-control { background-color: #222; border: 1px solid #444; color: #fff; padding: 15px; font-size: 1.1rem; border-radius: 10px; } .form-control:focus { background-color: #333; border-color: var(--primary-color); color: #fff; /* Cień RGB(139, 0, 0) */ box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.25); } .form-control::placeholder { color: #aaaaaa; opacity: 1; } .form-label { font-size: 1.1rem; margin-bottom: 10px; color: #ddd; font-weight: 700; } /* 11. Footer */ footer { background: #000; font-size: 1rem; padding: 40px 0; } .social-links a { transition: color 0.3s; } .social-links a:hover { color: var(--primary-color) !important; } /* 12. WhatsApp */ .whatsapp-float { position: fixed; width: 70px; height: 70px; bottom: 30px; right: 30px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .whatsapp-float:hover { background-color: #20b858; transform: scale(1.1); } /* 13. Social Tiles (hover) */ .social-tile { transition: transform 0.3s ease, background 0.3s; } .social-tile:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.1) !important; border-color: var(--primary-color) !important; } /* 14. Responsywność */ @media (max-width: 991px) { .navbar-collapse { background: rgba(0, 0, 0, 0.95); padding: 30px; } h1.display-3 { font-size: 2.8rem; } .hero-slogan { font-size: 1.1rem; } .section-header { font-size: 2.4rem; } .offer-bg-card { padding: 30px !important; } .parallax-section, #offer, #info-carousel-section { background-attachment: scroll; } } /* POPRAWKA DLA TELEFONÓW (Social Media) */ @media (max-width: 576px) { .social-tile { padding: 10px !important; /* Mniejszy padding wewnątrz kafelka */ } .social-tile h4 { font-size: 0.8rem !important; /* Znacznie mniejsza czcionka dla nazw (INSTAGRAM itp.) */ margin-bottom: 0 !important; word-wrap: break-word; /* Zabezpieczenie przed wychodzeniem */ } .social-tile i { font-size: 2.5rem !important; /* Nieco mniejsze ikony */ margin-bottom: 10px !important; } }