/** * Lumina Theme — footer.css * * Компактный футер с поддержкой: * sticky / smart-sticky / transparent / frosted — зеркально хедеру * bottom sheet — панели таксономий и архивов * * Классы на (задаются PHP): * .lumina-footer-sticky → position:sticky bottom:0 * .lumina-footer-smart-sticky → скрывается при скролле вниз * .lumina-footer-frosted → backdrop-filter blur * * Классы на .lumina-footer (задаются JS): * .is-hidden → footer скрыт (smart-sticky) */ /* ── Template-part wrapper ───────────────────────────────────────────────── */ footer.wp-block-template-part { display: contents; } /* ── База ────────────────────────────────────────────────────────────────── */ .lumina-footer { z-index: 100; transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.3s ease; will-change: transform; /* Минимальная высота задаётся паддингами из шаблона */ } /* ── Sticky footer ───────────────────────────────────────────────────────── */ body.lumina-footer-sticky .lumina-footer { position: sticky; bottom: 0; } /* Тень появляется при прокрутке (JS добавляет .is-elevated) */ body.lumina-footer-sticky .lumina-footer.is-elevated { box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.08); } /* Smart: скрываем при скролле вниз */ body.lumina-footer-smart-sticky .lumina-footer.is-hidden { transform: translateY(110%); } /* ── Прозрачный footer ───────────────────────────────────────────────────── */ .lumina-footer--transparent { background: transparent !important; border-top: none !important; } .lumina-footer--transparent.is-elevated { background: var(--wp--preset--color--base) !important; } /* ── Frosted footer ──────────────────────────────────────────────────────── */ body.lumina-footer-frosted .lumina-footer { background: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @supports not (background: color-mix(in srgb, white 80%, transparent)) { body.lumina-footer-frosted .lumina-footer { background: rgba(255, 255, 255, 0.82) !important; } } /* ── Футер всегда внизу (когда контент короткий) ────────────────────────── */ /* * Используем min-height на wp-site-blocks чтобы footer всегда * прижимался к низу экрана независимо от объёма контента. * Этот подход работает без flex на body и совместим с FSE. */ .wp-site-blocks { min-height: 100dvh; display: flex; flex-direction: column; } .wp-site-blocks > main, .wp-site-blocks > .wp-block-group:not(.lumina-header):not(.lumina-footer) { flex: 1 0 auto; } /* ── Копирайт ────────────────────────────────────────────────────────────── */ .lumina-footer-copyright { font-size: var(--wp--preset--font-size--xs, 0.75rem); color: var(--wp--preset--color--contrast-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; } /* ── Кнопки действий в футере ────────────────────────────────────────────── */ .lumina-footer-actions { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; } .lumina-footer-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.625rem; border: none; border-radius: 999px; background: transparent; color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--xs, 0.75rem); font-family: inherit; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; line-height: 1.4; } .lumina-footer-btn:hover { background: var(--wp--preset--color--base-2, rgba(0,0,0,0.05)); color: var(--wp--preset--color--contrast); } .lumina-footer-btn:active { transform: scale(0.96); } .lumina-footer-btn[aria-expanded="true"] { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } .lumina-footer-btn svg { width: 0.875rem; height: 0.875rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── Bottom sheet ────────────────────────────────────────────────────────── */ .lumina-sheet-overlay { position: fixed; inset: 0; z-index: 390; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .lumina-sheet-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease; } /* Панель */ .lumina-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 391; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--wp--preset--color--base, #fff); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12); transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease, visibility 0s linear 0.32s; } .lumina-sheet.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease, visibility 0s linear 0s; } /* Drag handle */ .lumina-sheet-handle { display: flex; justify-content: center; padding: 0.75rem 0 0.5rem; cursor: grab; flex-shrink: 0; } .lumina-sheet-handle::before { content: ''; width: 2.5rem; height: 0.25rem; border-radius: 999px; background: var(--wp--preset--color--base-3, rgba(0,0,0,0.15)); } /* Заголовок панели */ .lumina-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 1.25rem 0.875rem; border-bottom: 1px solid var(--wp--preset--color--base-3, rgba(0,0,0,0.08)); flex-shrink: 0; position: sticky; top: 0; background: var(--wp--preset--color--base); z-index: 1; } .lumina-sheet-title { font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: 600; color: var(--wp--preset--color--contrast); margin: 0; } .lumina-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: 50%; background: var(--wp--preset--color--base-2, rgba(0,0,0,0.06)); color: var(--wp--preset--color--contrast-2); cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; } .lumina-sheet-close:hover { background: var(--wp--preset--color--base-3, rgba(0,0,0,0.1)); color: var(--wp--preset--color--contrast); } .lumina-sheet-close svg { width: 0.75rem; height: 0.75rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Контент панели */ .lumina-sheet-body { padding: 1rem 1.25rem 1.5rem; min-height: 8rem; /* избегаем слишком маленькой панели */ } /* ── Панель таксономий: список таксономий ────────────────────────────────── */ .lumina-tax-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .lumina-tax-item { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.75rem; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; border: none; background: transparent; width: 100%; text-align: left; font-family: inherit; font-size: var(--wp--preset--font-size--sm, 0.875rem); color: var(--wp--preset--color--contrast); } .lumina-tax-item:hover { background: var(--wp--preset--color--base-2, rgba(0,0,0,0.04)); } .lumina-tax-item-count { font-size: var(--wp--preset--font-size--xs, 0.75rem); color: var(--wp--preset--color--contrast-3); background: var(--wp--preset--color--base-2, rgba(0,0,0,0.05)); padding: 0.125rem 0.5rem; border-radius: 999px; flex-shrink: 0; } .lumina-tax-item svg { width: 0.875rem; height: 0.875rem; stroke: var(--wp--preset--color--contrast-3); fill: none; stroke-width: 1.75; stroke-linecap: round; flex-shrink: 0; margin-left: 0.5rem; } /* ── Облако меток ────────────────────────────────────────────────────────── */ .lumina-tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; } .lumina-tag-cloud a { display: inline-flex; align-items: center; padding: 0.3125rem 0.75rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--base-3, rgba(0,0,0,0.12)); background: var(--wp--preset--color--base-2, rgba(0,0,0,0.03)); font-size: var(--wp--preset--font-size--xs, 0.75rem); color: var(--wp--preset--color--contrast-2); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; /* Размер шрифта будет варьироваться через inline style — имитация облака */ } .lumina-tag-cloud a:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* Кнопка «назад» в шапке облака */ .lumina-sheet-back { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; border: none; background: transparent; font-size: var(--wp--preset--font-size--xs, 0.75rem); color: var(--wp--preset--color--contrast-3); cursor: pointer; transition: color 0.15s ease; font-family: inherit; } .lumina-sheet-back:hover { color: var(--wp--preset--color--contrast); } .lumina-sheet-back svg { width: 0.75rem; height: 0.75rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* ── Правая часть заголовка: тулбар + кнопка закрытия ───────────────────── */ .lumina-sheet-header-end { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .lumina-archive-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--wp--preset--color--base-3, rgba(0,0,0,0.1)); border-radius: 6px; background: transparent; color: var(--wp--preset--color--contrast-3); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; flex-shrink: 0; } .lumina-archive-toolbar-btn:hover { background: var(--wp--preset--color--base-2, rgba(0,0,0,0.05)); color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast-3); } .lumina-archive-toolbar-btn svg { width: 0.875rem; height: 0.875rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── Архивы ──────────────────────────────────────────────────────────────── */ .lumina-archive-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .lumina-archive-year { margin-bottom: 0.125rem; } .lumina-archive-year-header { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; transition: background 0.15s ease; } .lumina-archive-year-header:hover { background: var(--wp--preset--color--base-2, rgba(0,0,0,0.04)); } .lumina-archive-year-link { flex: 1; padding: 0.5rem 0.75rem; font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: 600; color: var(--wp--preset--color--contrast); text-decoration: none; } .lumina-archive-year-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; margin-right: 0.25rem; border: none; border-radius: 6px; background: transparent; cursor: pointer; transition: background 0.15s ease; } .lumina-archive-year-btn:hover { background: var(--wp--preset--color--base-3, rgba(0,0,0,0.08)); } .lumina-archive-year-btn svg { width: 0.875rem; height: 0.875rem; stroke: var(--wp--preset--color--contrast-3); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s ease; flex-shrink: 0; } .lumina-archive-year-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .lumina-archive-months { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.375rem 0.75rem 0.625rem 1.5rem; } /* Свёрнутое состояние — CSS-класс надёжнее атрибута hidden при display:flex */ .lumina-archive-months.is-collapsed { display: none; } .lumina-archive-months a { display: inline-flex; padding: 0.25rem 0.625rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--base-3, rgba(0,0,0,0.1)); font-size: var(--wp--preset--font-size--xs, 0.75rem); color: var(--wp--preset--color--contrast-2); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .lumina-archive-months a:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* Режим «по годам» — плоский список */ .lumina-archive-list--years a { display: flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: 600; color: var(--wp--preset--color--contrast); text-decoration: none; transition: background 0.15s ease; } .lumina-archive-list--years a:hover { background: var(--wp--preset--color--base-2, rgba(0,0,0,0.04)); } /* ── Состояние загрузки ──────────────────────────────────────────────────── */ .lumina-sheet-loading { display: flex; justify-content: center; padding: 2rem 0; color: var(--wp--preset--color--contrast-3); font-size: var(--wp--preset--font-size--sm, 0.875rem); } .lumina-sheet-loading::after { content: ''; width: 1.25rem; height: 1.25rem; border: 2px solid var(--wp--preset--color--base-3); border-top-color: var(--wp--preset--color--contrast-2); border-radius: 50%; animation: lumina-spin 0.7s linear infinite; margin-left: 0.5rem; align-self: center; } @keyframes lumina-spin { to { transform: rotate(360deg); } } /* ── Admin bar offset ────────────────────────────────────────────────────── */ .admin-bar .lumina-sheet { /* Без изменений — sheet в конце body, не зависит от admin bar */ } /* ── Адаптивность ─────────────────────────────────────────────────────────── */ @media ( min-width: 768px ) { .lumina-sheet { width: 480px; max-width: 480px; left: auto; right: 1rem; bottom: calc(var(--lumina-footer-height, 48px) + 0.5rem); border-radius: 16px; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.14); /* На десктопе — только fade, без slide */ transform: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .lumina-sheet.is-open { transform: none; transition: opacity 0.2s ease, visibility 0s linear 0s; } .lumina-sheet-handle { display: none; } } /* ── Reduced motion ───────────────────────────────────────────────────────── */ @media ( prefers-reduced-motion: reduce ) { .lumina-footer, .lumina-sheet, .lumina-sheet-overlay, .lumina-footer-btn, .lumina-tag-cloud a, .lumina-archive-year-btn svg { transition: none !important; animation: none !important; } }