/* * McLane Hunger Solutions — 0.3.0, built to the 10.1.26 final mock. * * Plain CSS on top of the compiled Tailwind base (style-main.css). One * spacing scale, one button system, one radius set, so sections line up. */ :root { --m-green: #0b5d33; --m-green-2: #06673a; --m-orange: #f66d00; --m-orange-dk: #dc5f00; --m-red: #e94e1b; --m-lime: #7dc242; --m-mint: #eef5ec; --m-mint-2: #e4f0dd; --m-peach: #fdf0e4; --m-ink: #3f3f3f; --m-ink-2: #666; --m-charcoal: #2b2b2b; --m-script: 'Caveat', 'Segoe Print', cursive; --m-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif; --m-max: 1280px; --m-pad: 2rem; /* distance from the container's content edge to the window edge */ --m-bleed: max(var(--m-pad), calc((100vw - var(--m-max)) / 2 + var(--m-pad))); --m-ease: cubic-bezier(.2, .7, .3, 1); } @media (max-width: 1279px) { :root { --m-pad: 1.5rem; } } @media (max-width: 639px) { :root { --m-pad: 1.25rem; } } html { scroll-behavior: smooth; } body { font-family: var(--m-sans); color: var(--m-ink); overflow-x: hidden; } .container { max-width: var(--m-max); padding-left: var(--m-pad); padding-right: var(--m-pad); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .m-center { margin-top: 2.75rem; text-align: center; } .m-art { display: block; width: 100%; height: auto; } /* ================= Buttons ================= */ /* * One button. Brand orange (or brand green), a white "seed" holding the * arrow at the right end. On hover the seed grows and floods the button * with the other brand colour while the arrow slides through: orange * buttons fill green, green buttons fill orange. */ .m-btn { --btn-bg: var(--m-orange); --btn-fill: var(--m-green); --btn-ink: #fff; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 1rem; height: 3.5rem; padding: 0 .4rem 0 1.75rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; white-space: nowrap; font: 600 .875rem/1 var(--m-sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--btn-bg) 70%, transparent); transition: box-shadow .35s var(--m-ease), color .35s var(--m-ease); } .m-btn > span:first-child { position: relative; z-index: 2; } .m-btn .is-light { font-weight: 400; } .m-btn__dot { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #fff; color: var(--btn-bg); overflow: hidden; transition: color .35s var(--m-ease); } .m-btn::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: var(--btn-fill); clip-path: circle(1.3rem at calc(100% - 1.75rem) 50%); opacity: 0; transition: clip-path .5s var(--m-ease), opacity .2s linear .3s; } .m-btn__icon { width: 1rem; height: 1rem; } .m-btn:hover::before, .m-btn:focus-visible::before { clip-path: circle(150% at calc(100% - 1.75rem) 50%); opacity: 1; transition: clip-path .5s var(--m-ease), opacity 0s; } .m-btn:hover .m-btn__dot, .m-btn:focus-visible .m-btn__dot { color: var(--btn-fill); } .m-btn:hover .m-btn__icon, .m-btn:focus-visible .m-btn__icon { animation: m-arrow .5s var(--m-ease); } .m-btn:hover { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--btn-fill) 80%, transparent); } .m-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--btn-bg) 40%, transparent); outline-offset: 3px; } @keyframes m-arrow { 0% { transform: translateX(0); } 45% { transform: translateX(1.6rem); } 46% { transform: translateX(-1.6rem); } 100% { transform: translateX(0); } } .m-btn--green { --btn-bg: var(--m-green); --btn-fill: var(--m-orange); } .m-btn--sm { height: 2.75rem; padding-left: 1.25rem; gap: .75rem; font-size: .75rem; letter-spacing: .07em; } .m-btn--sm .m-btn__dot { width: 2.1rem; height: 2.1rem; } .m-btn--sm::before { clip-path: circle(1rem at calc(100% - 1.375rem) 50%); } .m-btn--sm:hover::before, .m-btn--sm:focus-visible::before { clip-path: circle(150% at calc(100% - 1.375rem) 50%); } .m-btn--sm { padding-right: .325rem; } .m-btn--sm .m-btn__icon { width: .8rem; height: .8rem; } @media (max-width: 479px) { .m-btn { height: auto; min-height: 3.5rem; white-space: normal; line-height: 1.3; padding-top: .4rem; padding-bottom: .4rem; } } /* ================= Section heads ================= */ .m-head { text-align: center; margin: 0 auto 3rem; max-width: 56rem; } .m-eyebrow { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--m-orange); } .m-rule { display: block; width: 2.5rem; height: 3px; margin: 0 auto 1.1rem; border-radius: 3px; background: var(--m-orange); } .m-rule--left { margin-left: 0; } .m-h2 { margin: 0 0 .65rem; font-size: clamp(2rem, 3.4vw, 2.875rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; color: var(--m-green); } .m-h2 .is-accent { color: var(--m-orange); } .m-sub { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--m-ink-2); } /* ================= Announcement bar ================= */ .m-notice { background: var(--m-charcoal); color: #fff; transition: margin .3s var(--m-ease); } .m-notice p { margin: 0 auto; padding: .7rem var(--m-pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .7rem; font-size: .9375rem; font-style: italic; font-weight: 600; text-align: center; line-height: 1.3; } .m-notice a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; } .m-notice a:hover { color: #ffc999; } /* ================= Header ================= */ /* Fixed, with a spacer of the header's full height in the flow. Shrinking the header on scroll then never moves the page, which is what made the old sticky version jump. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: #fff; transition: box-shadow .25s; } :root { --m-nav-h: 7.5rem; --m-notice-h: 2.75rem; } .m-header-spacer { height: calc(var(--m-notice-h) + var(--m-nav-h)); } @media (max-width: 899px) { :root { --m-nav-h: 5rem; } } .site-header.is-compact { box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .m-nav { position: relative; background: #fff; } .m-nav__bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--m-nav-h); transition: height .25s var(--m-ease); } .is-compact .m-nav__bar { height: 5rem; } .m-nav__brand { display: block; line-height: 0; } /* The stacked lockup is ~1.08:1. At 92px tall the wordmark reads at the mock's size. */ .m-logo--stacked { display: block; height: 5.75rem; width: auto; aspect-ratio: 400 / 369; transition: height .25s var(--m-ease); } .is-compact .m-logo--stacked { height: 3.75rem; } .m-nav__menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .m-nav__menu ul { display: flex; gap: 2.75rem; margin: 0; padding: 0; list-style: none; } .m-nav__menu a, .m-nav__drawer a { position: relative; display: inline-flex; align-items: center; gap: .5rem; color: #333; text-decoration: none; font-size: 1.0625rem; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; padding: .5rem 0; transition: color .2s; } .m-carrot { width: 1.75rem; height: 1.75rem; flex: none; margin: -.2rem -.15rem -.2rem -.35rem; } .m-nav__menu a::after { content: ""; position: absolute; left: 1.85rem; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--m-orange); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--m-ease); } .m-nav__menu a:hover { color: var(--m-green); } .m-nav__menu a:hover::after, .m-nav__menu a[aria-current="page"]::after { transform: scaleX(1); } .m-nav__menu a[aria-current="page"] { color: var(--m-green); } .m-nav__toggle { display: none; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgba(11, 93, 51, .2); border-radius: .75rem; color: var(--m-green); background: #fff; } .m-nav__toggle svg { width: 1.25rem; height: 1.25rem; } .m-nav__drawer { border-top: 1px solid rgba(11, 93, 51, .1); } .m-nav__drawer ul { list-style: none; margin: 0 auto; padding-top: .25rem; padding-bottom: .5rem; } .m-nav__drawer li + li { border-top: 1px solid rgba(11, 93, 51, .08); } .m-nav__drawer a { width: 100%; padding: 1rem 0; } @media (max-width: 899px) { .m-nav__menu { display: none; } .m-nav__toggle { display: grid; } .m-nav__bar, .is-compact .m-nav__bar { height: 5rem; } .m-logo--stacked, .is-compact .m-logo--stacked { height: 3.75rem; } .m-notice p { font-size: .8125rem; } } @media (min-width: 900px) { .m-nav__drawer { display: none !important; } } /* ================= Get in Touch tab (McLane Global's shape) ================= */ .m-tab { position: fixed; right: 0; top: 30%; z-index: 70; transform: rotate(-90deg) translate(50%, 0); transform-origin: 100% 100%; padding: .9rem 1.75rem 1rem; border: 0; border-radius: 24px 24px 0 0; cursor: pointer; background: var(--m-orange); color: #fff; white-space: nowrap; font: 600 1.0625rem/1 var(--m-sans); letter-spacing: .01em; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); transition: background-color .2s var(--m-ease); } .m-tab:hover { background: var(--m-green); } .m-tab:focus-visible { outline: 3px solid var(--m-green); outline-offset: 2px; } .m-tab[aria-expanded="true"] { background: var(--m-green); } @media (max-width: 639px) { .m-tab { top: auto; bottom: 6rem; padding: .75rem 1.25rem .85rem; font-size: .9375rem; } } /* ================= Get in Touch panel ================= */ .m-contact { position: fixed; inset: 0; z-index: 80; } .m-contact[hidden] { display: none; } .m-contact__scrim { position: absolute; inset: 0; background: rgba(15, 28, 20, .32); opacity: 0; transition: opacity .2s; } .m-contact__card { position: absolute; right: 4.5rem; top: 50%; width: min(34rem, calc(100vw - 6rem)); max-height: calc(100vh - 2rem); overflow: auto; transform: translate(12px, -50%); opacity: 0; transition: opacity .2s var(--m-ease), transform .25s var(--m-ease); background: #fff; border-radius: 22px; padding: 2rem 1.9rem 1.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .22); outline: none; } .m-contact.is-open .m-contact__scrim { opacity: 1; } .m-contact.is-open .m-contact__card { opacity: 1; transform: translate(0, -50%); } .m-contact__x { position: absolute; right: 1rem; top: 1rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--m-mint); color: var(--m-green); cursor: pointer; transition: background-color .2s; } .m-contact__x:hover { background: var(--m-mint-2); } .m-contact__x svg { width: 1rem; height: 1rem; } .m-contact__title { margin: 0 0 .3rem; font-size: 1.875rem; line-height: 1.15; font-weight: 700; color: var(--m-green); } .m-contact__lede { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.5; color: var(--m-ink-2); padding-right: 2.5rem; } .m-form { display: grid; gap: .75rem; } .m-form[hidden] { display: none; } .m-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .m-field { display: block; } .m-field input, .m-field select, .m-field textarea { width: 100%; height: 3rem; border: 1.5px solid #d9dfd9; border-radius: 10px; background-color: #fff; padding: 0 1rem; font: 400 .9375rem/1.3 var(--m-sans); color: #222; box-shadow: none; transition: border-color .15s, box-shadow .15s; } .m-field select { padding-right: 2.5rem; color: #6f6f6f; background-position: right .8rem center; } .m-field select:has(option:checked:not([value=""])) { color: #222; } .m-field textarea { height: auto; min-height: 5.5rem; padding: .8rem 1rem; resize: vertical; } .m-field input::placeholder, .m-field textarea::placeholder { color: #6f6f6f; } .m-field input:focus, .m-field select:focus, .m-field textarea:focus { border-color: var(--m-green); box-shadow: 0 0 0 3px rgba(11, 93, 51, .12); outline: none; } .m-field .is-invalid { border-color: #c62828; } .m-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .m-form__error { margin: 0; padding: .65rem .9rem; border-radius: 8px; background: #fdecea; color: #a12020; font-size: .875rem; } .m-form__error[hidden] { display: none; } .m-form__submit { margin-top: .4rem; width: 100%; justify-content: space-between; border: 0; cursor: pointer; } .m-form__submit:disabled { opacity: .75; cursor: progress; } .m-contact__alt { margin: 1.1rem 0 0; text-align: center; font-size: .875rem; color: var(--m-ink-2); display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .6rem; } .m-contact__alt a { color: var(--m-green); text-decoration: none; font-weight: 600; } .m-contact__alt a:hover { text-decoration: underline; } .m-contact__done { text-align: center; padding: 1.75rem .5rem 1rem; } .m-contact__done[hidden] { display: none; } .m-contact__done p { margin: .9rem 0 0; font-size: 1rem; color: var(--m-ink); } .m-contact__tick { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--m-mint); color: var(--m-green); } .m-contact__tick svg { width: 1.75rem; height: 1.75rem; } .m-contact-open body { overflow: hidden; } @media (max-width: 639px) { .m-contact__card { right: 0; left: 0; top: auto; bottom: 0; width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; transform: translateY(24px); padding: 1.6rem 1.25rem 1.25rem; } .m-contact.is-open .m-contact__card { transform: none; } .m-form__row { grid-template-columns: 1fr; } } /* ================= Heroes ================= */ .m-hero { position: relative; isolation: isolate; overflow: hidden; background: #fff; } .m-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 8rem; min-height: 36rem; } .m-hero__copy { position: relative; z-index: 6; align-self: center; padding: 3.5rem 0 8.5rem; } .m-hero__title { margin: 0 0 1.5rem; font-size: clamp(2.75rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; color: var(--m-green); } .m-hero__title span { display: block; } .m-hero__title .is-accent { color: var(--m-orange); } .m-hero__intro { margin: 0 0 1.25rem; max-width: 33rem; font-size: 1rem; line-height: 1.65; color: var(--m-ink); } .m-hero__intro:last-of-type { margin-bottom: 2rem; } .m-hero__visual { position: relative; } .m-hero__photo { position: absolute; z-index: 1; top: 0; bottom: 0; left: -2.5rem; right: calc(-1 * var(--m-bleed)); } .m-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: left 35%; } /* Home photo: image and its vector arc share one box at the photo's own ratio, anchored bottom-left, so the arc always sits exactly on the photo's edge. */ .m-hero__photo:has(.m-hero__frame) { container-type: size; overflow: hidden; left: -3rem; } .m-hero__frame { position: absolute; left: 0; bottom: 0; width: max(100cqw, 120.1cqh); aspect-ratio: 358 / 298; } .m-hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } .m-hero__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .m-hero__badge { position: absolute; z-index: 5; left: -1.25rem; top: 44%; transform: translate(-50%, -50%); width: 12.5rem; height: 12.5rem; border-radius: 50%; background: #eef5ec; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 16px 40px rgba(11, 93, 51, .16), 0 0 0 6px rgba(255, 255, 255, .85); animation: m-bob 6s ease-in-out infinite; } @keyframes m-bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } } .m-hero__badge p { margin: 0 0 .35rem; font-family: var(--m-script); font-weight: 700; font-size: 1.625rem; line-height: 1.02; color: var(--m-green); transform: rotate(-5deg); } .m-hero__heart { width: 1.75rem; height: 1.75rem; color: var(--m-orange); } .m-hero__sparks { position: absolute; left: -1.1rem; top: -.6rem; width: 3.5rem; height: 3.5rem; color: var(--m-orange); } .m-hero__parade { position: absolute; z-index: 4; bottom: 1.5rem; right: calc(-1 * var(--m-bleed) + 2.5%); width: min(92%, 40rem); height: auto; } /* One shape: a soft mint hill on the left, the green slope rising right, and a thin lip in the next section's colour so the hero flows into it. */ .m-hero__ground { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; width: 100%; height: 12rem; pointer-events: none; } /* Feeding Solutions hero */ .m-hero--fs .m-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 3rem; min-height: 33rem; } .m-hero--fs .m-hero__copy { padding: 3rem 0 7.5rem; } .m-hero--fs .m-hero__title { font-size: clamp(2.5rem, 3.9vw, 3.75rem); } .m-hero--fs .m-hero__intro { max-width: 38rem; margin-bottom: 1rem; } .m-hero__photo--oval { left: 0; top: 0; } .m-hero__photo--oval img { clip-path: ellipse(64% 82% at 69% 56%); object-position: 30% center; } .m-hero__note { display: flex; align-items: center; gap: .75rem; max-width: 26rem; margin: 1.5rem 0 0; padding: .75rem 1rem .75rem .75rem; border-radius: 14px; background: var(--m-mint); font-size: .8125rem; line-height: 1.45; color: var(--m-ink); } .m-hero__note b { color: var(--m-green); font-weight: 600; } .m-hero__seal { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--m-green); } .m-hero__seal svg path:first-child { fill: currentColor; } .m-hero__seal svg { width: 100%; height: 100%; } .m-hero__cast { position: absolute; z-index: 4; left: 0; right: calc(-1 * var(--m-bleed)); bottom: 0; height: 15rem; pointer-events: none; } .m-hero__char { position: absolute; bottom: 0; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .12)); animation: m-hop 4s ease-in-out infinite; } @keyframes m-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } } .m-hero__char--pineapple { left: 6%; width: 21%; bottom: 1.4rem; } .m-hero__char--strawberry { left: 27%; width: 13%; bottom: 2.1rem; animation-delay: -.8s; } .m-hero__char--orange { left: 41%; width: 15%; bottom: 3.1rem; animation-delay: -1.6s; } .m-hero__char--blueberries { left: 58%; width: 13%; bottom: 4.4rem; animation-delay: -2.4s; } .m-hero__char--carrot { left: 73.5%; width: 9%; bottom: 5.5rem; animation-delay: -3.2s; } @media (max-width: 1199px) { .m-hero__grid { column-gap: 3rem; } .m-hero__badge { display: none; } .m-hero__photo { left: 0; } } @media (max-width: 1023px) { .m-hero__grid, .m-hero--fs .m-hero__grid { display: block; min-height: 0; } .m-hero__copy { padding: 2.75rem 0 2rem; } .m-hero__visual { height: 22rem; margin: 0 calc(-1 * var(--m-pad)); } .m-hero__photo, .m-hero__photo--oval { inset: 0; } .m-hero__photo img { object-position: center 35%; } .m-hero__photo--oval img { clip-path: none; } .m-hero__photo--oval .m-hero__arc { display: none; } .m-hero__parade { right: 4%; width: 70%; bottom: .75rem; } .m-hero__cast { right: 0; height: 11rem; } .m-hero__char--strawberry, .m-hero__char--orange, .m-hero__char--blueberries, .m-hero__char--carrot { bottom: 1.5rem; } .m-hero__ground { height: 5rem; } } @media (max-width: 639px) { .m-hero__visual { height: 16rem; } .m-hero__parade { width: 92%; } } /* ================= Who We Serve ================= */ .m-serve { position: relative; padding: 4.5rem 0 5rem; background: linear-gradient(180deg, #f2f8f0 0%, #e9f2e5 100%); overflow: hidden; } .m-serve { padding-bottom: 8rem !important; } .m-serve__edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 7.5rem; z-index: 0; pointer-events: none; } .m-serve .container { position: relative; z-index: 1; } .m-serve .m-head { max-width: 64rem; margin-bottom: 3rem; } .m-serve__kicker { margin: 0 0 .9rem; font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.3; color: var(--m-green); } .m-serve__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; } .m-serve__card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 15rem; padding: 1.75rem .9rem 1.25rem; border-radius: 18px; text-align: center; cursor: pointer; font: inherit; color: inherit; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); transition: background-color .3s var(--m-ease), box-shadow .3s var(--m-ease), transform .3s var(--m-ease); } .m-serve__card::after { content: ""; position: absolute; left: 50%; bottom: -.6rem; width: 1.2rem; height: 1.2rem; background: #fff; transform: translateX(-50%) rotate(45deg) scale(0); border-radius: 3px; transition: transform .3s var(--m-ease); } .m-serve__card:hover { background: rgba(255, 255, 255, .85); } .m-serve__card[aria-selected="true"] { background: #fff; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 93, 51, .12); } .m-serve__card[aria-selected="true"]::after { transform: translateX(-50%) rotate(45deg) scale(1); } .m-serve__card:focus-visible { outline: 3px solid rgba(246, 109, 0, .45); outline-offset: 3px; } .m-disc { position: relative; flex: none; display: grid; place-items: center; width: 6.75rem; height: 6.75rem; border-radius: 50%; transition: transform .4s var(--m-ease); } .m-serve__card.is-peach .m-disc { background: var(--m-peach); } .m-serve__card.is-mint .m-disc { background: #e3efdf; } .m-disc__art { position: relative; z-index: 1; width: 64%; height: auto; } .m-disc__arc { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(var(--r, 0deg)); overflow: visible; transition: transform .6s var(--m-ease); } .m-disc__arc circle { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 26 74; transition: stroke-dasharray .6s var(--m-ease); } .m-serve__card.is-peach .m-disc__arc circle { stroke: var(--m-orange); } .m-serve__card.is-mint .m-disc__arc circle { stroke: var(--m-green); } .m-serve__card[aria-selected="true"] .m-disc__arc { transform: rotate(calc(var(--r, 0deg) + 120deg)); } .m-serve__card[aria-selected="true"] .m-disc__arc circle { stroke-dasharray: 60 40; } .m-serve__card[aria-selected="true"] .m-disc { transform: scale(1.04); } .m-serve__dash { display: block; flex: none; width: 1.5rem; height: 3px; border-radius: 3px; background: var(--m-orange); margin: 1.1rem 0 .8rem; transition: width .3s var(--m-ease); } .m-serve__card[aria-selected="true"] .m-serve__dash { width: 2.5rem; } .m-serve__label { font-size: .875rem; font-weight: 600; line-height: 1.38; color: #1c3a29; } .m-serve__note { margin-top: .25rem; font-size: .75rem; color: var(--m-ink-2); } .m-serve__panels { margin-top: 1.4rem; } .m-serve__panel { display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; padding: 1.4rem 1.75rem; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(11, 93, 51, .08); min-height: 5.5rem; } .m-serve__panel[hidden] { display: none; } .m-serve__panel.is-in { animation: m-panel .45s var(--m-ease); } @keyframes m-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .m-serve__for { margin: 0; flex: 0 0 auto; max-width: 16rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--m-green); } .m-serve__for span { display: block; margin-bottom: .2rem; font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--m-orange); } .m-serve__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; flex: 1; } .m-serve__chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem .55rem .7rem; border-radius: 999px; background: var(--m-mint); font-size: .8125rem; font-weight: 500; color: #1c3a29; animation: m-panel .45s var(--m-ease) both; } .m-serve__chips li:nth-child(2) { animation-delay: .05s; } .m-serve__chips li:nth-child(3) { animation-delay: .1s; } .m-serve__chips li:nth-child(4) { animation-delay: .15s; } .m-serve__chips li:nth-child(5) { animation-delay: .2s; } .m-serve__chips svg { width: 1rem; height: 1rem; color: var(--m-orange); flex: none; } @media (max-width: 1279px) { .m-serve__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-serve__card { min-height: 13.5rem; } } @media (max-width: 639px) { .m-serve { padding: 3.75rem 0; } .m-serve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .m-serve__card { min-height: 12.5rem; padding: 1.25rem .6rem 1rem; } .m-disc { width: 5.25rem; height: 5.25rem; } .m-serve__panel { padding: 1.2rem; } } /* ================= Journey ================= */ .m-journey { position: relative; overflow: hidden; padding: 4.5rem 0 6rem; background: linear-gradient(180deg, #fff 0%, #fbfdf9 55%, #f3f8ef 100%); } .m-journey .container { position: relative; z-index: 1; } .m-journey__cloud { position: absolute; right: 3%; top: 2.25rem; width: 10rem; animation: m-drift 18s ease-in-out infinite; } @keyframes m-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-40px); } } .m-journey__bush { position: absolute; bottom: 0; z-index: 0; pointer-events: none; } .m-journey__bush--l { left: -1rem; width: 14rem; } .m-journey__bush--r { right: -1rem; width: 17rem; } .m-journey__track { position: relative; } /* The road: a quiet track from the first node to the last, a green-to-orange fill that draws as you scroll, and a truck driving its leading edge. */ .m-journey__line { position: absolute; left: 10%; right: 10%; top: 11.625rem; height: 4px; margin-top: -2px; border-radius: 4px; background: #e2ebe0; z-index: 0; } .m-journey__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; transition: width 1s var(--m-ease); background: linear-gradient(90deg, var(--m-green) 0, #3f8f57 45%, #f0a050 70%, var(--m-orange) 100%); background-size: var(--m-line-w, 1000px) 100%; } .m-journey__dot { position: absolute; z-index: 5; top: 11.625rem; left: 10%; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border-radius: 50%; background: transparent; box-shadow: 0 0 0 3px var(--m-orange); transition: left 1s var(--m-ease); pointer-events: none; } .m-journey__dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--m-orange); animation: m-ping 2.6s ease-out infinite; } @keyframes m-ping { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.45); opacity: 0; } } .m-journey__step.is-here .m-journey__node { transform: scale(1.12); } .m-journey__step { cursor: default; } .m-journey__steps { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .m-journey__step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 .75rem; text-align: center; } .m-journey__art { display: grid; place-items: center; width: 9.5rem; height: 9.5rem; border-radius: 50%; background: #eef3ec; transform: scale(.88); filter: grayscale(.9); opacity: .55; transition: transform .6s var(--m-ease), filter .6s, opacity .6s, background-color .6s, box-shadow .3s; } .m-journey__art .m-art, .m-journey__art img { width: 74%; height: auto; transition: transform .4s var(--m-ease); } .m-journey__rail { position: relative; align-self: stretch; display: flex; justify-content: center; margin: 1rem 0 1.1rem; } .m-journey__node { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #cfdccc; color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: 0 0 0 5px #fff; transition: background-color .4s, transform .4s var(--m-ease); } .m-journey__step h3 { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; color: var(--m-green); opacity: .45; transition: opacity .5s; } .m-journey__step p { margin: 0; max-width: 14.5rem; font-size: .875rem; line-height: 1.55; color: var(--m-ink-2); opacity: .45; transform: translateY(6px); transition: opacity .5s, transform .5s var(--m-ease); } .m-journey__step.is-on .m-journey__art { transform: none; filter: none; opacity: 1; background: #e6f1e2; } .m-journey__step.is-orange.is-on .m-journey__art { background: var(--m-peach); } .m-journey__step.is-on .m-journey__node { background: var(--m-green); animation: m-pop .5s var(--m-ease); } .m-journey__step.is-orange.is-on .m-journey__node { background: var(--m-orange); } .m-journey__step.is-on h3, .m-journey__step.is-on p { opacity: 1; transform: none; } @keyframes m-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } .m-journey__step.is-on:hover .m-journey__art { box-shadow: 0 16px 36px rgba(11, 93, 51, .14); transform: translateY(-6px); } .m-journey__step.is-on:hover .m-journey__art .m-art { transform: rotate(-4deg) scale(1.06); } @media (max-width: 1023px) { .m-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } .m-journey__line, .m-journey__dot { display: none; } .m-journey__step .m-journey__art, .m-journey__step h3, .m-journey__step p { opacity: 1; filter: none; transform: none; } .m-journey__step .m-journey__node { background: var(--m-green); } .m-journey__step.is-orange .m-journey__node { background: var(--m-orange); } .m-journey__bush { opacity: .5; } } @media (max-width: 559px) { .m-journey__steps { grid-template-columns: 1fr; } .m-journey__cloud { width: 6rem; } } /* ================= Impact ================= */ .m-impact { position: relative; background: #0d1f15; color: #fff; overflow: hidden; outline: none; } .m-impact__stage { display: grid; } .m-impact__slide { grid-area: 1 / 1; position: relative; isolation: isolate; visibility: hidden; opacity: 0; transition: opacity .9s var(--m-ease), visibility 0s .9s; } .m-impact__slide.is-active { visibility: visible; opacity: 1; transition: opacity .9s var(--m-ease), visibility 0s; z-index: 1; } .m-impact__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .m-impact__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 8s linear; } .m-impact__slide.is-active .m-impact__bg img { transform: scale(1); } .m-impact__slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6, 34, 20, .92) 0%, rgba(6, 34, 20, .78) 42%, rgba(6, 34, 20, .35) 100%); } .m-impact__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); gap: 4rem; align-items: end; padding-top: 7rem; padding-bottom: 7rem; min-height: 40rem; } .m-impact__story { max-width: 34rem; align-self: center; } .m-impact__partner { height: 3.75rem; display: flex; align-items: center; margin-bottom: 1.5rem; } .m-impact__partner img { height: 100%; width: auto; } .m-impact__partner span { padding-left: .9rem; border-left: 3px solid var(--m-orange); font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; color: rgba(255, 255, 255, .9); max-width: 18rem; } .m-impact__flag { display: inline-block; margin-bottom: .75rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(246, 109, 0, .18); border: 1px dashed rgba(246, 109, 0, .7); color: #ffc08a; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .m-impact__story h3 { margin: 0 0 .9rem; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; font-weight: 700; color: #fff; letter-spacing: -.02em; } .m-impact__story p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: rgba(255, 255, 255, .88); } .m-impact__stats { display: grid; gap: 1rem; } .m-impact__stats.is-2 { grid-template-columns: 1fr 1fr; } .m-impact__stats.is-1 { grid-template-columns: minmax(0, 20rem); justify-content: end; } .m-impact__year { margin: 0 0 .65rem; padding: .6rem; border-radius: 10px; text-align: center; font-weight: 700; font-size: 1rem; letter-spacing: .06em; color: #fff; background: var(--m-green-2); } .m-impact__col.is-orange .m-impact__year { background: var(--m-orange); } .m-impact__col dl { margin: 0; display: grid; gap: .65rem; } .m-stat { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, .97); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); } .m-stat__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--m-green-2); color: #fff; } .m-impact__col.is-orange .m-stat__icon { background: var(--m-orange); } .m-stat__icon svg { width: 1.35rem; height: 1.35rem; } .m-stat dd { margin: 0; } .m-stat__num { font-size: 1.5rem; line-height: 1.1; font-weight: 700; color: var(--m-green-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .m-impact__col.is-orange .m-stat__num { color: var(--m-orange); } .m-stat__label { font-size: .8125rem; line-height: 1.3; color: #4b574f; } .is-placeholder .m-stat__num { color: #9aa79f !important; } /* staggered entrance on the active slide */ .m-rise { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--m-ease), transform .6s var(--m-ease); } .m-impact.is-seen .m-impact__slide.is-active .m-rise { opacity: 1; transform: none; transition-delay: calc(.25s + var(--d, 0) * .08s); } /* top bar */ .m-impact__top { position: absolute; z-index: 3; top: 2.75rem; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; } .m-impact__eyebrow { margin: 0; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; } .m-impact__eyebrow::after { content: ""; display: block; width: 2.25rem; height: 3px; margin-top: .55rem; border-radius: 3px; background: var(--m-orange); } .m-impact__nav { display: flex; align-items: center; gap: .6rem; } .m-impact__count { margin-right: .6rem; font-size: .875rem; letter-spacing: .1em; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; } .m-impact__count b { color: #fff; font-weight: 700; } .m-impact__arrow { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--m-ease); } .m-impact__arrow svg { width: 1.1rem; height: 1.1rem; } .m-impact__arrow:hover { background: var(--m-orange); border-color: var(--m-orange); } .m-impact__arrow[data-dir="1"]:hover { transform: translateX(2px); } .m-impact__arrow[data-dir="-1"]:hover { transform: translateX(-2px); } .m-impact__arrow:focus-visible { outline: 3px solid rgba(246, 109, 0, .6); outline-offset: 2px; } /* progress dots: small dots, the active one stretches into a pill that fills as the slide runs */ .m-impact__dots { position: absolute; z-index: 3; left: 50%; bottom: 2.25rem; transform: translateX(-50%); display: flex; gap: .6rem; } .m-impact__dots button { display: block; padding: .5rem 0; border: 0; background: none; cursor: pointer; } .m-impact__bar { position: relative; display: block; width: .65rem; height: .65rem; border-radius: 1rem; background: rgba(255, 255, 255, .45); overflow: hidden; transition: width .4s var(--m-ease), background-color .25s; } .m-impact__dots button:hover .m-impact__bar { background: rgba(255, 255, 255, .8); } .m-impact__dots button[aria-selected="true"] .m-impact__bar { width: 2.75rem; background: rgba(255, 255, 255, .35); } .m-impact__bar span { position: absolute; inset: 0; background: var(--m-orange); transform: scaleX(0); transform-origin: left; border-radius: inherit; } .m-impact__dots button[aria-selected="true"] .m-impact__bar span { transform: scaleX(1); } .m-impact.is-ticking .m-impact__dots button[aria-selected="true"] .m-impact__bar span { animation: m-tick var(--dur, 7s) linear both; } .m-impact.is-paused .m-impact__dots button[aria-selected="true"] .m-impact__bar span { animation-play-state: paused; } .m-impact__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 1rem; } @keyframes m-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 1023px) { .m-impact__inner { grid-template-columns: 1fr; gap: 2.5rem; min-height: 0; padding-top: 7rem; padding-bottom: 6.5rem; } .m-impact__stats.is-1 { justify-content: start; grid-template-columns: minmax(0, 22rem); } .m-impact__slide::before { background: rgba(6, 34, 20, .8); } } @media (max-width: 479px) { .m-impact__count { display: none; } .m-impact__arrow { width: 2.5rem; height: 2.5rem; } .m-impact__stats.is-2 { gap: .6rem; } .m-stat { padding: .8rem; gap: .6rem; } .m-stat__icon { width: 2.25rem; height: 2.25rem; } .m-stat__num { font-size: 1.1rem; } .m-stat__label { font-size: .75rem; } } /* ================= CTA band ================= */ .m-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--m-mint-2); } .m-cta__blob { position: absolute; z-index: -1; border-radius: 50%; } .m-cta__blob--a { left: 36%; top: -60%; width: 36rem; height: 54rem; background: rgba(193, 221, 178, .5); } .m-cta__blob--b { left: 50%; bottom: -65%; width: 32rem; height: 32rem; background: rgba(193, 221, 178, .4); } .m-cta__quarter { position: absolute; left: 0; bottom: 0; width: 7rem; height: 5.5rem; background: var(--m-green); border-top-right-radius: 100% 100%; z-index: 1; } .m-cta__media { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; } .m-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .m-cta__inner { position: relative; z-index: 2; } .m-cta__copy { max-width: 34rem; padding: 5rem 0; } .m-cta__bar { display: block; width: 3rem; height: 4px; border-radius: 4px; background: #3f8f57; margin-bottom: 1.25rem; } .m-cta h2 { margin: 0 0 1.1rem; font-size: clamp(2rem, 3.4vw, 2.875rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; color: var(--m-green); } .m-cta p { margin: 0 0 2rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.55; color: var(--m-ink); } @media (max-width: 1023px) { .m-cta { display: flex; flex-direction: column; } .m-cta__media { position: relative; order: 2; width: auto; height: 18rem; } .m-cta__media img { object-position: center 30%; } .m-cta__copy { padding: 3.5rem 0 2.5rem; } .m-cta__quarter { display: none; } } /* ================= Footer ================= */ .m-footer { background: #fff; border-top: 1px solid #ececec; } .m-footer__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; } .m-footer__row { display: flex; align-items: center; gap: 1.75rem; } .m-footer__logo { display: block; line-height: 0; } .m-footer .m-logo--stacked { height: 5.5rem; } .m-social { display: flex; gap: .6rem; margin: 0; padding: 0; list-style: none; } .m-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--m-green); color: #fff; transition: background-color .2s; } .m-social a:hover { background: var(--m-orange); } .m-social svg { width: 1.2rem; height: 1.2rem; } .m-footer__division { margin: .9rem 0 0; font-size: .8125rem; color: #333; } .m-footer__division a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; } .m-footer__division a:hover { color: var(--m-green); } .m-footer__end { display: flex; flex-direction: column; align-items: flex-end; gap: 2rem; padding-top: 1rem; } .m-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; margin: 0; padding: 0; list-style: none; } .m-footer__links a { color: var(--m-orange); text-decoration: none; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; transition: color .2s; } .m-footer__links a:hover { color: var(--m-green); } .m-footer__legal { margin: 0; font-size: .875rem; color: #555; } .m-footer__legal a { color: var(--m-green); text-decoration: none; } .m-footer__legal a:hover { text-decoration: underline; } @media (max-width: 767px) { .m-footer__inner { flex-direction: column; align-items: center; text-align: center; } .m-footer__row { flex-direction: column; gap: 1rem; } .m-footer__end { align-items: center; padding-top: 0; } .m-footer__links { justify-content: center; } } /* ================= Meal Boxes & Kits ================= */ .m-boxes { padding: 5rem 0 4.5rem; background: linear-gradient(180deg, #F2F8F0 0, #fff 14rem); } .m-boxes .m-head { margin-bottom: 3.5rem; } .m-boxes__title { margin: 0 0 .5rem; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; color: var(--m-green); } .m-boxes__sub { margin: 0; font-size: clamp(1.125rem, 1.8vw, 1.5rem); color: #555; } .m-boxes__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 3rem; margin: 0 0 2.75rem; padding: 0; list-style: none; } .m-boxes__row:last-of-type { margin-bottom: 0; } .m-kit { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; } .m-kit__body { padding-top: 1.1rem; } .m-kit__disc { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--m-lime); } .m-kit__disc .m-art { width: 66%; } .m-kit__disc img { width: 58%; height: auto; } .m-kit__disc .mhs-icon { width: 54%; color: #fff; } .m-kit h4 { margin: 0 0 .4rem; font-size: 1.3125rem; line-height: 1.2; font-weight: 700; color: var(--m-green); letter-spacing: -.01em; } .m-kit p { margin: 0; font-size: .875rem; line-height: 1.5; color: #555; } .m-kit__btn { margin-top: 1rem; } .m-kit ul { margin: 0; padding: 0; list-style: none; } .m-kit ul li { position: relative; padding: .1rem 0 .1rem .9rem; font-size: .8125rem; line-height: 1.45; color: var(--m-green); } .m-kit ul li::before { content: ""; position: absolute; left: 0; top: .62rem; width: 5px; height: 5px; border-radius: 50%; background: var(--m-green); } @media (max-width: 1199px) { .m-boxes__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .m-boxes { padding: 3.75rem 0; } .m-boxes__row { grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 1.75rem; } .m-kit { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.1rem; } .m-kit__disc { width: 5.5rem; height: 5.5rem; } .m-kit h4 { font-size: 1.125rem; } } /* ================= Video ================= */ .m-video { position: relative; overflow: hidden; padding: 5.5rem 0; background: var(--m-mint); } .m-video__ring { position: absolute; right: -14rem; top: -14rem; width: 34rem; height: 34rem; border-radius: 50%; border: 60px solid rgba(125, 194, 66, .14); } .m-video__grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 4rem; align-items: center; } .m-video__copy h2 { margin: 0 0 1rem; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; color: var(--m-green); } .m-video__copy > p:not(.m-eyebrow) { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.65; color: var(--m-ink); } .m-video__copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; } .m-video__copy li { display: flex; align-items: center; gap: .65rem; font-size: .9375rem; font-weight: 500; color: #1c3a29; } .m-video__copy li svg { flex: none; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--m-lime); color: #fff; } .m-video__card { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #0d1f15; box-shadow: 0 30px 70px -20px rgba(11, 93, 51, .45); transform: rotate(-1deg); transition: transform .5s var(--m-ease); } .m-video__card:hover, .m-video__card.is-playing { transform: none; } .m-video__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .7); pointer-events: none; } .m-video__media, .m-video__embed, .m-video__embed iframe { display: block; width: 100%; height: 100%; object-fit: cover; } .m-video__card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 34, 20, .05), rgba(6, 34, 20, .45)); transition: opacity .4s; pointer-events: none; } .m-video__card.is-playing::before { opacity: 0; } .m-video__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--m-orange); color: #fff; cursor: pointer; transition: transform .3s var(--m-ease), background-color .3s; } .m-video__play svg { position: relative; z-index: 1; width: 2rem; height: 2rem; margin-left: 4px; } .m-video__pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--m-orange); animation: m-pulse 2.2s ease-out infinite; } @keyframes m-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(1.8); opacity: 0; } } .m-video__play:hover { transform: scale(1.08); background: var(--m-green); } .m-video__play:hover .m-video__pulse { background: var(--m-green); } .m-video__card.is-playing .m-video__play, .m-video__card.is-playing .m-video__tag { opacity: 0; pointer-events: none; } .m-video__tag { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); color: #fff; font-size: .75rem; letter-spacing: .04em; transition: opacity .3s; } @media (max-width: 1023px) { .m-video__grid { grid-template-columns: 1fr; gap: 2.5rem; } .m-video__card { transform: none; } } @media (max-width: 639px) { .m-video { padding: 3.75rem 0; } .m-video__play { width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem; } } /* ================= Quote ================= */ .m-quote { padding: 4.5rem 0 5rem; background: #fff; } .m-quote figure { position: relative; max-width: 60rem; margin: 0 auto; padding: 2.75rem 6.5rem 2.25rem; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 18px 48px rgba(0, 0, 0, .08); text-align: center; } .m-quote__mark { position: absolute; top: 2.6rem; width: 3rem; height: auto; color: var(--m-green); } .m-quote__mark--open { left: 2rem; } .m-quote__mark--close { right: 2rem; } .m-quote blockquote { margin: 0; } .m-quote blockquote p { margin: 0; font-size: 1.1875rem; line-height: 1.6; color: #4a4a4a; } .m-quote figcaption { margin-top: 1.5rem; } .m-quote__name { display: block; font-size: 1.5rem; font-weight: 700; color: var(--m-orange); } .m-quote__role { display: block; margin-top: .2rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: #777; } @media (max-width: 767px) { .m-quote figure { padding: 4.25rem 1.5rem 2rem; } .m-quote__mark { top: 1.5rem; width: 2.25rem; } .m-quote blockquote p { font-size: 1.0625rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } } /* ================= Shared hover treatment (tab, footer) ================= */ /* Same move as the buttons: the other brand colour floods in from a point. */ .m-tab { overflow: hidden; isolation: isolate; } .m-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--m-green); clip-path: circle(0 at 50% 100%); transition: clip-path .5s var(--m-ease); } .m-tab:hover, .m-tab:focus-visible { background: var(--m-orange); } .m-tab:hover::before, .m-tab:focus-visible::before, .m-tab[aria-expanded="true"]::before { clip-path: circle(150% at 50% 100%); } .m-tab[aria-expanded="true"] { background: var(--m-orange); } .m-social a { position: relative; overflow: hidden; isolation: isolate; } .m-social a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m-orange); clip-path: circle(0 at 100% 50%); transition: clip-path .45s var(--m-ease); } .m-social a:hover { background: var(--m-green); transform: none; } .m-social a:hover::before, .m-social a:focus-visible::before { clip-path: circle(150% at 100% 50%); } .m-social a svg { transition: transform .35s var(--m-ease); } .m-social a:hover svg { transform: scale(1.12); } .m-footer__links a, .m-footer__legal a, .m-footer__division a { position: relative; text-decoration: none; } .m-footer__links a::after, .m-footer__legal a::after, .m-footer__division a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--m-ease); } .m-footer__division a::after { transform: scaleX(1); height: 1px; opacity: .6; } .m-footer__links a:hover, .m-footer__legal a:hover, .m-footer__division a:hover { color: var(--m-green); text-decoration: none; } .m-footer__links a:hover::after, .m-footer__legal a:hover::after { transform: scaleX(1); background: var(--m-orange); } .m-footer__division a:hover::after { background: var(--m-orange); opacity: 1; height: 2px; } .m-contact__alt a { position: relative; text-decoration: none !important; } .m-contact__alt a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--m-orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--m-ease); } .m-contact__alt a:hover::after { transform: scaleX(1); } /* ================= Footer alignment ================= */ /* Two-row grid: logo + socials | links on one baseline (the logo's foot), division line | copyright on the next. */ .m-footer__inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand nav" "division legal"; row-gap: 1.4rem; column-gap: 2rem; align-items: end; } .m-footer__brand, .m-footer__end { display: contents; } .m-footer__row { grid-area: brand; display: flex; align-items: flex-end; gap: 1.75rem; } .m-footer__end nav { grid-area: nav; justify-self: end; } .m-footer__division { grid-area: division; margin: 0; align-self: baseline; font-size: .875rem; line-height: 1.4; } .m-footer__legal { grid-area: legal; justify-self: end; align-self: baseline; font-size: .875rem; line-height: 1.4; } .m-social { gap: .6rem; } .m-social li { display: block; line-height: 0; } .m-footer__links { line-height: 1; } .m-footer__links a { display: inline-block; line-height: 1; padding-bottom: 2px; } @media (max-width: 767px) { .m-footer__inner { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "legal" "division"; justify-items: center; text-align: center; row-gap: 1.25rem; } .m-footer__row { flex-direction: column; align-items: center; gap: 1rem; } .m-footer__end nav, .m-footer__legal { justify-self: center; } } /* Feeding Solutions photo: the home hero's exact curve and arc, so both heroes match. */ .m-hero__photo--curve .m-hero__frame img { object-fit: cover; object-position: 62% center; clip-path: url(#mhsCurve); } @media (max-width: 1023px) { .m-hero__photo--curve .m-hero__frame { position: static; width: 100%; height: 100%; aspect-ratio: auto; } .m-hero__photo--curve .m-hero__frame img { clip-path: none; } .m-hero__photo--curve .m-hero__arc { display: none; } } /* Get in Touch: a little more presence without nagging. A chat icon, a white keyline and deeper shadow so it separates from photos, and a gentle peek (slides out a few px) a couple of times until someone interacts with it. */ .m-tab { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem 1.05rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 -6px 22px rgba(0, 0, 0, .2); } .m-tab__icon { width: 1.35rem; height: 1.35rem; flex: none; transform: rotate(90deg); } .m-tab span { position: relative; } .m-tab.is-peek { animation: m-peek 1.4s var(--m-ease); } @keyframes m-peek { 0%, 100% { translate: 0 0; } 30% { translate: -10px 0; } 55% { translate: -2px 0; } 70% { translate: -7px 0; } } .m-tab:hover { translate: -4px 0; transition: background-color .2s, translate .25s var(--m-ease); } @media (prefers-reduced-motion: reduce) { .m-tab.is-peek { animation: none; } } /* FS characters: feet planted on the green slope; same soft shadow as the home hero cast. */ /* ================= Feeding Solutions dropdown ("Programs We Support") ================= */ .m-nav__has-panel { position: relative; } .m-nav__has-panel::after { content: ""; position: absolute; left: -2rem; right: -2rem; top: 100%; height: 1.4rem; } .m-programs { position: absolute; left: 50%; top: calc(100% + 1.25rem); z-index: 70; width: 36rem; padding: 1.5rem 1.5rem 1.4rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 24px 60px rgba(11, 93, 51, .16); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s var(--m-ease), transform .25s var(--m-ease), visibility 0s .25s; } .m-programs::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: #fff; transform: rotate(45deg); border-radius: 2px; } .m-nav__has-panel:hover .m-programs, .m-nav__has-panel:focus-within .m-programs { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s var(--m-ease), transform .25s var(--m-ease), visibility 0s; } .m-programs__title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; color: var(--m-green); text-transform: none; letter-spacing: -.01em; } .m-programs__title::after { content: ""; flex: 1; height: 1px; background: #e6ece4; } .m-programs__list { display: grid !important; grid-template-columns: 1fr 1fr; gap: .4rem 1.25rem !important; margin: 0 0 1.25rem !important; padding: 0; list-style: none; } .m-programs__list li { display: flex; align-items: center; gap: .85rem; padding: .3rem 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--m-green); text-transform: none; letter-spacing: 0; cursor: default; } .m-programs__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--m-mint); color: var(--m-orange); } .m-programs__icon svg { width: 1.75rem !important; height: 1.75rem !important; } .m-nav__menu .m-programs a.m-btn { display: flex; width: 100%; justify-content: space-between; color: #fff; padding: 0 .375rem 0 1.5rem; text-transform: uppercase; font-size: .8125rem; font-weight: 600; height: 3.1rem; letter-spacing: .08em; } .m-nav__menu .m-programs a.m-btn::after { display: none; } .m-nav__menu .m-programs a.m-btn .m-btn__dot { width: 2.35rem; height: 2.35rem; } .m-nav__menu .m-programs a.m-btn::before { clip-path: circle(1.15rem at calc(100% - 1.575rem) 50%); } .m-nav__menu .m-programs a.m-btn:hover::before { clip-path: circle(150% at calc(100% - 1.575rem) 50%); } /* ================= Text pages (Privacy Policy etc.) ================= */ .m-page-hero { position: relative; overflow: hidden; padding: 4rem 0 5.5rem; background: linear-gradient(180deg, #eef5ec 0%, #e4f0dd 100%); text-align: center; } .m-page-hero h1 { margin: 0 0 .6rem; font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; color: var(--m-green); } .m-page-hero__meta { margin: 0; font-size: .9375rem; color: var(--m-ink-2); } .m-page-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 3.5rem; } .m-page { padding: 2.5rem 0 5.5rem; background: #fff; } .m-page__grid { max-width: 52rem; } .m-page__grid.has-toc { max-width: var(--m-max); display: grid; grid-template-columns: 16rem minmax(0, 46rem); gap: 4.5rem; justify-content: center; } .m-toc { position: sticky; top: calc(var(--m-nav-h) + var(--m-notice-h) + 1.5rem); align-self: start; padding: 1.4rem 1.4rem 1.2rem; border-radius: 16px; background: var(--m-mint); } .is-compact ~ * .m-toc { top: 7rem; } .m-toc__title { margin: 0 0 .8rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--m-orange); } .m-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; } .m-toc li { counter-increment: toc; } .m-toc a { position: relative; display: block; padding: .4rem 0 .4rem 1.9rem; font-size: .875rem; line-height: 1.35; color: #2f4a3a; text-decoration: none; transition: color .2s; } .m-toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: .45rem; font-size: .75rem; font-weight: 700; color: var(--m-green); opacity: .55; } .m-toc a:hover, .m-toc a.is-active { color: var(--m-green); font-weight: 600; } .m-toc a.is-active::before { color: var(--m-orange); opacity: 1; } .m-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--m-ink); } .m-prose > *:first-child { margin-top: 0; } .m-prose h2 { scroll-margin-top: 10rem; margin: 2.75rem 0 .9rem; padding-top: 2.25rem; border-top: 1px solid #e6ece4; font-size: 1.625rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--m-green); } .m-prose h2:first-child { padding-top: 0; border-top: 0; } .m-prose h3 { margin: 1.75rem 0 .5rem; font-size: 1.1875rem; font-weight: 600; color: var(--m-green); } .m-prose p { margin: 0 0 1.1rem; } .m-prose ul, .m-prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; } .m-prose li { margin: .35rem 0; } .m-prose ul li::marker { color: var(--m-orange); } .m-prose a { color: var(--m-green); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(246, 109, 0, .5); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color .2s; } .m-prose a:hover { text-decoration-color: var(--m-orange); } .m-prose strong { color: #222; font-weight: 600; } .m-prose .privacy-policy-tutorial { display: none; } @media (max-width: 1023px) { .m-page__grid.has-toc { grid-template-columns: 1fr; gap: 2rem; } .m-toc { position: static; } } /* ===================================================================== * McLane Hunger Solutions — revisions from the client review call, * 5 October 2026. Paste at the very bottom of css/site.css. * * Overrides only. Nothing above this line in the file needs to change, * and deleting this block undoes all of it. * ===================================================================== */ /* 1. The announcement bar (22:16). * It was charcoal and both sides agreed it vanished: "it was my call to * make it black to kind of stand out, but it kind of looks like it * blends." Brand green reads as deliberate against the white header. */ .m-notice { background: var(--m-green); } .m-notice a:hover { color: var(--m-mint-2); } /* 2. Who We Serve, the panel (14:06). * "That white bar, it just blends... I don't know that if I'm hovering * over it, that's what I'm looking at." * * The section is a mint gradient and the cards above it are white, so * both pale options are already taken — anything light lands between the * two and reads as more background. Solid green makes it the one dark * object on the section. The kit names become white pills, which is more * readable than they were, not less. */ .m-serve__panel { background: var(--m-green); border-left: 6px solid var(--m-orange); box-shadow: 0 16px 38px rgba(11, 93, 51, .22); } .m-serve__for { color: #fff; } .m-serve__for span { color: #ffc999; } .m-serve__chips li { background: #fff; color: #14321f; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); } .m-serve__chips svg { color: var(--m-orange); } /* 3. The chairman's quote (21:59). * "That box kind of got lost with the white." Dark green with an orange * border, which pairs it with the Who We Serve panel — two dark blocks * on two pale sections, same rule. * * His name is #ff8c33 rather than the brand orange. The border keeps * --m-orange; this is type, and the brand value lands at 2.7:1 on this * green, under the 3.0 that large bold text needs. #ff8c33 is 3.4:1. */ .m-quote figure { background: var(--m-green); border: 2px solid var(--m-orange); box-shadow: 0 18px 44px rgba(11, 93, 51, .20); } .m-quote blockquote p { color: #f3f8f1; } .m-quote__mark { color: rgba(255, 255, 255, .28); } .m-quote__name { color: #ff8c33; } .m-quote__role { color: rgba(255, 255, 255, .72); } /* 4. The Build a Box button (20:02). * "It does have to look a little different to say wow." * * It stays a pill like every other button — a one-off shape inside a * system of pills reads as a mistake rather than as emphasis. What makes * it different is a calculator disc on the left mirroring the arrow disc * on the right: bigger, bookended, obviously a tool, without leaving the * shape language the rest of the site is built on. */ .m-hero--fs .m-btn { height: 4.25rem; padding-left: 5rem; letter-spacing: .05em; } .m-hero--fs .m-btn::after { content: ""; position: absolute; z-index: 2; left: .5rem; top: 50%; width: 3.25rem; height: 3.25rem; margin-top: -1.625rem; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f66d00'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='2.5'%20width='14'%20height='19'%20rx='2.5'/%3E%3Crect%20x='8'%20y='5.5'%20width='8'%20height='3.5'%20rx='1'/%3E%3Cpath%20d='M9%2013h.01M12%2013h.01M15%2013h.01M9%2017h.01M12%2017h.01M15%2017h.01'/%3E%3C/svg%3E") center / 1.55rem no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); } @media (max-width: 479px) { .m-hero--fs .m-btn { height: 3.75rem; padding-left: 4.25rem; } .m-hero--fs .m-btn::after { width: 2.85rem; height: 2.85rem; margin-top: -1.425rem; } } /* 5. The USDA mark (18:02). * Asked for by name, and the reason matters: "I just want the new people * who are in those positions of buying power to understand we are * compliant" — a bid is live. A drawn tick says we think we comply; the * mark says who says so. * * The official colour logo from USDA's own brand package, uploaded to the * media library. The slot already existed in the right place holding a * tick, so the tick is hidden and the slot widened to the mark's own * 1.46:1 — squashing a federal logo into a square would be worse than * not using it. */ .m-hero__seal { width: 3.4rem; height: 2.35rem; background: url("https://dev.mclanehungersolutions.com/wp-content/uploads/2026/10/usda-logo-color.png") center / contain no-repeat; } .m-hero__seal svg { display: none; } .m-hero__note { gap: 1rem; } /* 6. Moving between the two pages (17:00). * "I felt like it kind of looked the same... I wasn't sure if, like, oh, * did it really go somewhere." * * The outgoing page just fades — the browser's own fade, only quicker. * The incoming one fades and rises 18px. One transform, on one layer, on * one of the two pages. * * That split is the whole trick. A pure cross-fade was smooth but * invisible: the top of both pages is the same announcement bar, the same * header and the same logo, so dissolving one into the other changes * almost nothing on screen. Animating BOTH pages with transforms was * visible but choppy, because it re-composites two full-page snapshots * while the incoming one is still decoding about a megabyte of * photography. Moving only the arriving page costs half as much and is * the half you actually perceive. * * .site-header stays unnamed on purpose. It is position: fixed, and * giving a fixed element its own transition group makes the browser * anchor and composite it separately across two documents, which was the * other half of the stutter. */ @view-transition { navigation: auto; } @keyframes m-page-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } ::view-transition-old(root) { animation-duration: 200ms; } ::view-transition-new(root) { animation: m-page-in 450ms cubic-bezier(.22, .61, .36, 1) both; } /* Nobody who asked their system for less motion gets any of it. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ===================================================================== * Second round — feedback notes of 7 October 2026. * ===================================================================== */ /* 7. The ripple on the journey line. * "Remove radiating ripple effect, it makes it seem like it can make you * click to somewhere." Exactly right — a pulsing ring is the universal * shorthand for "press this", and that dot is not pressable. The dot * itself stays; only the thing radiating off it goes. */ .m-journey__dot::before { display: none; } /* 8. The hero call to action: one outlined panel. SCOPED TO .m-hero ON PURPOSE. The client's mock was of the Feeding Solutions hero and so was the note behind it -- "I think it still blends in a bit" was about that button. The homepage was never raised. It keeps the pill from the approved mock, image2.png, and the wrapper the template now emits there is taken out of the layout with display: contents so the button and the USDA line sit exactly as they did before any of this. The client asked twice for this to stand out. A larger pill did not do it, because every button on the site is that shape; the editorial lockup was closer but her read was that it "still blends in a bit". Her 9 Oct mock settles it, and the thing we got wrong the first time was the scope of the outline: she draws ONE box around the call to action AND the USDA line together, so the two read as a single "start here" panel rather than a button with a footnote under it. "Whether it has a color fill or only outlines, I leave that to your discretion." Her box is a soft peach keyline on nothing, and that is what this is. Two wrong turns got here: a hard orange keyline, which read as harsh against a white hero, and then a peach wash behind it, which tinted the panel orange when her drawing has no fill at all. The line alone does the work. What makes the panel read as a panel is that it is the only ruled box in the hero, not that it is coloured in. With no fill, the USDA line has to carry its own tint or it dissolves into the page, so it keeps the theme's mint. That is also the arrangement in her mock: an outline holding a single tinted block. THE GAP BESIDE THE DISC is 28px, set twice because the disc is two sizes. The padding-left is the disc's width plus the gap, so it has to be restated at the phone breakpoint where the disc steps down to 2.85rem; 4.85rem and 4.45rem are those two sums. It costs 10px of panel width, which is the cheapest thing here to spend. THE WIDTH COMES FROM THE LABEL, and from nothing else. Left alone, a shrink-to-fit box takes its width from the widest thing in it, which was the USDA sentence's max-content -- one 600px line -- so the panel ran the full width of the copy column and the whole lockup read as stretched. The link title has to sit on one line, so the label is what the panel is measured against: the title is nowrap and the panel is fit-content, which makes the panel exactly as wide as the longest CTA on each page. 552px on Feeding Solutions, 453px on the homepage, against copy columns of 660 and 515. The USDA line is kept out of that measurement by width: 0 with min-width: 100%. A zero-width item contributes nothing to the flex container's max-content, so it cannot push the panel wider, and the min-width then fills whatever width the label settled on. Without the pair, either the sentence dictates the width or the block fails to reach the panel's edges. Below 1024px the hero stacks and there is no room for a long title on one line, so it wraps there -- at 375 it is two lines inside a 335px panel with no horizontal scroll. The button inside carries no box of its own any more -- two nested outlines is what made it read as a mistake -- and the panel takes over the padding. That has to include .m-btn__dot: the theme puts the arrow inside a white 2.7rem disc, which survived the first pass and left a second circle sitting at the far right of the panel. Her mock has a bare arrow, so the disc goes and the arrow is just an arrow. The disc stays: the animated box icon was their own ask on the 5 Oct call and nothing in her note retracts it, though her mock does not draw it. */ /* The homepage emits the same wrapper, because one template part feeds both heroes. display: contents removes it from the box tree without removing the element, so its children lay out as though it were not there. */ .m-hero:not(.m-hero) .m-hero__start { display: contents; } .m-hero .m-hero__start { display: inline-flex; flex-direction: column; align-items: stretch; width: fit-content; max-width: 100%; margin: 1.8rem 0 0; padding: 1.15rem 1.35rem; border: 1.5px solid #f3cdb0; border-radius: 18px; background: transparent; } .m-hero .m-btn { position: relative; display: inline-flex; align-items: center; gap: 1.15rem; height: auto; min-height: 0; margin: 0; padding: 0 .35rem 0 4.85rem; background: none; box-shadow: none; border: 0; border-radius: 0; color: var(--m-orange); font-size: 1.5rem; font-weight: 700; line-height: 1.14; letter-spacing: -.015em; text-transform: none; white-space: normal; overflow: visible; transition: color .35s var(--m-ease); } .m-hero .m-btn::before { display: none; } /* The icon itself is section 9 and stays there. It is NOT redeclared here: two .m-hero .m-btn::after blocks at equal specificity meant the later one silently won, which is how the disc ended up at 1.05rem with the padding sized for 0 and no gap at all between it and the B of "Build". */ .m-hero .m-btn > span:first-child { display: block; } /* The title on one line, where a line that long has somewhere to go. */ @media (min-width: 1024px) { .m-hero .m-btn > span:first-child { white-space: nowrap; } } .m-hero .m-btn > span:first-child::before { content: "Start here"; display: block; margin-bottom: .1rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7b8a80; } .m-hero .m-btn .is-light { font-weight: 500; color: var(--m-green); } /* The arrow, with the theme's white disc taken off it. */ .m-hero .m-btn__dot { width: auto; height: auto; min-width: 0; background: none; border-radius: 0; overflow: visible; color: var(--m-orange); transition: transform .35s var(--m-ease), color .35s var(--m-ease); } .m-hero .m-btn:hover .m-btn__dot, .m-hero .m-btn:focus-visible .m-btn__dot { color: var(--m-green); transform: translateX(4px); } /* The USDA line is the quiet half of the panel. On the peach wash it needs to come forward rather than recede, so it sits on white -- the inverse of the usual tinted-callout-on-white, and the only way to get two tiers inside one box without a second heavy border. max-width is reset because the theme caps this line at 26rem, which was sized for a note sitting loose in the hero. Inside the panel that cap left a ragged gap to its right; the block is the panel's full inner width now, the way her mock draws it. The panel is a flex column rather than an inline-block for that: a percentage width on a child of a shrink-to-fit box resolves against a width that box is still working out, and it went stale on reflow. align-items: stretch has no such circularity. */ .m-hero .m-hero__start .m-hero__note { display: flex; max-width: none; width: 0; min-width: 100%; margin: 1.05rem 0 0; padding: .7rem .85rem; border-radius: 12px; background: var(--m-mint); border: 0; } .m-hero .m-btn:hover, .m-hero .m-btn:focus-visible { color: var(--m-green); } .m-hero .m-btn:hover .is-light, .m-hero .m-btn:focus-visible .is-light { color: var(--m-orange); } /* The panel answers the hover rather than staying inert, but gently: the keyline comes up to full orange. No fill appears on hover either -- the panel has none at rest and gaining one on hover is the colour change the client has twice said she does not want. :has() is the only way to reach the parent from the link; where it is unsupported the panel simply does not react, which is a degradation, not a break. */ .m-hero .m-hero__start:has(.m-btn:hover), .m-hero .m-hero__start:has(.m-btn:focus-visible) { border-color: var(--m-orange); } /* 8b. The phone. The label wraps to two lines under 480px, so the disc steps down to 2.85rem -- the size the theme already uses for the Feeding Solutions hero at this breakpoint -- and the panel tightens with it. */ @media (max-width: 479px) { /* This carried 2.7rem of right padding to pull the chevron out from under the sticky Get in Touch tab. Section 17 hides that tab below 768px, so the clearance is no longer buying anything and the padding is even. */ .m-hero .m-hero__start { padding: .95rem 1rem; border-radius: 15px; } .m-hero .m-btn { padding: 0 .2rem 0 4.45rem; font-size: 1.3rem; } .m-hero .m-btn::after { width: 2.85rem; height: 2.85rem; margin-top: -1.425rem; background-size: 1.55rem auto; } .m-hero .m-hero__start .m-hero__note { margin-top: .85rem; padding: .6rem .7rem; } } /* 9. The Build-a-Box icon, animated. "We do not have a calculator. It is a Build-a-box page", and "maybe have an animated box icon instead... a box opening or closing or a box then getting filled". Both, in one loop: the flaps open, two items drop in, they close. CSS animations inside an SVG used as background-image do run -- verified in the browser rather than assumed, which is what let this stay a stylesheet change instead of another template paste. It is white on an orange disc now that section 8 has made the CTA a lockup; it was orange on white when the CTA was a solid orange pill. The SVG carries its own prefers-reduced-motion query, since the one out here cannot reach inside it. */ /* content/position live here, not only in the theme, because the theme only declares them for .m-hero -- so on the homepage the pseudo-element was never generated and the CTA lost its icon entirely. */ .m-hero .m-btn::after { content: ""; position: absolute; z-index: 2; border-radius: 50%; left: 0; top: 50%; width: 3.1rem; height: 3.1rem; margin-top: -1.55rem; background-color: var(--m-orange); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20%3Cstyle%3E%20%40keyframes%20mhsDrop%20%7B%200%25,10%25%20%7B%20transform:%20translateY(-7px)%3B%20opacity:%200%20%7D%2020%25%20%7B%20opacity:%201%20%7D%2048%25%20%7B%20transform:%20translateY(3.5px)%3B%20opacity:%201%20%7D%2058%25,100%25%20%7B%20transform:%20translateY(3.5px)%3B%20opacity:%200%20%7D%20%7D%20%40keyframes%20mhsFlapL%20%7B%200%25,8%25%20%7B%20transform:%20rotate(0deg)%20%7D%2024%25,84%25%20%7B%20transform:%20rotate(-40deg)%20%7D%20100%25%20%7B%20transform:%20rotate(0deg)%20%7D%20%7D%20%40keyframes%20mhsFlapR%20%7B%200%25,8%25%20%7B%20transform:%20rotate(0deg)%20%7D%2024%25,84%25%20%7B%20transform:%20rotate(40deg)%20%7D%20100%25%20%7B%20transform:%20rotate(0deg)%20%7D%20%7D%20.mhs-i%20%7B%20animation:%20mhsDrop%203.2s%20cubic-bezier(.5,0,.6,1)%20infinite%20%7D%20.mhs-i2%20%7B%20animation-delay:%20.42s%20%7D%20.mhs-fl%20%7B%20animation:%20mhsFlapL%203.2s%20cubic-bezier(.4,0,.2,1)%20infinite%3B%20transform-origin:%204.2px%2011.5px%20%7D%20.mhs-fr%20%7B%20animation:%20mhsFlapR%203.2s%20cubic-bezier(.4,0,.2,1)%20infinite%3B%20transform-origin:%2019.8px%2011.5px%20%7D%20%40media%20(prefers-reduced-motion:%20reduce)%20%7B%20.mhs-i,.mhs-fl,.mhs-fr%20%7B%20animation:%20none%20%7D%20.mhs-i%20%7B%20opacity:%201%20%7D%20%7D%20%3C/style%3E%20%3Cpath%20d='M4.2%2011.5h15.6V19a1.6%201.6%200%200%201-1.6%201.6H5.8A1.6%201.6%200%200%201%204.2%2019Z'/%3E%20%3Cpath%20class='mhs-fl'%20d='M4.2%2011.5%207.2%207.9'/%3E%20%3Cpath%20class='mhs-fr'%20d='M19.8%2011.5%2016.8%207.9'/%3E%20%3Ccircle%20class='mhs-i'%20cx='10'%20cy='7.2'%20r='2.3'/%3E%20%3Ccircle%20class='mhs-i%20mhs-i2'%20cx='14.4'%20cy='6.4'%20r='2.3'/%3E%20%3C/svg%3E"); background-size: 1.7rem auto; box-shadow: none; transition: background-color .3s var(--m-ease); } /* The disc used to grow on hover, which closed the last pixel between it and the rule that used to sit under this. Nothing moves now; only the shadow deepens, so no state can collide with anything. */ .m-hero .m-btn:hover::after, .m-hero .m-btn:focus-visible::after { background-color: var(--m-green); box-shadow: 0 10px 22px rgba(11, 93, 51, .4); } /* 10. Meal Boxes & Kits. * "The types of boxes seem to blend in all together because they are all * the same color... I like how we did Who We Serve because they have * light borders around each audience." * * So each kit becomes a card with the same light border and radius Who * We Serve uses, and the disc behind each icon takes its category's * colour — green for child and school nutrition, orange for community * and family, lime for relief and seasonal. The rows were already the * three categories; nothing was telling you so. */ .m-kit { padding: 1.5rem 1.5rem 1.6rem; border: 1px solid rgba(11, 93, 51, .14); border-radius: 18px; background: #fff; transition: border-color .3s var(--m-ease), box-shadow .3s var(--m-ease), transform .3s var(--m-ease); } .m-kit:hover { border-color: rgba(246, 109, 0, .45); box-shadow: 0 16px 36px rgba(11, 93, 51, .12); transform: translateY(-3px); } .m-kit__disc { width: 5.25rem; height: 5.25rem; } .m-kit { grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: 1rem; } .m-kit__body { padding-top: .35rem; } .m-kit h4 { font-size: 1.1875rem; } .m-boxes__row:nth-of-type(1) .m-kit__disc { background: var(--m-green-2); } .m-boxes__row:nth-of-type(2) .m-kit__disc { background: var(--m-orange); } .m-boxes__row:nth-of-type(3) .m-kit__disc { background: var(--m-lime); } @media (max-width: 639px) { .m-kit { padding: 1.25rem; grid-template-columns: 4.75rem minmax(0, 1fr); } .m-kit__disc { width: 4.75rem; height: 4.75rem; } } /* 11. The cover title, and the green wash under it. The 7 Oct notes asked for a cover title on the video -- "Sid Miller | Texas Agriculture Commissioner" -- and the mock Kayla sent on 9 Oct shows how she wants it: along the bottom, centred, sitting in a green gradient that rises out of the bottom edge of the frame. The gradient is not decoration. This footage has a lower third burnt into it, "...ational Conference General Session", sitting in the bottom left of every frame; it is part of the picture and cannot be removed. A caption placed along that edge lands on top of it. Her wash is what makes the edge usable -- it takes the burnt-in strap down to something the eye skips, and the pill then reads as the only label there. So the card's own scrim is re-aimed rather than a second layer added. The theme's runs top to bottom at a flat .45 over the whole frame; this one is weighted to the bottom in brand green, full strength along the edge where the strap is, gone by just under half height so the hat and the face stay clear. It already fades when the video starts, which is what we want: cover title and wash are both furniture for the poster, not the footage. The pill keeps the type size that was measured for the top edge -- it never wraps at 1440 and never spills the frame at 375. */ .m-video__card::before { background: linear-gradient(to top, rgba(6, 34, 20, .94) 0%, rgba(6, 34, 20, .88) 10%, rgba(8, 48, 28, .55) 24%, rgba(10, 60, 34, .22) 36%, rgba(11, 93, 51, 0) 48%); } .m-video__tag { left: 50%; right: auto; top: auto; bottom: 1.35rem; transform: translateX(-50%); max-width: calc(100% - 2.5rem); padding: .45rem 1rem; background: rgba(6, 34, 20, .72); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); font-size: .78rem; letter-spacing: .03em; white-space: nowrap; text-align: center; } .m-video__card.is-playing .m-video__tag { opacity: 0; pointer-events: none; } /* The pill sat bottom LEFT on phones to dodge the sticky Get in Touch tab, which overlapped its last 14px. Section 17 hides that tab below 768px, so it is centred again here too, the way the mock draws it; it only has to drop a size to fit a 335px card. */ @media (max-width: 479px) { .m-video__tag { left: 50%; right: auto; transform: translateX(-50%); bottom: 1rem; font-size: .64rem; padding: .34rem .62rem; letter-spacing: .02em; } } /* 12. Miller's quote in the copy column. The quote has moved twice. It began beside the video, became a lower third over the footage, and on 9 Oct the client asked for it to take the copy column outright -- "the left section does not relate to the video as much". So it is the body of that column now and the lower third is gone: one quote, not two, and the cover title still names him over the poster. Her mock settled the styling too, and it differs from what we had: no rule down the left of the quote -- the eyebrow's rule is the only one in the column -- and a two-colour caption, the speaker in orange above the venue in green. That inverts the usual loud-name/quiet-source pairing, so the caption is set at the same size throughout and the colours carry the hierarchy on their own. */ .m-video__pullquote { margin: 1.5rem 0 0; padding: 0; border-left: 0; } .m-video__pullquote blockquote { margin: 0 0 1.1rem; font-size: 1.125rem; line-height: 1.6; font-weight: 500; color: var(--m-green); } .m-video__pullquote figcaption { font-size: .9375rem; line-height: 1.5; } .m-video__pullquote figcaption b { display: block; font-weight: 700; color: var(--m-orange); } .m-video__pullquote figcaption span { display: block; font-weight: 600; color: var(--m-green); } @media (max-width: 639px) { .m-video__pullquote blockquote { font-size: 1rem; } } /* 13. The Baylor case study slide: Option C, chosen by the client. Kayla picked this from four mocks on 12 Oct ("Lets go with Option C"): the three figures share ONE white card rather than sitting on hairlines or in three separate boxes, with the year on an orange tag at the card's edge. White is deliberate -- it matches the cards on the other two case studies, which is what she asked for. THE WASHES. Three of them, each doing one job, because a single blanket scrim is what made earlier versions wrong. The slide's own ::before rises from the foot and is gone by 66% of the height, so it sits behind the copy and never reaches the faces -- the family is at 8-38% from the top, which is the one part of this photograph that must stay clear. Two corner washes then carry the eyebrow and the arrows, anchored hard in the corners so they fade out before the girls either side. THE HEIGHT. At 1425 wide the photo wants 797px; the slide gave 640, so 157px was cut and it came off the bottom -- the table. 44rem is the knee: heads clear, the food in frame, only the front lip of the table lost. nth-of-type(2) is positional, so all of this has to move if the case studies are ever reordered. */ .m-impact__slide:nth-of-type(2) { min-height: 44rem; } .m-impact__slide:nth-of-type(2) .m-impact__bg img { object-position: 50% 16%; } /* The foot wash has to reach the TOP of the copy block, not just the card. The block runs from about 9% to 45% up from the foot on a 755px slide, so the ramp holds above .6 to 48% and only then falls away, reaching zero at 65% -- still clear of the family, who start at 62% up. The first version was transparent by 52% and left the logo and headline sitting on bright packaging. */ .m-impact__slide:nth-of-type(2)::before { background: radial-gradient(ellipse 34% 38% at 0% 0%, rgba(6, 34, 20, .72) 0%, rgba(6, 34, 20, .42) 38%, rgba(6, 34, 20, .12) 68%, rgba(6, 34, 20, 0) 100%), radial-gradient(ellipse 34% 38% at 100% 0%, rgba(6, 34, 20, .72) 0%, rgba(6, 34, 20, .42) 38%, rgba(6, 34, 20, .12) 68%, rgba(6, 34, 20, 0) 100%), linear-gradient(to top, rgba(6, 34, 20, .96) 0%, rgba(6, 34, 20, .94) 24%, rgba(6, 34, 20, .86) 38%, rgba(6, 34, 20, .66) 48%, rgba(6, 34, 20, .34) 56%, rgba(6, 34, 20, .08) 61%, rgba(6, 34, 20, 0) 65%); } .m-impact__slide:nth-of-type(2) .m-impact__inner { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 1.15rem; padding-top: 9rem; padding-bottom: 3.5rem; } .m-impact__slide:nth-of-type(2) .m-impact__story { max-width: 42rem; align-self: end; } /* The card. One object holding all three figures, the width of the copy above it, so the two read as a single block in the lower left. */ .m-impact__slide:nth-of-type(2) .m-impact__stats { position: relative; display: flex; align-items: stretch; max-width: 42rem; margin: 0; padding: 1.25rem 1.5rem; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 16px 38px rgba(0, 0, 0, .26); text-shadow: none; } .m-impact__slide:nth-of-type(2) .m-impact__col { display: flex; flex: 1; min-width: 0; gap: 0; } /* The year leaves the column and becomes the tag on the card's edge. */ .m-impact__slide:nth-of-type(2) .m-impact__year { position: absolute; top: -.7rem; left: 1.5rem; margin: 0; padding: .2rem .7rem; border-radius: 999px; background: var(--m-orange); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; } .m-impact__slide:nth-of-type(2) .m-impact__col dl { display: flex; flex: 1; min-width: 0; margin: 0; padding: 0; border-top: 0; } .m-impact__slide:nth-of-type(2) .m-stat { flex: 1; min-width: 0; display: block; padding: 0 1.1rem; gap: 0; background: none; box-shadow: none; border: 0; border-left: 1px solid #e3ece0; } .m-impact__slide:nth-of-type(2) .m-stat:first-child { padding-left: 0; border-left: 0; } .m-impact__slide:nth-of-type(2) .m-stat:last-child { padding-right: 0; } .m-impact__slide:nth-of-type(2) .m-stat__icon { display: none; } .m-impact__slide:nth-of-type(2) .m-stat__num { display: block; margin: 0 0 .15rem; font-size: 1.6rem; line-height: 1; color: var(--m-green); text-shadow: none; } /* Sentence case, like the other two slides. The 26 Oct review: "the other case studies have the sub-copy as not in ALL CAPS except for this. Please make this the same consistent format." This selector was the only place a stat label was uppercased, so dropping text-transform settles it; the .07em tracking goes with it, because tracking is there to open up capitals and only loosens lower case. The size stays at .7rem. It is not an inconsistency: this slide carries three metrics in one column where slide 1 spreads three over two columns and slide 3 shows a single figure, so each was sized to its own grid -- and slide 3 sets .875rem a few hundred lines below for the same reason. */ .m-impact__slide:nth-of-type(2) .m-stat__label { display: block; font-size: .7rem; line-height: 1.3; color: #5b6b60; text-shadow: none; } /* The partner logo is the white version of Baylor's own mark, so it sits on the photograph the way Food Bank of Alaska's does on slide 1. */ /* Above the phone layout, two things the block needs to sit where the mock put it and to read. THE DROP. The copy was not being held up by padding: .m-impact__inner has min-height: 640px and this slide is 755px tall, so the whole block stopped 115px short of the foot however the padding was set. Filling the slide and then paying out 5rem brings the card to 80px off the foot, which clears the dots by 18px -- they sit 36px up and stand 26px tall. THE LOGO. .m-impact__partner is a flex row with a fixed 60px height, so the image could not grow past it whatever max-height said. With the wrapper freed, 7rem gives 233 x 112px and the second line of Baylor's mark, COLLABORATIVE ON HUNGER AND POVERTY, becomes readable. */ @media (min-width: 768px) { .m-impact__slide:nth-of-type(2) .m-impact__inner { min-height: 100%; padding-bottom: 5rem; } .m-impact__slide:nth-of-type(2) .m-impact__partner { height: auto; align-items: flex-start; } .m-impact__slide:nth-of-type(2) .m-impact__partner img { max-height: none; height: 7rem; width: auto; max-width: 100%; } } /* 14. Meal Boxes & Kits: the icons, and the button that broke its card. Two faults, both mine, both from section 10. The icons are two-tone line art drawn in #0B5D33 with an orange detail. Section 10 then put them on a #06673A disc -- two dark greens a hair apart, so the drawing vanished into its own background. The line work is white now, and the shapes that mask overlapping strokes take the disc's colour instead of white, which keeps the detail readable rather than flattening each icon into a silhouette. The button overflowed its card by 31px. Measured rather than guessed: it is white-space: nowrap at 266px inside a 210px column, so it cannot shrink and simply hangs out of the card. Letting it wrap fixed the overflow and looked worse -- a pill broken over two lines with the arrow adrift. It is not a button any more: a text link cannot blow out a card the way a fixed pill can, and the card already has one loud control on the page competing with it. Green text with an orange rule under it, 13px on one line at every width tested -- 223px inside a 210px column at 1440, 187px inside 201px at 375. The 6rem disc in section 10 was what squeezed it; the disc is 5.25rem now, which gives the line its room back. */ .m-kit__disc svg { width: 62%; height: 62%; } .m-kit__disc svg [stroke] { stroke: #fff; } .m-kit__disc svg [fill="#F66D00"] { fill: #fff; } .m-boxes__row:nth-of-type(1) .m-kit__disc svg [fill="#FFFFFF"] { fill: var(--m-green-2); } .m-boxes__row:nth-of-type(2) .m-kit__disc svg [fill="#FFFFFF"] { fill: var(--m-orange); } .m-boxes__row:nth-of-type(3) .m-kit__disc svg [fill="#FFFFFF"] { fill: var(--m-lime); } .m-kit .m-btn { width: auto; white-space: normal; padding: 0; font-size: inherit; } .m-kit .m-kit__btn { display: inline-flex; align-items: center; gap: .35rem; width: auto; max-width: 100%; height: auto; min-height: 0; margin-top: .95rem; padding: .15rem 0 .25rem; background: none; box-shadow: none; border: 0; border-radius: 0; border-bottom: 2px solid rgba(246, 109, 0, .4); color: var(--m-green); font-size: .8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; line-height: 1.35; transition: color .2s, border-color .2s; } /* The same ::before wipe was flooding dark green behind this link on hover, with the label turning orange on top of it -- unreadable, and with no padding it looked like a stray highlight rather than a hover state. */ .m-kit .m-kit__btn::before { display: none; } .m-kit .m-kit__btn:hover, .m-kit .m-kit__btn:focus-visible { color: var(--m-orange); border-bottom-color: var(--m-orange); } .m-kit .m-kit__btn:hover .m-btn__dot, .m-kit .m-kit__btn:focus-visible .m-btn__dot { color: var(--m-orange); } .m-kit .m-kit__btn .m-btn__dot { width: auto; height: auto; min-width: 0; flex: none; background: none; box-shadow: none; color: var(--m-orange); transition: transform .2s; } .m-kit .m-kit__btn:hover .m-btn__dot { transform: translateX(3px); } .m-kit .m-kit__btn .m-btn__icon { width: .85rem; height: .85rem; } /* 15. The backpack slide: scrim, and everything on the left. THE LAYOUT. The stat card sat in the right-hand column, over the boy's shoulder, with empty space above the copy on the left -- awkward in both places at once. The slide drops to a single column: partner, headline, copy, then the figure beneath them, the whole block centred. The right two thirds of the frame are left to the photograph. Measured after: content ends at x585 of 1425, so nothing crosses him. THE SCRIM. The theme's scrim holds .78 until 42% of the width and .35 to the end, which on this photograph sat over the boy for its whole length -- he is the right two thirds of the frame. It falls away faster here: full strength under the copy, almost nothing by the time it reaches him. The photograph was cropped before upload rather than positioned here. The slide is wider in aspect than the file, so the browser scales to WIDTH and object-position has no horizontal effect at all; his face sat at x912-1069, under the stat card at x992. Cropped in from the left it lands at 783-979. */ .m-impact__slide:nth-of-type(3)::before { background: linear-gradient(100deg, rgba(6, 34, 20, .93) 0%, rgba(6, 34, 20, .86) 28%, rgba(6, 34, 20, .55) 44%, rgba(6, 34, 20, .22) 58%, rgba(6, 34, 20, .07) 72%, rgba(6, 34, 20, .02) 100%); } .m-impact__slide:nth-of-type(3) .m-impact__inner { grid-template-columns: minmax(0, 30rem); align-items: center; } .m-impact__slide:nth-of-type(3) .m-impact__story { align-self: auto; } /* The client found the figure small and oddly placed once it moved under the copy, and asked for it enlarged and centred horizontally. It is wider, the number is a third larger, and it is centred within the copy column. Centred within the COLUMN, not the slide: the column sits at x105-585 of 1425 and the boy's face at 783-979, so pulling the block into the middle of the frame would put the copy straight over him -- the thing the whole layout was rearranged to avoid. */ .m-impact__slide:nth-of-type(3) .m-impact__stats { margin-top: 2.1rem; } .m-impact__slide:nth-of-type(3) .m-impact__stats.is-1 { justify-content: center; grid-template-columns: minmax(0, 28rem); } .m-impact__slide:nth-of-type(3) .m-impact__year { text-align: center; } .m-impact__slide:nth-of-type(3) .m-stat { padding: 1.25rem 1.5rem; gap: 1.1rem; } .m-impact__slide:nth-of-type(3) .m-stat__icon { width: 3.25rem; height: 3.25rem; } .m-impact__slide:nth-of-type(3) .m-stat__icon svg { width: 1.6rem; height: 1.6rem; } .m-impact__slide:nth-of-type(3) .m-stat__num { font-size: 2rem; } .m-impact__slide:nth-of-type(3) .m-stat__label { font-size: .875rem; } /* 12b. The play button stops radiating too. "Remove any pulse from around the circles" covers this one: .m-video__pulse is a disc sitting under the play triangle that scales to 1.8 and fades, on a loop, which is the same radiating halo as the journey dot's ring. The play button keeps its solid orange disc and its hover; only the thing expanding out of it goes. With this and the dot gone, m-ping and m-pulse are no longer rendered anywhere on either page. */ .m-video__pulse { display: none; } /* 16. The journey: one wave, one colour. The client pointed at "the circle border that shows when hovering on each box" -- the orange ring that tracks along the line and parks on whichever step you are at. It goes. They also asked why two of the five circles are orange and the other three green, which is a fair question: nothing about steps 04 and 05 makes them different, the theme just tags them .is-orange. All five are green now. In its place the journey animates, and it animates with no ring: nothing radiates out of the circles, because every rippling halo on this page is something the client has now asked twice to be rid of. What travels is the colour. The orange lights each node in turn, 01 through 05, then loops -- so the orange still means "here", it just moves instead of sitting on two arbitrary steps. The colours are tied to the theme's own: #cfdccc is the node's resting grey, and the wave only holds orange for a sixth of its cycle, so each circle spends nearly all of its time the same green as its neighbours. This replaces the m-pop entrance on .is-on, which fired once per node as it scrolled in and would have fought the loop. The overrides are scoped to .is-on exactly as the theme scopes its own, so nothing lights up before the section has been reached. */ .m-journey__dot { display: none; } /* The line was the other arbitrary orange: its fill runs green at 01 and ends full orange at 05, which is what made steps 04 and 05 read as a different kind of step. It stays a gradient -- that is what gives the line its sense of direction -- but it is green end to end now, so the only orange left in the section is the one travelling across the nodes. */ .m-journey__fill { background: linear-gradient(90deg, var(--m-green) 0, #3f8f57 55%, #74b07f 100%); } .m-journey__step.is-orange.is-on .m-journey__art { background: #e6f1e2; } .m-journey__step.is-orange.is-on .m-journey__node { background: var(--m-green); } @keyframes m-journey-travel { 0%, 70%, 100% { background-color: var(--m-green); } 6%, 14% { background-color: var(--m-orange); } } .m-journey__step.is-on .m-journey__node, .m-journey__step.is-orange.is-on .m-journey__node { background: var(--m-green); animation: m-journey-travel 5s var(--m-ease) infinite backwards; } .m-journey__step:nth-child(1).is-on .m-journey__node { animation-delay: 0s; } .m-journey__step:nth-child(2).is-on .m-journey__node { animation-delay: .4s; } .m-journey__step:nth-child(3).is-on .m-journey__node { animation-delay: .8s; } .m-journey__step:nth-child(4).is-on .m-journey__node { animation-delay: 1.2s; } .m-journey__step:nth-child(5).is-on .m-journey__node { animation-delay: 1.6s; } /* The stacked layout colours the nodes without waiting for .is-on, and tags 04 and 05 orange there too. Same two corrections, same breakpoint. */ @media (max-width: 1023px) { .m-journey__step.is-orange .m-journey__node { background: var(--m-green); } .m-journey__step .m-journey__node, .m-journey__step.is-orange .m-journey__node { animation: m-journey-travel 5s var(--m-ease) infinite backwards; } .m-journey__step:nth-child(1) .m-journey__node { animation-delay: 0s; } .m-journey__step:nth-child(2) .m-journey__node { animation-delay: .4s; } .m-journey__step:nth-child(3) .m-journey__node { animation-delay: .8s; } .m-journey__step:nth-child(4) .m-journey__node { animation-delay: 1.2s; } .m-journey__step:nth-child(5) .m-journey__node { animation-delay: 1.6s; } } @media (prefers-reduced-motion: reduce) { .m-journey__step .m-journey__node { animation: none; } } /* 17. Phones: carousels instead of stacks, and Get in Touch in the header. Measured before touching anything: the homepage ran 7,149px at 375, which is 8.8 phone screens, and Feeding Solutions 5,032px. Almost all of it was three lists repeating one card shape -- Who We Serve at 1,568px, the Journey at 2,308px, Meal Boxes at 2,061px. Those three are now swipeable tracks with arrows, dots and an autoplay, which trades vertical scrolling for a horizontal gesture people already know. The track is the section's existing grid with scroll-snap turned on, so nothing is re-parented and the desktop layout is untouched above 768px. The slides keep their own styling; only the flow changes. THE SIDE TAB GOES. .m-tab is fixed over the right of the viewport on every page, and at 375 it was overlapping real controls -- the hero CTA's arrow and the video's cover title both had to be pulled back to clear it. A permanent overlay on a 375px screen is an irritation, so below 768px it is hidden and the same action sits in the header, which is sticky already. */ /* The carousel's own styles are gone with its script -- see site.js. What remains of this section is the side tab and the header button. */ @media (max-width: 767px) { /* Get in Touch: out of the right margin, into the header. */ .m-tab { display: none !important; } /* Solid orange, the same fill the side tab it replaces uses, so it reads as the one thing to press rather than a second outline competing with the hero's. Pressed state goes green rather than lightening, which is the swap the CTA already does. */ .m-nav__contact { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; margin-right: .6rem; padding: .55rem .85rem; border: 1.5px solid var(--m-orange); border-radius: 999px; background: var(--m-orange); color: #fff; font-size: .8375rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(246, 109, 0, .28); } .m-nav__contact svg { width: 1.05rem; height: 1.05rem; } .m-nav__contact:hover, .m-nav__contact:focus-visible { background: var(--m-green); border-color: var(--m-green); color: #fff; box-shadow: none; } /* Under 360px the label would push the hamburger off the bar, so the button becomes the icon alone. */ @media (max-width: 359px) { .m-nav__contact span { display: none; } .m-nav__contact { padding: .5rem; border-radius: 50%; } } } /* Above the breakpoint the header button must never appear: the side tab is the desktop treatment and two entry points would be one too many. */ @media (min-width: 768px) { .m-nav__contact { display: none; } } /* 18. The homepage hero photo, uncropped, and the characters off its face. THE CROP. The frame is sized to cover its window: width is max(100cqw, 120.1cqh), the second term being the width at which a 358/298 box is exactly as tall as its container. At 375 the window was 423x256, so 100cqw won, the frame came out 423x352 -- 96px taller than the window -- and because it is anchored bottom: 0, all 96px came off the TOP. That is the row of faces. Cropping it differently would only choose which heads to lose. The window was simply too short for the picture, so it is the window that changes: the photo is 1375x1144, and at any width the height that shows all of it is width / 1.2019. The photo runs 48px wider than the viewport (the hero bleeds past the container either side), so that height is (100vw + 48px) / 1.2019, which is calc(83.2vw + 40px). Checked against the measured requirement at 320, 375, 414, 430, 540 and 639: exact at every one. Nothing is cropped at any phone width, rather than only at the one I happened to test. Feeding Solutions never had this bug -- .m-hero__photo--curve already drops its frame to a plain 100% x 100% box below 1024px. The homepage hero has the same frame and never got the same treatment. It does now, and object-fit: cover replaces the overflow as the thing that would crop, since the frame's img is object-fit: fill and that is only safe while the frame holds the image's own ratio. It costs about 96px at 375 -- 6.6 phone screens to 6.7, after section 17 took it from 8.8. THE CHARACTERS. The parade was 345x165, which is 82% of the photo's width and 65% of its height, so it sat across the people rather than in front of them. At 60% it is 225x108: 53% and 42%, a band along the bottom with the faces above it clear. Centred, because at a fixed left and right inset it stretched to whatever was left. */ @media (max-width: 639px) { /* Homepage only. The Feeding Solutions photo is a different shape (1535 x 1025) and its hero is already handled by the --curve rules, so giving it this height would only trade its small vertical crop for a bigger horizontal one. */ .m-hero:not(.m-hero--fs) .m-hero__visual { height: calc(83.2vw + 40px); } } /* 18b. The white space under the Feeding Solutions hero copy. .m-hero__copy is reset to 2rem of bottom padding below 1024px, but the Feeding Solutions hero overrides it at .m-hero--fs .m-hero__copy with 7.5rem -- room for the five characters that stand along the bottom of that hero on desktop -- and that selector is one class more specific, so the mobile reset never reached it. 120px of empty page, every phone, since the hero was built. The theme already hit this exact problem one line above and solved it the same way: .m-hero__grid, .m-hero--fs .m-hero__grid. The copy simply got missed. Measured before changing it: the characters sit at 1193-1325 on a 375 screen, which is over the photo, not in the copy's padding. The 120px buys nothing here. */ @media (max-width: 1023px) { .m-hero--fs .m-hero__copy { padding: 2.75rem 0 2rem; } } @media (max-width: 767px) { .m-hero:not(.m-hero--fs) .m-hero__photo .m-hero__frame { position: static; width: 100%; height: 100%; aspect-ratio: auto; } .m-hero:not(.m-hero--fs) .m-hero__photo .m-hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .m-hero__parade { width: 60%; left: 50%; right: auto; transform: translateX(-50%); } } /* 19. Phones: a timeline, an accordion, and a header that actually compacts. Section 17 turned three card lists into carousels. Two of them should not have been. A journey is a SEQUENCE -- showing one of five steps destroys the only thing it is communicating -- and Who We Serve is a tablist feeding a panel, so swiping moved two things at once and the link between them was invisible. The Meal Boxes rows stay carousels: those are parallel choices, which is the one case where swiping is honest. THE JOURNEY becomes a vertical timeline. Same markup, re-laid with grid: the node sits on a line down the left, the title and copy run beside it, and the art drops to a 2.9rem disc on the right so all five steps fit in roughly the height one carousel slide took. 2,308px at 375 originally, 929px as a carousel, about 560px now -- and you can see the whole sequence. WHO WE SERVE becomes an accordion. The markup was already one in all but position: six cards with role="tab" and six panels of which exactly one is not [hidden]. The script moves each panel to sit after the card that controls it; the theme's own tab logic still decides which is open, so nothing about that behaviour is re-implemented. The card turns into a row: disc, label, chevron that flips when it is the open one. */ @media (max-width: 767px) { /* ---- The Journey, as a timeline ---- */ .m-journey__steps { position: relative; display: block; grid-template-columns: none; margin: 0; padding: 0 0 0 .1rem; } /* The line. It stops at the first and last node rather than running the full height, so it reads as joining the steps instead of underlining the section. */ .m-journey__steps::before { content: ""; position: absolute; left: 1.05rem; top: 1.6rem; bottom: 1.6rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--m-green) 0%, #3f8f57 55%, #9fc7ac 100%); } .m-journey__step { position: relative; display: grid; align-items: start; grid-template-columns: 2.2rem 1fr 2.9rem; grid-template-areas: "node title art" "node body art"; column-gap: .85rem; row-gap: .15rem; padding: .65rem 0; text-align: left; } .m-journey__rail { grid-area: node; align-self: start; margin: 0; align-items: flex-start; } .m-journey__step h3 { grid-area: title; margin: 0; font-size: .95rem; } .m-journey__step p { grid-area: body; margin: 0; max-width: none; font-size: .8125rem; line-height: 1.45; } .m-journey__art { grid-area: art; width: 2.9rem; height: 2.9rem; align-self: start; margin-top: .1rem; } .m-journey__art .m-art, .m-journey__art img { width: 66%; } /* The node is the only thing allowed to sit over the line. */ .m-journey__node { width: 2.2rem; height: 2.2rem; font-size: .7rem; box-shadow: 0 0 0 4px #fbfdf9; } .m-journey__line, .m-journey__dot { display: none; } /* Steps arrive with the section rather than one at a time: at this size they are all on screen together, so staggering them just looks slow. */ .m-journey__step .m-journey__art, .m-journey__step h3, .m-journey__step p { opacity: 1; filter: none; transform: none; } /* ---- Who We Serve, as an accordion ---- */ .m-serve__grid.is-accordion { display: flex; flex-direction: column; gap: .5rem; grid-template-columns: none; } /* The row is a grid, not a flex line: the card holds a disc, a decorative dash, a label and a parenthetical note, and in a flex row the dash and the note each took an equal share and squeezed the label to 77px. The dash goes, and the label and note stack in one column beside the disc. */ .m-serve__grid.is-accordion .m-serve__card { display: grid; align-items: center; grid-template-columns: 2.4rem 1fr 1rem; grid-template-areas: "disc label chev" "disc note chev"; grid-template-rows: auto auto; align-content: center; column-gap: .7rem; row-gap: .1rem; width: 100%; min-height: 0; padding: .7rem .85rem; text-align: left; border-radius: 14px; } .m-serve__grid.is-accordion .m-serve__card .m-disc { grid-area: disc; width: 2.4rem; height: 2.4rem; margin: 0; } .m-serve__grid.is-accordion .m-serve__card .m-disc__arc { display: none; } .m-serve__grid.is-accordion .m-serve__dash { display: none; } /* align-content centres the PAIR of rows, align-self centres each item in its own row. Both are needed: most communities have no parenthetical note, so their second row collapses to nothing, and with the label pinned to the bottom of a two-row track it sat low against the disc instead of beside it. */ .m-serve__grid.is-accordion .m-serve__label { grid-area: label; width: auto; margin: 0; font-size: .875rem; line-height: 1.25; text-align: left; align-self: center; } .m-serve__grid.is-accordion .m-serve__note { grid-area: note; width: auto; margin: 0; font-size: .7rem; line-height: 1.3; text-align: left; color: #7b8a80; align-self: center; } /* The chevron is drawn here rather than added to the markup, so the template is untouched and it cannot appear on desktop. */ .m-serve__grid.is-accordion .m-serve__card::after { content: ""; grid-area: chev; align-self: center; width: 1rem; height: 1rem; background: no-repeat center / 1rem 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); transition: transform .25s var(--m-ease); } .m-serve__grid.is-accordion .m-serve__card[aria-selected="true"]::after { transform: rotate(180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f66d00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* The open panel is tucked under its own card: no top corners, no top margin, so the two read as one object rather than two stacked ones. */ .m-serve__grid.is-accordion .m-serve__panel { margin: -.5rem 0 .15rem; padding: .95rem .9rem .9rem; border-radius: 0 0 14px 14px; } .m-serve__grid.is-accordion .m-serve__panel::before { display: none; } .m-serve__grid.is-accordion .m-serve__card[aria-selected="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .m-serve__grid.is-accordion .m-serve__for { margin: 0 0 .55rem; font-size: .9rem; } /* The kits were a stacked column of full-width pills, 338px of panel. Wrapped and at label size they pack two to a line where they fit: 231px, and the list still reads as a list. */ .m-serve__grid.is-accordion .m-serve__chips { flex-direction: row; flex-wrap: wrap; gap: .4rem; } .m-serve__grid.is-accordion .m-serve__chips li { padding: .35rem .6rem .35rem .5rem; font-size: .75rem; gap: .3rem; } .m-serve__grid.is-accordion .m-serve__chips li svg { width: .8rem; height: .8rem; } /* ---- The sticky header ---- */ /* It never compacted on a phone: .m-nav__bar and .is-compact .m-nav__bar were both pinned to 5rem, and the announcement bar stayed at full height the whole way down the page. Between them they held 7.75rem of a 50.75rem screen permanently. Now the announcement slides up out of the way once you are past it and the bar tightens, which gives back about 70px. The script's existing .is-compact class drives it -- it already has the hysteresis to stop the toggle flickering -- and .m-notice already carried a margin transition for exactly this, unused until now. */ .site-header { transition: box-shadow .25s var(--m-ease), background-color .25s var(--m-ease); } .m-notice { transition: margin-top .32s var(--m-ease), opacity .2s linear; } .site-header.is-compact .m-notice { margin-top: calc(-1 * var(--m-notice-h)); opacity: 0; pointer-events: none; } .m-nav__bar, .is-compact .m-nav__bar { transition: height .3s var(--m-ease); } .is-compact .m-nav__bar { height: 4.1rem; } .m-logo--stacked, .is-compact .m-logo--stacked { transition: height .3s var(--m-ease); } .is-compact .m-logo--stacked { height: 2.9rem; } .site-header.is-compact { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.5) blur(10px); backdrop-filter: saturate(1.5) blur(10px); } .is-compact .m-nav__contact { padding: .45rem .75rem; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .m-notice, .m-nav__bar, .m-logo--stacked, .site-header { transition: none; } } /* 20. Two things section 19 left wrong, and one that was wrong before it. THE ACCORDION'S CHEVRON was drawn as .m-serve__card::after, and the theme already uses that pseudo-element: it is the little white diamond that points from the selected card down at the panel, and it is positioned absolutely at left: 50%, bottom: -.6rem. A grid-area on an absolutely positioned box is ignored, so the chevron appeared under the row instead of in it. It is static here, which puts it back in the grid. The selected card also lifts 4px with a drop shadow on desktop, which made it float off the panel it is now joined to. Both off. THE PANEL kept its desktop layout: a flex ROW, heading left, chips right, wrapping only when it runs out of room. At 375 it happened to wrap and look stacked; at 430 and up it did not, and the chips crushed into a column down the right of a half-empty green block. It is an explicit column now, at every width the accordion exists at. THE CASE STUDY SLIDES were wrong before any of this, and section 13 made one of them worse. The theme's mobile scrim is a flat rgba(6,34,20,.8) over the whole slide, which is the "backgrounds vanish on mobile" note in CLAUDE.md: at 80% there is no photograph left to see. Section 13 then gave the Baylor slide a bottom-weighted gradient, which is right on a 16:9 desktop slide and on a 375x1017 one becomes a hard horizontal line with bright photo above it and a solid slab below. So the slide stops pretending to be a photo with text over it. On a phone it is two parts: a 13.5rem band of photograph at the top, lightly scrimmed at its edges so the eyebrow and arrows stay readable, and the story and figures below on solid green. The photograph is visible for the first time on mobile, and the figures sit on a flat ground instead of on packaging. */ @media (max-width: 767px) { .m-serve__grid.is-accordion .m-serve__panel { flex-direction: column; align-items: stretch; gap: .7rem; } .m-serve__grid.is-accordion .m-serve__for { max-width: none; } .m-serve__grid.is-accordion .m-serve__chips { flex: none; } .m-serve__grid.is-accordion .m-serve__card::after { position: static; transform: none; border-radius: 0; background-color: transparent; } .m-serve__grid.is-accordion .m-serve__card[aria-selected="true"]::after { transform: rotate(180deg); } .m-serve__grid.is-accordion .m-serve__card[aria-selected="true"] { transform: none; box-shadow: none; } /* Every selector here is doubled for nth-of-type(2). Section 13 built this same banner for the Baylor slide alone, at a different band height and with its own scrim and padding, and two rule sets describing one layout is how the band and the scrim ended up 56px apart. This is now the only place the mobile banner is defined; section 13 keeps only what is genuinely particular to that photograph, its object-position and its figures. 15rem suits both pictures: the Alaska line of workers and the Baylor table of food both clear it. */ .m-impact__slide, .m-impact__slide:nth-of-type(2) { background: #0d1f15; } .m-impact__bg, .m-impact__slide:nth-of-type(2) .m-impact__bg { inset: 0 0 auto 0; height: 15rem; } .m-impact__bg img { height: 100%; } .m-impact__slide::before, .m-impact__slide:nth-of-type(2)::before { inset: 0 0 auto 0; height: 15rem; background: linear-gradient(to bottom, rgba(6, 34, 20, .52) 0%, rgba(6, 34, 20, .10) 42%, rgba(6, 34, 20, .42) 100%); } .m-impact__inner, .m-impact__slide:nth-of-type(2) .m-impact__inner { padding-top: 16.75rem; padding-bottom: 3rem; } .m-impact__top { top: 1.5rem; } } /* 21. The case study figures, on a phone. Two faults in one screenshot. The slideshow dots are absolutely positioned at bottom: 36px and the content had no room reserved for them, so they sat 6px INSIDE the last row of figures -- measured, not guessed. And the figures were still the white cards the client rejected on desktop in October: "can't we just list these stats along the bottom evenly and cleanly without the stark huge white boxes that are bulky?" Section 13 answered that for the Baylor slide and nowhere else, so slides 1 and 3 kept the boxes. They get the same answer now: no cards, no icon discs, each figure on a hairline, the number large in white and the label small beneath it. The 2024/2025 columns stay side by side, because comparing the two years is the whole point of that slide -- the year is a label over a coloured rule rather than a filled pill, which is what made the pair read as two buttons. The filled pill needs .m-impact__col.is-orange .m-impact__year to undo: the theme sets the fill at that specificity, so a plain .m-impact__year loses and only the orange one kept its block. 5.5rem of bottom padding puts 93px between the last figure and the dots. */ @media (max-width: 767px) { .m-impact__stats, .m-impact__stats.is-2 { gap: 1.1rem; align-items: start; } .m-impact__year { margin: 0 0 .2rem; padding: 0 0 .45rem; background: none; border-radius: 0; border-bottom: 2px solid rgba(255, 255, 255, .22); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-align: left; } .m-impact__col.is-green .m-impact__year, .m-impact__col.is-orange .m-impact__year { background: none; } .m-impact__col.is-green .m-impact__year { border-bottom-color: #4e9d68; } .m-impact__col.is-orange .m-impact__year { border-bottom-color: var(--m-orange); } .m-impact__col dl, .m-impact__slide:nth-of-type(2) .m-impact__col dl { display: block; margin: 0; padding-top: 0; border-top: 0; } .m-stat, .m-impact__slide:nth-of-type(2) .m-stat { display: block; gap: 0; padding: .7rem 0 .75rem; background: none; box-shadow: none; border: 0; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .14); } .m-stat:first-child, .m-impact__slide:nth-of-type(2) .m-stat:first-child { border-top: 0; } .m-stat__icon { display: none; } .m-stat__num, .m-impact__slide:nth-of-type(2) .m-stat__num { display: block; font-size: 1.3rem; line-height: 1.1; color: #fff; } .m-impact__col.is-orange .m-stat__num { color: #ffb37a; } .m-stat__label, .m-impact__slide:nth-of-type(2) .m-stat__label { display: block; margin-top: .15rem; font-size: .72rem; line-height: 1.3; color: rgba(255, 255, 255, .7); } .m-impact__inner, .m-impact__slide:nth-of-type(2) .m-impact__inner { padding-bottom: 5.5rem; } } /* 22. Meal Boxes: no carousel at all. The section is three rows, so a carousel per row meant three sets of arrows and dots stacked down the page, which is what the client saw. Merging them into one track is not the answer either -- that would hide seven of eight kits behind a swipe, and the rows are not arbitrary: each is a category, written in the markup as an

and never shown to anyone. So the kits become a plain list, and the categories become visible. That costs nothing -- the headings are already in the page, read aloud to screen readers and hidden from everyone else -- and it is shorter than the carousels were, because three control bars and the slide padding cost more than the cards that were hidden. 1,248px of carousels against about 930px of list, with every kit on screen and its category above it. These are parallel products with a two-line description. There is nothing to step through and nothing to reveal: a list is the honest shape. */ @media (max-width: 767px) { /* The category headings, out of sr-only and into the page. */ .m-boxes .sr-only { position: static !important; width: auto; height: auto; margin: 1.5rem 0 .6rem; padding: 0; overflow: visible; clip: auto; white-space: normal; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--m-orange); } .m-boxes .m-head + .sr-only { margin-top: 0; } .m-boxes__row { display: flex; flex-direction: column; gap: .6rem; grid-template-columns: none; margin: 0; padding: 0; } /* The card keeps its two columns and just shrinks: the disc from 5.25rem to 2.9rem, beside the title and copy. No grid-template-areas -- the title lives INSIDE .m-kit__body, not as a child of .m-kit, so naming a "title" area places nothing and leaves the disc alone on the first row, which made the card taller than the one it replaced. Default flow puts the disc in column one and the body in column two, which is all it needs. */ .m-kit { grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: .8rem; row-gap: 0; align-items: start; padding: .9rem 1rem 1rem; } .m-kit__disc { width: 2.9rem; height: 2.9rem; } .m-kit__disc .m-art, .m-kit__disc img, .m-kit__disc .mhs-icon { width: 58%; } .m-kit__body { padding-top: 0; } .m-kit__body h3, .m-kit__body h4 { margin: 0 0 .25rem; font-size: .95rem; line-height: 1.25; } .m-kit p { font-size: .8125rem; line-height: 1.45; } } /* The USDA line inside the summer CTA band. ---------------------------------------- The band moved to the top of the homepage on 27 Oct 2026 and the client asked for the USDA compliance line under its button, where the hero already has one. The markup reuses .m-hero__note so one rule paints the seal in both places -- but .m-cta p is (0,1,1) and .m-hero__note is only (0,1,0), so the band's paragraph styling wins on specificity and the note comes out as body copy: 1.125rem type in a 28rem column with 2rem of space under it, no 1.5rem above. This restores the four properties .m-cta p takes over, and nothing else. .m-cta .m-hero__note is (0,2,0), which outranks it. Everything the note needs that .m-cta p does not mention -- the flex row, the gap, the padding, the radius, the mint -- still comes from .m-hero__note itself. */ .m-cta .m-hero__note { max-width: 26rem; margin: 1.5rem 0 0; font-size: .8125rem; line-height: 1.45; } /* --------------------------------------------------------------------------- Closing hero, 29 Oct 2026. The CTA band and the hero trade places on 27 Oct, and the page ended up opening and closing on the same composition: copy left, photograph right, arc on the photograph's inner edge, same title scale. Two bands that look like each other at the top and the bottom read as a loop rather than a finish, and the lower one still read as an opening statement. The band keeps its layout. What changes is its weight, so it closes the page instead of competing with the top of it. Scoped to the homepage hero, which is the only .m-hero that is not the Feeding Solutions one, and only from the point the two sit side by side on a wide screen. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* A shade under the opening band rather than equal to it. The top band sets the page's loudest type; this one answers it. */ .m-hero:not(.m-hero--fs) .m-hero__title { font-size: clamp(2.25rem, 3.5vw, 3.25rem); } /* 36rem is hero height. The closing band carries less copy, so the shorter box keeps it from reading as a second opening. */ .m-hero:not(.m-hero--fs) .m-hero__grid { min-height: 30rem; } } /* --------------------------------------------------------------------------- Closing band, second pass, 29 Oct 2026. Two things the first pass left. The USDA line moved to the opening band on 27 Oct and was taken off this one, which left its button standing on its own in a bare .m-hero__start: display:contents, no panel, so it read as the plain button it had been before the CTA was ever reworked. Feeding Solutions already had the answer, so this borrows it rather than inventing a third treatment: the same peach keyline, radius and padding, holding the button on its own now that the note sits at the top of the page. And the photograph ran to a straight horizontal edge that landed exactly on the footer, 3800px on both, so the page finished on a cut. The frame already clips, so a radius on its lower corners curves it away from the footer in the same language as the arc on its other edge. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { } /* The footer takes the band's light green so the curved corner of the closing photograph has something to curve INTO rather than a white gap. 29 Oct 2026. */ /* #F2F8F0 is the pale path inside .m-hero__ground, the curve that already sits at the foot of the closing band. The footer matches it exactly so the two read as one shape; --m-mint (#EEF5EC) was close but not the same green. 30 Oct 2026. */ .m-footer { background: #F2F8F0; } /* --------------------------------------------------------------------------- Meals-to-You figures, 29 Oct 2026. The white card is painted by .m-impact__slide:nth-of-type(2) .m-impact__stats and belongs to that slide alone. The phone block further up re-sets the figure type white for its no-card treatment, but it re-sets it for slide 2 as well, which still has its card -- so below 768px the labels were white on white and the numbers a pale peach barely off the background. Scoped to that one slide and that one breakpoint. An earlier pass set these colours globally and put dark green figures on the dark slides 1 and 3, which is the opposite mistake. The year is left alone: on this slide it is an orange tag sitting on the card's top edge at top:-.7rem, not a label in the column, and it was only ever unreadable because that same pass took its fill off. --------------------------------------------------------------------------- */ @media (max-width: 767px) { .m-impact__slide:nth-of-type(2) .m-stat__num { color: var(--m-green); } .m-impact__slide:nth-of-type(2) .m-stat__label { color: #5b6b60; } .m-impact__slide:nth-of-type(2) .m-stat { border-top-color: rgba(11, 93, 51, .14); } /* The orange tag is scoped to the wide layout, so on a phone the year was white on the white card. It keeps the tag here instead of the hairline the other two slides use, because this slide has a card to sit on. */ .m-impact__slide:nth-of-type(2) .m-impact__year { display: inline-block; background: var(--m-orange); color: #fff; border-bottom: 0; border-radius: 999px; padding: .18rem .65rem; margin: 0 0 .55rem; } } /* The closing band and the footer are one colour. The photograph curves out of the band, so whatever sits behind that curve is what the eye reads as the join: with a white band under a mint footer the curve cut a white crescent and undid itself. Both are --m-mint now, so the sweep goes photograph into one continuous green. 29 Oct 2026. */ /* The USDA note is mint, which was a panel against the hero's white. The band is mint now so the note had nothing to sit on. White on the homepage only; Feeding Solutions keeps its white band and its mint note. 30 Oct 2026. */ .m-hero:not(.m-hero--fs) .m-hero__start .m-hero__note { background: #fff; }