Добавлено (2026-03-10, 15:53)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
{{ $visible := .Get "visible" | default "true" }}
{{ $style := .Get "style" | default "button" }}

{{ if ne $visible "false" }}
<div class="info-card info-card-style-{{ $style }}">
<a href="{{ $link }}" class="info-card-link" target="_blank" rel="noopener">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}

{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
{{ end }}

<style>
/* ===== ОСНОВНЫЕ СТИЛИ ===== */
.info-card {
transition: all 0.2s ease;
position: relative;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
width: 100%;
}

.info-card-link {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
height: 100%;
box-sizing: border-box;
}

.info-card-link:hover {
text-decoration: none;
}

.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
width: 100%;
gap: 12px;
}

.info-card-left {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
padding-right: 8px;
gap: 10px;
}

.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}

.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}

.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1 1 auto;
min-width: 30px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}

.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}

/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 20px;
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 20px 0 0 0; /* Отступ сверху у каждой карточки */
box-sizing: border-box;
}

/* Убираем отступ у карточек первого ряда */
.cards-grid .info-card:nth-child(-n+4) { /* До 4-х карточек в первом ряду */
margin-top: 0;
}

/* Для 1 колонки */
.cards-grid.cols-1 .info-card:nth-child(1) {
margin-top: 0;
}

/* Для 2 колонок - первый ряд это 2 карточки */
.cards-grid.cols-2 .info-card:nth-child(-n+2) {
margin-top: 0;
}

/* Для 3 колонок - первый ряд это 3 карточки */
.cards-grid.cols-3 .info-card:nth-child(-n+3) {
margin-top: 0;
}

/* Для 4 колонок - первый ряд это 4 карточки */
.cards-grid.cols-4 .info-card:nth-child(-n+4) {
margin-top: 0;
}

/* 1 колонка - всегда на всю ширину */
.cards-grid.cols-1 .info-card {
width: 100%;
}

/* 2 колонки */
.cards-grid.cols-2 .info-card {
width: calc(50% - 10px);
}

/* 3 колонки */
.cards-grid.cols-3 .info-card {
width: calc(33.333% - 13.333px);
}

/* 4 колонки */
.cards-grid.cols-4 .info-card {
width: calc(25% - 15px);
}

/* Промежуточные состояния */
@media (max-width: 1100px) and (min-width: 901px) {
/* 4 колонки превращаются в 2 */
.cards-grid.cols-4 .info-card {
width: calc(50% - 10px);
}
/* Корректируем первый ряд для нового количества колонок */
.cards-grid.cols-4 .info-card:nth-child(-n+2) {
margin-top: 0;
}
.cards-grid.cols-4 .info-card:nth-child(n+3) {
margin-top: 20px;
}
}

@media (max-width: 900px) and (min-width: 751px) {
/* 3 и 4 колонки превращаются в 2 */
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: calc(50% - 10px);
}
/* Корректируем первый ряд */
.cards-grid.cols-3 .info-card:nth-child(-n+2),
.cards-grid.cols-4 .info-card:nth-child(-n+2) {
margin-top: 0;
}
.cards-grid.cols-3 .info-card:nth-child(n+3),
.cards-grid.cols-4 .info-card:nth-child(n+3) {
margin-top: 20px;
}
}

@media (max-width: 750px) {
/* Все колонки становятся в 1 ряд */
.cards-grid.cols-2 .info-card,
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: 100%;
}
/* Только первая карточка без отступа */
.cards-grid.cols-2 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(1) {
margin-top: 0;
}
.cards-grid.cols-2 .info-card:nth-child(n+2),
.cards-grid.cols-3 .info-card:nth-child(n+2),
.cards-grid.cols-4 .info-card:nth-child(n+2) {
margin-top: 20px;
}
}

/* ===== СТИЛЬ: BUTTON (по умолчанию) ===== */
.info-card-style-button {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
}

.info-card-style-button:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.info-card-style-button .info-card-link {
padding: 1rem 1.25rem;
}

/* ===== СТИЛЬ: LINK (простая ссылка с отступами) ===== */
.info-card-style-link {
border: none;
background: transparent;
border-radius: 0;
}

.info-card-style-link .info-card-link {
padding: 0.5rem 0.25rem;
border-bottom: 1px solid transparent;
}

.info-card-style-link:hover .info-card-link {
border-bottom-color: #4a90e2;
}

.info-card-style-link .info-card-title {
font-weight: 500;
}

.info-card-style-link .info-card-title-icon .custom-icon svg {
color: #4a90e2;
opacity: 0.8;
}

/* ===== СТИЛЬ: MINIMAL (минималистичный) ===== */
.info-card-style-minimal {
border: none;
background: transparent;
}

.info-card-style-minimal .info-card-link {
padding: 0.3rem 0;
}

.info-card-style-minimal .info-card-title {
font-weight: 400;
font-size: 0.95rem;
}

.info-card-style-minimal .info-card-title-icon .custom-icon svg {
color: #888;
width: 18px;
height: 18px;
}

.info-card-style-minimal:hover .info-card-title {
color: #4a90e2;
}

/* ===== СТИЛЬ: CARD (карточка с тенью) ===== */
.info-card-style-card {
border: none;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}

.info-card-style-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.info-card-style-card .info-card-link {
padding: 1.25rem 1.5rem;
}

.info-card-style-card .info-card-title {
font-size: 1.1rem;
}

/* ===== СТИЛЬ: PILL (в виде пилюли) ===== */
.info-card-style-pill {
border: 1px solid #e0e0e0;
border-radius: 50px;
background: #f8f9fa;
}

.info-card-style-pill:hover {
border-color: #4a90e2;
background: #ffffff;
}

.info-card-style-pill .info-card-link {
padding: 0.6rem 1.25rem;
}

