Okres programowania 2021-2027<style>
:root {
--eu-blue: #003399;
--eu-yellow: #FFCC00;
--chorzow-red: #f20000;
--card-bg: #ffffff;
--card-border: #eaeaea;
--text-dark: #333333;
}
.eu-period-wrapper {
font-family: sans-serif;
max-width: 900px;
margin: 0 auto 40px auto;
color: var(--text-dark);
line-height: 1.6;
}
.eu-period-title {
color: var(--eu-blue);
font-size: 1.8rem;
margin-top: 0;
margin-bottom: 30px;
border-bottom: 3px solid var(--eu-yellow);
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
/* 1. SEKCJA LOGOTYPÓW - IDEALNE KWADRATY */
.eu-squares-container {
display: flex;
flex-wrap: wrap; /* Kafelki spadną niżej na wąskim ekranie */
gap: 25px;
list-style: none;
padding: 0;
margin: 0 0 45px 0;
}
.eu-square-card {
/* Magiczna zasada tworząca perfekcyjny kwadrat */
width: 190px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 20px;
text-decoration: none;
outline: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s ease;
}
.eu-square-card:hover,
.eu-square-card:focus-visible {
transform: translateY(-5px);
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
border-color: var(--eu-blue);
}
.eu-square-img {
max-width: 100%;
max-height: 120px;
object-fit: contain;
transition: transform 0.4s ease;
}
.eu-square-card:hover .eu-square-img,
.eu-square-card:focus-visible .eu-square-img {
transform: scale(1.05);
}
/* 2. SEKCJA POJEDYNCZYCH PROJEKTÓW - STYL DOKUMENTU */
.eu-projects-subtitle {
font-size: 1.2rem;
color: var(--text-dark);
margin-bottom: 15px;
}
.eu-document-list {
list-style: none;
padding: 0;
margin: 0;
}
.eu-document-list li {
margin-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
}
/* Wygląd linku do konkretnego projektu */
.eu-document-link {
display: inline-flex;
align-items: baseline;
gap: 12px;
padding: 12px 10px;
color: var(--eu-blue);
text-decoration: none;
font-weight: 500;
font-size: 1.05rem;
border-radius: 6px;
transition: background-color 0.2s, color 0.2s, padding-left 0.2s;
}
.eu-document-link::before {
content: "📄"; /* Ikona dokumentu sugerująca konkretny artykuł */
font-size: 1.2rem;
}
.eu-document-link:hover,
.eu-document-link:focus-visible {
background-color: #f4f7fb; /* Bardzo delikatny niebieski w tle */
color: var(--chorzow-red); /* Akcentowanie miejską czerwienią po najechaniu */
padding-left: 15px; /* Delikatne wcięcie tekstu */
}
</style>
<div class="eu-period-wrapper">
<h2 class="eu-period-title">🇪🇺 Okres programowania 2021-2027</h2>
<ul class="eu-squares-container">
<li>
<a href="http://mieszkancy.chorzow.eu/article/fundusze-europejskie-dla-slaskiego-2021-2027" class="eu-square-card">
<img class="eu-square-img" src="https://chorzow.eu/download/cmVzb3VyY2VzL2ZpbGVzLzk4L0Z1bmR1c3plX0V1cm9wZWpza2llX2RsYV9fX2xfX3NraWVnb182OWU3MjUzZDMzZmY0LnBuZw%3D%3D" alt="Fundusze Europejskie dla Śląskiego" loading="lazy">
</a>
</li>
<li>
<a href="https://mieszkancy.chorzow.eu/article/krajowy-plan-odbudowy" class="eu-square-card">
<img class="eu-square-img" src="https://chorzow.eu/download/cmVzb3VyY2VzL2ZpbGVzLzk4L0tyb2pvd3lfcGxhbl9PZGJ1ZG93eV82OWZhZmVlZDY4ZDUwLnBuZw%3D%3D" alt="Krajowy Plan Odbudowy" loading="lazy">
</a>
</li>
</ul>
<h3 class="eu-projects-subtitle">Realizowane projekty:</h3>
<ul class="eu-document-list">
<li>
<a href="https://mieszkancy.chorzow.eu/article/projekt-od-a-do-z-od-aktywnosci-do-zawodu" class="eu-document-link">
Projekt „Od A do Z: od aktywności do zawodu”
</a>
</li>
</ul>
</div>2026-06-03 22:40:082026-06-03 22:40:08