inside the blockquote and a where the figcaption would be. The curly quotes move to the paragraph, because on the blockquote they land on their own line. */ .quote-grid > .wp-block-group { margin: 0; } .quote .wp-block-quote { margin: 0 0 1.1rem; padding: 0; border: 0; } .quote .wp-block-quote::before, .quote .wp-block-quote::after { content: none; } .quote .wp-block-quote p { margin: 0; font-family: var(--font-display); font-size: 1.16rem; line-height: 1.5; color: var(--ink); } .quote .wp-block-quote p::before { content: "\201C"; } .quote .wp-block-quote p::after { content: "\201D"; } .quote .wp-block-quote cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: .875rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); } /* --- department directory ------------------------------------------------ */ /* A plain roster inside the definition-grid card: names at body size, the extension set in tabular figures so the column of numbers lines up. */ .mrs-dept-list { list-style: none; margin: .9rem 0 0; padding: 0; } .mrs-dept-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--line-soft); font-size: 1rem; } .mrs-dept-list li:first-child { border-top: 0; } .mrs-dept-list a { font-variant-numeric: tabular-nums; font-size: .9rem; letter-spacing: .04em; color: var(--navy); text-decoration: none; flex: none; } .mrs-dept-list a:hover { text-decoration: underline; } /* --- Publuu flipbook ------------------------------------------------------ */ /* The guide reader. A fixed aspect box rather than a fixed height, so the spread keeps its proportions from a phone up to a wide desktop. */ .mrs-flipbook { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 22rem; border: 1px solid var(--line-soft); background: var(--stone); } .mrs-flipbook iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (min-width: 48rem) { .mrs-flipbook { aspect-ratio: 16 / 10; } } /* --- bakery partner photography ------------------------------------------ */ /* The product shots at the top of a supplier archive. Fixed-ratio frames with object-fit, because the source images came off the old site at a range of proportions and a ragged strip reads worse than a cropped one. */ .mrs-partner-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } @media (min-width: 40rem) { .mrs-partner-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 62rem) { .mrs-partner-shots { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; } } .mrs-partner-shots__item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border: 1px solid var(--line-soft); } .mrs-partner-shots__item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- section split -------------------------------------------------------- */ /* The design's section shape: eyebrow and heading in a left column, copy in a right column, the pair spanning the full 1320px wrap. See .split and .wrap in mrs.css and the "Smart Purchasing" section of /design/industry-healthcare.html. Core Columns already gives two equal columns above 782px and stacks below, so this only has to correct the details core cannot know about. */ .mrs-split { align-items: start; } /* The heading column stops growing before the body column does: a display-l heading set across 640px reads as a banner rather than a heading. */ .mrs-split > .wp-block-column:first-child > * { max-width: 34rem; } /* Paragraph rhythm inside the body column follows .body-copy, which is tighter than the full-width paragraph spacing used elsewhere. */ .mrs-split > .wp-block-column:last-child > p { margin-block: 0 1.15rem; } .mrs-split > .wp-block-column:last-child > p:last-child { margin-bottom: 0; } /* The heading carries its own bottom margin when it is alone in a column, and at the top of a column it should not add space above itself. */ .mrs-split .wp-block-column > :first-child { margin-block-start: 0; } /* Below the breakpoint the two columns stack, and the heading needs air under it again. */ @media (max-width: 781px) { .mrs-split > .wp-block-column:first-child { margin-bottom: .5rem; } .mrs-split > .wp-block-column:first-child > * { max-width: none; } } /* --- preset colours on a dark panel --------------------------------------- */ /* WordPress emits its preset colour classes with !important, so a paragraph carrying has-ink-mid-color keeps its dark grey even inside a navy panel, where it is close to invisible. The design's own answer is .panel-navy .defgrid__desc { color: rgba(255,255,255,.75) }; this generalises that to every preset ink colour so no future placement can reintroduce it. */ .is-style-mrs-panel-navy .has-ink-mid-color, .is-style-mrs-panel-navy .has-ink-soft-color, .is-style-mrs-panel-navy .has-ink-color { color: rgba(255, 255, 255, .78) !important; } /* --- full-bleed photo band ------------------------------------------------ */ /* A visual pause between text sections. Fixed ratio so the band's height does not depend on which photograph lands in it, and shallower on a phone where a 21:9 crop of a pastry case is a sliver. */ .mrs-photo-band { margin: 0; } .mrs-photo-band img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } @media (min-width: 62rem) { .mrs-photo-band img { aspect-ratio: 21 / 8; } } /* --- section head --------------------------------------------------------- */ /* Sits inside the 1320px wrap, so it is flush left with the cards or grid it introduces. That alignment is the point: the text used to be centred in an 820px column and so sat indented from everything below it. The design caps .section-head at 46rem. That cap is deliberately not applied here, because the operator asked for full-width text sections and 46rem is narrower still than the 820px they were objecting to. Where line length genuinely matters, the two-column .mrs-split does the work instead. */ .mrs-section-head { margin-inline: 0; } .mrs-section-head > :first-child { margin-block-start: 0; } .mrs-section-head > :last-child { margin-block-end: 0; } /* Nothing to correct for loose blocks: with the global content size at the wrap, core centres them at exactly the width everything else uses. Forcing margin-inline:0 here pulled them to the padding edge, 40px left of the text they sit under. */ /* --- footer columns ------------------------------------------------------- */ /* Five columns now the Industries list is in: the intro plus four link lists. Core stacks Columns below 782px and leaves everything between that and the desktop width to fend for itself, where five columns of links get too narrow to read. Two-up in the middle range, one-up on a phone. */ @media (min-width: 782px) and (max-width: 74rem) { .mrs-footer > .wp-block-columns { flex-wrap: wrap !important; } .mrs-footer > .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 1.25rem) !important; flex-grow: 0; } .mrs-footer > .wp-block-columns > .wp-block-column:first-child { flex-basis: 100% !important; } } /* --- the hidden attribute ------------------------------------------------- */ /* A class that sets `display` outranks the browser's own `[hidden]{display:none}`, so any element given a display value ignores el.hidden entirely. That is how the catalog's pagination and its exhausted load-more button both stayed visible at the bottom of an infinite scroll while reporting hidden === true. One rule, so it cannot come back somewhere else. */ [hidden] { display: none !important; } /* --- catalog infinite scroll ---------------------------------------------- */ /* The button is the control; the sentinel above it is what the observer watches. Both sit under the grid, and the numbered pagination is hidden rather than removed so it comes back if a fetch fails. */ .mrs-catalog__sentinel { height: 1px; margin-top: -1px; } .mrs-catalog__more { display: block; margin: 2rem auto 0; font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: transparent; border: 1px solid var(--navy); border-radius: 2px; padding: .95rem 1.7rem; cursor: pointer; transition: background .18s ease, color .18s ease; } .mrs-catalog__more:hover:not(:disabled) { background: var(--navy); color: #fff; } .mrs-catalog__more:disabled { opacity: .6; cursor: default; } /* Visible to a screen reader, and visible on screen only when it has something to say, so a normal load does not leave an empty line under the grid. */ .mrs-catalog__status { margin: 1rem 0 0; text-align: center; font-size: .9rem; color: var(--ink-soft); } .mrs-catalog__status:empty { display: none; } /* Three across when the cards are a teaser rather than the catalog itself: there is no filter rail beside them, so the row has the width for it. */ @media (min-width: 62rem) { .mrs-catalog--teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- contact details in the hero ------------------------------------------ */ /* Stacked under the lead in the hero's own column, so the phone number is beside the headline rather than in a strip further down the page. */ .mrs-contact-details { margin-top: 2rem; display: grid; gap: 1.25rem 2rem; /* Two across: Call us beside Email us, Where we deliver beside Find us. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 32rem) { .mrs-contact-details { grid-template-columns: 1fr; } } .mrs-contact-details__item { margin-block-start: 0; padding-top: .9rem; border-top: 1px solid var(--line-soft); } .mrs-contact-details__value { margin: .35rem 0 0; font-size: 1.05rem; } .mrs-contact-details__note { margin: .15rem 0 0; font-size: .9rem; } /* --- stacked bios --------------------------------------------------------- */ /* The next-generation bios are paragraphs of prose, not definitions. In three narrow columns every one broke into a ragged stack. */ .mrs-bios { display: grid; gap: var(--band-tight); } .mrs-bio { border-top: 2px solid var(--navy); padding-top: 1.1rem; } .mrs-bio p { color: var(--ink-mid); } /* The button that reveals the filter rail on a phone. Hidden by JavaScript above the breakpoint, and never inserted at all without JavaScript, so the rail stays plainly visible when the script does not run. */ .mrs-filter-toggle { display: block; width: 100%; margin-bottom: 1.25rem; padding: .85rem 1.1rem; font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--navy); background: transparent; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; } .mrs-filter-toggle::after { content: "+"; float: right; font-size: 1.1rem; line-height: 1; } .mrs-filter-toggle[aria-expanded="true"]::after { content: "\2212"; } .mrs-filter-toggle:hover, .mrs-filter-toggle:focus-visible { border-color: var(--navy); background: var(--paper-2, transparent); } /* A facet with nothing left under the other filters. Kept in place so the list does not reshuffle while you filter, but not a link and not pretending to be one. */ .mrs-facet__link.is-empty { color: var(--ink-soft); cursor: default; opacity: .55; } .mrs-facet__link.is-empty:hover { color: var(--ink-soft); } /* --- guides index --------------------------------------------------------- */ /* One guide is a row, not a card: a 200px photograph with the copy beside it, both starting at the same left edge as the section head above. */ .mrs-guide-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.25rem, .9rem + 1.4vw, 2.25rem); align-items: start; border-top: 2px solid var(--navy); padding-top: 1.4rem; } .mrs-guide-row + .mrs-guide-row { margin-top: var(--band-tight); } .mrs-guide-row__media { margin: 0; } /* Portrait, because the thumbnail is a book cover rather than a photograph. A 4/3 crop cut the title off the top of it. */ .mrs-guide-row__media img { display: block; width: 200px; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 6px 18px rgba(27, 32, 88, .16); } .mrs-guide-row__body > :first-child { margin-block-start: 0; } .mrs-guide-row__body h2 a { color: inherit; text-decoration: none; } .mrs-guide-row__body h2 a:hover { color: var(--navy-lift); } @media (max-width: 40rem) { .mrs-guide-row { grid-template-columns: 1fr; } } /* --- resource centre hero ------------------------------------------------- */ /* The featured article uses the approved design's own res-lead classes, so mrs.css carries its typography and media crop. Only the block wrappers that sit between those classes and the markup mrs.css expects belong here. */ .res-lead__media { margin: 0; } .res-lead__body > :first-child { margin-block-start: 0; } .res-lead__body .wp-block-post-title { margin-block: .35rem 0; } .res-lead__body .wp-block-post-title a { color: inherit; text-decoration: none; } .res-lead__body .wp-block-post-title a:hover { color: var(--navy-lift); } .res-lead__body .wp-block-post-date { margin-block: 1rem 1.15rem; } /* --- guide landing page --------------------------------------------------- */ /* Copy on the left, the download form on the right, so the form is above the fold on the page whose whole job is handing over the guide. */ .mrs-guide-form { background: #fff; border: 1px solid var(--line-soft); border-top: 2px solid var(--navy); border-radius: 2px; padding: 1.75rem 1.6rem; align-self: start; } .mrs-guide-form > :first-child { margin-block-start: 0; } .mrs-guide-form .forminator-ui { max-width: none; } @media (min-width: 782px) { .mrs-guide-hero > .wp-block-column:first-child { flex-basis: 54% !important; } .mrs-guide-hero > .wp-block-column.mrs-guide-form { flex-basis: 46% !important; } } /* --- Resource Center rail -------------------------------------------------- */ /* The standfirst sits in a narrow column beside the articles, as /design/resources.html has it, rather than under a hero photograph. */ /* The Resource Center masthead: eyebrow, h1 and intro centred as one block. It names the page rather than heading a section. The measure is capped because a centred paragraph 1,240px wide is unreadable, and the eyebrow is a flex row carrying its own rule, so it needs centring in its own right. */ /* The class is doubled so the cap survives core's own constrained-layout max-width, which is what kept the heading running the full page width. */ .mrs-res-masthead.mrs-res-masthead { max-width: 850px; margin-inline: auto; text-align: center; } .mrs-res-masthead .eyebrow { justify-content: center; } .mrs-res-masthead > :first-child { margin-block-start: 0; } .mrs-res-masthead h1 { margin-block-end: 1.1rem; } .mrs-res-masthead p:last-child { margin-block-end: 0; } /* The featured article: photograph left, words right, across the full width. Stacked it pushed the article grid most of a screen down the page; in the old 19rem-rail layout it only had two thirds of the width, which is a strange amount of room for the thing the page leads with. */ .mrs-res-lead-row { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); align-items: start; } @media (min-width: 62rem) { .mrs-res-lead-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .mrs-res-lead-row .res-lead__body { padding-top: 0; } } /* Equal-height cards. The grid stretches its rows, so each card fills its cell and the body pushes the Read more control to the bottom: without this the controls sat at the end of each excerpt and stepped down the row. */ .mrs-cards.is-layout-grid { align-items: stretch; } .mrs-cards.is-layout-grid > .wp-block-group, .mrs-cards.is-layout-grid > .wp-block-post { height: 100%; } .mrs-cards .mrs-card { display: flex; flex-direction: column; height: 100%; } .mrs-cards .mrs-card__body { display: flex; flex-direction: column; flex: 1 1 auto; } .mrs-cards .mrs-card__action { margin-top: auto; padding-top: 1rem; } /* The Read more control on an article card, and on the featured article in the Resource Center hero. core/read-more is a link, not a button block, so it does not pick up the arrow button style by class; this gives it the same treatment the product cards use. */ .mrs-card .wp-block-read-more, .res-lead__body .wp-block-read-more { font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; } .mrs-card .wp-block-read-more::after, .res-lead__body .wp-block-read-more::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; transition: width .18s ease; } .mrs-card:hover .wp-block-read-more::after, .res-lead__body .wp-block-read-more:hover::after { width: 2.4rem; } /* --- breadcrumbs --------------------------------------------------------- */ /* Small, quiet, and above the first heading. It is navigation, not content, so it takes the utility scale rather than the body scale and never competes with the h1 under it. */ .mrs-crumbs { margin-block: 1.5rem 0; font-size: .8125rem; line-height: 1.5; } /* Core's constrained layout zeroes the top margin of a first child, and the trail is always a first child. Core's rule is a class plus :first-child and it is printed inline, after this stylesheet, so a tie goes to core: the element name on both sides is what settles it. */ main.wp-block-group > nav.mrs-crumbs, .mrs-crumbs-bar > nav.mrs-crumbs { margin-block-start: 1.5rem; } .mrs-crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; } .mrs-crumbs__item { display: flex; align-items: baseline; gap: .55rem; } /* The separator is drawn rather than written, so it is never read aloud and never copied when someone selects the trail. */ .mrs-crumbs__item + .mrs-crumbs__item::before { content: ""; width: .38rem; height: .38rem; border-right: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); flex: 0 0 auto; align-self: center; } /* The links and the current page must differ by something other than colour, or the trail fails "links rely on color to be distinguishable". Weight does it: the page you are on is the heavier, darker one, and the links are not underlined until hover, so the trail stays quiet. */ .mrs-crumbs a { color: var(--ink-soft); text-decoration: none; } .mrs-crumbs a:hover, .mrs-crumbs a:focus-visible { color: var(--amber-text); text-decoration: underline; } .mrs-crumbs__current { color: var(--ink); font-weight: 600; } /* A wrapper, not a band. It exists so the trail lines up with the page's own content width; the trail's own margin does the vertical spacing. It used to carry that padding, which meant the front page, where the block renders nothing because there is no trail above Home, still got an empty 24px strip above the hero. The inline padding is the alignment. A page's bands are alignfull, and core pulls an alignfull child out to the viewport edge and then re-applies the root padding inside it, so a section head ends up two doses in from the edge while this wrapper, sitting directly in main, had only one. They agreed above 1400px by coincidence, because the wide size minus two doses of padding is exactly the content size, and drifted apart below it. Matching the wide size and adding the second dose puts the trail in the same box as the heading under it at every width. Archive and single templates put the trail directly in main alongside content that is also directly in main, so they were never affected and are not touched here. */ .mrs-crumbs-bar { padding-block: 0; padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); max-width: var(--wp--style--global--wide-size); margin-inline: auto; } /* --- reading time -------------------------------------------------------- */ .mrs-readtime { margin: 0; color: var(--ink-soft); } /* A dot between the date and the reading time, drawn on the second item so a single item never trails a stray separator. */ .mrs-post-meta > * + *::before { content: "\00b7"; margin-right: .75rem; color: var(--line); } /* --- share --------------------------------------------------------------- */ .mrs-share { border-top: 1px solid var(--line-soft); padding-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.5rem; } .mrs-share__label { margin: 0; font-size: .75rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); } .mrs-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; } .mrs-share__link { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line); font-size: .85rem; color: var(--navy); text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .mrs-share__link:hover { background: var(--stone); border-color: var(--navy); } .mrs-share__link.is-copied { background: var(--navy); border-color: var(--navy); color: #fff; } /* --- related articles ---------------------------------------------------- */ .mrs-related > :first-child { margin-block-start: 0; } .mrs-related__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .mrs-related__item { display: flex; flex-direction: column; gap: .55rem; } .mrs-related__media { display: block; } .mrs-related__media img { width: 100%; /* height:auto lets aspect-ratio govern. Without it the img kept its 675px height attribute and object-fit cropped a 4:3 slot into a tall column. */ height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .mrs-related__title { margin: 0; font-size: 1.15rem; line-height: 1.25; } .mrs-related__title a { color: var(--navy); text-decoration: none; } .mrs-related__title a:hover { color: var(--amber); } .mrs-related__excerpt { margin: 0; color: var(--ink-mid); font-size: .9375rem; } /* --- Resource Center filters --------------------------------------------- */ .mrs-rfilter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-block: 1.75rem 2.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-soft); } .mrs-rfilter__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .mrs-rfilter__chip { display: inline-flex; align-items: baseline; gap: .4rem; padding: .3rem .75rem; border: 1px solid var(--line); font-size: .85rem; color: var(--navy); text-decoration: none; white-space: nowrap; } .mrs-rfilter__chip:hover { background: var(--stone); border-color: var(--navy); } .mrs-rfilter__chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .mrs-rfilter__chip.is-active:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; } .mrs-rfilter__count { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; } .mrs-rfilter__search { display: flex; gap: .5rem; flex: 1 1 15rem; max-width: 24rem; } .mrs-rfilter__search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: .45rem .7rem; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .9rem; color: var(--ink); } .mrs-rfilter__search input[type="search"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; } .mrs-rfilter__search button { padding: .45rem 1rem; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; } .mrs-rfilter__search button:hover { background: var(--navy-deep, var(--navy)); } @media (max-width: 40rem) { .mrs-rfilter { flex-direction: column; align-items: stretch; } /* flex: 1 1 15rem was horizontal growth on desktop. Once the filter stacks into a column that main axis is vertical, so the search grew to a 240px tall box. It is a normal-height field here. */ .mrs-rfilter__search { flex: none; max-width: none; } /* Related articles as compact rows: a small thumbnail beside the title, so three teasers do not become three full-width, 600px-tall photos. */ .mrs-related__list { grid-template-columns: 1fr; gap: 1.1rem; } .mrs-related__item { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: .9rem; row-gap: .2rem; align-items: start; } .mrs-related__media { grid-column: 1; grid-row: 1 / 4; align-self: start; } /* Fixed square, and align-self:start so the cell is not stretched to the row span. Without both, the img width:100% resolved against a stretched cell and the photo came out 88px wide but ~675px tall. */ .mrs-related__media img { width: 5.5rem; height: 5.5rem; aspect-ratio: auto; } .mrs-related__item > :not(.mrs-related__media) { grid-column: 2; } .mrs-related__title { font-size: 1.05rem; } .mrs-related__excerpt { display: none; } } /* ========================================================================== Tablet: the stacked range (641px - 991px) -------------------------------------------------------------------------- Between the phone (<=640px) and the width where two-column bands return (62rem), a component that is right at both ends can be wrong in the middle: a five-across stat strip, a four-up card row, a two-column tick list all turn cramped on a tablet. These are the arrangements the client asked for at this width. Nothing here touches phone or desktop. */ @media (min-width: 40.0625rem) and (max-width: 61.99rem) { /* Delivery stats: three across, two down. Only strips of five or more, so a four-figure strip is left to sit on one row. */ .manifest:has(> .manifest__item:nth-child(5)) { grid-template-columns: repeat(3, 1fr); } .manifest:has(> .manifest__item:nth-child(5)) .manifest__item { border-left: 1px solid var(--line-soft); border-top: 0; } .manifest:has(> .manifest__item:nth-child(5)) .manifest__item:nth-child(3n+1) { border-left: 0; } .manifest:has(> .manifest__item:nth-child(5)) .manifest__item:nth-child(n+4) { border-top: 1px solid var(--line-soft); } .manifest--invert:has(> .manifest__item:nth-child(5)) .manifest__item { border-color: rgba(255,255,255,.14); } /* The Products "Seven Ways In" cards: half width, two across, rather than a four-up row squeezed onto a tablet. */ .wp-block-columns.mrs-cards--4 { flex-wrap: wrap !important; } .wp-block-columns.mrs-cards--4 > .wp-block-column { flex: 0 0 calc((100% - var(--wp--preset--spacing--40)) / 2) !important; } /* The definition grids (how we help, supporting every daypart): three across. Five items become three then two. */ .wp-block-columns.mrs-defgrid { flex-wrap: wrap !important; } .wp-block-columns.mrs-defgrid > .wp-block-column { flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--50)) / 3) !important; } /* Two-column tick lists (featured product solutions, why choose us) to one column: a ten-item list in two tablet columns is a wall of half-lines. */ ul.is-style-mrs-ticks-2c { columns: 1 !important; } } /* --- contrast ------------------------------------------------------------ */ /* The amber at #B5761E reaches 3.64:1 on paper and 3.19:1 on stone. As a rule, a border or a background that is fine; as 14px uppercase label text it is below the 4.5:1 that WCAG AA asks for, and it is the eyebrow above almost every section on the site. Darkened by a fifth for text only. --amber keeps its value, so every rule, separator and border in the approved design is untouched, and the two tones sit close enough that a rule beside its own label still reads as one colour. #936018 measures 5.17:1 on paper and 4.53:1 on stone. The ink-soft grey behind a testimonial's attribution is the same story at 4.01:1 on stone. */ :root { --amber-text: #936018; /* ink-soft is captions and meta, and nothing else: never a background, never a border. At #6E7192 it passes on paper at 4.57:1 and fails on stone at 4.01:1, and every testimonial attribution sits on stone. Darkened by a fourteenth, which clears both grounds and is not a visible change. */ --ink-soft: #666988; } /* Core emits its preset colour classes with !important, so the override says so too. This is the only place in the theme that needs it. */ .has-amber-color, .has-amber-color a { color: var(--amber-text) !important; } .eyebrow, .eyebrow a, .wp-block-post-terms, .wp-block-post-terms a, .wp-block-post-terms__prefix, .mrs-rfilter__chip:hover { color: var(--amber-text); } /* The eyebrow's own rule keeps the lighter amber: it is a 1px line, not text, and the two tones read as one colour beside each other. */ .eyebrow::before { background: var(--amber); } /* --- the top of the page ------------------------------------------------- */ /* The approved design puts 63px between the bottom of the header and the first eyebrow. The build had 128: WordPress's own block gap between the header template part and main (24), an empty breadcrumb wrapper (24), and then the first band carrying the full 80px band padding it would need if it were a band in the middle of a page rather than the first thing under a header. The band padding is written inline by the block, so overriding it has to say !important. The two zeroes above it do not. */ main.wp-block-group { margin-block-start: 0; } main > .entry-content > :first-child, main > .mrs-crumbs-bar + .entry-content > :first-child, main > .mrs-crumbs + * { padding-top: var(--mrs-first-pad, 4rem) !important; margin-block-start: 0; } /* With a trail above it the first band needs less room, because the trail has already broken the page away from the header. */ main:has(.mrs-crumbs) { --mrs-first-pad: 2.5rem; } /* ========================================================================== Mobile ========================================================================== Four adjustments for small screens. Each one is here rather than in the markup so the same blocks serve both, and none of them changes what is on the page at desktop width. */ @media (max-width: 40rem) { /* The stat cells run full width. At two across, a figure and its label had about 150px between the rules, and the longer labels broke over three lines while their neighbour sat on one. */ .manifest.manifest { grid-template-columns: 1fr; } .manifest .manifest__item { border-left: 0; border-top: 1px solid var(--line-soft); } .manifest .manifest__item:first-child { border-top: 0; } /* The two-column rule in the approved stylesheet clears the top border on the first two cells, which in one column leaves the second cell without the rule that separates it. */ .manifest .manifest__item:nth-child(2) { border-top: 1px solid var(--line-soft); } .manifest--invert .manifest__item:nth-child(2) { border-top-color: rgba(255,255,255,.14); } /* The closing line sits hard left under the columns above it rather than being laid out as a row that happens to wrap. */ /* Core prints the group's flex layout inline, after this stylesheet, so the element name is what carries this past it. */ div.mrs-footer-base { display: block; text-align: left; } .mrs-footer-base > * + * { margin-top: .75rem; } } /* ========================================================================== Mobile: one gutter, not two -------------------------------------------------------------------------- The approved design uses a single ~18px side gutter on phones, with every heading, paragraph, card and control on the same left edge. The build had two edges: content inside a band picked up the band's root padding AND a second dose from the desktop-only rules below, landing ~19px further in than the custom blocks and full-width breakouts beside it. That mismatch is what read as "not aligned with the text" on page after page. Below WP's own column-stacking width, the second dose is removed so content sits at main's single root-padding edge. Desktop keeps both doses, where they were pixel-matched to the design and must not change. */ /* The single gutter covers the whole stacked range, not just phones. Two-column bands return at 62rem, and below that the design uses one ~28px side gutter (its .wrap padding scales to about that at tablet width). The desktop rule that makes an alignwide block match the 1320px wrap is a SECOND dose there, because the alignwide is already inside a band that re-added the root padding. Above 62rem the second dose is correct and pixel-matched, so it stays. */ /* The single gutter belongs at every width below where the 1320px wide-size stops fitting (~1400px / 87.5rem), not only below 62rem. The design (mrs.css) makes --wrap and --wrap-wide the same 1320px with one shared clamp() padding, so every section, heading and body alike, sits at one gutter at all widths. The theme's root padding equals that clamp, so a content-size heading already lands on the design gutter. An alignwide block adds the clamp a SECOND time on top of the root padding: above 1400px it centres at 1320 and that padding pulls its inner content back to the reading width, matching the design; below 1400px it hits the viewport cap while still subtracting the padding, so its content sits one root-padding dose in from the heading beside it. Zeroing the padding across that whole range puts body and heading on the same gutter, which is what the design does there. */ @media (max-width: 87.5rem) { /* Track the content-size text exactly, don't just drop the padding. Between about 1360 and 1400px the content-size heading (1240) still fits with room and so WordPress centres it, while an edge-to-edge alignwide fills wider and ends up left of it. Capping the alignwide to the same content-size makes it centre on the identical box at every width in this range, and it rejoins the desktop rule cleanly at 1400 where 1320 minus the clamp padding is 1240. */ .is-layout-constrained > .alignwide { padding-inline: 0; max-width: var(--wp--style--global--content-size); } /* The breadcrumb bar carries the same second dose (it was built to match the two-dose headings), so across this range it gets the same treatment, or the trail sits ~36px right of the heading beneath it. */ .mrs-crumbs-bar { padding-inline: 0; max-width: var(--wp--style--global--content-size); } } /* Cards stack to one column on phones only; the tablet band above sets their own two- and three-up arrangements. */ @media (max-width: 47.99rem) { .wp-block-columns.mrs-cards--3 > .wp-block-column, .wp-block-columns.mrs-cards--4 > .wp-block-column { flex-basis: 100%; } .mrs-cards .wp-block-column { display: block; } } /* --- topbar: mobile and tablet ------------------------------------------- The header collapses to the hamburger at <=66rem. The topbar follows it: the serving line and "Become a Customer" (which repeats Contact Us) drop, and the two remaining items span the bar, phone left and Contact Us right. */ @media (max-width: 66rem) { .mrs-topbar__note { display: none; } .mrs-topbar__actions { flex: 1 1 100%; justify-content: space-between; column-gap: 1rem; } }