.info-card-style-pill .info-card-title {
font-weight: 500;
font-size: 0.95rem;
}

/* ===== ТЕГИ ===== */
.info-card-tag {
display: inline-block;
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
flex-shrink: 0;
}

.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }

/* ===== ТУЛТИПЫ ===== */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}

.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
flex-shrink: 0;
}

.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}

.info-icon {
width: 16px;
height: 16px;
}

.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
}

.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
}

.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(50%) translateY(-5px);
}

.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}

.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}

.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}

.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 350px;
overflow-y: auto;
padding-right: 6px;
}

.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }

.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}

.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.tooltip-row:last-child {
margin-bottom: 0;
}

.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
}

.tooltip-row-text {
line-height: 1.4;
}

/* ===== ТЕМНАЯ ТЕМА ===== */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}

body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}

body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}

body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}

body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}

body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}

body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}

body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}

body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}

body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}

body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}

body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}

body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}

body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}

body.dark .info-card-style-link,
html.dark .info-card-style-link,
body.dark .info-card-style-minimal,
html.dark .info-card-style-minimal {
background: transparent;
}

body.dark .info-card-style-card,
html.dark .info-card-style-card {
background: #2d3748;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.dark .info-card-style-pill,
html.dark .info-card-style-pill {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card-style-pill:hover,
html.dark .info-card-style-pill:hover {
background: #374151;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
.info-card-header {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}

.info-card-left {
width: auto;
flex: 1 1 auto;
padding-right: 0;
}

.info-card-right-section {
width: auto;
flex-shrink: 0;
}

@media (max-width: 480px) {
.info-card-header {
flex-wrap: wrap;
}

.info-card-right-section {
width: 100%;
justify-content: flex-start;
margin-top: 4px;
}
}

.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}

.info-card-tooltip::before {
display: none;
}

.info-card {
margin: 0;
}

.info-card-link {
padding: 0.75rem 1rem;
}

.cards-grid {
gap: 15px;
}

.cards-grid .info-card {
margin: 15px 0 0 0;
}

/* Корректируем отступы на мобильных */
.cards-grid .info-card:nth-child(1) {
margin-top: 0;
}
}

@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}

.info-card-left {
gap: 8px;
}

.info-card {
margin: 0;
}

.cards-grid {
gap: 10px;
}

.cards-grid .info-card {
margin: 10px 0 0 0;
}

.cards-grid .info-card:nth-child(1) {
margin-top: 0;
}
}

@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}

@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
var wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');

wrappers.forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
var icon = wrapper.querySelector('.info-card-icon');

if (!tooltip || !icon) return;

function adjustTooltipPosition() {
if (window.innerWidth <= 768) return;

var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;

var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;
var tooltipHeight = tooltipRect.height;

if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}

wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});

wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});

wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();

if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});

var scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.classList.remove('tooltip-bottom');
setTimeout(function() {
var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;
var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;

if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});

window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
setTimeout(function() {
tooltip.style.opacity = '1';
}, 10);
}
});
});

document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});

document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>

Добавлено (2026-03-10, 16:03)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
{{ $visible := .Get "visible" | default "true" }}
{{ $style := .Get "style" | default "button" }}

{{ if ne $visible "false" }}
<div class="info-card info-card-style-{{ $style }}">
<a href="{{ $link }}" class="info-card-link" target="_blank" rel="noopener">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}

{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
{{ end }}

<style>
/* ===== ОСНОВНЫЕ СТИЛИ ===== */
.info-card {
transition: all 0.2s ease;
position: relative;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 0.75rem 0 0 0; /* Отступ сверху для всех карточек */
padding: 0;
width: 100%;
}

.info-card:first-of-type {
margin-top: 0; /* Убираем отступ у самой первой карточки */
}

.info-card-link {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
height: 100%;
box-sizing: border-box;
}

.info-card-link:hover {
text-decoration: none;
}

.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
width: 100%;
gap: 12px;
}

.info-card-left {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
padding-right: 8px;
gap: 10px;
}

.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}

.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}

.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1 1 auto;
min-width: 30px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}

.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}

/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 20px;
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 0; /* Убираем margin у карточек в сетке */
box-sizing: border-box;
}

/* 1 колонка */
.cards-grid.cols-1 .info-card {
width: 100%;
}

/* 2 колонки */
.cards-grid.cols-2 .info-card {
width: calc(50% - 10px);
}

/* 3 колонки */
.cards-grid.cols-3 .info-card {
width: calc(33.333% - 13.333px);
}

/* 4 колонки */
.cards-grid.cols-4 .info-card {
width: calc(25% - 15px);
}

/* Промежуточные состояния */
@media (max-width: 1100px) and (min-width: 901px) {
.cards-grid.cols-4 .info-card {
width: calc(50% - 10px);
}
}

@media (max-width: 900px) and (min-width: 751px) {
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: calc(50% - 10px);
}
}

@media (max-width: 750px) {
.cards-grid.cols-2 .info-card,
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: 100%;
}
}

/* ===== СТИЛЬ: BUTTON (по умолчанию) ===== */
.info-card-style-button {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
}

.info-card-style-button:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.info-card-style-button .info-card-link {
padding: 1rem 1.25rem;
}

/* ===== СТИЛЬ: LINK (простая ссылка с отступами) ===== */
.info-card-style-link {
border: none;
background: transparent;
border-radius: 0;
}

.info-card-style-link .info-card-link {
padding: 0.5rem 0.25rem;
border-bottom: 1px solid transparent;
}

.info-card-style-link:hover .info-card-link {
border-bottom-color: #4a90e2;
}

.info-card-style-link .info-card-title {
font-weight: 500;
}

.info-card-style-link .info-card-title-icon .custom-icon svg {
color: #4a90e2;
opacity: 0.8;
}

