diff --git a/assets/css/related-posts.css b/assets/css/related-posts.css new file mode 100644 index 0000000..060e561 --- /dev/null +++ b/assets/css/related-posts.css @@ -0,0 +1,192 @@ +/** + * Related Posts Section Styles + * Scoped to .pr-related-posts + */ + +:root { + color-scheme: light; +} + +.pr-related-posts { + margin-top: 3rem; + padding: 2rem 0; + border-top: 1px solid var(--wp--preset--color--border, #e5e5e5); +} + +.pr-related-posts h2 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + line-height: 1.3; +} + +.pr-related-posts__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 1rem; +} + +.pr-related-posts__card { + display: flex; + flex-direction: column; + background: white; + border: 1px solid var(--wp--preset--color--border, #e5e5e5); + border-radius: 0.5rem; + overflow: hidden; + transition: box-shadow 0.3s ease, transform 0.3s ease; +} + +.pr-related-posts__card:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +@media (prefers-reduced-motion: reduce) { + .pr-related-posts__card { + transition: none; + } + + .pr-related-posts__card:hover { + transform: none; + } +} + +.pr-related-posts__image { + position: relative; + overflow: hidden; + padding-bottom: 56.25%; + /* 16:9 aspect ratio */ + background: var(--wp--preset--color--base, #f5f5f5); +} + +.pr-related-posts__image--fallback { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 0; + height: 200px; +} + +.pr-related-posts__image-element { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.pr-related-posts__image--fallback .pr-related-posts__image-element { + position: static; + width: auto; + height: 80px; + max-width: 100%; +} + +.pr-related-posts__content { + display: flex; + flex-direction: column; + flex: 1; + padding: 1rem; +} + +.pr-related-posts__badge { + display: inline-block; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #666; + margin-bottom: 0.5rem; +} + +.pr-related-posts__title { + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + margin-bottom: 0.5rem; +} + +.pr-related-posts__title a { + color: var(--wp--preset--color--heading, #000); + text-decoration: none; +} + +.pr-related-posts__title a:hover { + text-decoration: underline; +} + +.pr-related-posts__date { + font-size: 0.875rem; + color: #999; + margin-bottom: 0.75rem; +} + +.pr-related-posts__excerpt { + font-size: 0.9375rem; + line-height: 1.5; + color: #666; + margin: 0; + flex-grow: 1; +} + +.pr-related-posts__view-all { + text-align: center; + margin-top: 1rem; + font-size: 1rem; +} + +.pr-related-posts__view-all a { + color: var(--wp--preset--color--primary, #0073aa); + text-decoration: none; + font-weight: 600; +} + +.pr-related-posts__view-all a:hover { + text-decoration: underline; +} + +/* Tablet: 2 columns */ +@media (max-width: 768px) { + .pr-related-posts__grid { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .pr-related-posts h2 { + font-size: 1.25rem; + } + + .pr-related-posts { + margin-top: 2rem; + padding: 1.5rem 0; + } +} + +/* Mobile: 1 column */ +@media (max-width: 480px) { + .pr-related-posts__grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .pr-related-posts h2 { + font-size: 1.125rem; + margin-bottom: 1rem; + } + + .pr-related-posts { + margin-top: 1.5rem; + padding: 1rem 0; + } + + .pr-related-posts__content { + padding: 0.75rem; + } + + .pr-related-posts__title { + font-size: 1rem; + } +}