/** * Solutions List block — front-end and editor styles. * * Retuned to match the legacy "Fully Integrated Business Support Services" * section, which is built from core blocks + `.wp-block-button.is-style-arrow`. * Every value below is taken from the computed styles of that section so the * two widgets render identically. * * core-blue eyebrow * secondary-blue heading / item titles / row text * tertiary-blue-light row background (#eef5f8) * tertiary-blue hairline dividers (#aacdde) * red-accent button */ .hart-solutions-list { /* Card — legacy card is rgba(171,205,222,.18) @ 20px radius, 50px padding */ --hart-solutions-radius: 20px; --hart-solutions-card-bg: rgba( 171, 205, 222, 0.18 ); --hart-solutions-card-pad: 50px; --hart-solutions-eyebrow: var( --wp--preset--color--core-blue, #2a769d ); --hart-solutions-ink: var( --wp--preset--color--secondary-blue, #132638 ); --hart-solutions-surface: var( --wp--preset--color--tertiary-blue-light, #eef5f8 ); --hart-solutions-rule: var( --wp--preset--color--tertiary-blue, #aacdde ); --hart-solutions-accent: var( --wp--preset--color--red-accent, #e01410 ); /* Legacy body copy colour (theme colour) */ --hart-solutions-body-ink: #111111; /* Legacy vertical rhythm = --wp--style--block-gap */ --hart-solutions-gap: 1.2rem; } .hart-solutions-list *, .hart-solutions-list *::before, .hart-solutions-list *::after { box-sizing: border-box; } .hart-solutions-list__card { background-color: var( --hart-solutions-card-bg ); border-radius: var( --hart-solutions-radius ); padding: var( --hart-solutions-card-pad ); } /* Header ------------------------------------------------------------- */ /* Legacy: h4.is-style-text-subheading — 16px / .125rem tracking / lh 18px */ .hart-solutions-list__eyebrow { margin: 0; color: var( --hart-solutions-eyebrow ); font-size: 1rem; font-weight: 700; letter-spacing: 0.125rem; text-transform: uppercase; line-height: 1.125; } /* Legacy: h2 — 36px / lh 1.125, sits in an 80% column */ .hart-solutions-list__heading { margin: var( --hart-solutions-gap ) 0 0; color: var( --hart-solutions-ink ); font-size: 2.25rem; font-weight: 700; line-height: 1.125; max-width: 80%; } /* Legacy: 80% / 20% columns, vertically aligned bottom, 50px gutter */ .hart-solutions-list__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; flex-wrap: wrap; margin: var( --hart-solutions-gap ) 0 0; } /* Legacy: inherits body type — 19.07px / 300 / lh 26.4px / -.1px / #111 */ .hart-solutions-list__description { margin: 0; flex: 1 1 60%; max-width: 80%; color: var( --hart-solutions-body-ink ); font-size: inherit; font-weight: 300; line-height: inherit; letter-spacing: inherit; } /* Legacy: is-style-outline + has-small-font-size — 14px / 2px / .25rem 1rem */ .hart-solutions-list__button { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: .25rem 1rem; border: 2px solid var( --hart-solutions-accent ); border-radius: 9999px; color: var( --hart-solutions-accent ); background-color: transparent; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.125rem; line-height: 26.4px; text-transform: uppercase; text-decoration: none; transition: filter .3s ease; } .hart-solutions-list__button:hover, .hart-solutions-list__button:focus-visible { filter: brightness( 75% ); background-color: transparent; color: var( --hart-solutions-accent ); } /* Items -------------------------------------------------------------- */ /* Legacy: .wp-block-buttons.is-vertical — flex column, 16px gap */ .hart-solutions-list__items { margin: var( --hart-solutions-gap ) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } /* The divider lives on the link in the legacy markup, not on the row */ .hart-solutions-list__item { margin: 0; border-bottom: 0; } /* Legacy: .is-style-arrow .wp-element-button */ .hart-solutions-list__link { display: flex; align-items: center; justify-content: center; gap: 0; padding: 1.25rem 1.5rem 1.125rem; color: var( --hart-solutions-ink ); background-color: var( --hart-solutions-surface ); border-radius: 0; border-bottom: 1px solid var( --hart-solutions-rule ); text-align: left; text-decoration: none; transition: filter .3s ease; } a.hart-solutions-list__link:hover, a.hart-solutions-list__link:focus-visible { color: var( --hart-solutions-ink ); filter: brightness( 75% ); } /* Legacy: intrinsic size (38x40), 1rem right margin, no forced box */ .hart-solutions-list__icon { flex: 0 0 auto; width: auto; height: auto; max-width: 100%; margin-right: 1rem; object-fit: contain; } .hart-solutions-list__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } /* Legacy: clamp(.825rem, .825rem + 1.25vw, 1.5rem) / 500 / letter-spacing normal. line-height is deliberately left to inherit (26.4px), as in the legacy row. */ .hart-solutions-list__title { font-size: clamp( .825rem, .825rem + 1.25vw, 1.5rem ); font-weight: 500; letter-spacing: normal; } /* Extra line — matches the legacy section description type */ .hart-solutions-list__item-description { color: var( --hart-solutions-body-ink ); font-size: inherit; font-weight: 300; line-height: inherit; letter-spacing: inherit; opacity: 1; } /* Legacy: :after — 20x20 box, art is an 18x15 filled arrow, background-size:contain, pushed right with margin-left:auto and nudged .325rem down. */ .hart-solutions-list__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: auto; margin-top: .325rem; color: currentColor; } /* The arrow SVG in render.php uses viewBox="0 0 18 15" with fill:currentColor. width:20px / height:auto reproduces the legacy background-size:contain result. */ .hart-solutions-list__arrow svg { display: block; width: 20px; height: auto; } /* Editor placeholder -------------------------------------------------- */ .hart-solutions-list--editor-empty { padding: 24px; border: 1px dashed var( --wp--preset--color--soft-gray, #c4c4c4 ); border-radius: 8px; } .hart-solutions-list__editor-status { margin: 0; color: var( --wp--preset--color--secondary-blue, #132638 ); font-size: 0.9375rem; } /* Small screens ------------------------------------------------------- */ /* Legacy icon breakpoint */ @media ( max-width: 767px ) { .hart-solutions-list__icon { max-width: 30px; height: auto; } } @media ( max-width: 600px ) { .hart-solutions-list { --hart-solutions-card-pad: 24px; } .hart-solutions-list__heading, .hart-solutions-list__description { max-width: none; } .hart-solutions-list__intro { align-items: flex-start; gap: 24px; } .hart-solutions-list__button { width: 100%; margin-left: 0; } .hart-solutions-list__link { align-items: flex-start; padding: 1rem 1rem .875rem; } .hart-solutions-list__icon { margin-right: 14px; } }