/* * Age Care Bathrooms Room Colour Planner: the card, the repeat button and the full screen overlay. * * Everything is scoped to .acb-planner-* so nothing here can affect the rest of the page, and so * the theme's own styling for a, p, button and img cannot reshape any of it. * * Type sizes are all 1rem or above on purpose. Our customers are 55+, so nothing here shrinks * text for the sake of density. */ .acb-planner-embed, .acb-planner-embed *, .acb-planner-overlay, .acb-planner-overlay *, .acb-planner-inline, .acb-planner-inline * { box-sizing: border-box; } .acb-planner-embed, .acb-planner-overlay, .acb-planner-inline { font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.55; } /* ---- the card ---- */ .acb-planner-embed { margin: 0 0 1.5rem; } .acb-planner-card { display: flex; align-items: stretch; gap: 0; text-decoration: none; color: #31404F; background: #fff; border: 2px solid #D7DEE5; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 23, 42, .07); } .acb-planner-card:hover, .acb-planner-card:focus-visible { border-color: #046BD2; box-shadow: 0 6px 18px rgba(4, 107, 210, .18); text-decoration: none; } .acb-planner-card:focus-visible { outline: 3px solid #046BD2; outline-offset: 3px; } .acb-planner-card-media { flex: 0 0 42%; position: relative; min-height: 220px; background: #046BD2; /* shows through if the photo is missing, so it still looks deliberate */ } .acb-planner-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; max-width: none; } .acb-planner-card--nomedia .acb-planner-card-media { display: none; } .acb-planner-card-body { flex: 1 1 auto; display: block; padding: 1.6rem 1.8rem; } .acb-planner-card-title { display: block; font-size: 1.6rem; font-weight: 700; color: #1B2B3A; line-height: 1.2; margin: 0 0 .6rem; } .acb-planner-card-text { display: block; font-size: 1.0625rem; margin: 0 0 1.2rem; color: #31404F; } .acb-planner-card-note { display: block; font-size: 1rem; color: #5A6B7B; margin: .7rem 0 0; } /* ---- the button, used on the card, on its own, and in the fallback ---- */ /* #4790CD is Owen's call. It is lighter than the #046BD2 it replaces, and white on it measures 3.42:1 where the old blue was 5.20:1. That is below the 4.5:1 WCAG AA needs for normal text, so the type is 1.25rem at weight 700 rather than 1.125rem at 600. At 20px bold this counts as large text, where the threshold is 3:1, so it passes on that basis instead. Do not shrink it back or lighten the weight without either darkening the fill or switching to dark text. Larger and bolder suits our 55+ customers anyway. font-family: inherit matters because this class is used on a