/* ===== СТИЛЬ: MINIMAL (минималистичный) ===== */
.info-card-style-minimal {
border: none;
background: transparent;
}

.info-card-style-minimal .info-card-link {
padding: 0.3rem 0;
}

.info-card-style-minimal .info-card-title {
font-weight: 400;
font-size: 0.95rem;
}

.info-card-style-minimal .info-card-title-icon .custom-icon svg {
color: #888;
width: 18px;
height: 18px;
}

.info-card-style-minimal:hover .info-card-title {
color: #4a90e2;
}

/* ===== СТИЛЬ: CARD (карточка с тенью) ===== */
.info-card-style-card {
border: none;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}

.info-card-style-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.info-card-style-card .info-card-link {
padding: 1.25rem 1.5rem;
}

.info-card-style-card .info-card-title {
font-size: 1.1rem;
}

/* ===== СТИЛЬ: PILL (в виде пилюли) ===== */
.info-card-style-pill {
border: 1px solid #e0e0e0;
border-radius: 50px;
background: #f8f9fa;
}

.info-card-style-pill:hover {
border-color: #4a90e2;
background: #ffffff;
}

.info-card-style-pill .info-card-link {
padding: 0.6rem 1.25rem;
}

.info-card-style-pill .info-card-title {
font-weight: 500;
font-size: 0.95rem;
}

/* ===== ТЕГИ ===== */
.info-card-tag {
display: inline-block;
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
flex-shrink: 0;
}

.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }

/* ===== ТУЛТИПЫ ===== */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}

.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
flex-shrink: 0;
}

.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}

.info-icon {
width: 16px;
height: 16px;
}

.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
}

.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
}

.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(50%) translateY(-5px);
}

.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}

.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}

.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}

.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 350px;
overflow-y: auto;
padding-right: 6px;
}

.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }

.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}

.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.tooltip-row:last-child {
margin-bottom: 0;
}

.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
}

.tooltip-row-text {
line-height: 1.4;
}

/* ===== ТЕМНАЯ ТЕМА ===== */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}

body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}

body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}

body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}

body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}

body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}

body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}

body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}

body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}

body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}

body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}

body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}

body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}

body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}

body.dark .info-card-style-link,
html.dark .info-card-style-link,
body.dark .info-card-style-minimal,
html.dark .info-card-style-minimal {
background: transparent;
}

body.dark .info-card-style-card,
html.dark .info-card-style-card {
background: #2d3748;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.dark .info-card-style-pill,
html.dark .info-card-style-pill {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card-style-pill:hover,
html.dark .info-card-style-pill:hover {
background: #374151;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
.info-card-header {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}

.info-card-left {
width: auto;
flex: 1 1 auto;
padding-right: 0;
}

.info-card-right-section {
width: auto;
flex-shrink: 0;
}

@media (max-width: 480px) {
.info-card-header {
flex-wrap: wrap;
}

.info-card-right-section {
width: 100%;
justify-content: flex-start;
margin-top: 4px;
}
}

.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}

.info-card-tooltip::before {
display: none;
}

.info-card {
margin: 0.5rem 0 0 0;
}

.info-card:first-of-type {
margin-top: 0;
}

.info-card-link {
padding: 0.75rem 1rem;
}

.cards-grid {
gap: 15px;
}

.cards-grid .info-card {
margin: 0;
}
}

@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}

.info-card-left {
gap: 8px;
}

.info-card {
margin: 0.4rem 0 0 0;
}

.info-card:first-of-type {
margin-top: 0;
}

.cards-grid {
gap: 10px;
}

.cards-grid .info-card {
margin: 0;
}
}

@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}

@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
var wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');

wrappers.forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
var icon = wrapper.querySelector('.info-card-icon');

if (!tooltip || !icon) return;

function adjustTooltipPosition() {
if (window.innerWidth <= 768) return;

var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;

var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;
var tooltipHeight = tooltipRect.height;

if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}

wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});

wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});

wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();

if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});

var scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.classList.remove('tooltip-bottom');
setTimeout(function() {
var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;
var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;

if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});

window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
setTimeout(function() {
tooltip.style.opacity = '1';
}, 10);
}
});
});

document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});

document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>

Добавлено (2026-03-10, 16:11)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
{{ $visible := .Get "visible" | default "true" }}
{{ $style := .Get "style" | default "button" }}

{{ if ne $visible "false" }}
<div class="info-card info-card-style-{{ $style }}">
<a href="{{ $link }}" class="info-card-link" target="_blank" rel="noopener">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}

{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
{{ end }}

<style>
/* ===== ОСНОВНЫЕ СТИЛИ ===== */
.info-card {
transition: all 0.2s ease;
position: relative;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 0 0 0.75rem 0; /* Отступ снизу для всех карточек */
padding: 0;
width: 100%;
}

.info-card:last-of-type {
margin-bottom: 0; /* Убираем отступ у самой последней карточки */
}

.info-card-link {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
height: 100%;
box-sizing: border-box;
}

.info-card-link:hover {
text-decoration: none;
}

.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
width: 100%;
gap: 12px;
}

.info-card-left {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
padding-right: 8px;
gap: 10px;
}

.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}

.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}

.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1 1 auto;
min-width: 30px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}

.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}

/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 20px;
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 0; /* Убираем margin у карточек в сетке */
box-sizing: border-box;
}

/* 1 колонка */
.cards-grid.cols-1 .info-card {
width: 100%;
}

/* 2 колонки */
.cards-grid.cols-2 .info-card {
width: calc(50% - 10px);
}

/* 3 колонки */
.cards-grid.cols-3 .info-card {
width: calc(33.333% - 13.333px);
}

/* 4 колонки */
.cards-grid.cols-4 .info-card {
width: calc(25% - 15px);
}

