|
|
| Рядок 1: |
Рядок 1: |
| /* =============================================
| | $(function() { |
| Головна сторінка — привітання та сітка проєктів
| | $('.category-card').each(function() { |
| ============================================= */
| | var $card = $(this); |
| | | var href = $card.attr('data-href'); |
| /* Привітальний блок — full-width */
| | |
| .welcome-text {
| | if (href) { |
| text-align: center; | | $card.css('cursor', 'pointer'); |
| font-style: italic;
| | |
| margin: 30px -9999rem 30px -9999rem; /* негативні маржини для виходу за контент */
| | $card.on('click', function(e) { |
| margin-left: calc(-50vw + 50%);
| | // якщо клікнули по вже існуючому посиланню всередині — не перехоплюємо |
| margin-right: calc(-50vw + 50%);
| | if ($(e.target).closest('a').length === 0) { |
| padding: 30px;
| | window.location.href = href; |
| background: #003d82;
| | } |
| color: white;
| | }); |
| border-radius: 0; /* прибираємо радіус, бо full-bleed */
| | |
| box-shadow: 0 4px 20px rgba(0,61,130,0.18);
| | // опціонально: hover-ефект |
| position: relative;
| | $card.hover( |
| z-index: 1;
| | function() { $card.addClass('card-hover'); }, |
| }
| | function() { $card.removeClass('card-hover'); } |
| | | ); |
| .welcome-text strong {
| | } |
| color: #ffd700;
| | }); |
| font-size: 24px;
| | }); |
| font-weight: 700;
| |
| display: block;
| |
| margin-top: 12px;
| |
| font-style: normal;
| |
| }
| |
| | |
| /* Заголовок секції "Наші проєкти" — full-width */
| |
| .section-projects {
| |
| background: #003d82;
| |
| color: #ffd700;
| |
| padding: 16px 24px;
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| margin: 35px -9999rem 25px -9999rem;
| |
| margin-left: calc(-50vw + 50%);
| |
| margin-right: calc(-50vw + 50%);
| |
| text-align: center;
| |
| box-shadow: 0 3px 12px rgba(0,61,130,0.15);
| |
| position: relative;
| |
| z-index: 1;
| |
| }
| |
| | |
| .section-projects .emoji {
| |
| font-size: 28px;
| |
| margin-right: 10px;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| /* Сітка карток — full-width */
| |
| .category-grid-container { | |
| display: grid;
| |
| grid-template-columns: repeat(4, 1fr);
| |
| gap: 20px 16px;
| |
| margin: 0 -9999rem 50px -9999rem;
| |
| margin-left: calc(-50vw + 50%);
| |
| margin-right: calc(-50vw + 50%);
| |
| padding: 30px 5vw; /* внутрішні відступи з боків для краси */
| |
| box-sizing: border-box;
| |
| background: #f8fafc; /* легкий фон, щоб видно було розширення */
| |
| }
| |
| | |
| /* Окрема картка */
| |
| .category-card {
| |
| text-align: center;
| |
| background: #ffffff;
| |
| border: 1px solid #e2e8f0;
| |
| border-radius: 10px;
| |
| overflow: hidden; /* щоб закруглення працювало */
| |
| box-shadow: 0 3px 10px rgba(0,0,0,0.06);
| |
| transition: all 0.18s ease;
| |
| }
| |
| | |
| | |
| | |
| .card-link { | |
| display: block;
| |
| height: 100%;
| |
| text-decoration: none;
| |
| color: inherit;
| |
| }
| |
| | |
| .category-card:hover .card-link { | |
| text-decoration: none; /* при ховері не підкреслюємо автоматично */
| |
| } | |
| | |
| .card-title a { /* на випадок, якщо десь залишиться вкладене посилання */
| |
| color: inherit;
| |
| text-decoration: none;
| |
| } | |
| .card-link:hover .card-title {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Блок з картинкою */ | |
| .card-image {
| |
| margin-bottom: 14px;
| |
| padding: 16px 0 0;
| |
| }
| |
| | |
| .card-image img {
| |
| width: 80px;
| |
| height: 80px;
| |
| object-fit: contain;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* Назва під картинкою */
| |
| .card-title {
| |
| font-size: 15px;
| |
| font-weight: 600;
| |
| line-height: 1.4;
| |
| color: #1e40af;
| |
| padding: 0 12px 16px;
| |
| min-height: 3em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
| | |
| /* Адаптивність */
| |
| @media (max-width: 1024px) {
| |
| .category-grid-container {
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 18px 14px;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .category-grid-container {
| |
| grid-template-columns: repeat(2, 1fr);
| |
| gap: 16px 12px;
| |
| padding: 20px 4vw;
| |
| }
| |
|
| |
| .card-image img {
| |
| width: 70px;
| |
| height: 70px;
| |
| }
| |
|
| |
| .card-title {
| |
| font-size: 14.5px;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .category-grid-container {
| |
| grid-template-columns: 1fr;
| |
| gap: 16px;
| |
| padding: 16px 5vw; | |
| }
| |
| }
| |
| | |
| /* Загальні стилі */
| |
| body {
| |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| } | |
| | |
| a {
| |
| color: #1d4ed8;
| |
| } | |
| | |
| a:hover {
| |
| color: #1e40af;
| |
| }
| |