/* ========================================================================== HALCO — guides index 18 September 2026. Deploys to themes/halco-2026/assets/halco-guides.css WHAT WAS WRONG The index rendered 12 posts as Elementor "Cards" with no featured image on a single one of them, so every card opened with a flat sage panel at 66% of the card width in height. Measured on the live page: 12,251px tall on a 390px viewport -- about fourteen and a half screens to get past twelve links -- and 5,007px on desktop. The panel was a deliberate stopgap from an earlier pass, added when only three posts lacked a photo. It became the design. On top of that: the category only appeared on cards WITHOUT an image (so it was about to vanish entirely as photos landed), the meta line was a date and nothing else, "READ THE GUIDE" repeated twelve times down the page, titles ran at ~30px so three-line wraps were normal, and excerpts were auto-cut mid-clause because no post had a hand-written one. WHAT THIS DOES Keeps the Elementor widget exactly as it is -- the client edits posts the way they always have -- and restyles what it emits: - real images at 16:10, with a sage fallback ONLY where one is missing - category on every card, from --halco-cat (see halco-guides.php) - read time beside the date, from .halco-read-N - the whole card is the click target; the repeated CTA is gone - titles down to 20px, excerpts clamped to two lines SPECIFICITY NOTE. Elementor prints the page's own rules INLINE in at around byte 23,000, e.g. .elementor-9 .elementor-element.elementor-element-cd19aca .elementor-posts-container .elementor-post__thumbnail { padding-bottom: ... } which is (0,4,0). This file is enqueued after the child theme, so it lands near the end of and equal specificity is enough to win on source order. Card selectors below are therefore written to (0,4,0) deliberately -- `.elementor-widget-posts .elementor-posts-container .elementor-post .x`. Do not "simplify" them to (0,1,0); they will silently stop applying. ========================================================================== */ /* -------------------------------------------------------------------------- 1. The grid -------------------------------------------------------------------------- */ .elementor-widget-posts .elementor-posts-container.elementor-grid { --grid-column-gap: 24px; --grid-row-gap: 24px; align-items: stretch; } /* Cards were ragged at the bottom because each one sized to its own text. Stretching the article and column-flexing the card pins the meta row to the bottom edge of every card in the row. */ .elementor-widget-posts .elementor-posts-container .elementor-post { display: flex; } .elementor-widget-posts .elementor-posts-container .elementor-post__card { display: flex; flex-direction: column; width: 100%; background: var(--halco-canvas, #FFFFFE); border: 1px solid var(--halco-line, #E3E6E0); border-radius: var(--halco-radius, 6px); overflow: hidden; box-shadow: none; transition: transform var(--halco-dur, .28s) var(--halco-ease, cubic-bezier(.22,.61,.36,1)), box-shadow var(--halco-dur, .28s) var(--halco-ease, cubic-bezier(.22,.61,.36,1)), border-color var(--halco-dur, .28s) var(--halco-ease, cubic-bezier(.22,.61,.36,1)); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .elementor-widget-posts .elementor-posts-container .elementor-post__card:hover { transform: translateY(-3px); box-shadow: var(--halco-shadow-md, 0 4px 12px rgba(21,22,26,.08), 0 12px 32px rgba(21,22,26,.06)); border-color: var(--halco-sage, #707F6A); } } /* Keyboard parity: the card lifts when the link inside it is focused. */ .elementor-widget-posts .elementor-posts-container .elementor-post__card:focus-within { border-color: var(--halco-sage, #707F6A); box-shadow: var(--halco-shadow-md, 0 4px 12px rgba(21,22,26,.08)); } /* -------------------------------------------------------------------------- 2. The image -------------------------------------------------------------------------- */ /* Elementor sizes the thumbnail with padding-bottom on a wrapper. aspect-ratio does the same job without the absolutely-positioned child, and it is the one the page CSS is overriding, so both are set. */ .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail { padding-bottom: 0; aspect-ratio: 16 / 10; background: var(--halco-sage-wash, #F2F4F0); } .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail img { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; transition: transform .5s var(--halco-ease, cubic-bezier(.22,.61,.36,1)); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .elementor-widget-posts .elementor-posts-container .elementor-post__card:hover .elementor-post__thumbnail img { transform: scale(1.035); } } /* ---- Fallback panel, for posts that still have no photo ------------------- Replaces the old ::before-on-the-card rule, which keyed off :not(:has(.elementor-post__thumbnail__link)) and therefore disappeared the moment a post got an image -- taking the only category label with it. The category now comes from the pill in §3 regardless, so this panel is purely a visual placeholder and says nothing the card does not already say. */ .elementor-widget-posts .elementor-posts-container .elementor-post:not(:has(.elementor-post__thumbnail__link)) .elementor-post__card::before { content: ""; display: block; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 82% 8%, rgba(150,166,132,.34), rgba(150,166,132,0) 60%), linear-gradient(160deg, #5F6D59 0%, #3F4A3B 100%); } /* -------------------------------------------------------------------------- 3. The text block -------------------------------------------------------------------------- */ .elementor-widget-posts .elementor-posts-container .elementor-post__text { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 0; padding: 20px 22px 0; } /* The category pill. `--halco-cat` is set per category- class by halco_guides_inline_css(); the fallback keeps the row from collapsing if a post somehow has no category at all. */ .elementor-widget-posts .elementor-posts-container .elementor-post__text::before { content: var(--halco-cat, "Guide"); display: block; margin-bottom: 10px; font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--halco-sage-text, #5F6D59); } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title { margin: 0 0 10px; font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 20px; font-weight: 700; line-height: 1.28; letter-spacing: -.011em; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title a { color: var(--halco-ink, #15161A); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-decoration: none; /* Stretched link: the whole card becomes one target, so a reader does not have to hit 20px of text. Sits under the card's own children (z-index 0 against the text block's z-index 1) so text stays selectable. */ position: static; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .elementor-widget-posts .elementor-posts-container .elementor-post__card { position: relative; } @media (hover: hover) { .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title a:hover { color: var(--halco-sage-dark, #4F5A4A); } } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__excerpt { margin: 0 0 18px; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__excerpt p { margin: 0; font-family: var(--halco-font-body, Inter, system-ui, sans-serif); font-size: 14.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--halco-ink-soft, #4A4D55); /* Two lines, then ellipsis. Excerpts are hand-written and sized to fit, so this only catches a future one written long. */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* -------------------------------------------------------------------------- 4. Meta row, and the CTA that is no longer needed -------------------------------------------------------------------------- */ /* "Read the guide" appeared on all twelve cards. With the whole card clickable and the title carrying its own aria-label, it was twelve repetitions of the same words for no added affordance. Removed from the accessibility tree too -- it is a duplicate of the title link, same href. */ .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__read-more { display: none; } /* Elementor's own badge would now be a second category on the same card. */ .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__badge, .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__avatar { display: none; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__meta-data { display: flex; align-items: center; gap: 8px; margin: auto 0 0; /* auto-top pins it to the card's bottom edge */ padding: 12px 22px 14px; border-top: 1px solid var(--halco-line, #E3E6E0); font-family: var(--halco-font-body, Inter, system-ui, sans-serif); font-size: 12.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--halco-muted, #6B7280); } /* Read time, printed from the .halco-read-N class. Comes FIRST in the row -- it is the thing a reader actually decides on -- with the date after it. */ .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__meta-data::after { order: -2; font-weight: 600; color: var(--halco-ink-soft, #4A4D55); } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__meta-data::before { content: "·"; order: -1; color: var(--halco-line, #E3E6E0); } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post-date { color: inherit; font-size: inherit; } /* Elementor inserts its own "•" between meta spans. Only one span is on now. */ .elementor-widget-posts .elementor-posts-container .elementor-post__meta-data span + span::before { content: "·"; color: var(--halco-line, #E3E6E0); } /* -------------------------------------------------------------------------- 5. The topic filter — [halco_guide_filter] -------------------------------------------------------------------------- */ .halco-gfilter { /* `width` and `box-sizing` are not decoration. With max-width alone this nav sizes to 1300px whenever its parent is a flex container — which is what an Elementor container is — and puts the whole page into horizontal scroll on a phone. Caught at 390px: scrollWidth went to 1324. */ width: 100%; max-width: var(--halco-max, 1300px); box-sizing: border-box; min-width: 0; margin: 0 auto; padding: 0 var(--halco-gutter, 24px); } /* Flex children default to min-width:auto, which refuses to shrink below their content. The scroller in §7 needs this to be allowed to shrink. */ .halco-gfilter__list, .halco-gfilter__title { min-width: 0; max-width: 100%; } .halco-gfilter__title { margin: 0 0 14px; font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--halco-muted, #6B7280); } .halco-gfilter__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .halco-gfilter__list li { margin: 0; } .halco-gfilter__pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; /* tap target */ padding: 8px 16px; border: 1px solid var(--halco-line, #E3E6E0); border-radius: var(--halco-radius-pill, 320px); background: var(--halco-canvas, #FFFFFE); font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 14px; font-weight: 600; line-height: 1; color: var(--halco-ink, #15161A); text-decoration: none; transition: background-color var(--halco-dur, .28s) var(--halco-ease, ease), border-color var(--halco-dur, .28s) var(--halco-ease, ease), color var(--halco-dur, .28s) var(--halco-ease, ease); } .halco-gfilter__pill span { font-size: 12px; font-weight: 500; color: var(--halco-muted, #6B7280); font-variant-numeric: tabular-nums; } @media (hover: hover) { .halco-gfilter__pill:hover { border-color: var(--halco-sage, #707F6A); background: var(--halco-sage-wash, #F2F4F0); color: var(--halco-ink, #15161A); } } .halco-gfilter__pill.is-current { background: var(--halco-sage-text, #5F6D59); border-color: var(--halco-sage-text, #5F6D59); color: var(--halco-canvas, #FFFFFE); } .halco-gfilter__pill.is-current span { color: rgba(255,255,254,.72); } /* -------------------------------------------------------------------------- 6. Pagination -------------------------------------------------------------------------- */ .elementor-widget-posts .elementor-pagination { margin-top: 40px; display: flex; justify-content: center; gap: 6px; } .elementor-widget-posts .elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--halco-line, #E3E6E0); border-radius: var(--halco-radius-pill, 320px); font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 14px; font-weight: 600; color: var(--halco-ink, #15161A); text-decoration: none; } .elementor-widget-posts .elementor-pagination .page-numbers.current { background: var(--halco-sage-text, #5F6D59); border-color: var(--halco-sage-text, #5F6D59); color: var(--halco-canvas, #FFFFFE); } @media (hover: hover) { .elementor-widget-posts .elementor-pagination a.page-numbers:hover { border-color: var(--halco-sage, #707F6A); background: var(--halco-sage-wash, #F2F4F0); } } /* -------------------------------------------------------------------------- 7. Tablet and mobile -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title { font-size: 19px; } } @media (max-width: 767px) { /* A single column of 16:10 images was most of the 12,251px. 16:9 is shorter and still reads as a photograph rather than a strip. */ .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail, .elementor-widget-posts .elementor-posts-container .elementor-post:not(:has(.elementor-post__thumbnail__link)) .elementor-post__card::before { aspect-ratio: 16 / 9; } .elementor-widget-posts .elementor-posts-container.elementor-grid { --grid-row-gap: 16px; } .elementor-widget-posts .elementor-posts-container .elementor-post__text { padding: 18px 18px 0; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title { font-size: 18px; line-height: 1.3; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__excerpt p { font-size: 14px; -webkit-line-clamp: 2; line-clamp: 2; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__meta-data { padding: 11px 18px 12px; } /* Nine pills wrapped to five rows and pushed the first card most of a screen down. One swipeable row instead — the standard mobile pattern, and it keeps the grid in view. NOTE: an earlier version bled this to the screen edges with a negative margin-inline. That made the list box wider than the viewport and put 934px of horizontal scroll on the page (measured: scrollWidth 1324 at a 390px viewport). The site is audited at zero horizontal scroll across nine device profiles, so the bleed is not worth it. The scroller starts and ends at the gutter. */ .halco-gfilter__list { flex-wrap: nowrap; gap: 7px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .halco-gfilter__list::-webkit-scrollbar { display: none; } .halco-gfilter__list li { scroll-snap-align: start; } .halco-gfilter__pill { font-size: 13.5px; padding: 8px 14px; white-space: nowrap; } } /* -------------------------------------------------------------------------- 8. Print / reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .elementor-widget-posts .elementor-posts-container .elementor-post__card, .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail img { transition: none; } } /* ========================================================================== ========================================================================== DIRECTION A — "Editorial" Merged in 18 September 2026, after the first pass shipped. The first pass fixed what was broken. This fixes what was flat: every card on the index measured 448x581px, twelve times over, so nothing was more important than anything else and the eye had nowhere to land. Kept as its own section rather than woven through the rules above, so it can be read — and reverted — as one decision. The source also stays at design-options/option-a-editorial.css with the reasoning and the direction it was chosen over. ========================================================================== ========================================================================== */ /* -------------------------------------------------------------------------- 1. A shared grade, so mixed stock reads as one set -------------------------------------------------------------------------- */ .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail { position: relative; overflow: hidden; } .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail img { /* Pull the saturation down and warm it very slightly. Enough to take the edge off a hot sunset and lift a flat grey office toward the same middle. */ filter: saturate(.78) contrast(1.05) brightness(.99); } .elementor-widget-posts .elementor-posts-container .elementor-post__thumbnail::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: /* the sage wash — this is what ties them together */ linear-gradient(0deg, rgba(112, 127, 106, .16), rgba(112, 127, 106, .16)), /* a bottom vignette, so the pill and any light photo still hold an edge */ linear-gradient(180deg, rgba(21, 22, 26, 0) 55%, rgba(21, 22, 26, .30) 100%), /* a touch of depth at the top-left, where the pill sits */ linear-gradient(135deg, rgba(21, 22, 26, .22) 0%, rgba(21, 22, 26, 0) 38%); } /* -------------------------------------------------------------------------- 2. The category becomes a pill, on the photo -------------------------------------------------------------------------- */ /* Turn off the text-block label from halco-guides.css — it is replaced, not duplicated. */ .elementor-widget-posts .elementor-posts-container .elementor-post__text::before { content: none; } /* The card is already position:relative, so the pill can be placed against it. Using the card (not the thumbnail) means it still lands correctly on a card that has no photo. */ .elementor-widget-posts .elementor-posts-container .elementor-post__card::after { content: var(--halco-cat, "Guide"); position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 13px; border-radius: var(--halco-radius-pill, 320px); background: rgba(21, 22, 26, .68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--halco-canvas, #FFFFFE); pointer-events: none; } /* -------------------------------------------------------------------------- 3. Card craft -------------------------------------------------------------------------- */ .elementor-widget-posts .elementor-posts-container .elementor-post__card { border-radius: 12px; border-color: rgba(21, 22, 26, .07); box-shadow: 0 1px 2px rgba(21, 22, 26, .04); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .elementor-widget-posts .elementor-posts-container .elementor-post__card:hover { box-shadow: 0 10px 24px rgba(21, 22, 26, .10), 0 24px 56px rgba(21, 22, 26, .07); } } .elementor-widget-posts .elementor-posts-container .elementor-post__text { /* The pill took a line back; spend some of it on breathing room. */ padding: 22px 24px 0; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title { font-size: 21px; line-height: 1.26; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__meta-data { padding: 13px 24px 15px; font-size: 12px; letter-spacing: .01em; } /* -------------------------------------------------------------------------- 4. The lead article -------------------------------------------------------------------------- */ .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured { grid-column: span 2; } /* GRID, not flex-direction:row. The card's three children are siblings — thumbnail link, text, meta. Turning the card into a row flex container makes the meta row a THIRD COLUMN, which is exactly what it did: the title squeezed to five short lines and "Start here / 13 min read" floated in a strip down the middle of the card. A 2x2 grid puts the photo down the left and stacks text over meta on the right, which is what was wanted. */ .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__card { display: grid; grid-template-columns: 54% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__thumbnail__link { grid-column: 1; grid-row: 1 / -1; display: block; position: relative; /* the thumbnail below pins to this */ } /* height:100% does not resolve against a grid item of indefinite height, which is why the photo filled only the top half and left white space under it. Absolute inset does. */ .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__thumbnail { position: absolute; inset: 0; height: auto; aspect-ratio: auto; } /* The image itself has to be pinned too. Elementor ships `.elementor-has-item-ratio .elementor-post__thumbnail img` with `height:auto` and a translate centring transform, and that container class IS on this grid. Left alone the photo rendered 325x204 inside a 497x532 box — measured. The ordinary cards escape it because their thumbnail keeps a fixed aspect-ratio; the featured one does not. */ .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__text { grid-column: 2; grid-row: 1; min-width: 0; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__meta-data { grid-column: 2; grid-row: 2; min-width: 0; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__text { padding: 34px 34px 0; justify-content: center; flex: 1 1 auto; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__title { font-size: 29px; line-height: 1.2; letter-spacing: -.018em; margin-bottom: 13px; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__excerpt p { font-size: 16px; line-height: 1.6; -webkit-line-clamp: 4; line-clamp: 4; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__meta-data { padding: 14px 34px 20px; margin-top: 0; border-top: 0; } /* A flag, so the lead reads as chosen rather than just first. */ .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__meta-data::before { content: "Start here"; order: -3; padding: 4px 11px; margin-right: 2px; border-radius: var(--halco-radius-pill, 320px); background: var(--halco-sage-wash, #F2F4F0); color: var(--halco-sage-dark, #4F5A4A); font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 5. A label, so the grid has a beginning -------------------------------------------------------------------------- */ .halco-gfilter + .halco-gindex-label { margin-top: 30px; } .halco-gindex-label { display: flex; align-items: baseline; gap: 12px; max-width: var(--halco-max, 1300px); width: 100%; box-sizing: border-box; margin: 0 auto 20px; padding: 0 var(--halco-gutter, 24px); } .halco-gindex-label h2 { margin: 0; font-family: var(--halco-font-head, Manrope, system-ui, sans-serif); font-size: 15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--halco-ink, #15161A); } .halco-gindex-label span { font-family: var(--halco-font-body, Inter, system-ui, sans-serif); font-size: 13.5px; color: var(--halco-muted, #6B7280); } .halco-gindex-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--halco-line, #E3E6E0); } /* -------------------------------------------------------------------------- 6. Tablet and mobile -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__title { font-size: 25px; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__thumbnail__link { flex-basis: 46%; } } @media (max-width: 767px) { /* One column: the lead stops spanning and goes back to vertical, but keeps its larger type so it still reads as the lead. */ .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured { grid-column: span 1; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__card { display: flex; flex-direction: column; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__thumbnail__link { position: static; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__thumbnail { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__text { padding: 20px 18px 0; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__title { font-size: 22px; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__excerpt p { font-size: 14.5px; -webkit-line-clamp: 3; line-clamp: 3; } .elementor-widget-posts .elementor-posts-container .elementor-post.is-featured .elementor-post__meta-data { padding: 12px 18px 14px; } .elementor-widget-posts .elementor-posts-container .elementor-post__card::after { top: 12px; left: 12px; font-size: 11px; padding: 5px 11px; } .elementor-widget-posts .elementor-posts-container .elementor-post .elementor-post__title { font-size: 18.5px; } } /* ========================================================================== 7. The intro block — strap + filter + section label Rendered together by [halco_guide_filter]; see halco-guides.php. ========================================================================== */ .halco-gintro { width: 100%; min-width: 0; box-sizing: border-box; } /* The strap answers "why should I read these?" before the reader has to guess. Three facts on the index; on a category archive it carries that category's own description, which Yoast already holds for all eight and which rendered nowhere on the page before now. */ .halco-gstrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; width: 100%; max-width: var(--halco-max, 1300px); box-sizing: border-box; margin: 0 auto 26px; padding: 0 var(--halco-gutter, 24px); font-family: var(--halco-font-body, Inter, system-ui, sans-serif); font-size: 14px; line-height: 1.5; color: var(--halco-muted, #6B7280); } .halco-gstrap b { font-weight: 600; color: var(--halco-ink, #15161A); } /* A hairline between the facts, so they read as a set rather than a sentence that lost its punctuation. Not before the first one. */ .halco-gstrap > span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: 22px; vertical-align: -1px; background: var(--halco-line, #E3E6E0); } /* The archive variant is a real sentence, so it gets prose treatment and a measure — not the divider grid above. */ .halco-gstrap--desc { display: block; max-width: 68ch; margin-bottom: 26px; font-size: 15.5px; line-height: 1.6; color: var(--halco-ink-soft, #4A4D55); } /* ========================================================================== 8. Pagination, finished properly Two bare numerals at the foot of a 4,900px page read as an afterthought. ========================================================================== */ .elementor-widget-posts .elementor-pagination { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--halco-line, #E3E6E0); } .elementor-widget-posts .elementor-pagination .page-numbers.next, .elementor-widget-posts .elementor-pagination .page-numbers.prev { padding: 0 20px; font-weight: 600; } /* ========================================================================== 9. Focus states The cards use a stretched link, so the visible focus ring has to be put back deliberately — otherwise a keyboard user sees nothing move at all. ========================================================================== */ .elementor-widget-posts .elementor-posts-container .elementor-post__title a:focus-visible { outline: none; } .elementor-widget-posts .elementor-posts-container .elementor-post__card:has(a:focus-visible) { outline: 2px solid var(--halco-sage-dark, #4F5A4A); outline-offset: 3px; } .halco-gfilter__pill:focus-visible, .elementor-widget-posts .elementor-pagination .page-numbers:focus-visible { outline: 2px solid var(--halco-sage-dark, #4F5A4A); outline-offset: 2px; } /* ========================================================================== 10. The mobile hero diet The guides hero used ~1,080px of the first 1,688px on a 390px viewport, so both the topic filter and the first card started below the fold. The height is almost all in the standfirst, which runs six loose lines at body-xl. Scoped to the guides pages only -- `halco-t-body-xl` is a sitewide utility and must not change everywhere else. ========================================================================== */ @media (max-width: 767px) { body.page-id-9 .halco-t-body-xl, body.archive.category .halco-t-body-xl { font-size: 15.5px; line-height: 1.55; } body.page-id-9 .halco-t-body-xl p, body.archive.category .halco-t-body-xl p { font-size: inherit; line-height: inherit; } /* The three facts wrap to three lines on a phone, and a divider that was meant to sit BETWEEN them then dangles at the start of lines two and three. Stack them and drop the dividers entirely. */ .halco-gstrap { display: block; margin-bottom: 20px; font-size: 13.5px; line-height: 1.75; } .halco-gstrap > span { display: block; } .halco-gstrap > span + span::before { content: none; } .halco-gstrap--desc { font-size: 14.5px; margin-bottom: 20px; } .halco-gfilter + .halco-gindex-label { margin-top: 24px; } }