/* ============================================================================ * wereno-homeproducts.css — the homepage "two products" section only. * *
…
* * Loads AFTER wereno-products.css, which owns the shared furniture this file * builds on: .wr-inner .wr-card .wr-btn .wr-pill .wr-chip .wr-micro .wr-hand * .wr-eyebrow .wr-ex .wr-ex-badge .wr-mark, the :root colour tokens and the * 18/1.8 + 48/1.4 type scale. Nothing below re-declares any of those. * * Every rule here is prefixed .wr-prod / .wr-prod-*. Three notes: * * 1. The section sits on the page ground (#DEE8E8 from .uicore-body-content), * not on a band — that is the only ground where the hard black shadow * reads at full strength, and the page already runs dark for three * consecutive sections below this one. * 2. Anything that has to beat wereno-products.css's own .wr-prod p / h2 / h3 * rules is written at (0,3,0) or better, so this file wins no matter which * order the two stylesheets happen to load in. * 3. The cards do not respond to hover. Only the buttons do (background, from * the base sheet) plus a 3px arrow nudge, which is motion-guarded. * ========================================================================== */ /* ------------------------------------------------------------- section -- */ .wr-prod{ /* stepped at the two breakpoints; everything inside reads these */ --wr-prod-pad:32px; /* card content inset */ --wr-prod-inset:24px; /* colour-band inset + rotated chip left edge */ --wr-prod-band:104px; /* colour-band height */ --wr-prod-r:16px; /* card radius — kept in step with .wr-card */ padding:96px 0; } .wr-prod,.wr-prod *{box-sizing:border-box} /* Matches the IG reel strip, which is max-width:1630px for its six-across row and drops to 805px at 1700 (index.html:769,792). Tracking the same breakpoint keeps the three cards the exact width of the six videos below them at the widths where that row is actually six across. The head and the closing caption keep their own narrow max-widths and stay centred inside it. */ .wr-prod-inner{width:95%;max-width:1630px;margin-inline:auto} @media(max-width:1700px){.wr-prod-inner{max-width:1176px}} /* ---------------------------------------------------------------- head -- */ .wr-prod-head{text-align:center} .wr-prod .wr-prod-head h2{max-width:820px;margin:0 auto 16px} .wr-prod .wr-prod-head .wr-prod-sub{max-width:700px;margin:0 auto;padding-bottom:64px} /* ---------------------------------------------------------------- grid -- */ /* Three up. It was 1fr 1fr with a comment saying "the pair only works as a comparison side by side", written when only two cards existed; the third (Renobot) was missing from the section the eyebrow calls "Three products". At 1176px with a 32px gap each card is 370.7px, which is narrower than the single-column mobile case, so the narrow-column type overrides that used to live only under 767px now also apply from 768 up (see the 3-up block near the bottom of this file). align-items is START, not stretch. Stretch was right for two cards that were always the same height; with an accordion it means opening one card pads the other two to match, so a 1500px panel leaves 1500px of empty white below two untouched CTAs. The three collapsed cards come out level on their own because their content is matched line for line. */ .wr-prod-grid{ position:relative; display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start} /* Ornaments sit above the grid, clear of the centred copy column, and are near-black line art — they cannot be tinted, so they are left black. */ .wr-prod .wr-prod-orn{position:absolute;display:block;pointer-events:none;z-index:1} .wr-prod .wr-prod-orn--rb{left:-16px;bottom:calc(100% + 16px);height:88px;width:auto} .wr-prod .wr-prod-orn--hm{right:-16px;bottom:calc(100% + 20px);width:96px;height:auto} /* ---------------------------------------------------------------- card -- */ /* .wr-card supplies the white fill, the 3px #000000E6 border, the radius and the 0 8px 0 0 shadow. overflow:hidden is required here or the colour band's square top corners poke through the card radius. */ .wr-prod-card{position:relative;display:flex;flex-direction:column;overflow:hidden} .wr-prod-card--rb{--wr-prod-accent:var(--rb-deep)} .wr-prod-card--hm{--wr-prod-accent:var(--hm-deep)} /* Renobot's blues are written out rather than pulled from wereno-renobot.css. That sheet works by REPAINTING Handyman's --hm-* tokens on a .rbc wrapper, so linking it here would turn the Handyman card blue the moment a .rbc class landed anywhere above it. Literal values: #35C4F0 primary, #A9E4FA band, #0A6C9B deep. */ .wr-prod-card--rbc{--wr-prod-accent:#0A6C9B} /* 1 — colour band ---------------------------------------------------------- */ .wr-prod-band{ display:flex;align-items:center;justify-content:space-between;gap:12px; height:var(--wr-prod-band);padding:0 var(--wr-prod-inset); border-bottom:3px solid var(--wr-line); border-radius:calc(var(--wr-prod-r) - 3px) calc(var(--wr-prod-r) - 3px) 0 0; background-position:center center;background-repeat:no-repeat;background-size:cover} .wr-prod-band--rb{ background-color:var(--rb-amber); background-image:url("wp-content/uploads/2024/09/marketing-agency-services-bg-2.webp")} .wr-prod-band--hm{ background-color:var(--hm-light); background-image:url("wp-content/uploads/2024/09/marketing-agency-services-bg-4.webp")} .wr-prod-band--rbc{ background-color:#A9E4FA; background-image:url("wp-content/uploads/2024/09/marketing-agency-services-bg-3.webp")} /* The spec said 28px. In a 104px band that measured out to 75px wide with 320px of dead space beside it — the mark read as an afterthought rather than as the card's identity, and these wordmarks carry a robot glyph inline, so the lettering is only a fraction of the total height. 36px fixes it without crowding the pill. */ .wr-prod .wr-prod-band .wr-mark{flex:0 0 auto;height:66px} @media(max-width:1024px){.wr-prod .wr-prod-band .wr-mark{height:54px}} @media(max-width:767px){.wr-prod .wr-prod-band .wr-mark{height:44px}} .wr-prod-band .wr-pill{flex:0 0 auto} /* 2 — rotated chip --------------------------------------------------------- */ /* The fastest-reading difference between the two cards. Straddles the band seam, which is the theme's own device. */ /* The offset clears the MARK, not the band. The chip is rotated, so its box reaches about 21px above the `top` it is given, and the marks grew: at 66px in a 104px band the wordmark now ends at y87, where the chip's rotated box used to start at y64 and cut across the lettering. One offset per breakpoint, because the mark height steps with it. */ .wr-prod .wr-prod-chip{ position:absolute;left:var(--wr-prod-inset);top:112px;z-index:2; padding:1px 12px;transform:rotate(-15deg);transform-origin:left center} @media(max-width:1024px){.wr-prod .wr-prod-chip{top:101px}} /* 3 — role ----------------------------------------------------------------- */ /* The 40px top clears the rotated chip. */ /* The top padding is the chip's landing strip: the chip is absolutely positioned over this element on purpose, and this is the clearance that keeps it off the heading TEXT. It grew with the chip's offset. */ .wr-prod .wr-prod-role{padding:52px var(--wr-prod-pad) 0} @media(max-width:1024px){.wr-prod .wr-prod-role{padding-top:46px}} @media(max-width:767px){.wr-prod .wr-prod-role{padding-top:40px}} /* 4 — definition ----------------------------------------------------------- */ .wr-prod .wr-prod-card .wr-prod-def{margin:12px 0 0;padding:0 var(--wr-prod-pad)} /* 5 — three-item list ------------------------------------------------------ */ /* A 10px accent square, never a tick: a tick reads as a feature-comparison checklist, and these three lines are what the product is, not a matrix row. */ .wr-prod-list{list-style:none;margin:24px 0 0;padding:0 var(--wr-prod-pad)} .wr-prod-list li{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 0;border-top:1px solid rgba(20,20,20,.08); font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.015em; color:var(--wr-ink)} .wr-prod-list li:first-child{border-top:0} .wr-prod-list li::after{ content:"";flex:0 0 auto;width:10px;height:10px;background:var(--wr-prod-accent)} /* 5b — evidence line ------------------------------------------------------- */ /* One measured fact per card, sitting under the list and above the plate. It is deliberately NOT a fourth list item: the list says what the product is, this says how much of it is actually running. The 2px accent rule is what separates the two registers — the list's own separators are 1px hairlines, so the step up reads as a new block rather than another row. Written at (0,3,0) to beat the base sheet's .wr-prod p (18/1.8, 0 0 16px). */ .wr-prod .wr-prod-card .wr-prod-ev{ margin:16px var(--wr-prod-pad) 0;padding-top:12px; border-top:2px solid var(--wr-prod-accent); font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.01em; color:var(--wr-ink)} /* 6 — product plate -------------------------------------------------------- */ /* min-height keeps the two cards in lockstep on desktop and tablet. The "From the product" badge comes from .wr-ex-badge and sits INSIDE the frame. ⚠ The 48px top inset is load-bearing. The badge is absolutely positioned at top:12px/right:12px and "FROM THE PRODUCT" measures ~150px at 11px/.08em — nearly twice the old "EXAMPLE". The previous fix reserved a fixed 84px padding-right on the copy beside it; at 390px that left the text a 120px column. Clearing the badge with a top inset instead is width-independent and survives any future change to the badge string. */ /* min-height used to keep the two cards in lockstep. Each card now opens its own panel independently, so there is no lockstep left to keep and the only thing a floor does is pad the short Capital plate with dead space. */ .wr-prod-plate{ margin:24px var(--wr-prod-pad);padding:48px 20px 20px; background:rgba(20,20,20,.05);border:3px solid var(--wr-line); border-radius:12px;box-shadow:var(--wr-shadow-sm)} /* Renobot plate — the escalation headline, what Renobot did with it, one evidence chip. No avatar and no bubbles: the two plates must differ in kind, not in hue, because on mobile they stack and the comparison is gone. */ .wr-prod .wr-prod-plate .wr-prod-q{ margin:0; font-size:16px;font-weight:500;line-height:1.5;color:var(--wr-ink)} .wr-prod .wr-prod-plate .wr-prod-a{ margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--wr-body)} /* Previews Renobot's receipts device in one chip: queue state, the date it was raised, and the source table the evidence came off. */ .wr-prod-src{ display:inline-block;margin-top:14px;padding:4px 8px;background:#fff; border:2px solid var(--wr-line);border-radius:6px} /* Handyman plate — two bubbles and an avatar, then a chip row. */ .wr-prod-thread{display:flex;flex-direction:column;gap:10px} .wr-prod-bub{ font-size:16px;line-height:1.5;padding:10px 14px;max-width:86%; border:2px solid var(--wr-line);box-shadow:var(--wr-shadow-sm); color:var(--wr-ink)} /* The reader holds the phone, so what THEY send sits on the right and the reply comes back on the left — matching /handyman, and matching every messaging app. The names say who is speaking, because in/out read as the opposite of what they looked like. */ /* Blue out, white back — the same as the threads on /handyman, and the same as the real screenshots they are rebuilt from. */ .wr-prod-bub--you{ align-self:flex-end; background:var(--wr-blue);color:#fff;border-radius:12px 12px 0 12px} .wr-prod-bub--them{background:#fff;border-radius:12px 12px 12px 0} .wr-prod-them{display:flex;align-items:flex-end;justify-content:flex-start;gap:8px} .wr-prod .wr-prod-avatar{flex:0 0 auto;display:block;width:28px;height:28px} .wr-prod-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .wr-prod-tag{ font-size:13px;font-weight:500;line-height:1.4;color:var(--wr-ink); background:#fff;border:2px solid var(--wr-line);border-radius:6px;padding:3px 8px} /* 7 — plate caption -------------------------------------------------------- */ /* Outfit 16px, never the handwriting. This is the honesty device and the swap marker in one sentence; it survived the placeholder being replaced by real product content and now names the screen each plate was taken off. Its padding-bottom — not the button's margin-top — carries the 24px gap, because margin-top:auto collapses to 0 on whichever card is taller. */ .wr-prod .wr-prod-card .wr-prod-cap{ margin:0 var(--wr-prod-pad);padding-bottom:24px; font-size:16px;line-height:1.6;color:var(--wr-body)} /* 8 — CTA ------------------------------------------------------------------ */ /* margin-top:auto puts both buttons on the same baseline. Exactly two actions in the whole section; the cards themselves are not links. */ body.elementor-kit-8 .wr-prod .wr-prod-cta{ margin:0 var(--wr-prod-pad) var(--wr-prod-pad);margin-top:auto;align-self:stretch} .wr-prod-arrow{display:inline-block;margin-left:6px} @media(prefers-reduced-motion:no-preference){ .wr-prod-arrow{transition:transform .2s ease} .wr-prod-cta:hover .wr-prod-arrow, .wr-prod-cta:focus .wr-prod-arrow{transform:translateX(3px)} } /* ------------------------------------------------------- closing caption -- */ .wr-prod-caption{text-align:center;margin:40px auto 0;max-width:700px} /* ============================================================ 768–1024px == */ @media(max-width:1024px){ .wr-prod{--wr-prod-pad:24px;--wr-prod-inset:24px;--wr-prod-band:88px;--wr-prod-r:14px; padding:64px 0} .wr-prod .wr-prod-head .wr-prod-sub{max-width:500px;padding-bottom:40px} .wr-prod-grid{gap:24px} .wr-prod .wr-prod-orn{display:none} /* they collide with the cards below 1025 */ .wr-prod-list li{font-size:17px} } /* ================================================================ ≤767px == */ @media(max-width:767px){ .wr-prod{--wr-prod-pad:20px;--wr-prod-inset:20px;--wr-prod-band:80px;--wr-prod-r:12px; padding:40px 0} .wr-prod-inner{width:100%;padding:0 20px} .wr-prod .wr-prod-head .wr-prod-sub{max-width:100%;padding-bottom:24px} /* Single column, Renobot first — you renovate, then you operate. Source order already does this, so nothing is reordered. */ .wr-prod-grid{grid-template-columns:1fr;gap:20px} /* Shallower angle and a shorter drop so the chip stops overhanging. */ .wr-prod .wr-prod-chip{top:86px;transform:rotate(-8deg)} .wr-prod-list li{font-size:16px} /* The plate is the pitch: both Handyman bubbles, the chip row and both Renobot lines stay. Only the lockstep min-height goes. */ .wr-prod-plate{min-height:0} .wr-prod-bub{font-size:15px;max-width:100%} body.elementor-kit-8 .wr-prod .wr-prod-cta{display:block} } /* --- the seam with the About block below ------------------------------ #products ends with 96px of its own padding and the theme's About top-section opens with another 96px, so the two sections were 192px apart: a hole, not a break. Trimmed from both sides. The About rule is scoped by adjacency rather than by its elementor id, so it survives the section being re-spliced. */ .wr-prod{padding-bottom:28px} #products + .elementor-section, #products + div{padding-top:44px} @media(max-width:1024px){ .wr-prod{padding-bottom:20px} #products + .elementor-section, #products + div{padding-top:34px} } @media(max-width:767px){ .wr-prod{padding-bottom:14px} #products + .elementor-section, #products + div{padding-top:26px} } /* ------------------------------------------------- 7 — learn more + modal -- */ /* The card stays short and the detail opens in a dialog. It was an accordion first: less code and no script, but it unfolded 1,300px inside a 522px column and pushed the card's own CTA a screen and a half down the page. */ .wr-prod .wr-prod-learn{ display:flex;align-items:center;justify-content:center;gap:9px; /* the bottom margin is the gap the CTA sits below; .wr-prod-cta's own margin-top is auto, so without a margin here the two buttons touch */ margin:20px var(--wr-prod-pad) 14px;padding:12px 16px; border:2px solid var(--wr-line);border-radius:10px; background:transparent;color:var(--wr-ink); font-family:"Outfit",sans-serif;font-size:15px;font-weight:600; line-height:1.3;letter-spacing:-.01em;cursor:pointer; transition:background-color .15s ease,border-color .15s ease} .wr-prod .wr-prod-learn:hover{background:rgba(20,20,20,.06)} .wr-prod .wr-prod-learn:focus-visible{ outline:3px solid var(--wr-prod-accent);outline-offset:2px} .wr-prod .wr-prod-learn__ic{display:flex;color:var(--wr-prod-accent)} .wr-prod .wr-prod-learn__ic svg{width:16px;height:16px;display:block} @media(prefers-reduced-motion:no-preference){ .wr-prod .wr-prod-learn__ic{transition:transform .18s cubic-bezier(.2,.7,.3,1)} .wr-prod .wr-prod-learn:hover .wr-prod-learn__ic{transform:translateX(3px)} } /* the dialog ------------------------------------------------------------- */ .wr-prod-modal{ position:fixed;inset:0;z-index:1000; display:flex;align-items:flex-start;justify-content:center; padding:48px 20px;overflow-y:auto; background:rgba(12,16,16,.62); opacity:0;transition:opacity .18s ease} .wr-prod-modal.is-open{opacity:1} .wr-prod-modal[hidden]{display:none} .wr-prod-modal__panel{ position:relative;width:100%;max-width:960px; background:#fff;border:3px solid var(--wr-line);border-radius:18px; box-shadow:0 18px 0 0 rgba(0,0,0,.85); transform:translateY(10px);transition:transform .2s cubic-bezier(.2,.7,.3,1)} .wr-prod-modal.is-open .wr-prod-modal__panel{transform:none} /* The header wears the card's band, so opening a card feels like opening THAT card rather than arriving at a generic panel. The fill and the background art are copied from the band at open time and the mark is cloned from it, so the two can never drift apart. */ .wr-prod-modal__head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 26px 16px;border-bottom:3px solid var(--wr-line); background-repeat:no-repeat; border-radius:15px 15px 0 0} .wr-prod-modal__head.is-branded{padding:18px 22px} .wr-prod-modal__mark{display:flex;align-items:center;min-width:0} /* .elementor img is (0,1,1) and beats a single class, so the height needs this much selector to land at all. */ .wr-prod-modal__head .wr-prod-modal__mark .wr-mark{height:62px;width:auto;flex:0 0 auto} .wr-prod-modal__head .wr-prod-modal__mark .wr-prod-lock{display:flex;align-items:center;gap:11px} .wr-prod-modal__head .wr-prod-modal__mark .wr-prod-lock__i{height:62px;width:auto;flex:0 0 auto} .wr-prod-modal__head .wr-prod-modal__mark .wr-capmark{--h:52px} /* The title still names the panel for assistive tech; on a branded header the mark says it visually, and two of them side by side reads as a stutter. */ .wr-prod-modal__t{ margin:0;font-family:"Outfit",sans-serif;font-size:24px;font-weight:600; letter-spacing:-.02em;color:var(--wr-ink)} .wr-prod-modal__head.is-branded .wr-prod-modal__t{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the close button has to hold its own on pink, blue and amber alike */ .wr-prod-modal__head.is-branded .wr-prod-modal__x{ background:#fff;border-color:var(--wr-line)} .wr-prod-modal__x{ flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center; justify-content:center;border:2px solid var(--wr-line);border-radius:999px; background:#fff;color:var(--wr-ink);font-size:22px;line-height:1;cursor:pointer; transition:background-color .15s ease} .wr-prod-modal__x:hover{background:rgba(20,20,20,.08)} .wr-prod-modal__x:focus-visible{outline:3px solid var(--wr-ink);outline-offset:2px} .wr-prod-modal__body{padding:26px 32px 32px} /* The plates are authored inside a card, where they set their own horizontal inset from --wr-prod-pad. The dialog supplies its own padding, so theirs goes to zero rather than stacking on top of it. */ .wr-prod-modal__body .wr-prod-detail{--wr-prod-pad:0px} /* the one sentence that frames the three columns */ .wr-prod .wr-prod-lede,.wr-prod-modal .wr-prod-lede{ margin:0 0 22px;font-family:"Outfit",sans-serif; font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.015em; color:var(--wr-ink)} /* Three columns of jot notes, not prose. The panel opened on two long paragraphs and a plate before this, which is a lot of reading for something a reader clicked to skim. */ .wr-prod-steps{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 24px} .wr-prod-step{ padding:18px 18px 20px;border:2px solid var(--wr-line);border-radius:12px; background:rgba(20,20,20,.035)} .wr-prod-step__h{ margin:0 0 12px;padding-bottom:10px; border-bottom:2px solid var(--wr-prod-accent,var(--wr-ink)); font-family:"Outfit",sans-serif;font-size:15px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--wr-ink)} .wr-prod-step__l{list-style:none;margin:0;padding:0} .wr-prod-step__l li{ position:relative;padding:0 0 0 18px;margin:0 0 9px; font-family:"Outfit",sans-serif;font-size:14.5px;font-weight:500; line-height:1.4;letter-spacing:-.01em;color:var(--wr-body)} .wr-prod-step__l li:last-child{margin-bottom:0} .wr-prod-step__l li::before{ content:"";position:absolute;left:0;top:.5em;width:7px;height:7px; background:var(--wr-prod-accent,var(--wr-ink))} /* the accent comes from the card the block was authored in, which does not travel with the node; the dialog sets it per product instead */ .wr-prod-modal__body .wr-prod-detail[data-detail="hm"]{--wr-prod-accent:var(--hm-deep)} .wr-prod-modal__body .wr-prod-detail[data-detail="rbc"]{--wr-prod-accent:#0A6C9B} .wr-prod-modal__body .wr-prod-detail[data-detail="rb"]{--wr-prod-accent:var(--rb-deep)} .wr-prod-modal__body .wr-prod-plate{margin:0 0 14px} .wr-prod-modal__body .wr-prod-plate:last-child{margin-bottom:0} /* The page behind is scroll-locked on the ROOT. Locking it by taking the body out of flow (position:fixed + a negative top) holds the final offset but repaints at zero for a frame on the way out, which reads as a jump to the top and back; overflow never moves the page at all. The scrollbar width is reserved in JS so the reflow does not shift the content sideways. */ html.wr-prod-modal-lock{overflow:hidden} @media(max-width:767px){ .wr-prod-modal{padding:20px 12px} .wr-prod-modal__head{padding:18px 18px 14px} .wr-prod-modal__t{font-size:20px} .wr-prod-modal__body{padding:18px 18px 22px} .wr-prod-steps{grid-template-columns:1fr;gap:12px} .wr-prod .wr-prod-lede,.wr-prod-modal .wr-prod-lede{font-size:17px;margin-bottom:18px} } @media(max-width:1024px) and (min-width:768px){ .wr-prod-steps{grid-template-columns:1fr 1fr} } @media(prefers-reduced-motion:reduce){ .wr-prod-modal,.wr-prod-modal__panel{transition:none} .wr-prod-modal__panel{transform:none} } /* Renobot's button. Written at (0,4,0) to clear the theme kit's `.elementor-kit-8 .elementor-button.elementor-button`, the same as every other .wr-btn colour in wereno-products.css. */ body.elementor-kit-8 .wr-btn--rbc{background:#35C4F0} body.elementor-kit-8 .wr-btn--rbc:hover, body.elementor-kit-8 .wr-btn--rbc:focus{background:#0A6C9B;color:var(--wr-cream)} /* ------------------------------------------------------- 8 — three-up fit -- */ /* Between 768 and 1700 a 3-up card is 370.7px, narrower than the single-column mobile card. Every narrow-column type override in this file was written under max-width:767px, so without this block that range gets mobile-width columns at desktop type sizes -- the role h3 wraps to three lines and the chat bubbles run to 319px. Above 1700 the container widens to 1630 and a card is 522px -- still NARROWER than the 572px two-up card this type was originally sized for -- so the same reductions apply all the way up rather than snapping back to full size and pushing Renobot's role onto a third line. */ @media(min-width:768px){ .wr-prod .wr-prod-role{font-size:26px;line-height:1.15} .wr-prod-list li{font-size:16px;padding:12px 0} .wr-prod .wr-prod-card .wr-prod-ev{font-size:15px} .wr-prod .wr-prod-card .wr-prod-def{font-size:16px;line-height:1.65} .wr-prod .wr-prod-card .wr-prod-cap{font-size:15px} /* Reserved boxes, not measured ones. The cards are levelled by content today -- three roles of two lines, three lists of three single lines, three evidence lines of two -- but that is a property of the current copy at the current width, and it has already come apart twice: once when one list item wrapped, once when the container widened and Capital's evidence line dropped to one line while its neighbours kept two. Reserving the line count makes the levelling survive an edit. box-sizing is border-box here, so the padding and rule above each block are inside the number. */ .wr-prod .wr-prod-role{min-height:calc(2.3em + 52px)} .wr-prod .wr-prod-card .wr-prod-ev{min-height:calc(3em + 14px)} } /* The three-up card is at its NARROWEST between 1025 and 1700: the container is still 1176 and three columns make each card 359-371px, narrower than either the two-up tablet card or the single-column phone card. The band is a flex row of mark and status pill, so an oversized mark does not wrap, it pushes the pill out through .wr-card's overflow:hidden and the pill simply disappears. At 371px the band has 311px of usable width and the pill needs 103 of it. */ @media(min-width:1151px) and (max-width:1700px){ .wr-prod .wr-prod-band .wr-mark{height:54px} .wr-prod .wr-prod-band .wr-prod-lock__i{height:54px} .wr-prod .wr-prod-band .wr-capmark{--h:46px} } /* Two up below 1151, not below 1025. The container is width:95% under the 1176 cap, so at a 1025 viewport three columns are 303px each -- narrower than the 359px the band was tuned for, and the status pill is pushed out of the card again. 1151 is the width at which a third column still clears 340px. */ @media(max-width:1150px){.wr-prod-grid{grid-template-columns:1fr 1fr}} @media(max-width:767px){.wr-prod-grid{grid-template-columns:1fr}}