/* ================================================================================ GŁÓWNE STYLE STRONY ================================================================================ */ /* Podstawowa czcionka i styl dla */ .page-body { background-color: #bcb9b5; /* Tailwind's bg-stone-50 */ color: #292524; /* Tailwind's text-stone-800 */ font-family: 'Cormorant Garamond', serif; } /* ================================================================================ STYLE DLA STRONY GŁÓWNEJ (index.html) ================================================================================ */ .hero-bg { background-image: url('./pics/site_pics/landing_bg.jpg'); } .landing-links-section-bg { background-color: #4A2526; } .landing-link-box-bg { background-color: #f7f2e8; } .landing-link-box-title { color: #e53e3e; font-family: 'Inter', sans-serif; } /* ================================================================================ STYLE DLA STRONY PROJEKTU (np. work_1.html) ================================================================================ */ .project-intro-bg { background-color: #4A2526; } .project-title { font-family: 'Inter', sans-serif; color: #e53e3e; } /* --- ZAKTUALIZOWANE STYLE SLIDERA --- */ /* Kontener dla slidera, utrzymujący stały rozmiar */ .slider-viewport { position: relative; width: 100%; /* Utrzymuje stałe proporcje 4:3. Można zmienić np. na 16/9 */ aspect-ratio: 4 / 3; background-color: #f3f4f6; /* Tło na czas ładowania obrazu */ } /* Kontener na wszystkie slajdy */ .slider { width: 100%; height: 100%; } /* Pojedynczy slajd */ .slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /* Domyślnie niewidoczny */ transition: opacity 0.4s ease-in-out; /* Płynne przejście */ visibility: hidden; /* Ukryty przed interakcją */ } /* Aktywny (widoczny) slajd */ .slider .slide.active { opacity: 1; visibility: visible; z-index: 10; } /* Obraz wewnątrz slajdu */ .slider .slide img { width: 100%; height: 100%; object-fit: cover; /* Wypełnia kontener, przycinając obraz jeśli trzeba */ object-position: center; /* Wyśrodkowuje obraz */ }