/* ========================================================================== BOSFL Volunteer CTA — bosfl-volunteer-shortcode.css Public shortcode [bosfl_volunteer] · BEM · CSS custom properties NOTE: This renders inside theme content, so the theme's link and button styles apply. Every visual property on __btn carries !important to stop the theme injecting its own colors, underlines, and padding. ========================================================================== */ .bosfl-vol-shortcode { font-family: var(--bcrm-font, "Roboto", system-ui, sans-serif); background: var(--bcrm-surface, #ffffff); border: 1px solid var(--bcrm-border, #dddce2); border-top: 4px solid var(--bcrm-accent, #3a53a4); border-radius: var(--bcrm-radius, 10px); box-shadow: var( --bcrm-shadow, 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.07) ); padding: 32px; text-align: center; max-width: 640px; margin: 0 auto; color: var(--bcrm-text, #1a1a1a); line-height: 1.6; } /* --- Inner elements --- Scoped under the block for the same reason the buttons are (see below): a bare `.bosfl-vol-shortcode__desc` sits at (0,1,0), and a page or theme rule like `.bosfl-volunteer-page p` sits at (0,1,1) — one class plus an element, which outranks it and collapses the 24px gap above the buttons. Scoping to `.bosfl-vol-shortcode .bosfl-vol-shortcode__desc` lands at (0,2,0); two classes beat one-class-plus-element outright, so no !important is needed. The title is scoped for the same reason even though it is an h2 that today's `p` rule misses — it is one theme rule away from the same problem. */ .bosfl-vol-shortcode .bosfl-vol-shortcode__title { color: var(--bcrm-text, #1a1a1a); font-size: 1.35em; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; } .bosfl-vol-shortcode .bosfl-vol-shortcode__desc { color: var(--bcrm-text-3, #555555); font-size: 1rem; margin: 0 0 24px; } .bosfl-vol-shortcode .bosfl-vol-shortcode__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* --- Buttons --- Themes restyle `a` inside post content, and they often do it on hover with their own !important. Two defences are needed: 1. Every button rule is scoped under `.bosfl-vol-shortcode`. That puts the resting-state rules at (0,2,0) and the state rules at (0,3,0), since a pseudo class counts as another class-level component. The state rules are the ones that matter: a theme's `.entry-content a:hover` is (0,2,1), so it loses to (0,3,0) even when it is also !important — which is not true of an unscoped `.bosfl-vol-shortcode__btn:hover` at (0,2,0). 2. :hover/:focus/:active are listed in the base selector group, so those states match the base block and pick up its structural properties (padding, opacity, font, text-decoration). Listing only the resting state leaves hover free to take an underline from the theme. The state-specific rules below then override colors, and re-assert text-decoration explicitly since that is the property themes most reliably set on a:hover. :focus-visible stays in its own rule on purpose — an unsupported pseudo class invalidates the entire selector list it appears in, which would take the button styling with it on older browsers. */ .bosfl-vol-shortcode .bosfl-vol-shortcode__btn, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn:link, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn:visited, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn:hover, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn:focus, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn:active { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 10px 24px !important; border-radius: 8px !important; font-family: inherit !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: none !important; box-shadow: none !important; opacity: 1 !important; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } .bosfl-vol-shortcode .bosfl-vol-shortcode__btn:focus-visible { outline: 3px solid var(--bcrm-accent, #3a53a4) !important; outline-offset: 2px !important; } .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--primary, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--primary:link, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--primary:visited { background: var(--bcrm-accent, #3a53a4) !important; color: #ffffff !important; border: 1px solid var(--bcrm-accent, #3a53a4) !important; } .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--primary:hover, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--primary:focus, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--primary:active { background: var(--bcrm-accent-dark, #2d4293) !important; color: #ffffff !important; border-color: var(--bcrm-accent-dark, #2d4293) !important; text-decoration: none !important; } .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--secondary, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--secondary:link, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--secondary:visited { background: var(--bcrm-surface, #ffffff) !important; color: var(--bcrm-accent, #3a53a4) !important; border: 1px solid var(--bcrm-accent, #3a53a4) !important; } .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--secondary:hover, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--secondary:focus, .bosfl-vol-shortcode .bosfl-vol-shortcode__btn--secondary:active { background: var(--bcrm-accent-light, #edf0f8) !important; color: var(--bcrm-accent-dark, #2d4293) !important; border-color: var(--bcrm-accent-dark, #2d4293) !important; text-decoration: none !important; } /* Breakpoint matches bosfl-signup.css so both public shortcodes stack together. */ @media (max-width: 520px) { .bosfl-vol-shortcode { padding: 24px 20px; } .bosfl-vol-shortcode .bosfl-vol-shortcode__buttons { flex-direction: column; } .bosfl-vol-shortcode .bosfl-vol-shortcode__btn { width: 100% !important; } }