/** * Blog Grid Pro — front-end stylesheet * * Strategy: * - All themable values come from CSS variables set in (see class-bgp-assets). * - Layout uses CSS grid for true equal-height cards. * - Each card is a flex column: image → body grows → button pinned bottom (margin-top:auto). * - Mobile-first: single column, scales up by breakpoint, capped at admin's column count. * - Focus styles are visible and consistent. No outline:none anywhere. */ /* ---------- Root scope ---------- */ .bgp-root, .bgp-single-bgp { box-sizing: border-box; color: var(--bgp-excerpt, #444); font-family: var(--bgp-body-font, system-ui, sans-serif); font-size: var(--bgp-body-size, 16px); line-height: 1.6; background: var(--bgp-bg, transparent); } .bgp-root *, .bgp-root *::before, .bgp-root *::after, .bgp-single-bgp *, .bgp-single-bgp *::before, .bgp-single-bgp *::after { box-sizing: inherit; } /* ---------- Featured (hero) post ---------- */ .bgp-featured { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0 0 3rem; padding: 0; background: var(--bgp-card-bg, #fff); border: 1px solid var(--bgp-border, #e5e7eb); border-radius: 12px; overflow: hidden; } @media (min-width: 768px) { .bgp-featured { grid-template-columns: 1.2fr 1fr; gap: 0; } } .bgp-featured__image-link { display: block; overflow: hidden; background: var(--bgp-border, #e5e7eb); aspect-ratio: 16 / 9; } .bgp-featured__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .bgp-featured:hover .bgp-featured__image, .bgp-featured:focus-within .bgp-featured__image { transform: scale(1.03); } .bgp-featured__body { padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .bgp-featured__body { padding: 2.5rem; } } .bgp-featured__eyebrow { margin: 0 0 0.75rem; } .bgp-featured__badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35em 0.7em; border-radius: 999px; background: var(--bgp-btn-bg, #1a73e8); color: var(--bgp-btn-text, #fff); } .bgp-featured__title { font-family: var(--bgp-title-font); font-size: calc(var(--bgp-title-size, 22px) * 1.4); line-height: 1.2; margin: 0 0 0.75rem; color: var(--bgp-title, #111); font-weight: 700; } .bgp-featured__title a { color: inherit; text-decoration: none; } .bgp-featured__title a:hover, .bgp-featured__title a:focus-visible { text-decoration: underline; } .bgp-featured__excerpt { margin: 0 0 1.5rem; color: var(--bgp-excerpt, #444); } .bgp-featured__btn { align-self: flex-start; } /* ---------- Grid ---------- */ .bgp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } /* Tablet: 2 columns when admin allows >=2 */ @media (min-width: 600px) { .bgp-root[data-columns="2"] .bgp-grid, .bgp-root[data-columns="3"] .bgp-grid, .bgp-root[data-columns="4"] .bgp-grid, .bgp-root[data-columns="5"] .bgp-grid, .bgp-root[data-columns="6"] .bgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Desktop: respect admin's column count */ @media (min-width: 960px) { .bgp-root[data-columns="1"] .bgp-grid { grid-template-columns: 1fr; } .bgp-root[data-columns="2"] .bgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bgp-root[data-columns="3"] .bgp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bgp-root[data-columns="4"] .bgp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bgp-root[data-columns="5"] .bgp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .bgp-root[data-columns="6"] .bgp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .bgp-card-wrap { list-style: none; margin: 0; padding: 0; display: flex; /* allows .bgp-card to fill height */ } /* ---------- Cards (equal height, button at bottom) ---------- */ .bgp-card { display: flex; flex-direction: column; width: 100%; background: var(--bgp-card-bg, #fff); border: 1px solid var(--bgp-border, #e5e7eb); border-radius: 10px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .bgp-card:hover, .bgp-card:focus-within { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .bgp-card__image-link { display: block; overflow: hidden; background: var(--bgp-border, #e5e7eb); aspect-ratio: 16 / 9; } .bgp-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .bgp-card:hover .bgp-card__image, .bgp-card:focus-within .bgp-card__image { transform: scale(1.05); } .bgp-card__image-placeholder { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--bgp-border, #e5e7eb), color-mix(in srgb, var(--bgp-border, #e5e7eb) 60%, white)); } .bgp-card__body { display: flex; flex-direction: column; flex: 1 1 auto; /* fill available card height */ padding: 1.25rem; } .bgp-card__title { font-family: var(--bgp-title-font); font-size: var(--bgp-title-size, 22px); line-height: 1.3; margin: 0 0 0.5rem; color: var(--bgp-title, #111); font-weight: 700; } .bgp-card__title a { color: inherit; text-decoration: none; } .bgp-card__title a:hover, .bgp-card__title a:focus-visible { text-decoration: underline; } .bgp-card__excerpt { margin: 0 0 1.25rem; color: var(--bgp-excerpt, #444); flex: 1 1 auto; /* push button down */ } .bgp-card__btn { align-self: flex-start; margin-top: auto; /* pin to bottom regardless of excerpt length */ } /* ---------- Meta ---------- */ .bgp-meta { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--bgp-meta, #666); } .bgp-meta__sep { margin: 0 0.5em; } /* ---------- Buttons ---------- */ .bgp-button { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.65em 1.2em; font-family: inherit; font-size: 0.95em; font-weight: 600; line-height: 1; text-decoration: none; background: var(--bgp-btn-bg, #1a73e8); color: var(--bgp-btn-text, #fff); border: 2px solid var(--bgp-btn-bg, #1a73e8); border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .bgp-button:hover { background: transparent; color: var(--bgp-btn-bg, #1a73e8); } .bgp-button:active { transform: translateY(1px); } .bgp-button__icon { transition: transform 0.2s ease; } .bgp-button:hover .bgp-button__icon { transform: translateX(3px); } /* ---------- Focus visibility (accessibility) ---------- */ .bgp-root a:focus-visible, .bgp-root button:focus-visible, .bgp-single-bgp a:focus-visible, .bgp-single-bgp button:focus-visible { outline: 3px solid var(--bgp-focus, #1a73e8); outline-offset: 3px; border-radius: 4px; } /* ---------- Pagination ---------- */ .bgp-pagination { margin: 2.5rem 0 0; } .bgp-pagination__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .bgp-pagination__item { margin: 0; padding: 0; } .bgp-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5em; height: 2.5em; padding: 0 0.85em; font-weight: 600; font-size: 0.95em; text-decoration: none; color: var(--bgp-title, #111); background: var(--bgp-card-bg, #fff); border: 1px solid var(--bgp-border, #e5e7eb); border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .bgp-pagination .page-numbers:hover { border-color: var(--bgp-btn-bg, #1a73e8); color: var(--bgp-btn-bg, #1a73e8); } .bgp-pagination .page-numbers.current { background: var(--bgp-btn-bg, #1a73e8); border-color: var(--bgp-btn-bg, #1a73e8); color: var(--bgp-btn-text, #fff); } .bgp-pagination .page-numbers.dots { border-color: transparent; cursor: default; } /* ---------- Single post: prev/next nav ---------- */ .bgp-prev-next { margin: 3rem 0 2rem; padding: 1.5rem 0; border-top: 1px solid var(--bgp-border, #e5e7eb); border-bottom: 1px solid var(--bgp-border, #e5e7eb); font-family: var(--bgp-body-font); } .bgp-prev-next__inner { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .bgp-prev-next__inner { grid-template-columns: 1fr 1fr; } } .bgp-prev-next__link { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.25rem; text-decoration: none; color: var(--bgp-title, #111); background: var(--bgp-card-bg, #fff); border: 1px solid var(--bgp-border, #e5e7eb); border-radius: 8px; transition: border-color 0.2s ease, transform 0.2s ease; } .bgp-prev-next__link:hover, .bgp-prev-next__link:focus-visible { border-color: var(--bgp-btn-bg, #1a73e8); } .bgp-prev-next__link--next { text-align: right; } .bgp-prev-next__direction { display: flex; align-items: center; gap: 0.4em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bgp-meta, #666); } .bgp-prev-next__link--next .bgp-prev-next__direction { justify-content: flex-end; } .bgp-prev-next__title { font-weight: 600; color: var(--bgp-title, #111); } .bgp-prev-next__placeholder { display: none; } @media (min-width: 600px) { .bgp-prev-next__placeholder { display: block; } } /* ---------- Single post: related posts ---------- */ .bgp-related { margin: 3rem 0 0; } .bgp-related__heading { font-family: var(--bgp-title-font); font-size: calc(var(--bgp-title-size, 22px) * 1.2); color: var(--bgp-title, #111); margin: 0 0 1.5rem; font-weight: 700; } .bgp-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .bgp-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .bgp-related__list[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- No posts message ---------- */ .bgp-no-posts { text-align: center; padding: 3rem 1rem; color: var(--bgp-meta, #666); border: 1px dashed var(--bgp-border, #e5e7eb); border-radius: 10px; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .bgp-card, .bgp-card__image, .bgp-featured__image, .bgp-button, .bgp-button__icon, .bgp-prev-next__link, .bgp-pagination .page-numbers { transition: none !important; } .bgp-card:hover, .bgp-card:focus-within { transform: none; } } /* ---------- Print ---------- */ @media print { .bgp-prev-next, .bgp-pagination, .bgp-card__btn, .bgp-featured__btn { display: none; } } /* ---------- Admin settings small touches ---------- */ .bgp-color-text { max-width: 110px; font-family: monospace; }