/* Промежуточные состояния */
@media (max-width: 1100px) and (min-width: 901px) {
.cards-grid.cols-4 .info-card {
width: calc(50% - 10px);
}
}

@media (max-width: 900px) and (min-width: 751px) {
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: calc(50% - 10px);
}
}

@media (max-width: 750px) {
.cards-grid.cols-2 .info-card,
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: 100%;
}
}

/* ===== СТИЛЬ: BUTTON (по умолчанию) ===== */
.info-card-style-button {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
}

.info-card-style-button:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.info-card-style-button .info-card-link {
padding: 1rem 1.25rem;
}

/* ===== СТИЛЬ: LINK (простая ссылка с отступами) ===== */
.info-card-style-link {
border: none;
background: transparent;
border-radius: 0;
}

.info-card-style-link .info-card-link {
padding: 0.5rem 0.25rem;
border-bottom: 1px solid transparent;
}

.info-card-style-link:hover .info-card-link {
border-bottom-color: #4a90e2;
}

.info-card-style-link .info-card-title {
font-weight: 500;
}

.info-card-style-link .info-card-title-icon .custom-icon svg {
color: #4a90e2;
opacity: 0.8;
}

/* ===== СТИЛЬ: MINIMAL (минималистичный) ===== */
.info-card-style-minimal {
border: none;
background: transparent;
}

.info-card-style-minimal .info-card-link {
padding: 0.3rem 0;
}

.info-card-style-minimal .info-card-title {
font-weight: 400;
font-size: 0.95rem;
}

.info-card-style-minimal .info-card-title-icon .custom-icon svg {
color: #888;
width: 18px;
height: 18px;
}

.info-card-style-minimal:hover .info-card-title {
color: #4a90e2;
}

/* ===== СТИЛЬ: CARD (карточка с тенью) ===== */
.info-card-style-card {
border: none;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}

.info-card-style-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.info-card-style-card .info-card-link {
padding: 1.25rem 1.5rem;
}

.info-card-style-card .info-card-title {
font-size: 1.1rem;
}

/* ===== СТИЛЬ: PILL (в виде пилюли) ===== */
.info-card-style-pill {
border: 1px solid #e0e0e0;
border-radius: 50px;
background: #f8f9fa;
}

.info-card-style-pill:hover {
border-color: #4a90e2;
background: #ffffff;
}

.info-card-style-pill .info-card-link {
padding: 0.6rem 1.25rem;
}

.info-card-style-pill .info-card-title {
font-weight: 500;
font-size: 0.95rem;
}

/* ===== ТЕГИ ===== */
.info-card-tag {
display: inline-block;
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
flex-shrink: 0;
}

.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }

/* ===== ТУЛТИПЫ ===== */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}

.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
flex-shrink: 0;
}

.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}

.info-icon {
width: 16px;
height: 16px;
}

.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
}

.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
}

.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(50%) translateY(-5px);
}

.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}

.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}

.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}

.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 350px;
overflow-y: auto;
padding-right: 6px;
}

.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }

.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}

.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.tooltip-row:last-child {
margin-bottom: 0;
}

.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
}

.tooltip-row-text {
line-height: 1.4;
}

/* ===== ТЕМНАЯ ТЕМА ===== */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}

body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}

body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}

body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}

body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}

body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}

body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}

body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}

body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}

body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}

body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}

body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}

body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}

body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}

body.dark .info-card-style-link,
html.dark .info-card-style-link,
body.dark .info-card-style-minimal,
html.dark .info-card-style-minimal {
background: transparent;
}

body.dark .info-card-style-card,
html.dark .info-card-style-card {
background: #2d3748;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.dark .info-card-style-pill,
html.dark .info-card-style-pill {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card-style-pill:hover,
html.dark .info-card-style-pill:hover {
background: #374151;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
.info-card-header {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}

.info-card-left {
width: auto;
flex: 1 1 auto;
padding-right: 0;
}

.info-card-right-section {
width: auto;
flex-shrink: 0;
}

@media (max-width: 480px) {
.info-card-header {
flex-wrap: wrap;
}

.info-card-right-section {
width: 100%;
justify-content: flex-start;
margin-top: 4px;
}
}

.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}

.info-card-tooltip::before {
display: none;
}

.info-card {
margin: 0 0 0.5rem 0; /* Отступ снизу на мобильных */
}

.info-card:last-of-type {
margin-bottom: 0;
}

.info-card-link {
padding: 0.75rem 1rem;
}

.cards-grid {
gap: 15px;
}

.cards-grid .info-card {
margin: 0;
}
}

@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}

.info-card-left {
gap: 8px;
}

.info-card {
margin: 0 0 0.4rem 0; /* Отступ снизу на маленьких экранах */
}

.info-card:last-of-type {
margin-bottom: 0;
}

.cards-grid {
gap: 10px;
}

.cards-grid .info-card {
margin: 0;
}
}

@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}

@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
var wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');

wrappers.forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
var icon = wrapper.querySelector('.info-card-icon');

if (!tooltip || !icon) return;

function adjustTooltipPosition() {
if (window.innerWidth <= 768) return;

var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;

var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;
var tooltipHeight = tooltipRect.height;

if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}

wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});

wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});

wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();

if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});

var scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.classList.remove('tooltip-bottom');
setTimeout(function() {
var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;
var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;

if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});

window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
setTimeout(function() {
tooltip.style.opacity = '1';
}, 10);
}
});
});

document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});

document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>

Добавлено (2026-03-10, 16:32)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
{{ $visible := .Get "visible" | default "true" }}
{{ $style := .Get "style" | default "button" }}

{{ if ne $visible "false" }}
<div class="info-card info-card-style-{{ $style }}">
<a href="{{ $link }}" class="info-card-link" target="_blank" rel="noopener">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}

