/** * blog-layout.css * Enqueue this from your child theme's functions.php * (see enqueue snippet at the bottom of this file) * * Aesthetic: editorial magazine — ink-dark accents, sharp typography, * generous whitespace, subtle warm off-whites. */ /* ============================================= TOKENS ============================================= */ :root { --blog-font-display : 'Playfair Display', Georgia, serif; --blog-font-body : 'DM Sans', system-ui, sans-serif; --blog-bg : #faf9f7; --blog-surface : #ffffff; --blog-ink : #0E1CA5; --blog-ink-muted : #6b6760; --blog-accent : #c0392b; /* deep editorial red */ --blog-accent-light : #fdf0ee; --blog-border : #e8e5e0; --blog-shadow : 0 2px 12px rgba(0,0,0,.07); --blog-shadow-hover : 0 8px 32px rgba(0,0,0,.13); --blog-radius : 6px; --blog-gap : clamp(1.5rem, 3vw, 2.5rem); --blog-sidebar-w : 320px; } /* ============================================= GOOGLE FONTS IMPORT (add to or @import) ============================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Playfair+Display:ital,wght@0,700;1,400&display=swap'); /* ============================================= PAGE BACKGROUND ============================================= */ body { background: var(--blog-bg); } /* ============================================= LAYOUT WRAPPER ============================================= */ .blog-wrap { display : grid; grid-template-columns: 1fr var(--blog-sidebar-w); gap : var(--blog-gap); max-width : 1200px; margin : 0 auto; padding : clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem); align-items : start; font-family : var(--blog-font-body); } @media (max-width: 900px) { .blog-wrap { grid-template-columns: 1fr; } .blog-sidebar { order: 2; } .blog-main { order: 1; } } /* ============================================= BLOG HEADER ============================================= */ .blog-header { margin-bottom: 2.5rem; border-bottom: 2px solid var(--blog-ink); padding-bottom: 1rem; } .blog-title { font-family : var(--blog-font-display); font-size : clamp(2rem, 5vw, 3rem); color : var(--blog-ink); margin : 0 0 .4rem; line-height : 1.15; } .blog-description { color : var(--blog-ink-muted); font-size : 1rem; margin : 0; } /* ============================================= POSTS GRID ============================================= */ .posts-grid { display : grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap : var(--blog-gap); align-items: start; } /* ============================================= POST CARD ============================================= */ .post-card { background : var(--blog-surface); border : 1px solid var(--blog-border); border-radius : var(--blog-radius); overflow : hidden; display : flex; flex-direction: column; transition : box-shadow .25s ease, transform .25s ease; box-shadow : var(--blog-shadow); } .post-card:hover { box-shadow: var(--blog-shadow-hover); transform : translateY(-3px); } /* Thumbnail */ .post-card__thumb { display : block !important; overflow : hidden !important; aspect-ratio : 16/9 !important; position : relative; width : 100%; } .post-card__thumb img { width : 100% !important; height : 100% !important; object-fit : cover !important; display : block !important; transition : transform .4s ease; } .post-card:hover .post-card__thumb img { transform: scale(1.04); } .post-card__overlay { position : absolute; inset : 0; background: linear-gradient(to top, rgba(0,0,0,.25) 0%, transparent 60%); pointer-events: none; } /* Body */ .post-card__body { padding : 1.4rem 1.5rem 1.6rem; display : flex; flex-direction : column; flex : 1; gap : .65rem; } /* Category pill */ .post-card__cat { display : inline-block; font-size : .7rem; font-weight : 600; letter-spacing : .1em; text-transform : uppercase; color : var(--blog-accent); background : var(--blog-accent-light); padding : .2em .7em; border-radius : 999px; text-decoration : none; align-self : flex-start; } .post-card__cat:hover { background: var(--blog-accent); color : #fff; } /* Title */ .post-card__title { font-family : var(--blog-font-display); font-size : clamp(1.1rem, 2.5vw, 1.35rem); line-height : 1.3; margin : 0; color : var(--blog-ink); } .post-card__title a { color : inherit; text-decoration: none; } .post-card__title a:hover { color: var(--blog-accent); } /* Meta row */ .post-card__meta { display : flex; flex-wrap : wrap; align-items: center; gap : .6rem .9rem; font-size : .78rem; color : var(--blog-ink-muted); } .post-card__author { display : flex; align-items: center; gap : .4rem; } .post-card__author img { border-radius: 50%; width : 22px; height : 22px; object-fit : cover; } .post-card__meta time, .post-card__read-time { display : flex; align-items : center; gap : .25rem; } .post-card__meta time::before { content : "·"; margin-right: .1rem; color : var(--blog-border); } .post-card__read-time::before { content : "·"; margin-right: .1rem; color : var(--blog-border); } /* Excerpt */ .post-card__excerpt { font-size : .9rem; color : var(--blog-ink-muted); line-height: 1.6; margin : 0; flex : 1; } /* CTA */ .post-card__cta { display : inline-flex; align-items : center; gap : .3rem; font-size : .82rem; font-weight : 600; color : var(--blog-accent); text-decoration: none; margin-top : auto; padding-top : .5rem; border-top : 1px solid var(--blog-border); transition : gap .2s ease, color .2s; } .post-card__cta:hover { gap : .6rem; color: var(--blog-ink); } /* ============================================= PAGINATION ============================================= */ .blog-pagination { margin-top : 3rem; display : flex; justify-content: center; } .blog-pagination .nav-links { display : flex; flex-wrap : wrap; gap : .4rem; align-items: center; } .blog-pagination .page-numbers { display : inline-flex; align-items : center; justify-content : center; min-width : 38px; height : 38px; padding : 0 .7rem; border : 1px solid var(--blog-border); border-radius : var(--blog-radius); background : var(--blog-surface); color : var(--blog-ink); text-decoration : none; font-size : .85rem; font-weight : 500; transition : background .2s, border-color .2s, color .2s; } .blog-pagination .page-numbers:hover, .blog-pagination .page-numbers.current { background : var(--blog-accent); border-color: var(--blog-accent); color : #fff; } /* ============================================= SIDEBAR ============================================= */ .blog-sidebar { display : flex; flex-direction: column; gap : 1.6rem; position : sticky; top : 2rem; } .sidebar-widget { background : var(--blog-surface); border : 1px solid var(--blog-border); border-radius : var(--blog-radius); padding : 1.4rem 1.5rem; box-shadow : var(--blog-shadow); } .sidebar-widget__title { font-family : var(--blog-font-display); font-size : 1rem; font-weight : 700; color : var(--blog-ink); margin : 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--blog-ink); letter-spacing: .01em; } /* Search */ .sidebar-search__field { display : flex; border : 1.5px solid var(--blog-border); border-radius: var(--blog-radius); overflow : hidden; transition : border-color .2s; } .sidebar-search__field:focus-within { border-color: var(--blog-accent); } .sidebar-search__input { flex : 1; border : none; outline : none; padding : .6rem .9rem; font-family: var(--blog-font-body); font-size : .9rem; background : transparent; color : var(--blog-ink); } .sidebar-search__btn { display : flex; align-items : center; justify-content : center; background : var(--blog-accent); border : none; padding : 0 .9rem; cursor : pointer; color : #fff; transition : background .2s; } .sidebar-search__btn:hover { background: var(--blog-ink); } /* Popular Posts */ .popular-list { list-style : none; margin : 0; padding : 0; display : flex; flex-direction: column; gap : 1rem; } .popular-list__item { display : flex; align-items: flex-start; gap : .8rem; } .popular-list__num { font-family : var(--blog-font-display); font-size : 1.5rem; font-weight : 700; color : var(--blog-border); line-height : 1; min-width : 28px; margin-top : 2px; } .popular-list__info { display : flex; gap : .6rem; align-items: flex-start; flex : 1; } .popular-list__thumb { display : block; width : 56px; height : 56px; border-radius : 4px; overflow : hidden; flex-shrink : 0; } .popular-list__thumb img { width : 100%; height : 100%; object-fit: cover; display : block; transition: transform .3s; } .popular-list__thumb:hover img { transform: scale(1.07); } .popular-list__title { display : block; font-size : .85rem; font-weight : 500; color : var(--blog-ink); text-decoration: none; line-height : 1.35; margin-bottom : .25rem; } .popular-list__title:hover { color: var(--blog-accent); } .popular-list__date { font-size: .73rem; color : var(--blog-ink-muted); } /* Categories */ .cat-list { list-style : none; margin : 0; padding : 0; display : flex; flex-direction: column; gap : .1rem; } .cat-list__item { display : flex; justify-content: space-between; align-items : center; } .cat-list__item a { font-size : .88rem; color : var(--blog-ink); text-decoration: none; padding : .45rem 0; flex : 1; transition : color .2s, padding-left .2s; } .cat-list__item a:hover { color : var(--blog-accent); padding-left : .3rem; } .cat-list__count { font-size : .75rem; color : var(--blog-ink-muted); background : var(--blog-bg); border : 1px solid var(--blog-border); border-radius: 999px; padding : .1em .55em; } /* ============================================= NO POSTS ============================================= */ .no-posts { color : var(--blog-ink-muted); font-size: 1rem; text-align: center; padding : 3rem 0; } /* ============================================= ENQUEUE SNIPPET — paste into child theme functions.php ============================================= */ /* add_action( 'wp_enqueue_scripts', function() { // Parent theme styles wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // This stylesheet wp_enqueue_style( 'blog-layout', get_stylesheet_directory_uri() . '/blog-layout.css', [ 'parent-style' ], '1.0.0' ); } ); */ .elementor-kit-3210 .post-card a, .post-card a { color: var(--blog-ink) !important; text-decoration: none !important; } .post-card a:hover { color: var(--blog-accent) !important; }