, which is a flex item of (body is display:flex; flex-direction:column — see main.css). A flex item with auto side-margins switches from the default stretch-to-fill sizing to shrink-to-fit content sizing — on a page this content-dense that lets any one unbreakable-width descendant drag the whole box wider than the viewport instead of the intended max-width cap. The explicit width:100% below keeps it pinned to the available space regardless; margin:auto then only matters once that 100% is wider than max-width. */ width: 100%; max-width: var(--container-width-wide); margin: 24px auto 70px; } /* The rounded card around intro/steps/support/promise — families (further down) sits outside it, back on the page's plain white, so its background stops here rather than running the full page. */ .hiw__panel { padding-bottom: 40px; border-radius: 28px; background: linear-gradient(180deg, #fdf1ef 0%, #fdf8f6 34%, #fdf8f6 100%); overflow: hidden; } /* The panel already carries the page's outer gutter, so the sections inside only need their own horizontal padding. Scoped to .hiw generally (not just .hiw__panel) — families outside the panel still uses the same gutter. */ .hiw .container { max-width: none; padding: 0 var(--hiw-gutter); } /* ── Shared: line — heart — line rule ────────────────────────────────────── */ .hiw-rule { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--hiw-rose-soft); } .hiw-rule__line { width: 110px; max-width: 22vw; height: 1px; background: var(--hiw-line); } /* ── Intro hero ──────────────────────────────────────────────────────────── */ /* Flush to the panel's top edge — the photo bleeds into its rounded corner rather than sitting inside a second inset card. */ .hiw-intro { padding: 0; } .hiw-intro .container { padding: 0; } .hiw-intro__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: stretch; min-height: 420px; background: linear-gradient(120deg, #fdeeec 0%, #fdf3f1 45%, #fbe9e6 100%); } .hiw-intro__card--text-only { grid-template-columns: minmax(0, 1fr); text-align: center; } .hiw-intro__content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 60px 20px 60px 60px; } .hiw-intro__card--text-only .hiw-intro__content { align-items: center; padding: 60px 40px; } .hiw-intro__title { margin: 0; font-weight: 300; } .hiw-intro__title-main, .hiw-intro__title-accent { display: block; font-size: 42px; line-height: 52px; letter-spacing: 0.02em; text-transform: uppercase; } .hiw-intro__title-main { color: var(--hiw-heading); } .hiw-intro__title-accent { color: var(--hiw-rose); } .hiw-intro .hiw-rule { justify-content: flex-start; margin: 4px 0 6px; } .hiw-intro__card--text-only .hiw-rule { justify-content: center; } .hiw-intro__subtitle { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hiw-green); } .hiw-intro__text { max-width: 540px; font-size: 15px; line-height: 26px; color: var(--hiw-text); } .hiw-intro__text p { margin: 0 0 10px; } .hiw-intro__text p:last-child { margin-bottom: 0; } .hiw-intro__tagline { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; font-family: var(--font-accent); font-size: 24px; line-height: 34px; color: var(--hiw-green); } .hiw-intro__tagline-heart { color: var(--hiw-rose-soft); } /* Contact icons and the "Meet Our Kittens" button share one row — the button sits at the same level as the icons instead of up on its own line with the tagline. */ .hiw-intro__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 14px; } .hiw-intro__btn { flex-shrink: 0; height: 46px; padding: 0 26px; background: var(--hiw-green); border: none; font-size: 14px; } .hiw-intro__btn:hover { background: var(--hiw-heading); } /* ── Contact icons ────────────────────────────────────────────────────────── */ .hiw-intro__contacts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .hiw-intro__contacts a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hiw-rose-pale); color: var(--hiw-rose); transition: background var(--transition), color var(--transition); } .hiw-intro__contacts a:hover { background: var(--hiw-rose); color: #ffffff; } /* The photo fills whatever height the copy sets rather than driving it — pinned so a portrait upload can't stretch the card to its own aspect. The upload has the subject's face starting well below the top of the frame, so object-position: center top crops it off entirely once the band goes short and wide (tablet/mobile, where height is capped well under its width) — anchoring at 20% down keeps the face+cat in frame at every ratio this band renders at. */ .hiw-intro__media { position: relative; } .hiw-intro__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } /* ── Steps ───────────────────────────────────────────────────────────────── */ .hiw-steps { padding: 46px 0 0; } .hiw-steps__list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; } .hiw-steps__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 22px; border: 1px solid var(--hiw-line); border-radius: 18px; background: var(--hiw-card); box-shadow: 0 2px 10px rgba(196, 115, 127, 0.06); } /* Number and icon share the card's top row */ .hiw-steps__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .hiw-steps__number { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hiw-rose-soft); color: #ffffff; font-size: 16px; font-weight: 700; } .hiw-steps__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hiw-rose-pale); color: var(--hiw-rose); } .hiw-steps__title { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; color: var(--hiw-heading); } .hiw-steps__image { display: block; width: 100%; height: 118px; border-radius: 12px; object-fit: cover; } .hiw-steps__checklist { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; } .hiw-steps__checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--hiw-text); } .hiw-steps__check { flex-shrink: 0; margin-top: 1px; } /* Per-step extras (CTA button, social icons) — optional, admin-set per row rather than tied to a position, so either can land on any step. Pushed to the bottom via margin-top:auto so it lines up across cards of uneven checklist length. */ .hiw-steps__btn { margin-top: auto; height: 40px; padding: 0 22px; background: var(--hiw-green); border: none; font-size: 13px; } .hiw-steps__btn:hover { background: var(--hiw-heading); } .hiw-steps__socials { display: flex; gap: 8px; margin-top: auto; padding: 0; list-style: none; } .hiw-steps__socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hiw-rose-pale); color: var(--hiw-rose); transition: background var(--transition), color var(--transition); } .hiw-steps__socials a:hover { background: var(--hiw-rose); color: #ffffff; } /* Dashed connector between two cards, vertically centred against them */ .hiw-steps__divider { position: relative; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; align-self: center; color: var(--hiw-rose-soft); } .hiw-steps__divider::before, .hiw-steps__divider::after { content: ''; position: absolute; top: 50%; width: 11px; border-top: 1px dashed var(--hiw-rose-soft); } .hiw-steps__divider::before { left: 0; } .hiw-steps__divider::after { right: 0; } /* ── Support row ─────────────────────────────────────────────────────────── */ .hiw-support { padding: 20px 0 0; } .hiw-support__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .hiw-support__card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--hiw-line); border-radius: 18px; background: var(--hiw-cream); } .hiw-support__image { flex-shrink: 0; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; } .hiw-support__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: #ffffff; color: var(--hiw-rose); box-shadow: 0 2px 10px rgba(196, 115, 127, 0.08); } .hiw-support__body { min-width: 0; } .hiw-support__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hiw-heading); } .hiw-support__title-heart { flex-shrink: 0; color: var(--hiw-rose-soft); } .hiw-support__checklist { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; } .hiw-support__checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--hiw-text); } .hiw-support__check { flex-shrink: 0; margin-top: 1px; } /* ── Promise band ────────────────────────────────────────────────────────── */ .hiw-promise { padding: 16px 0 0; } .hiw-promise__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 120px; padding: 18px 40px; border-radius: 18px; background: var(--color-green-100); } .hiw-promise__crown { flex-shrink: 0; color: #ffffff; } .hiw-promise__content { flex: 1; min-width: 0; text-align: center; } .hiw-promise__title { margin: 0 0 6px; font-size: 26px; line-height: 34px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: #ffffff; } .hiw-promise__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--hiw-heading); } .hiw-promise__tagline { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; font-family: var(--font-accent); font-size: 22px; line-height: 32px; color: #ffffff; } .hiw-promise__tagline-heart { color: var(--hiw-rose-soft); } .hiw-promise__image { flex-shrink: 0; width: 150px; height: 96px; border-radius: 12px; object-fit: cover; } /* ── Happy families strip ─────────────────────────────────────────────────── */ /* Shared global section (pages/global/families.php, styled in main.css) — only the top spacing is page-specific: it sits on the page's plain white below .hiw__panel's pink card, and that gap is what separates the two. */ .hiw .families { padding-top: 90px; } /* ── Tablet ──────────────────────────────────────────────────────────────── */ @media (max-width: 1200px) { /* Five cards plus their connectors stop fitting across — the row wraps into a grid instead, which leaves the connectors nothing to join. */ .hiw-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hiw-steps__divider { display: none; } /* 3 columns instead of 5 makes each card noticeably wider — the fixed 118px height (sized for the narrower 5-up row) cropped it down to a sliver at that width, so this scales with it instead. */ .hiw-steps__image { height: auto; aspect-ratio: 3 / 2; } } @media (max-width: 1024px) { .hiw { --hiw-gutter: 24px; margin: 0 auto 50px; border-radius: 0; } .hiw .container { padding: 0 var(--hiw-gutter); } .hiw-intro__card { grid-template-columns: minmax(0, 1fr); } .hiw-intro__content { align-items: center; text-align: center; padding: 44px 24px 36px; } .hiw-intro .hiw-rule { justify-content: center; } .hiw-intro__title-main, .hiw-intro__title-accent { font-size: 32px; line-height: 40px; } /* Stacked: the photo is back in flow, so it needs a height of its own — aspect-ratio instead of a fixed px value, so the crop stays the same whether the card ends up nearer 1024px or nearer 768px wide. */ .hiw-intro__card { min-height: 0; } .hiw-intro__media { order: -1; height: auto; aspect-ratio: 16 / 9; } /* The content column is centered here — a space-between row would pin the button to one edge against centered text either side of it */ .hiw-intro__row { flex-direction: column; justify-content: center; } .hiw-intro__contacts { justify-content: center; } .hiw-support__grid { grid-template-columns: minmax(0, 1fr); } .hiw-promise__inner { flex-direction: column; gap: 14px; padding: 26px 24px; text-align: center; } .hiw-promise__image { width: 100%; max-width: 260px; height: auto; aspect-ratio: 4 / 3; } .hiw .families { padding-top: 64px; } } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .hiw { --hiw-gutter: 16px; padding-bottom: 28px; } .hiw .container { padding: 0 var(--hiw-gutter); } /* Single column here is the widest this card's photo ever gets relative to its own height — a flatter ratio than the tablet one above keeps it from ballooning past what a supporting photo should be. */ .hiw-intro__media { aspect-ratio: 4 / 3; } .hiw-intro__content { padding: 32px 16px 28px; gap: 12px; } .hiw-intro__title-main, .hiw-intro__title-accent { font-size: 25px; line-height: 32px; } .hiw-intro__subtitle { font-size: 13px; } .hiw-intro__tagline { font-size: 20px; line-height: 28px; } .hiw-rule__line { width: 60px; } .hiw-steps { padding-top: 30px; } .hiw-steps__list { grid-template-columns: minmax(0, 1fr); } /* Full-width single column is wider than any tablet 3-up card — the old fixed 150px cropped it down to little more than a strip. */ .hiw-steps__image { height: auto; aspect-ratio: 2 / 1; } .hiw-support__card { flex-direction: column; align-items: flex-start; } /* Fixed square, not the full-width banner other stacked cards use — a circle needs equal width/height or it renders as an oval. */ .hiw-support__image { width: 90px; height: 90px; } .hiw-support__title { justify-content: flex-start; } .hiw-promise__title { font-size: 21px; line-height: 28px; } .hiw-promise__tagline { font-size: 19px; line-height: 27px; } .hiw .families { padding-top: 48px; } }