{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
{{ end }}

<style>
/* ===== ОСНОВНЫЕ СТИЛИ ===== */
.info-card {
transition: all 0.2s ease;
position: relative;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 0.75rem 0 0 0; /* Отступ сверху для всех карточек */
padding: 0;
width: 100%;
}

.info-card:first-of-type {
margin-top: 0; /* Убираем отступ у самой первой карточки */
}

.info-card-link {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
height: 100%;
box-sizing: border-box;
}

.info-card-link:hover {
text-decoration: none;
}

.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
width: 100%;
gap: 12px;
}

.info-card-left {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
padding-right: 8px;
gap: 10px;
}

.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}

.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}

.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1 1 auto;
min-width: 30px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}

.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}

/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 10px; /* Уменьшил отступ в 2 раза (было 20px) */
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 0; /* Убираем margin у карточек в сетке */
box-sizing: border-box;
}

/* 1 колонка */
.cards-grid.cols-1 .info-card {
width: 100%;
}

/* 2 колонки */
.cards-grid.cols-2 .info-card {
width: calc(50% - 5px); /* 10px gap / 2 = 5px компенсация */
}

/* 3 колонки */
.cards-grid.cols-3 .info-card {
width: calc(33.333% - 6.667px); /* Компенсация для 3 колонок */
}

/* 4 колонки */
.cards-grid.cols-4 .info-card {
width: calc(25% - 7.5px); /* Компенсация для 4 колонок */
}

/* Промежуточные состояния */
@media (max-width: 1100px) and (min-width: 901px) {
.cards-grid.cols-4 .info-card {
width: calc(50% - 5px);
}
}

@media (max-width: 900px) and (min-width: 751px) {
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: calc(50% - 5px);
}
}

@media (max-width: 750px) {
.cards-grid.cols-2 .info-card,
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: 100%;
}
}

/* ===== СТИЛЬ: BUTTON (по умолчанию) ===== */
.info-card-style-button {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
}

.info-card-style-button:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.info-card-style-button .info-card-link {
padding: 1rem 1.25rem;
}

/* ===== СТИЛЬ: LINK (простая ссылка с отступами) ===== */
.info-card-style-link {
border: none;
background: transparent;
border-radius: 0;
}

.info-card-style-link .info-card-link {
padding: 0.5rem 0.25rem;
border-bottom: 1px solid transparent;
}

.info-card-style-link:hover .info-card-link {
border-bottom-color: #4a90e2;
}

.info-card-style-link .info-card-title {
font-weight: 500;
}

.info-card-style-link .info-card-title-icon .custom-icon svg {
color: #4a90e2;
opacity: 0.8;
}

/* ===== СТИЛЬ: MINIMAL (минималистичный) ===== */
.info-card-style-minimal {
border: none;
background: transparent;
}

.info-card-style-minimal .info-card-link {
padding: 0.3rem 0;
}

.info-card-style-minimal .info-card-title {
font-weight: 400;
font-size: 0.95rem;
}

.info-card-style-minimal .info-card-title-icon .custom-icon svg {
color: #888;
width: 18px;
height: 18px;
}

.info-card-style-minimal:hover .info-card-title {
color: #4a90e2;
}

/* ===== СТИЛЬ: CARD (карточка с тенью) ===== */
.info-card-style-card {
border: none;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}

.info-card-style-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.info-card-style-card .info-card-link {
padding: 1.25rem 1.5rem;
}

.info-card-style-card .info-card-title {
font-size: 1.1rem;
}

/* ===== СТИЛЬ: PILL (в виде пилюли) ===== */
.info-card-style-pill {
border: 1px solid #e0e0e0;
border-radius: 50px;
background: #f8f9fa;
}

.info-card-style-pill:hover {
border-color: #4a90e2;
background: #ffffff;
}

.info-card-style-pill .info-card-link {
padding: 0.6rem 1.25rem;
}

.info-card-style-pill .info-card-title {
font-weight: 500;
font-size: 0.95rem;
}

/* ===== ТЕГИ ===== */
.info-card-tag {
display: inline-block;
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
flex-shrink: 0;
}

.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }

/* ===== ТУЛТИПЫ ===== */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}

.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
flex-shrink: 0;
}

.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}

.info-icon {
width: 16px;
height: 16px;
}

.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
}

.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
}

.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(50%) translateY(-5px);
}

.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}

.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}

.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}

.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 350px;
overflow-y: auto;
padding-right: 6px;
}

.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }

.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}

.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.tooltip-row:last-child {
margin-bottom: 0;
}

.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
}

.tooltip-row-text {
line-height: 1.4;
}

/* ===== ТЕМНАЯ ТЕМА ===== */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}

body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}

body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}

body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}

body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}

body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}

body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}

body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}

body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}

body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}

body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}

body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}

body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}

body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}

body.dark .info-card-style-link,
html.dark .info-card-style-link,
body.dark .info-card-style-minimal,
html.dark .info-card-style-minimal {
background: transparent;
}

body.dark .info-card-style-card,
html.dark .info-card-style-card {
background: #2d3748;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.dark .info-card-style-pill,
html.dark .info-card-style-pill {
background: #2d3748;
border-color: #4a5568;
}

body.dark .info-card-style-pill:hover,
html.dark .info-card-style-pill:hover {
background: #374151;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
.info-card-header {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}

.info-card-left {
width: auto;
flex: 1 1 auto;
padding-right: 0;
}

.info-card-right-section {
width: auto;
flex-shrink: 0;
}

@media (max-width: 480px) {
.info-card-header {
flex-wrap: wrap;
}

.info-card-right-section {
width: 100%;
justify-content: flex-start;
margin-top: 4px;
}
}

.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}

.info-card-tooltip::before {
display: none;
}

.info-card {
margin: 0.5rem 0 0 0; /* Отступ сверху на мобильных */
}

.info-card:first-of-type {
margin-top: 0;
}

.info-card-link {
padding: 0.75rem 1rem;
}

.cards-grid {
gap: 8px; /* Уменьшенный отступ на мобильных */
}

.cards-grid .info-card {
margin: 0;
}
}

