/* ========================================================================== /resources — page 110. Reference design: prototypes/resources.html Spec: docs/superpowers/specs/2026-09-02-resources-recompose-design.md TWO BANDS, PORTED BY DIFFERENT ROUTES. .bnly-rhero is Elementor widgets. Its colour and type live in _elementor_data as Global Kit references, NOT here. This file carries only what no control expresses: the ground, the glow, the kicker's hairline pseudo-elements, the white plate, and the chip geometry. .bnly-insights is emitted by the [bloglist] shortcode and IS styled from here, deliberately. RULE 1 EXCEPTION for .bnly-insights, chosen on 2026-09-02 over an Elementor Loop Grid. These cards come from a PHP shortcode and have NO Style panel, so there is no panel here for a stylesheet to contradict — the same trade [benely_hub] already makes. The cost is real and is stated rather than buried: an editor cannot restyle these cards from Elementor. Colour binds to --e-global-color-*, so recolouring the palette in Site Settings does recolour them. SCOPING. Compound on .elementor-element / .elementor-widget where a rule must out-specify Elementor's widget defaults at (0,0,2,0). Never scope on .elementor-location-* — that wrapper is front-end only and every rule under it is invisible in the editor. Never compound with .elementor-section — the band sits on a section here but the same class may land on a column later, which is exactly what .bnly-cta had to survive. Elementor emits `var( --e-global-color-x )` WITH SPACES inside the parens. A regex like `var\(--e-global` matches nothing. ========================================================================== */ /* ========================================================================== BNLY-INSIGHTS — the post grid ========================================================================== */ /* NO PADDING HERE. The band's rhythm is the section's own padding control - 96/72/56 vertical, 20/40/20 horizontal - and that is deliberate. A `padding-block` on this class used to live here and was DEAD CSS for the whole of its life. Elementor emits `.elementor-110 .elementor-element.elementor-element-9d6f9f5{padding:...}` at (0,0,3,0) in every media query, and `.bnly-insights` is (0,0,1,0). The computed padding was 0px top and bottom, and the "See all insights" button ended up flush against the ink CTA below it - measured gap 0 at both 1440 and 390 - which read as a tab hanging off the band rather than a button. This is CLAUDE.md's "Elementor controls and section CSS stack silently" trap, in its quieter form: the control did not stack with the CSS, it silently replaced it. Pick ONE system per property. The control wins here because Rule 1 prefers it and because it is what an editor will reach for. */ .bnly-insights{ background:var( --e-global-color-mist ); } /* There is NO .bnly-insights__head wrapper. The prototype has one because it is hand-written HTML; in Elementor the kicker and heading are two sibling widgets in the column, and the gap between them and the grid is a _margin control on the heading (Task 5). Do not add a wrapper rule here — it would match nothing, which is the quietest kind of dead CSS. */ /* The kicker's TRAILING RULE only. Its colour and type are controls on the heading widget — 11.5px / .22em / lh 1.2, the site's settled eyebrow. */ .bnly-insights__kicker .elementor-heading-title{ display:flex;align-items:center;gap:14px; } .bnly-insights__kicker .elementor-heading-title::after{ content:"";height:1px;flex:1;max-width:96px; background:rgba(21,68,120,.30); /* navy at low alpha */ } /* --- the grid ------------------------------------------------------------- GRID, NOT FLEX, and this is not a style preference. A flex basis is set on the MAIN axis, so flipping flex-direction at a breakpoint repoints it: `flex:1 1 0` plus a height rule is correct in a row and collapses the moment the row becomes a column, which rendered the services cards 36px tall in the prototype as well as in WordPress. Grid has no main-axis basis, so the stacked breakpoints cannot inherit a collapsed one. */ .bnly-insights__grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); } /* --- the card ------------------------------------------------------------- Spec: 1px hairline, 8px radius, NO drop shadows. The hover lift is a transform, not a shadow. tools/resources.py asserts box-shadow stays none. */ .bnly-insights .icard{ display:flex;flex-direction:column;height:100%; background:var( --e-global-color-surface ); border:1px solid rgba(124,136,148,.28); /* edge #7C8894, low alpha */ border-radius:var(--benely-radius,8px); overflow:hidden;text-decoration:none; transition:border-color .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1); } .bnly-insights .icard:hover{ /* Brand blue as a BORDER only. It is never text here: brand on white is 3.46 and on mist 3.18, both failing for small text (colour law 3). */ border-color:var( --e-global-color-primary ); transform:translateY(-2px); } .bnly-insights .icard:focus-visible{ outline:2px solid var( --e-global-color-secondary ); /* navy, on light */ outline-offset:3px; } /* MEASURED REASON for the cover's own hairline: the featured images are white-ground title cards measuring 67-77% near-white across the 12 most recent. Without this line the cover's edge dissolves into the white card and the card loses its structure. */ .bnly-insights .icard__cover{ display:block;border-bottom:1px solid rgba(124,136,148,.22); background:var( --e-global-color-mist ); /* shows through while loading */ /* THE RATIO LIVES HERE, on our own element. The cannot be trusted to hold one, for the reason directly below. */ aspect-ratio:16/9;overflow:hidden; } /* !important is required here, and this is the ONLY place in this file that earns it. MEASURED 2026-09-02: The PARENT THEME stamps an inline style on EVERY attachment image. `twentytwentyone/inc/template-functions.php` filters `wp_get_attachment_image_attributes` and prepends `width:100%;height:56.28%;max-width:1672px` to the tag's style attribute. An inline style beats any stylesheet rule that lacks !important, so a plain `height:auto` loses silently and the cover collapses to a percentage of an auto-height parent. CLAUDE.md records this trap as specific to Elementor's image widget — "the image widget's width control cannot beat the inline style". It is not specific to that widget: it is site-wide, and hits get_the_post_thumbnail() exactly the same way. Verify with getComputedStyle(img).height, never by reading the rule back. */ .bnly-insights .icard__cover img{ display:block; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; } .bnly-insights .icard__body{ display:flex;flex-direction:column;gap:10px; padding:clamp(16px,1.6vw,22px); } /* The date is the eyebrow. NAVY, not brand: brand on white is 3.46 and fails for small text. Navy on white is 9.86. This slot exists so real categories can replace the date later with no change to the card. No post has one today — 0 of the 30 most recent, 163 of 347 overall — which is why .blog-cat rendered an empty div for years. */ .bnly-insights .icard__date{ font:700 11px/1 'Poppins',system-ui,sans-serif; letter-spacing:.16em;text-transform:uppercase; color:var( --e-global-color-secondary ); /* navy, 9.86 on white */ } .bnly-insights .icard__title{ margin:0; font:500 clamp(17px,1.35vw,20px)/1.32 'Poppins',sans-serif; letter-spacing:-.01em; color:var( --e-global-color-ink ); /* 17.04 on white */ /* Three lines, not a fixed height: every card body matches without a longer headline overflowing. */ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden; } .bnly-insights .icard:hover .icard__title{ color:var( --e-global-color-secondary ); } /* --- breakpoints ---------------------------------------------------------- Every breakpoint named here is measured by tools/resources.py, at 1440, 1024 and 390. A desktop screenshot proves nothing about the one below it. */ @media (max-width:1024px){ .bnly-insights__grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .bnly-insights__grid{grid-template-columns:1fr} } /* ========================================================================== BNLY-RHERO — the ink hero. COLOUR AND TYPE ARE NOT HERE. Kicker, heading, lede, terms label and chips are Elementor widgets, and every colour and typography value lives in _elementor_data as a Global Kit reference. This block carries only what no control expresses. The one colour below is the inside the heading's own content HTML. A span inside a widget's content is a documented legitimate exception — there is no control for a fragment of a heading. ========================================================================== */ .bnly-rhero{ position:relative;isolation:isolate;overflow:hidden; text-align:center; } /* One soft brand glow at low alpha so the band is not a flat slab. Pseudo-element: no control expresses it. */ .bnly-rhero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(60% 70% at 50% 0%, rgba(0,146,213,.20) 0%, rgba(0,146,213,0) 70%); } /* Kicker: the HAIRLINES only. */ .bnly-rhero__kicker .elementor-heading-title{ display:flex;align-items:center;justify-content:center;gap:14px; } .bnly-rhero__kicker .elementor-heading-title::before, .bnly-rhero__kicker .elementor-heading-title::after{ content:"";height:1px;width:clamp(28px,4vw,56px); background:rgba(255,255,255,.28); } /* Two-tone heading. The is a span in the widget's content HTML. */ .bnly-rhero .elementor-widget-heading .elementor-heading-title em{ font-style:normal; color:var( --e-global-color-cyan ); /* 8.25 on ink */ } .bnly-rhero__title .elementor-heading-title{ max-width:16ch;margin-inline:auto; } .bnly-rhero__lede{ max-width:52ch;margin-inline:auto } /* --- the white plate ------------------------------------------------------ MEASURED REASON, DO NOT REMOVE AS DECORATION. The Ask Benely widget renders in an OPEN SHADOW ROOT with its Tailwind injected via adoptedStyleSheets. Nothing in this file reaches inside it. Its "Ask Benely is AI and can make mistakes." caption is 12px #737373 and sits BELOW its card, so it takes whatever ground is behind the widget: on ink #101D2B 3.59 FAIL on mist #F1F6FA 4.36 FAIL on white #FFFFFF 4.74 PASS Only white passes. Without this plate the ink hero would introduce a 3.59 failure that cannot be fixed from CSS. tools/resources.py samples that caption through .askwp-embed.shadowRoot and will catch its removal. The padding is a BEZEL, not a frame: the widget's own card is white with an #E5E5E5 hairline at 16px radius, so a generous pad renders a white box inside a white box with two mismatched radii. The radius is 22px and deliberately NOT var(--benely-radius). 8px outside 16px inverts the curve and reads as a mistake. SIZING AND CENTRING GO ON THE WIDGET, NOT ON .elementor-widget-container. Measured 2026-09-02: Elementor's margin control writes `.elementor-110 .elementor-element.elementor-element-14d2c6b > .elementor-widget-container { margin:0 }` at (0,0,4,0). A max-width plus auto margins on the INNER container is a specificity fight that (0,0,2,0) loses - and (0,0,3,0) loses too, verified - so the plate sat flush against the rail's left edge with 408px of ink to its right. It looked deliberate enough to miss. The widget div itself carries no Elementor margin rule, so auto margins land there uncontested and no !important is needed. Verified in the browser: 204px each side of a 1200 rail. Do not move these two declarations back onto the container. */ .bnly-rhero__plate{ width:100%;max-width:792px;margin-inline:auto; } .bnly-rhero__plate .elementor-widget-container{ background:var( --e-global-color-surface ); border-radius:22px; padding:10px 10px 14px; } /* --- popular terms -------------------------------------------------------- Chips use the spec's ink-ground secondary treatment: 10% white fill, 45% white border (4.44:1 on ink), white label. The old build put a navy disc behind a `#` glyph, which is invisible on ink. Geometry only — the label's colour and type are icon-list controls. The `#` is a pseudo-element because it replaces an icon the widget would otherwise render from an absolute production URL. */ /* The cap is not cosmetic tidying: without it the nine chips wrapped 8 + 1 at 1440 and left "Technology" orphaned alone on a second line. IT GOES ON THE WIDGET, NOT ON THE