/* ========================================= SPECYFICZNY UKŁAD STRONY GŁÓWNEJ (HUB) ========================================= */ /* Wymaga w pliku HTML */ body.hub-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } /* ========================================= GŁÓWNY KONTENER ========================================= */ .links-wrapper { width: 100%; max-width: 1000px; /* Pancerne centrowanie w poziomie (lewo-prawo) */ margin: 0 auto; /* Pancerne centrowanie w pionie (góra-dół) */ min-height: calc(100vh - 40px); display: flex; flex-direction: column; justify-content: center; } /* ========================================= NAGŁÓWEK PROFILU ========================================= */ .profile-header { display: flex; align-items: center; gap: 22px; margin-bottom: 45px; position: relative; z-index: 10; } .profile-avatar { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; /* Charakterystyczne ścięte rogi */ clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); } .profile-info h1 { color: var(--text-main); font-size: 1.8rem; margin: 0; letter-spacing: 1px; } /* ========================================= SIATKA KAFELKÓW (BENTO GRID) ========================================= */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } /* GŁÓWNY KAFELEK */ .tile-link { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; text-decoration: none; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); overflow: hidden; background-color: var(--bg-surface); /* Usunięte transformacje - kafelek w ogóle się nie rusza */ } /* OBRAZEK TŁA - WIDOCZNY I NIEZMIENNY (nawet przy hover) */ .tile-link::before { content: ""; position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; /* Na sztywno ustawione przyciemnienie i szarość */ opacity: 0.4; filter: grayscale(30%); z-index: 0; /* Brak właściwości "transition", bo tło nie reaguje już na myszkę */ } /* TEKST NA KAFELKU */ .tile-title { position: relative; z-index: 1; color: var(--text-main); font-size: 2rem; font-weight: 400; margin: 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); transition: color 0.3s, text-shadow 0.3s; } /* Wyróżniony, duży kafelek (CV) */ .tile-cv { grid-column: span 3; padding: 45px 35px; /* Tło z rgba usunięte, bo teraz wszystko opiera się na --bg-img */ clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px); aspect-ratio: auto; min-height: 260px; } .tile-cv .tile-title { font-size: 3rem; } /* ========================================= EFEKTY HOVER (Zmienia się TYLKO napis) ========================================= */ .tile-link:hover .tile-title { color: var(--accent); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 4px 15px rgba(0, 0, 0, 0.8); } /* ========================================= RESPONSYWNOŚĆ (TELEFONY I MNIEJSZE EKRANY) ========================================= */ @media (max-width: 768px) { .grid-container { grid-template-columns: 1fr; } .tile-cv { grid-column: span 1; padding: 35px 20px; aspect-ratio: 4 / 3; min-height: auto; } .tile-cv .tile-title { font-size: 2.4rem; } }