@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}

.info-card-left {
gap: 8px;
}

.info-card {
margin: 0.4rem 0 0 0; /* Отступ сверху на маленьких экранах */
}

.info-card:first-of-type {
margin-top: 0;
}

.cards-grid {
gap: 6px; /* Еще меньше на очень маленьких экранах */
}

.cards-grid .info-card {
margin: 0;
}
}

@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}

@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
var wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');

wrappers.forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
var icon = wrapper.querySelector('.info-card-icon');

if (!tooltip || !icon) return;

function adjustTooltipPosition() {
if (window.innerWidth <= 768) return;

var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;

var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;
var tooltipHeight = tooltipRect.height;

if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}

wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});

wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});

wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();

if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});

var scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.classList.remove('tooltip-bottom');
setTimeout(function() {
var wrapperRect = wrapper.getBoundingClientRect();
var tooltipRect = tooltip.getBoundingClientRect();
var viewportHeight = window.innerHeight;
var spaceAbove = wrapperRect.top;
var spaceBelow = viewportHeight - wrapperRect.bottom;

if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});

window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(function(wrapper) {
var tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
setTimeout(function() {
tooltip.style.opacity = '1';
}, 10);
}
});
});

document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});

document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(function(tooltip) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>

Добавлено (2026-03-11, 07:39)
---------------------------------------------
/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 10px;
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 10px 0 0 0; /* Отступ сверху 10px для всех карточек в сетке */
box-sizing: border-box;
}

/* Убираем отступ у карточек ПЕРВОГО РЯДА в зависимости от количества колонок */
/* Для 1 колонки - первый ряд это 1 карточка */
.cards-grid.cols-1 .info-card:nth-child(1) {
margin-top: 0;
}
/* Для 1 колонки - все остальные карточки имеют отступ */
.cards-grid.cols-1 .info-card:nth-child(n+2) {
margin-top: 10px;
}

/* Для 2 колонок - первый ряд это карточки 1 и 2 */
.cards-grid.cols-2 .info-card:nth-child(1),
.cards-grid.cols-2 .info-card:nth-child(2) {
margin-top: 0;
}
/* Для 2 колонок - карточки с 3 и далее имеют отступ */
.cards-grid.cols-2 .info-card:nth-child(n+3) {
margin-top: 10px;
}

/* Для 3 колонок - первый ряд это карточки 1, 2, 3 */
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(2),
.cards-grid.cols-3 .info-card:nth-child(3) {
margin-top: 0;
}
/* Для 3 колонок - карточки с 4 и далее имеют отступ */
.cards-grid.cols-3 .info-card:nth-child(n+4) {
margin-top: 10px;
}

/* Для 4 колонок - первый ряд это карточки 1, 2, 3, 4 */
.cards-grid.cols-4 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(2),
.cards-grid.cols-4 .info-card:nth-child(3),
.cards-grid.cols-4 .info-card:nth-child(4) {
margin-top: 0;
}
/* Для 4 колонок - карточки с 5 и далее имеют отступ */
.cards-grid.cols-4 .info-card:nth-child(n+5) {
margin-top: 10px;
}

/* Промежуточные состояния для адаптивности */
@media (max-width: 1100px) and (min-width: 901px) {
/* При 4→2 колонках, первый ряд теперь 2 карточки */
.cards-grid.cols-4 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(2) {
margin-top: 0;
}
.cards-grid.cols-4 .info-card:nth-child(n+3) {
margin-top: 10px;
}
}

@media (max-width: 900px) and (min-width: 751px) {
/* При 3→2 и 4→2 колонках, первый ряд теперь 2 карточки */
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(2),
.cards-grid.cols-4 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(2) {
margin-top: 0;
}
.cards-grid.cols-3 .info-card:nth-child(n+3),
.cards-grid.cols-4 .info-card:nth-child(n+3) {
margin-top: 10px;
}
}

@media (max-width: 750px) {
/* При 1 колонке, первый ряд только первая карточка */
.cards-grid.cols-2 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(1) {
margin-top: 0;
}
.cards-grid.cols-2 .info-card:nth-child(n+2),
.cards-grid.cols-3 .info-card:nth-child(n+2),
.cards-grid.cols-4 .info-card:nth-child(n+2) {
margin-top: 10px;
}
}

Добавлено (2026-03-11, 07:44)
---------------------------------------------
/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 10px; /* Отступы между карточками */
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 10px 0 0 0; /* Отступ сверху 10px для всех карточек в сетке */
box-sizing: border-box;
}

/* Убираем отступ у карточек ПЕРВОГО РЯДА в зависимости от количества колонок */

/* Для 1 колонки - первый ряд это 1 карточка */
.cards-grid.cols-1 .info-card:nth-child(1) {
margin-top: 0;
}

/* Для 2 колонок - первый ряд это первые 2 карточки */
.cards-grid.cols-2 .info-card:nth-child(1),
.cards-grid.cols-2 .info-card:nth-child(2) {
margin-top: 0;
}

/* Для 3 колонок - первый ряд это первые 3 карточки */
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(2),
.cards-grid.cols-3 .info-card:nth-child(3) {
margin-top: 0;
}

/* Для 4 колонок - первый ряд это первые 4 карточки */
.cards-grid.cols-4 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(2),
.cards-grid.cols-4 .info-card:nth-child(3),
.cards-grid.cols-4 .info-card:nth-child(4) {
margin-top: 0;
}

