inherits it. So every text element below * names --font-ui again. * * These classes are the theme's own. Nothing in here depends on Elementor, and none * of Elementor's `elementor-post*` classes appear, so this file outlives the skin * that currently renders it (inc/class-sharering-posts-skin.php) and will serve the * native loops unchanged. */ .sr-posts { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); font-family: var(--font-ui); } .sr-posts .sr-posts__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-8); align-items: stretch; } /* The widget's own column setting, honoured. minmax(0, 1fr) rather than 1fr: a bare 1fr track has an auto minimum, so one long unbroken word in a title pushes the track wider than its share and the grid overflows the viewport. */ .sr-posts.sr-posts--cols-2 .sr-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-posts.sr-posts--cols-3 .sr-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sr-posts.sr-posts--cols-4 .sr-posts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sr-posts.sr-posts--cols-5 .sr-posts__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sr-posts.sr-posts--cols-6 .sr-posts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* --------------------------------------------------------------------- a card */ .sr-posts .sr-post-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--sr-canvas); border: var(--border-hairline); border-radius: var(--radius-lg); /* clip, never hidden: hidden on a scroll container silently kills sticky, and the habit is worth keeping even where there is nothing sticky to kill. */ overflow: clip; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .sr-posts .sr-post-card:hover, .sr-posts .sr-post-card:focus-within { transform: translateY(calc(var(--space-1) / -2)); box-shadow: var(--shadow-md); border-color: var(--sr-chrome-accent); } .sr-posts .sr-post-card__media { margin: 0; background: var(--sr-tint); } /* The box is reserved before the image arrives: aspect-ratio plus object-fit means the card never resizes on load, whatever proportions the featured image has, and no image is ever stretched to fit. */ .sr-posts .sr-post-card__img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio-card); object-fit: cover; } .sr-posts .sr-post-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--space-5); } .sr-posts .sr-post-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-family: var(--font-ui); font-size: var(--type-eyebrow); line-height: var(--leading-snug); } .sr-posts .sr-post-card__category { color: var(--sr-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .sr-posts .sr-post-card__date { color: var(--sr-ink-soft); font-weight: var(--weight-regular); } .sr-posts .sr-post-card__title { margin: 0 0 var(--space-3); color: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); /* No text-wrap: balance here. Card titles are three or four lines deep and balancing them ragged-centres the last line against the excerpt below. */ } /* The title is the card's only link, and it is the whole card's hit area: the stretched ::after covers the card, so a pointer anywhere on it lands on the link that names the destination, while a screen reader is handed exactly one link per card and the focus ring stays on the words. */ .sr-posts .sr-post-card .sr-post-card__title a { color: inherit; font-family: var(--font-ui); text-decoration: none; } .sr-posts .sr-post-card .sr-post-card__title a::after { content: ""; position: absolute; inset: 0; } .sr-posts .sr-post-card:hover .sr-post-card__title a, .sr-posts .sr-post-card .sr-post-card__title a:hover, .sr-posts .sr-post-card .sr-post-card__title a:focus-visible { color: var(--sr-brand); } .sr-posts .sr-post-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp-excerpt); line-clamp: var(--clamp-excerpt); overflow: clip; margin: 0 0 var(--space-5); color: var(--sr-ink-soft); font-family: var(--font-ui); font-size: var(--type-caption); line-height: var(--leading-normal); } /* The read-more is an affordance, not a link (see the skin: the title is the link, and it already covers the card). It sits on the card's baseline, pushed there by the auto margin, so a row of cards with excerpts of different lengths still lines its read-mores up. */ .sr-posts .sr-post-card__more { display: flex; align-items: center; gap: var(--space-3); margin: auto 0 0; color: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; transition: color var(--dur-base) var(--ease); } /* THE SIGNATURE. The same rule the footer grows from the left under every link, on hover and on focus, drawn here under the card's read-more. Same gradient, same origin, same two-pixel weight. transform, not width, so it composites. */ .sr-posts .sr-post-card__more-rule { flex: 1 1 auto; height: var(--rule); border-radius: var(--radius-pill); background: linear-gradient(to right, var(--sr-chrome-accent), transparent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease); } .sr-posts .sr-post-card:hover .sr-post-card__more-rule, .sr-posts .sr-post-card:focus-within .sr-post-card__more-rule { transform: scaleX(1); } .sr-posts .sr-post-card:hover .sr-post-card__more, .sr-posts .sr-post-card:focus-within .sr-post-card__more { color: var(--sr-chrome-accent); } /* ------------------------------------------------------------- the lead story */ /* One column, thumbnail to one side: the widget is asking for a feature, so it gets the tint plane and the room. The media keeps its own proportion, wider than a grid card's, because a lead image that repeats the grid's crop wastes the space it was given. */ .sr-posts--feature .sr-post-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--space-8); padding: var(--space-7); background: var(--sr-tint); border-color: transparent; border-radius: var(--radius-xl); box-shadow: none; } .sr-posts--feature .sr-post-card:hover, .sr-posts--feature .sr-post-card:focus-within { border-color: transparent; box-shadow: var(--shadow-md); } .sr-posts--feature .sr-post-card__media { border-radius: var(--radius-lg); overflow: clip; } .sr-posts--feature .sr-post-card__img { aspect-ratio: var(--ratio-feature); } .sr-posts--feature .sr-post-card__body { padding: 0; } .sr-posts--feature .sr-post-card__title { font-size: var(--type-h2); } .sr-posts--feature .sr-post-card__excerpt { font-size: var(--type-body); } /* Media to the right means the body reads first, so the order is swapped in the layout rather than in the markup: the heading stays before the image in the DOM, which is the order it should be read in. */ .sr-posts--media-right.sr-posts--feature .sr-post-card__media { order: 2; } .sr-posts--media-right.sr-posts--feature .sr-post-card__body { order: 1; } /* ------------------------------------------------------------ nothing found */ .sr-posts .sr-posts__empty { margin: 0; padding: var(--space-8) 0; color: var(--sr-ink-soft); font-family: var(--font-ui); font-size: var(--type-lead); line-height: var(--leading-normal); } /* -------------------------------------------------------------- pagination */ .sr-posts .sr-posts__pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-8); } .sr-posts .sr-posts__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-7); padding: var(--space-2) var(--space-4); border: var(--border-hairline); border-radius: var(--radius-pill); color: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-caption); font-weight: var(--weight-medium); text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .sr-posts .sr-posts__pagination a.page-numbers:hover, .sr-posts .sr-posts__pagination a.page-numbers:focus-visible { background: var(--sr-tint); color: var(--sr-brand); } .sr-posts .sr-posts__pagination .page-numbers.current { background: var(--sr-ink); border-color: var(--sr-ink); color: var(--sr-ink-invert); } /* WordPress puts the word "Page" inside every number for screen readers. It must stay in the accessibility tree, so it is moved out of sight rather than hidden. */ .sr-posts .sr-posts__pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- responsive */ /* Four or more columns is a desktop proposition; below that width every wide grid collapses to two, and the feature stacks. */ @media (max-width: 900px) { .sr-posts.sr-posts--cols-3 .sr-posts__grid, .sr-posts.sr-posts--cols-4 .sr-posts__grid, .sr-posts.sr-posts--cols-5 .sr-posts__grid, .sr-posts.sr-posts--cols-6 .sr-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-posts--feature .sr-post-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); } .sr-posts--media-right.sr-posts--feature .sr-post-card__media { order: 1; } .sr-posts--media-right.sr-posts--feature .sr-post-card__body { order: 2; } } @media (max-width: 560px) { .sr-posts .sr-posts__grid, .sr-posts.sr-posts--cols-2 .sr-posts__grid, .sr-posts.sr-posts--cols-3 .sr-posts__grid, .sr-posts.sr-posts--cols-4 .sr-posts__grid, .sr-posts.sr-posts--cols-5 .sr-posts__grid, .sr-posts.sr-posts--cols-6 .sr-posts__grid { grid-template-columns: minmax(0, 1fr); } .sr-posts .sr-posts__grid { row-gap: var(--space-6); } }