/** * The "What's Included" card at the top of a service page. * * ClickUp 86bbm3q5a — Christy's note, through Jess: the service pages are * text-heavy and a visitor cannot tell what a package actually contains without * reading ~1,200 words. Her own ad graphic answers it in about eight seconds: * short name, one line, ticked inclusions. This is that, in the site's own * design language. * * Every value below is one of the client's existing custom properties. Nothing * introduces a new colour, radius, font or spacing step, so the card reads as * part of the site rather than as something bolted on — and if the client's * palette changes in Webflow's stylesheet, this follows it. * * Loaded per page from the ported , not site-wide, because it is on ONE * page pending Christy's sign-off on the direction. When it rolls out to the * other twelve, move the into the shared head rather than pasting it * twelve more times. */ .rs-inclusions { /** * `width` is not cosmetic here. The card lives inside the page's content * column, whose ancestor `.base-container` is `display:flex` with * `align-items:center` — so a plain block child gets CENTRED at its content * width and sits 200px right of the copy beneath it. Stretching it is what * lines its left edge up with the H2 below. */ width: 100%; align-self: stretch; background-color: var(--colors--primary-50); border: 1px solid var(--colors--primary-100); border-radius: var(--styling--radius); padding: 28px 30px; margin-bottom: 40px; } .rs-inclusions__title { font-family: var(--typography--header-font); font-size: var(--typography--h3); font-weight: var(--typography--header-weight); line-height: var(--typography--header-line-h); color: var(--colors--primary-950); letter-spacing: -0.5px; margin: 0 0 6px; } .rs-inclusions__lede { font-family: var(--typography--body-font); font-size: var(--typography--small); line-height: var(--typography--body-line-h); color: var(--colors--text-black); margin: 0 0 18px; } /** * Two columns on desktop, matching the ad graphic's layout, collapsing to one * on narrow screens. `auto-fit` rather than a fixed count so a service with an * odd number of inclusions does not leave a hole. */ .rs-inclusions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 28px; row-gap: 12px; } .rs-inclusions__item { font-family: var(--typography--body-font); font-size: var(--typography--body); line-height: var(--typography--body-line-h); font-weight: var(--typography--body-weight); color: var(--colors--black); display: flex; align-items: flex-start; gap: 10px; } /** * The tick is drawn, not an image file: it scales with the text, takes its * colour from the client's own accent green, and costs no extra request. The * SVG is inline in the markup so it inherits `currentColor`. */ .rs-inclusions__tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; color: var(--colors--accent-green); } .rs-inclusions__cta { margin-top: 24px; } /** * `.custom-btn` is the client's own button and carries its own hover fill via * IX2; it is reused verbatim rather than restyled. This only stops the flex * parent stretching it to full width. */ .rs-inclusions__cta .custom-btn { display: inline-flex; } @media screen and (max-width: 767px) { .rs-inclusions { padding: 22px 20px; margin-bottom: 32px; } .rs-inclusions__item { font-size: var(--typography--small); } }