/* При адаптации, когда колонки меняются */

/* Когда 4 колонки превращаются в 2 */
@media (max-width: 1100px) and (min-width: 901px) {
.cards-grid.cols-4 .info-card {
width: calc(50% - 5px);
}
/* Первый ряд теперь 2 карточки */
.cards-grid.cols-4 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(2) {
margin-top: 0;
}
/* Убираем отступ у следующих карточек в новом ряду */
.cards-grid.cols-4 .info-card:nth-child(3) {
margin-top: 10px;
}
}

/* Когда 3 и 4 колонки превращаются в 2 */
@media (max-width: 900px) and (min-width: 751px) {
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: calc(50% - 5px);
}
/* Первый ряд теперь 2 карточки */
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(2),
.cards-grid.cols-4 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(2) {
margin-top: 0;
}
/* Третья карточка начинает новый ряд */
.cards-grid.cols-3 .info-card:nth-child(3),
.cards-grid.cols-4 .info-card:nth-child(3) {
margin-top: 10px;
}
}

/* Когда все становятся в 1 колонку */
@media (max-width: 750px) {
.cards-grid.cols-2 .info-card,
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: 100%;
}
/* Первый ряд - только первая карточка */
.cards-grid.cols-2 .info-card:nth-child(1),
.cards-grid.cols-3 .info-card:nth-child(1),
.cards-grid.cols-4 .info-card:nth-child(1) {
margin-top: 0;
}
/* Все остальные карточки имеют отступ сверху */
.cards-grid.cols-2 .info-card:nth-child(n+2),
.cards-grid.cols-3 .info-card:nth-child(n+2),
.cards-grid.cols-4 .info-card:nth-child(n+2) {
margin-top: 10px;
}
}

Добавлено (2026-03-11, 07:48)
---------------------------------------------
Теперь понял! Только в cols-1 нужно уменьшить отступы. Вот простое решение:

```css
/* ===== КОНТЕЙНЕР ДЛЯ СЕТКИ ===== */
.cards-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 10px; /* Стандартный отступ для всех сеток */
}

.cards-grid .info-card {
flex: 0 0 auto;
padding: 0;
margin: 0; /* Убираем margin у карточек в сетке */
box-sizing: border-box;
}

/* 1 колонка - уменьшенные отступы */
.cards-grid.cols-1 {
gap: 5px; /* Уменьшаем отступ для cols-1 */
}

/* 2 колонки */
.cards-grid.cols-2 .info-card {
width: calc(50% - 5px);
}

/* 3 колонки */
.cards-grid.cols-3 .info-card {
width: calc(33.333% - 6.667px);
}

/* 4 колонки */
.cards-grid.cols-4 .info-card {
width: calc(25% - 7.5px);
}

/* Промежуточные состояния */
@media (max-width: 1100px) and (min-width: 901px) {
.cards-grid.cols-4 .info-card {
width: calc(50% - 5px);
}
}

@media (max-width: 900px) and (min-width: 751px) {
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: calc(50% - 5px);
}
}

@media (max-width: 750px) {
.cards-grid.cols-2 .info-card,
.cards-grid.cols-3 .info-card,
.cards-grid.cols-4 .info-card {
width: 100%;
}
/* На мобильных тоже уменьшаем отступы */
.cards-grid {
gap: 8px;
}
.cards-grid.cols-1 {
gap: 4px;
}
}

@media (max-width: 480px) {
.cards-grid {
gap: 6px;
}
.cards-grid.cols-1 {
gap: 3px;
}
}
```

Что изменил:

1. Для cols-1 поставил отдельный gap: 5px (вместо общих 10px)
2. На мобильных тоже пропорционально уменьшил
3. Всё остальное работает как прежде

Теперь в cols-1 отступы между карточками будут меньше, а в остальных сетках как обычно.

Добавлено (2026-03-11, 09:22)
---------------------------------------------
Отлично! Вот финальные правки:

```css
/* ===== ТЕГИ - уменьшенные ===== */
.info-card-tag {
display: inline-block;
font-size: 0.7rem; /* Уменьшил с 0.75rem до 0.7rem */
padding: 0.15rem 0.5rem; /* Уменьшил отступы */
border-radius: 10px; /* Чуть уменьшил скругление */
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.3; /* Чуть уменьшил высоту строки */
flex-shrink: 0;
}

/* ===== ИКОНКИ - прозрачный фон ===== */
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
background: transparent; /* Прозрачный фон */
}

.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
background: transparent; /* Прозрачный фон для SVG */
}

/* Для темной темы тоже прозрачный фон */
body.dark .info-card-title-icon .custom-icon,
html.dark .info-card-title-icon .custom-icon,
body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
background: transparent;
}
```

Если у каких-то конкретных SVG иконок есть проблемы с фоном, можно добавить принудительно:

```css
/* Принудительно убираем фон у всех SVG в карточках */
.info-card svg {
background: transparent !important;
}

.info-card svg * {
background: transparent !important;
}
```

Но лучше сначала попробовать первый вариант - он должен решить проблему с фоном.

Добавлено (2026-03-11, 09:29)
---------------------------------------------
Понял проблему! Нужно добавить стили для иконок, чтобы они сохраняли свои оригинальные пропорции и толщину линий. Вот исправление:

