|
|
| Рядок 460: |
Рядок 460: |
| /* ==================================================== */ | | /* ==================================================== */ |
|
| |
|
| .mcc-heroes-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; padding: 0; margin: 20px 0; } | | /* Список героїв */ |
| .mcc-heroes-list li { width: 18.5%; margin-bottom: 20px; } | | .mcc-heroes-list { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 16px; |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | } |
| | |
| | .mcc-heroes-list li { |
| | margin: 0; |
| | } |
|
| |
|
| /* Стилі картки - зовнішній контейнер */ | | /* Картка героя */ |
| .mcc-hero-card { | | .mcc-hero-card { |
| height: 240px;
| |
| width: 100%;
| |
| overflow: hidden;
| |
| position: relative; | | position: relative; |
| filter: grayscale(1); | | display: block; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | | width: 242px; |
| background-color: #333; | | max-width: 100%; |
| transition: box-shadow 0.3s ease-in-out; | | border-radius: 12px; |
| | overflow: hidden; |
| | background: #1a1a2e; |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } | | } |
|
| |
|
| .mcc-hero-card:hover { | | .mcc-hero-card:hover { |
| filter: grayscale(0);
| | transform: translateY(-4px); |
| }
| | box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); |
| | |
| .mcc-champion-card {
| |
| height: 240px;
| |
| width: 100%;
| |
| overflow: hidden;
| |
| position: relative;
| |
| box-shadow: 2 5px 8px rgba(255, 0, 0, 0.2); | |
| background-color: #333;
| |
| border: 1px solid #d8b283;
| |
| transition: box-shadow 0.3s ease-in-out;
| |
| } | | } |
|
| |
|
| /* Стилі для посилання (контейнер) */
| |
| .mcc-hero-link { | | .mcc-hero-link { |
| display: block;
| | display: block; |
| height: 100%;
| | text-decoration: none; |
| width: 100%;
| | color: inherit; |
| position: relative;
| |
| text-decoration: none;
| |
| color: white;
| |
| z-index: 2;
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| /* ПОЗИЦІОНУВАННЯ ТА АНІМАЦІЯ ЗОБРАЖЕННЯ */
| | .mcc-hero-card .hero-image-wiki, |
| .mcc-hero-card .hero-image-wiki { | | .mcc-hero-card .hero-image-wiki img, |
| position: absolute;
| | .mcc-hero-card .mw-file-element { |
| top: 0;
| | display: block; |
| left: 0;
| | width: 100%; |
| width: 100%;
| | height: auto; |
| height: 100%;
| |
| z-index: 0;
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| .mcc-hero-card .hero-image-wiki a img { | | .mcc-hero-info { |
| width: 100%;
| | position: absolute; |
| height: 100%;
| | bottom: 0; |
| object-fit: cover;
| | left: 0; |
| transform: scale(1);
| | right: 0; |
| filter: grayscale(0);
| | padding: 40px 12px 12px; |
| transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
| | background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%); |
| }
| | color: #fff; |
| | |
| /* Анімація при наведенні: збільшення зображення */
| |
| .mcc-hero-card:hover .hero-image-wiki a img {
| |
| transform: scale(1.1);
| |
| border: 1px solid yellow;
| |
| } | | } |
|
| |
|
| .mcc-champion-card .hero-image-wiki { | | .mcc-hero-nickname { |
| position: absolute;
| | font-weight: 700; |
| top: 0;
| | font-size: 1.1em; |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| z-index: 0;
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| .mcc-champion-card .hero-image-wiki a img { | | .mcc-hero-date { |
| width: 100%;
| | font-size: 0.85em; |
| height: 100%;
| | opacity: 0.7; |
| object-fit: cover;
| |
| transform: scale(1);
| |
| transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
| |
| } | | } |
|
| |
|
| /* Анімація при наведенні: збільшення зображення */ | | /* Mobile responsive */ |
| .mcc-champion-card:hover .hero-image-wiki a img {
| | @media (max-width: 600px) { |
| transform: scale(1.1);
| | .mcc-heroes-list { |
| border: 1px solid yellow;
| | justify-content: center; |
| }
| | } |
| | | |
| /* Градієнт для читабельності тексту */
| | .mcc-hero-card { |
| .mcc-hero-link::after {
| | width: calc(50vw - 24px); |
| content: '';
| | min-width: 140px; |
| position: absolute;
| | } |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%);
| |
| z-index: 1.5;
| |
| }
| |
| | |
| /* Інформаційний блок */
| |
| .mcc-hero-info { | |
| position: absolute;
| |
| bottom: 10px;
| |
| width: 100%;
| |
| text-align: center;
| |
| padding: 0 5px; | |
| box-sizing: border-box; | |
| z-index: 3; | |
| }
| |
| | |
| .mcc-hero-nickname { font-size: 14px; color: white; font-weight: bold; line-height: 1.2; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
| |
| .mcc-hero-date { font-size: 14px; color: yellow; opacity: 0.9; line-height: 1.2; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
| |
| | |
| .mcc-hero-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } | |
| | |
| .mcc-champion-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); }
| |
| | |
| @media (max-width: 720px) {
| |
| .mcc-heroes-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; padding: 0; margin: 20px 0; }
| |
| .mcc-heroes-list li { width: 45%; margin-bottom: 20px; } | |
| } | | } |