/* * Blog, category and search archives (GeneratePress markup) * * Own CSS grid instead of GeneratePress column gutters, so cards line up * exactly with the archive title. Whole card is clickable (title link is * stretched over the card), no button: a quiet "Read review" text link. * First post (GP "featured-column") is a wide card: image left, text * vertically centred, "Latest" badge. * * Loaded by design-system.php only on is_archive() / is_home() / is_search(). * Colors come from assets/design-system.css (--chmem-*). */ :is(body.archive,body.blog,body.search){--arc-gap:24px} /* ---- archive header, aligned with the grid ---- */ :is(body.archive,body.blog,body.search) .page-header{background:transparent !important;padding:0 !important;margin:0 0 26px !important;border:0;text-align:left} :is(body.archive,body.blog,body.search) .generate-columns-container > .page-header{margin:0 0 2px !important} :is(body.archive,body.blog,body.search) .page-header .page-title{color:var(--chmem-primary);font-size:34px;font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0} :is(body.archive,body.blog,body.search) .page-header .taxonomy-description{margin-top:8px} :is(body.archive,body.blog,body.search) .page-header .taxonomy-description p{color:var(--chmem-body);font-size:16px;line-height:1.55;margin:0;max-width:640px} /* ---- grid (replaces GP column widths, gutters and Masonry) ---- GP Premium puts the page header, pagination and a masonry .grid-sizer INSIDE .generate-columns-container, and Masonry JS positions articles absolutely with an inline container height. All of that is neutralised here so a plain CSS grid does the layout. (Turning Masonry off in Customize > Layout > Blog also avoids loading its script.) */ :is(body.archive,body.blog,body.search) .generate-columns-container{ display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--arc-gap); margin:0 !important;padding:0 !important;height:auto !important;position:static !important; } :is(body.archive,body.blog,body.search) .generate-columns-container > .grid-sizer{display:none !important} :is(body.archive,body.blog,body.search) .generate-columns-container > :not(article){grid-column:1 / -1;width:auto !important;margin-left:0 !important;padding-left:0 !important} :is(body.archive,body.blog,body.search) .generate-columns-container > article{ width:auto !important;padding:0 !important;margin:0 !important;float:none !important; position:relative !important;top:auto !important;left:auto !important;transform:none !important;opacity:1 !important; } :is(body.archive,body.blog,body.search) .generate-columns-container > article.featured-column{grid-column:1 / -1} /* ---- card ---- */ :is(body.archive,body.blog,body.search) .site-main article .inside-article{ position:relative;background:#fff !important;border:1px solid var(--chmem-line);border-radius:var(--chmem-r); padding:0 !important;overflow:hidden;display:flex;flex-direction:column;height:100%;box-sizing:border-box; transition:border-color .15s; } :is(body.archive,body.blog,body.search) .site-main article .inside-article:hover{border-color:#b9c3d6} /* image */ :is(body.archive,body.blog,body.search) .site-main article .post-image{order:0;margin:0 !important;line-height:0;overflow:hidden;background:var(--chmem-bg-soft)} :is(body.archive,body.blog,body.search) .site-main article .post-image a{display:block} :is(body.archive,body.blog,body.search) .site-main article .post-image img{ width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;margin:0; transition:transform .35s ease; } :is(body.archive,body.blog,body.search) .site-main article .inside-article:hover .post-image img{transform:scale(1.035)} /* header */ :is(body.archive,body.blog,body.search) .site-main article .entry-header{order:1;padding:20px 22px 0;margin:0;display:flex;flex-direction:column} :is(body.archive,body.blog,body.search) .site-main article .entry-header .entry-meta{order:-1;margin:0 0 8px} :is(body.archive,body.blog,body.search) .site-main article .entry-meta{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#7a8594} :is(body.archive,body.blog,body.search) .site-main article .entry-meta .byline, :is(body.archive,body.blog,body.search) .site-main article .entry-meta .updated:not(.published){display:none} :is(body.archive,body.blog,body.search) .site-main article .entry-meta a{color:inherit !important;text-decoration:none !important} :is(body.archive,body.blog,body.search) .site-main article .entry-title{ font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.005em;margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } :is(body.archive,body.blog,body.search) .site-main article .entry-title a{color:var(--chmem-ink) !important;text-decoration:none !important} /* whole card clickable: stretch the title link over the card */ :is(body.archive,body.blog,body.search) .site-main article .entry-title a::after{content:"";position:absolute;inset:0;z-index:1} :is(body.archive,body.blog,body.search) .site-main article .inside-article:hover .entry-title a{color:var(--chmem-primary) !important} /* excerpt + read link */ :is(body.archive,body.blog,body.search) .site-main article :is(.entry-summary,.entry-content){ order:2;flex:1;display:flex;flex-direction:column;padding:10px 22px 20px;margin:0 !important; font-size:15px;line-height:1.55;color:var(--chmem-body); } :is(body.archive,body.blog,body.search) .site-main article .entry-summary > p:not(.read-more-container){ margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } :is(body.archive,body.blog,body.search) .site-main article .read-more-container{margin:auto 0 0 !important} :is(body.archive,body.blog,body.search) .site-main article a.read-more, :is(body.archive,body.blog,body.search) .site-main article a.read-more.button{ display:inline-flex;align-items:center;gap:6px;background:none !important;border:0 !important;padding:0 !important; color:var(--chmem-primary) !important;font-size:14px;font-weight:700;text-decoration:none !important;line-height:1.3; font-size:0; /* hide GP text, replaced below */ } :is(body.archive,body.blog,body.search) .site-main article a.read-more::before{content:"Read review";font-size:14px} :is(body.archive,body.blog,body.search) .site-main article a.read-more::after{content:"\2192";font-size:16px;line-height:1;transition:transform .15s} :is(body.archive,body.blog,body.search) .site-main article .inside-article:hover a.read-more::after{transform:translateX(3px)} :is(body.archive,body.blog,body.search) .site-main article footer.entry-meta{display:none} /* ---- featured first post ---- */ :is(body.archive,body.blog,body.search) .site-main article.featured-column .inside-article{ display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(32px,1fr) auto auto minmax(32px,1fr); } :is(body.archive,body.blog,body.search) .site-main article.featured-column .post-image{grid-column:1;grid-row:1 / -1} :is(body.archive,body.blog,body.search) .site-main article.featured-column .post-image a, :is(body.archive,body.blog,body.search) .site-main article.featured-column .post-image img{height:100%} :is(body.archive,body.blog,body.search) .site-main article.featured-column .post-image img{aspect-ratio:auto;min-height:320px} :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-header{grid-column:2;grid-row:2;padding:0 34px} :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-header::before{ content:"Latest review";order:-2;align-self:flex-start;background:var(--chmem-primary);color:#fff;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:4px;margin-bottom:14px; } :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-title{font-size:24px;line-height:1.25;-webkit-line-clamp:4} :is(body.archive,body.blog,body.search) .site-main article.featured-column :is(.entry-summary,.entry-content){grid-column:2;grid-row:3;flex:none;padding:14px 34px 0;font-size:16px} :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-summary > p:not(.read-more-container){-webkit-line-clamp:3;margin-bottom:18px} /* ---- pagination ---- */ :is(body.archive,body.blog,body.search) .paging-navigation{background:transparent !important;padding:0 !important;margin:34px 0 0 !important} :is(body.archive,body.blog,body.search) .generate-columns-container > .paging-navigation{margin:10px 0 0 !important} :is(body.archive,body.blog,body.search) .masonry-load-more{text-align:center} :is(body.archive,body.blog,body.search) .paging-navigation .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} :is(body.archive,body.blog,body.search) .paging-navigation .page-numbers{ display:inline-block;min-width:42px;padding:9px 12px;box-sizing:border-box;text-align:center; border:1px solid var(--chmem-line);border-radius:var(--chmem-r);background:#fff; color:var(--chmem-ink) !important;font-weight:600;font-size:14px;text-decoration:none !important; } :is(body.archive,body.blog,body.search) .paging-navigation a.page-numbers:hover{border-color:var(--chmem-primary);color:var(--chmem-primary) !important} :is(body.archive,body.blog,body.search) .paging-navigation .page-numbers.current{background:var(--chmem-primary);border-color:var(--chmem-primary);color:#fff !important} :is(body.archive,body.blog,body.search) .paging-navigation .page-numbers.dots{border:0;background:transparent} /* ---- tablet / mobile ---- */ @media (max-width:900px){ :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-header{padding:0 24px} :is(body.archive,body.blog,body.search) .site-main article.featured-column :is(.entry-summary,.entry-content){padding:12px 24px 0} :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-title{font-size:23px} } @media (max-width:700px){ :is(body.archive,body.blog,body.search){--arc-gap:18px} :is(body.archive,body.blog,body.search) .generate-columns-container{grid-template-columns:1fr} :is(body.archive,body.blog,body.search) .site-main article.featured-column .inside-article{display:flex} :is(body.archive,body.blog,body.search) .site-main article.featured-column .post-image img{aspect-ratio:16/9;min-height:0;height:auto} :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-header{padding:18px 20px 0} :is(body.archive,body.blog,body.search) .site-main article.featured-column :is(.entry-summary,.entry-content){padding:10px 20px 20px;font-size:15px;flex:1} :is(body.archive,body.blog,body.search) .site-main article.featured-column .entry-title{font-size:22px} :is(body.archive,body.blog,body.search) .site-main article .entry-header{padding:18px 20px 0} :is(body.archive,body.blog,body.search) .site-main article :is(.entry-summary,.entry-content){padding:10px 20px 20px} :is(body.archive,body.blog,body.search) .page-header .page-title{font-size:28px} }