```css
/* ===== ИКОНКИ - сохраняем оригинальный вид ===== */
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
background: transparent;
}

.info-card-title-icon .custom-icon svg {
width: auto; /* Автоматическая ширина */
height: auto; /* Автоматическая высота */
max-width: 100%; /* Но не больше контейнера */
max-height: 100%; /* Но не больше контейнера */
fill: currentColor;
color: #666666;
vertical-align: middle;
background: transparent;
stroke: currentColor; /* Сохраняем обводку если есть */
stroke-width: inherit; /* Сохраняем оригинальную толщину */
}

/* Для иконок с фиксированным размером через iconsize */
.info-card-title-icon .custom-icon svg[width],
.info-card-title-icon .custom-icon svg[height] {
width: attr(width);
height: attr(height);
}

/* Если иконка использует stroke (обводку) */
.info-card-title-icon .custom-icon svg path,
.info-card-title-icon .custom-icon svg circle,
.info-card-title-icon .custom-icon svg rect,
.info-card-title-icon .custom-icon svg line,
.info-card-title-icon .custom-icon svg polyline {
stroke: currentColor;
stroke-width: inherit;
}

/* Убираем лишние заливки которые могут делать иконку жирной */
.info-card-title-icon .custom-icon svg [fill="none"] {
fill: none;
}

.info-card-title-icon .custom-icon svg [fill="currentColor"] {
fill: currentColor;
}

/* Для темной темы */
body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
```

Также в самом шаблоне нужно убедиться, что SVG вставляется правильно. Найдите эту часть:

```html
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
```

Замените на:

```html
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s' preserveAspectRatio='xMidYMid meet'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
```

Добавил preserveAspectRatio='xMidYMid meet' чтобы SVG сохранял пропорции.

Если какая-то конкретная иконка все еще отображается слишком жирно, проверьте оригинальный SVG файл - возможно у него слишком толстая обводка (stroke-width).

Добавлено (2026-03-11, 09:37)
---------------------------------------------
Конечно! Вот стили для эффекта при наведении:

```css
/* ===== ЭФФЕКТ ПРИ НАВЕДЕНИИ ===== */
.info-card-link {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: color 0.2s ease; /* Плавный переход для цвета текста */
}

.info-card-link:hover {
text-decoration: none;
color: #000000; /* Текст становится темнее при наведении */
}

.info-card-link:hover .info-card-title {
color: #000000; /* Заголовок тоже темнеет */
}

.info-card-link:hover .info-card-title-icon .custom-icon svg {
color: #000000; /* Иконка тоже темнеет */
}

/* Для иконок с вашим новым цветом #9c9c9c */
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
color: #9c9c9c; /* Ваш новый цвет */
vertical-align: middle;
background: transparent;
transition: color 0.2s ease; /* Плавный переход для иконки */
}

/* Для темной темы */
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}

body.dark .info-card-link:hover,
html.dark .info-card-link:hover {
color: #ffffff; /* На темной теме еще светлее */
}

body.dark .info-card-link:hover .info-card-title,
html.dark .info-card-link:hover .info-card-title {
color: #ffffff;
}

body.dark .info-card-link:hover .info-card-title-icon .custom-icon svg,
html.dark .info-card-link:hover .info-card-title-icon .custom-icon svg {
color: #ffffff;
}
```

Теперь при наведении на всю карточку:

· Текст заголовка темнеет до #000000
· Иконка тоже темнеет до #000000
· На темной теме наоборот - становится светлее до #ffffff
· Все изменения плавные благодаря transition

Добавлено (2026-03-11, 09:44)
---------------------------------------------
Вот с более плавными переходами:

```css
/* ===== ОСНОВНЫЕ СТИЛИ С ПЛАВНЫМИ ПЕРЕХОДАМИ ===== */
.info-card {
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* Плавный переход для всей карточки */
position: relative;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 0.75rem 0 0 0;
padding: 0;
width: 100%;
}

.info-card-link {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: color 0.4s ease; /* Более плавный переход для цвета ссылки */
}

.info-card-link:hover {
text-decoration: none;
color: #000000;
}

.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1 1 auto;
min-width: 30px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
transition: color 0.4s ease; /* Плавный переход для заголовка */
}

.info-card-link:hover .info-card-title {
color: #000000;
}

/* Иконки с очень плавным переходом */
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
color: #9c9c9c;
vertical-align: middle;
background: transparent;
transition: color 0.5s ease; /* Еще более плавный для иконки */
}

.info-card-link:hover .info-card-title-icon .custom-icon svg {
color: #000000;
}

/* Плавные переходы для границ и теней карточки */
.info-card-style-button {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
border-color 0.4s ease,
box-shadow 0.5s ease; /* Разные скорости для разных свойств */
}

.info-card-style-button:hover {
border-color: #4a90e2;
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.info-card-style-card {
border: none;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.2, 0, 0, 1), /* Кастомный easing */
transform 0.3s ease,
box-shadow 0.5s ease;
}

.info-card-style-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Для темной темы */
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
transition: color 0.4s ease;
}

body.dark .info-card-link:hover,
html.dark .info-card-link:hover {
color: #ffffff;
}

body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
transition: color 0.4s ease;
}

body.dark .info-card-link:hover .info-card-title,
html.dark .info-card-link:hover .info-card-title {
color: #ffffff;
}

body.dark .info-card-title-icon .custom-icon svg,
html.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
transition: color 0.5s ease;
}

body.dark .info-card-link:hover .info-card-title-icon .custom-icon svg,
html.dark .info-card-link:hover .info-card-title-icon .custom-icon svg {
color: #ffffff;
}
```

Что улучшил:

1. Разные скорости для разных свойств:
· Текст и заголовок: 0.4s
· Иконки: 0.5s (самые плавные)
· Границы и тени: комбинированные переходы
2. Кастомные easing-функции:
· cubic-bezier(0.25, 0.1, 0.25, 1) - стандартный плавный
· cubic-bezier(0.2, 0, 0, 1) - более динамичный для карточек
3. Плавность при наведении и снятии теперь одинаковая благодаря transition на основном элементе, а не только на :hover

Теперь все изменения происходят очень плавно как при наведении, так и при убирании курсора.