/* ========================================= 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 - Z powrotem ucięty w całości */ .tile-link { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; text-decoration: none; /* Domyślny kolor obramowania (przed najechaniem) */ background-color: var(--border); clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); overflow: hidden; transition: background-color 0.3s ease; } /* Wewnętrzna warstwa chroniąca środek (tworzy 1px ramki dookoła) */ .tile-link::after { content: ""; position: absolute; inset: 1px; background-color: var(--bg-main); /* MAGIA: Zwiększamy ucięcie wewnątrz do 16px. Dzięki temu ukośna ramka nie jest rozmazana przez przeglądarkę i zyskuje PEŁNY kolor */ clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); z-index: -1; } /* OBRAZEK TŁA - WIDOCZNY I NIEZMIENNY */ .tile-link::before { content: ""; position: absolute; inset: 1px; background-image: var(--bg-img); background-size: cover; background-position: center; /* Obrazek też ucinamy na 16px, by idealnie pasował do środka */ clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); opacity: 0.4; filter: grayscale(30%); z-index: 0; } /* 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; 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::after, .tile-cv::before { /* Ucięcie większe o 1px dla pełnego koloru na skosach */ clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px); } .tile-cv .tile-title { font-size: 3rem; } /* ========================================= EFEKTY HOVER - POKAZANIE RAMKI W KOLORZE ========================================= */ .tile-link:hover { background-color: var(--accent); /* Ramka zmienia kolor na akcentowy (pełny, żywy kolor na rogach) */ } .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; gap: 15px; /* Nieco mniejszy odstęp między kafelkami na telefonie */ } .tile-link { width: 100%; /* Wymuszenie pełnej szerokości */ } .tile-cv { grid-column: span 1; height: 140px; /* Nadajemy mu tylko nieco większą wysokość zamiast proporcji */ min-height: auto; aspect-ratio: auto; /* RESET: To rozwiąże problem zgniecionego kafelka! */ padding: 20px; /* Zmniejszamy ścięcia rogów, żeby pasowały do reszty kafelków na telefonie */ clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); } .tile-cv::after, .tile-cv::before { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); } /* Dopasowanie rozmiaru tekstów do mniejszych ekranów */ .tile-title { font-size: 1.5rem; } .tile-cv .tile-title { font-size: 1.8rem; } } /* ========================================= ROZDZIELONY KAFELEK (FILMWEB / MAL) ========================================= */ .tile-split { position: relative; width: 100%; height: 120px; display: block; } .tile-split .tile-link { position: absolute; top: 0; height: 100%; } /* LEWA POŁÓWKA (FILMWEB) */ .tile-split .tile-split-left { left: 0; width: calc(50% + 15px); clip-path: polygon(15px 0, 100% 0, calc(100% - 30px) 100%, 0 100%, 0 15px); } .tile-split-left::after, .tile-split-left::before { clip-path: polygon(16px 0, 100% 0, calc(100% - 30px) 100%, 0 100%, 0 16px); } .tile-split .tile-split-left .tile-title { margin-right: 15px; /* Delikatne przesunięcie, by tekst nie wchodził na skos */ font-size: 1.6rem; } /* PRAWA POŁÓWKA (MAL) */ .tile-split .tile-split-right { right: 0; width: calc(50% + 15px); clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); } .tile-split-right::after, .tile-split-right::before { clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); } .tile-split .tile-split-right .tile-title { margin-left: 15px; font-size: 1.6rem; }