/*
Theme Name: Bluescope Child
Theme URI: http://demo.goodlayers.com/infinite
Description: Bluescope Child Theme
Author: Bluescope Technologies
Author URI: https://scope.ie
Template: infinite
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, right-sidebar, responsive-layout
Text Domain: infinite-child
*/
/*------------ Footer ------------*/
.infinite-footer-wrapper .widget {
margin-bottom: 0px;
}
/* Footer 'Get Urgent Help' button — locked styling on every page (including
pillar pages), matched to the header 'Get Urgent Help' button: yellow
(#f3b94b) fill with a #222 hover. The 1px #222 border gives the button
sufficient contrast against any background — including the yellow
Learn-Connect-Contribute pillar footer, where the fill and the footer both
sit at #f3b94b — so it doesn't need to adapt per pillar. Background, text,
border and hover/focus are all locked here so the pillar text/border
cascade can't strip them. */
.infinite-footer-wrapper .wp-block-button .wp-block-button__link {
background-color: var(--cclm-yellow) !important;
color: #222 !important;
border-color: #222 !important;
}
.infinite-footer-wrapper .wp-block-button .wp-block-button__link:hover,
.infinite-footer-wrapper .wp-block-button .wp-block-button__link:focus {
background-color: #222 !important;
color: #fff !important;
border-color: #222 !important;
}
/*------- Footer In-Paragraph Links -------*/
/*
* Email and phone links inside footer paragraphs, i.e. the three Contact Us
* widgets in Footer 3 (block-15, block-21, block-22). They sit mid-sentence
* after "Email:" and "Phone:", so they have to be distinguishable from the
* surrounding text as well as legible against the footer background.
*
* Colour is deliberately left to the cascade, so links keep the footer
* foreground: #222 on the default blue footer and on the blue, green and
* yellow pillars, #000 on the pink Mind Your Wellbeing pillar. Those pairings
* already clear WCAG AA on every footer background (8.63:1 blue, 6.59:1 green,
* 8.98:1 yellow, 4.65:1 pink).
*
* Recolouring the link instead cannot work on this palette. WCAG 1.4.1 wants
* at least 3:1 between link and surrounding text where colour is the only cue,
* and 1.4.3 wants at least 4.5:1 against the background. Against #222 body
* text on a pastel background the two thresholds are mutually exclusive: any
* colour light enough to reach 3:1 against #222 is too light to hold 4.5:1
* against #71CCDE, #6CB951, #F3B94B or #E60F6D. The theme's footer link hover
* (#6e3782, Appearance > Theme Options) shows the squeeze: 4.50:1 on blue and
* 4.68:1 on yellow, but 3.43:1 on green and 1.84:1 on pink, and only 1.92:1
* against the #222 text it is meant to stand out from.
*
* The underline is therefore the distinguishing cue. It carries no contrast
* requirement of its own, works identically on all five footer backgrounds,
* and needs no per-pillar rules.
*
* The selector matches links inside a footer only, so the nav menu in
* Footer 2 (
anchors) and the Get Urgent Help button in Footer 1
* (.wp-block-button) are untouched. Its (0,1,2) specificity beats the theme's
* .infinite-footer-wrapper a and a:hover from gdlr-style-custom.css, so no
* !important is needed.
*/
.infinite-footer-wrapper p a {
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
/* Hover and focus thicken the underline instead of changing colour. A colour
change would have to pass 4.5:1 on all five footer backgrounds, which the
purple does not; underline weight is background independent. Colour is
pinned to inherit so the theme's #6e3782 hover does not apply on non-pillar
pages, where it would be the only footer showing a colour shift (the pillar
rules further down already override it with !important). */
.infinite-footer-wrapper p a:hover,
.infinite-footer-wrapper p a:focus {
color: inherit;
text-decoration-thickness: 3px;
}
/* Keyboard focus ring. currentColor is the footer foreground, so the ring
inherits the same AA-passing contrast as the text on every background. */
.infinite-footer-wrapper p a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/*----- Footer In-Paragraph Links End -----*/
/*---------- Footer Wave ----------*/
.infinite-footer-wrapper {
position: relative;
overflow: visible !important;
}
/* Wave SVG uses mask-image + background-color so it can be recoloured via
--cclm-footer-wave-color. The default (#71CCDE) is the global site blue;
pillar pages set the variable to their own colour (see Pillar Color Schemes). */
.infinite-footer-wrapper::before {
content: '';
position: absolute;
top: -49px;
left: 0;
width: 100%;
height: 50px;
background-color: var(--cclm-footer-wave-color, var(--cclm-blue));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C160,0 320,42 480,22 C640,2 800,40 960,20 C1120,0 1280,42 1440,25 L1440,50 L0,50 Z' fill='black'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C160,0 320,42 480,22 C640,2 800,40 960,20 C1120,0 1280,42 1440,25 L1440,50 L0,50 Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
z-index: 2;
pointer-events: none;
}
@media only screen and (max-width: 767px) {
.infinite-footer-wrapper::before {
height: 30px;
top: -29px;
}
}
/*-------- Footer Wave End --------*/
/*---------- Footer Icons ----------*/
#cclm-footer-icons {
position: absolute;
bottom: 0;
right: 20px;
opacity: 0.7;
pointer-events: none;
z-index: 1;
}
#cclm-footer-icons img {
display: block;
max-height: 100px;
width: auto;
}
@media only screen and (max-width: 767px) {
#cclm-footer-icons {
position: relative;
right: auto;
text-align: center;
padding: 15px 0 10px;
}
#cclm-footer-icons img {
margin: 0 auto;
max-height: 80px;
}
}
/*-------- Footer Icons End --------*/
/*---------- Footer End ----------*/
/*---------- Forminator ----------*/
button.forminator-button.forminator-button-submit {
border-radius: 10px !important;
}
/*-------- Forminator End --------*/
/*---------- Header 'Get Urgent Help' Button ----------*/
/* Matches the footer 'Get Urgent Help' button: yellow (#f3b94b) fill with a
#222 hover. The yellow fill is set in the Infinite theme options (Main Menu
Right Button); we lock the text colour and override the hover/focus state
here (replacing the theme's pink #e60f6d) so the two buttons read
identically. The speech-bubble tail below is recoloured to match. */
.infinite-body .infinite-main-menu-right-button {
color: #222 !important;
}
.infinite-body .infinite-main-menu-right-button:hover,
.infinite-body .infinite-main-menu-right-button:focus {
background-color: #222 !important;
color: #fff !important;
}
/*-------- Header 'Get Urgent Help' Button End --------*/
/*---------- Speech Bubble Button ----------*/
.infinite-main-menu-right-button {
position: relative;
overflow: visible !important;
transition: transform 0.3s ease;
}
.infinite-main-menu-right-button:hover {
transform: translateY(-1px);
}
/* Large tail bubble */
.infinite-main-menu-right-button::before {
content: '';
position: absolute;
bottom: -8px;
right: 8px;
width: 11px;
height: 11px;
background-color: var(--cclm-yellow);
border-radius: 50%;
z-index: -1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Medium + small tail bubbles (small via box-shadow) */
.infinite-main-menu-right-button::after {
content: '';
position: absolute;
bottom: -14px;
right: -2px;
width: 7px;
height: 7px;
background-color: var(--cclm-yellow);
border-radius: 50%;
z-index: -1;
box-shadow:
5px 6px 0 -2px var(--cclm-yellow),
0 1px 2px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover: match button colour */
.infinite-main-menu-right-button:hover::before {
background-color: #222;
}
.infinite-main-menu-right-button:hover::after {
background-color: #222;
box-shadow:
5px 6px 0 -2px #222,
0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Hover: talking animation */
.infinite-main-menu-right-button:hover::before {
animation: speechBubble1 1s ease-in-out infinite;
}
.infinite-main-menu-right-button:hover::after {
animation: speechBubble2 1s ease-in-out infinite 0.2s;
}
@keyframes speechBubble1 {
0%, 100% { transform: scale(1) translateY(0); }
25% { transform: scale(1.25) translateY(-3px); }
50% { transform: scale(0.85) translateY(1px); }
75% { transform: scale(1.15) translateY(-2px); }
}
@keyframes speechBubble2 {
0%, 100% { transform: scale(1) translateY(0); }
25% { transform: scale(0.8) translateY(2px); }
50% { transform: scale(1.3) translateY(-3px); }
75% { transform: scale(0.9) translateY(-1px); }
}
/* Hide bubbles in fixed/sticky navigation (overlaps content on scroll) */
.infinite-fixed-navigation .infinite-main-menu-right-button::before,
.infinite-fixed-navigation .infinite-main-menu-right-button::after {
display: none !important;
}
.infinite-fixed-navigation .infinite-main-menu-right-button:hover {
transform: none;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.infinite-main-menu-right-button:hover::before,
.infinite-main-menu-right-button:hover::after {
animation: none;
}
.infinite-main-menu-right-button:hover {
transform: none;
}
}
/*-------- Speech Bubble End --------*/
/*---------- HP Wave Section ----------*/
.hp-wave-section {
position: relative;
}
/* SVG wave divider at bottom of button row */
.hp-wave-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C160,0 320,42 480,22 C640,2 800,40 960,20 C1120,0 1280,42 1440,25 L1440,50 L0,50 Z' fill='%23ffffff'/%3E%3C/svg%3E");
background-size: 100% 100%;
z-index: 2;
pointer-events: none;
}
/*---------- HP Wave Buttons ----------*/
.hp-wave-btn {
transition: transform 0.4s ease, filter 0.4s ease;
cursor: pointer;
}
.hp-wave-btn:hover {
transform: translateY(-6px);
filter: brightness(1.1);
}
@media (prefers-reduced-motion: reduce) {
.hp-wave-btn:hover {
transform: none;
filter: none;
}
}
/* Mobile: full-width buttons, no wave, no hover */
@media only screen and (max-width: 767px) {
.hp-wave-section::after {
display: none;
}
.hp-wave-btn {
transition: none;
cursor: default;
}
.hp-wave-btn:hover {
transform: none;
filter: none;
}
.hp-wave-btn .gdlr-core-pbf-column-content-margin {
margin-left: 0 !important;
margin-right: 0 !important;
}
.hp-wave-btn .gdlr-core-pbf-column-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
.hp-wave-section .gdlr-core-pbf-wrapper-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.hp-wave-section .gdlr-core-pbf-wrapper-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/*-------- HP Wave Buttons End --------*/
/*---------- HP Section Speech Bubbles ----------*/
/* Base: every wrapper carrying a decorative speech bubble */
.hp-section-bubble {
position: relative;
overflow: visible !important;
}
.hp-section-bubble::after {
content: '';
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
width: 150px;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 10;
}
/* Keep text clear of the bubble at all sizes; mirror padding on the left so
content stays visually centred within the full-width coloured band. */
.hp-section-bubble .gdlr-core-pbf-wrapper-container {
padding-left: 190px !important;
padding-right: 190px !important;
}
/* Colour variants — one per bubble image */
.hp-section-bubble-purple::after {
background-image: url('/wp-content/uploads/2026/03/Purple-Bubble.png');
}
.hp-section-bubble-yellow::after {
background-image: url('/wp-content/uploads/2026/03/Yellow-Bubble.png');
}
.hp-section-bubble-pink::after {
background-image: url('/wp-content/uploads/2026/03/Pink-Bubble.png');
}
.hp-section-bubble-blue::after {
background-image: url('/wp-content/uploads/2026/03/Blue-Bubble.png');
}
/* Tablet: smaller bubble, tighter to edge */
@media only screen and (max-width: 999px) and (min-width: 768px) {
.hp-section-bubble::after {
width: 110px;
height: 110px;
right: 10px;
}
.hp-section-bubble .gdlr-core-pbf-wrapper-container {
padding-left: 130px !important;
padding-right: 130px !important;
}
}
/* Mobile: bubble hidden entirely. The bubble is decorative only, and the
clearance padding it needs squeezes section content into a narrow column
at phone widths. Below 768px the bubble is dropped and the clearance
padding reset to 0, so content fills the full width of its section. */
@media only screen and (max-width: 767px) {
.hp-section-bubble::after {
display: none !important;
}
.hp-section-bubble .gdlr-core-pbf-wrapper-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/*-------- HP Section Speech Bubbles End --------*/
/*---------- HP Wave Dividers ----------*/
/*
* Wavy slanted top-edge dividers between Goodlayers wrappers.
*
* Add to wrapper class field:
* hp-wave-divider--left slope high on left, dips right
* hp-wave-divider--right slope high on right, dips left
*
* Default fill is white. For coloured wrappers, add a fill class:
* hp-wave-fill-cyan (#71ccde)
* hp-wave-fill-green (#6cb951)
* hp-wave-fill-pink (#e60f6d)
* hp-wave-fill-yellow (#f3b94b)
*
* Add hp-wave-pad-bottom to any wrapper followed by a wave divider
* to keep content clear of the overlap zone.
*/
/* Position + overflow for wrappers that don't already have it from hp-section-bubble */
.hp-wave-divider--left:not(.hp-section-bubble),
.hp-wave-divider--right:not(.hp-section-bubble) {
position: relative;
overflow: visible !important;
}
.hp-wave-divider--left::before,
.hp-wave-divider--right::before {
content: '';
position: absolute;
top: -49px;
left: 0;
width: 100%;
height: 50px;
z-index: 2;
pointer-events: none;
background-color: var(--wave-color, #ffffff);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* High on left, 3 undulations dipping to the right */
.hp-wave-divider--left::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C160,0 320,30 480,20 C640,10 800,40 960,28 C1120,16 1280,48 1440,38 L1440,50 L0,50 Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C160,0 320,30 480,20 C640,10 800,40 960,28 C1120,16 1280,48 1440,38 L1440,50 L0,50 Z' fill='white'/%3E%3C/svg%3E");
}
/* High on right, 3 undulations dipping to the left */
.hp-wave-divider--right::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C160,48 320,16 480,28 C640,40 800,10 960,20 C1120,30 1280,0 1440,10 L1440,50 L0,50 Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C160,48 320,16 480,28 C640,40 800,10 960,20 C1120,30 1280,0 1440,10 L1440,50 L0,50 Z' fill='white'/%3E%3C/svg%3E");
}
/* Fill-colour utilities — match to wrapper background */
.hp-wave-fill-cyan { --wave-color: var(--cclm-blue); }
.hp-wave-fill-green { --wave-color: var(--cclm-green); }
.hp-wave-fill-pink { --wave-color: var(--cclm-pink); }
.hp-wave-fill-yellow { --wave-color: var(--cclm-yellow); }
/* Extra bottom padding for wrappers followed by a wave divider */
.hp-wave-pad-bottom > .gdlr-core-pbf-wrapper-content > .gdlr-core-pbf-wrapper-container {
padding-bottom: 60px !important;
}
/* Mobile: hide waves — at phone widths the slanted overlap reads as clutter
rather than as a divider. */
@media only screen and (max-width: 767px) {
.hp-wave-divider--left::before,
.hp-wave-divider--right::before {
display: none;
}
.hp-wave-pad-bottom > .gdlr-core-pbf-wrapper-content > .gdlr-core-pbf-wrapper-container {
padding-bottom: 30px !important;
}
}
/*-------- HP Wave Dividers End --------*/
/*---------- Search box keyboard focus ----------*/
/* Ivory Search sets outline:0 !important on every search input, which
leaves the desktop menu search box and any sidebar search form with no
visible focus indicator (WCAG 2.4.7). Put an inset outline back, in the
WP Accessibility focus colour. The mobile bar has its own pill-shaped
ring below. Added 23/09/2026. */
.is-form-style input.is-search-input:focus-visible {
outline: 2px solid #233c7f !important;
outline-offset: -2px !important;
}
/*---------- Mobile/Tablet Search ----------*/
/* Hidden by default (desktop) */
#cclm-mobile-search {
display: none;
}
@media only screen and (max-width: 999px) {
/* Hide Ivory Search's own menu search icon */
.astm-search-menu-wrapper,
.infinite-mobile-header-wrap .is-search-icon,
.infinite-mobile-header-wrap .is-search-form,
.infinite-mobile-header .is-search-icon,
.infinite-mobile-header .is-search-form,
.infinite-mobile-menu .is-search-icon,
.is-menu-search-form,
.infinite-mobile-header-wrap [class*="ivory-search"],
.infinite-mobile-header [class*="ivory-search"] {
display: none !important;
}
#cclm-mobile-search {
display: block;
background: #fff;
padding: 5px 10%;
text-align: center;
border-bottom: 1px solid #eee;
}
/* Form layout: unified pill shape, teal border */
#cclm-mobile-search .is-search-form {
display: flex !important;
align-items: center !important;
width: 80% !important;
max-width: 400px;
margin: 0 auto !important;
padding: 0 !important;
border: 2px solid var(--cclm-blue) !important;
border-radius: 20px !important;
overflow: hidden !important;
background: #fff !important;
height: 34px !important;
min-height: 0 !important;
box-shadow: none !important;
}
#cclm-mobile-search .is-search-form * {
box-sizing: border-box !important;
}
/* Search input: compact, centered text */
#cclm-mobile-search input[type="search"],
#cclm-mobile-search input[type="text"] {
flex: 1 !important;
min-width: 0 !important;
padding: 0 12px !important;
border: none !important;
border-radius: 0 !important;
font-size: 13px !important;
line-height: 30px !important;
height: 30px !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
margin: 0 !important;
}
/* Submit button: flush to input, teal bg, matched height */
#cclm-mobile-search .is-search-submit,
#cclm-mobile-search button[type="submit"],
#cclm-mobile-search input[type="submit"] {
background: var(--cclm-blue) !important;
border: none !important;
border-radius: 0 !important;
padding: 0 10px !important;
margin: 0 !important;
cursor: pointer;
transition: background 0.3s ease;
flex-shrink: 0;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #222 !important;
height: 30px !important;
width: 36px !important;
line-height: 1 !important;
box-shadow: none !important;
outline: none !important;
}
#cclm-mobile-search .is-search-submit:hover,
#cclm-mobile-search button[type="submit"]:hover {
background: var(--cclm-blue-hover) !important;
}
/* Remove grey background from all elements inside submit */
#cclm-mobile-search .is-search-submit *,
#cclm-mobile-search button[type="submit"] * {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
}
/* SVG icon inside submit: #222 for accessibility */
#cclm-mobile-search .is-search-submit svg,
#cclm-mobile-search button[type="submit"] svg {
width: 14px !important;
height: 14px !important;
color: #222 !important;
fill: #222 !important;
}
/* Override Ivory Search path fill (#555 -> #222) */
#cclm-mobile-search .is-search-submit path,
#cclm-mobile-search button[type="submit"] path,
.is-form-style #cclm-mobile-search .is-search-submit path {
fill: #222 !important;
}
#cclm-mobile-search .is-search-submit i,
#cclm-mobile-search button[type="submit"] i {
font-size: 14px !important;
color: #222 !important;
}
#cclm-mobile-search .is-search-submit img,
#cclm-mobile-search button[type="submit"] img {
max-height: 14px !important;
width: auto !important;
filter: brightness(0) !important;
}
/* Keyboard focus (WCAG 2.4.7). The input and button above drop their
outlines and the pill clips its children (overflow:hidden), so an
outline on either would not show. Ring the pill whenever focus is
inside it, and invert the button so a focused Submit is distinct from
a focused input. #233c7f matches the WP Accessibility focus outline
used everywhere else. Added 23/09/2026. */
#cclm-mobile-search .is-search-form:focus-within {
outline: 2px solid #233c7f !important;
outline-offset: 2px !important;
}
#cclm-mobile-search .is-search-submit:focus-visible,
#cclm-mobile-search button[type="submit"]:focus-visible {
background: #222 !important;
}
#cclm-mobile-search .is-search-submit:focus-visible svg,
#cclm-mobile-search .is-search-submit:focus-visible path,
#cclm-mobile-search button[type="submit"]:focus-visible path {
fill: #fff !important;
color: #fff !important;
}
}
/*-------- Mobile/Tablet Search End --------*/
/*-------- TEC / Community / User-Submitted Events --------*/
.tribe-community-events .tribe-section .tribe-section-header h3 {
font-weight: 500;
text-transform: none;
}
/*Calendar view - days - accessibility*/
.tribe-ui-datepicker.ui-datepicker th {
color: #333;
}
.tribe-community-events td {
text-align: left;
}
/*------ TEC / Community / User-Submitted Events End ------*/
/*----------- Header / Mega Menu -----------*/
/* Section headings in mega menu */
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner > a {
color: #fff;
background-color: var(--cclm-purple);
padding: 5px 5px 5px 15px;
border-radius: 20px;
}
/* Sub-menu items — border-radius ALWAYS present so it never flashes square on hover-out */
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner .sub-menu a {
border-radius: 20px;
}
/* Constant 2px gap between sub-menu items — always present so nothing jumps on hover */
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner .sub-menu li {
margin-bottom: 2px;
}
/* Force border-radius on all interactive states */
.sf-menu > .infinite-mega-menu > .sf-mega a:hover,
.sf-menu > .infinite-mega-menu > .sf-mega a:focus,
.sf-menu > .infinite-mega-menu > .sf-mega .current-menu-item > a,
.sf-menu > .infinite-mega-menu > .sf-mega .current-menu-ancestor > a {
border-radius: 20px !important;
}
/*--------- Header / Mega Menu End ---------*/
/*------- Header / Standard Dropdowns -------*/
/* Match the rounded hover of the mega-menu sub-items on the normal (non-mega)
dropdowns. The mega menu (above) gives its sub-items a 20px border-radius;
the standard dropdowns ship square, so their hover/current highlight reads
differently. Apply the same 20px radius to the dropdown anchor itself —
always present (like the mega rule) so it never flashes square on hover-out,
and the theme's own hover/focus/current background simply inherits the
rounded shape. Colour is intentionally left to the theme; only the
border-radius is unified here. Top-level mega items are excluded via
:not(.infinite-mega-menu) since they already carry their own radius. */
.infinite-navigation .sf-menu > li:not(.infinite-mega-menu) .sub-menu a {
border-radius: 20px;
}
/*----- Header / Standard Dropdowns End -----*/
/*------------ Training Courses ------------*/
h3.entry-title {
color: #383838;
}
/*---------- Training Courses End ----------*/
/*---------- Pillar Color Schemes ----------*/
/*
* Four-pillar colour system. functions.php's `body_class` filter adds
* `has-pillar` + `pillar-` to on each pillar landing page
* and every descendant — so any new child page under a pillar inherits
* the colour automatically with no per-page work.
*
* Pillars & accessibility pairings:
* Connect & Belong #71CCDE (blue) text #222
* Mind Your Wellbeing #E60F6D (pink) text #000
* Healthy Living #6CB951 (green) text #222
* Learn, Connect, Contribute #F3B94B (yellow) text #222
*
* Custom properties:
* --cclm-pillar-bg pillar background colour
* --cclm-pillar-fg accessible foreground (text) colour
* --cclm-footer-wave-color drives the footer wave SVG fill
*
* To add or move a pillar: update the $pillars map in functions.php and
* add/edit one block below.
*/
/* Shared palette tokens: one copy of each brand colour, referenced by every
rule below and by listings.css and learndash-hub.css. Custom properties are
inherited document-wide, so a token declared here resolves in any stylesheet
on the page; those two sheets still carry literal fallbacks in case this one
is ever absent. Greys and text colours stay literal on purpose. They are
one-offs, and #222 serves as both a text colour and a button hover
background, so no single name fits it. */
:root {
--cclm-blue: #71CCDE; /* Connect & Belong */
--cclm-pink: #E60F6D; /* Mind Your Wellbeing */
--cclm-green: #6CB951; /* Healthy Living */
--cclm-yellow: #F3B94B; /* Learn, Connect, Contribute */
--cclm-purple: #814B99; /* Brand purple: mega menu headings, listings, Champion Hub */
--cclm-blue-hover: #5bb8cc; /* Darker blue, hover state for --cclm-blue */
}
.pillar-connect-belong {
--cclm-pillar-bg: var(--cclm-blue);
--cclm-pillar-fg: #222;
--cclm-footer-wave-color: var(--cclm-blue);
}
/* Foreground is pure #000 (not the usual near-black #222): the client asked for
a black — rather than white — page title, and applying it on the variable
carries the same black through to the footer text for consistency. #000 on
the pink #E60F6D band gives ~4.66:1 (passes WCAG AA for normal text); #222
would only reach ~3.53:1 and fail, so black is the accessible choice here.
The same black is mirrored on the Mind Your Wellbeing mega-menu tile and its
sub-menu hover/focus/current state below. */
.pillar-mind-your-wellbeing {
--cclm-pillar-bg: var(--cclm-pink);
--cclm-pillar-fg: #000;
--cclm-footer-wave-color: var(--cclm-pink);
}
.pillar-healthy-living {
--cclm-pillar-bg: var(--cclm-green);
--cclm-pillar-fg: #222;
--cclm-footer-wave-color: var(--cclm-green);
}
.pillar-learn-connect-contribute {
--cclm-pillar-bg: var(--cclm-yellow);
--cclm-pillar-fg: #222;
--cclm-footer-wave-color: var(--cclm-yellow);
}
/* --- Page title bar --- */
/* Title overlay band (replaces the per-page colour set in Goodlayers Page
Options — !important beats inline background-color but not inline !important) */
.has-pillar .infinite-page-title-wrap .infinite-page-title-overlay {
background-color: var(--cclm-pillar-bg) !important;
}
/* Title text + caption — uses the pillar foreground. For Mind Your Wellbeing
that foreground is #000 (see the pillar block above), so the title renders
black there; the other pillars use #222. */
.has-pillar .infinite-page-title-wrap .infinite-page-title,
.has-pillar .infinite-page-title-wrap h1.infinite-page-title,
.has-pillar .infinite-page-title-wrap .infinite-page-caption,
.has-pillar .infinite-page-title-wrap .infinite-page-title-caption {
color: var(--cclm-pillar-fg) !important;
}
/* --- Footer --- */
/* Background */
.has-pillar .infinite-footer-wrapper {
background-color: var(--cclm-pillar-bg) !important;
}
/* Hide every border by colour-matching it to the pillar background */
.has-pillar .infinite-footer-wrapper,
.has-pillar .infinite-footer-wrapper * {
border-color: var(--cclm-pillar-bg) !important;
}
/* Text + links — accessible foreground (Mind Your Wellbeing = #000, others = #222) */
.has-pillar .infinite-footer-wrapper,
.has-pillar .infinite-footer-wrapper h1,
.has-pillar .infinite-footer-wrapper h2,
.has-pillar .infinite-footer-wrapper h3,
.has-pillar .infinite-footer-wrapper h4,
.has-pillar .infinite-footer-wrapper h5,
.has-pillar .infinite-footer-wrapper h6,
.has-pillar .infinite-footer-wrapper p,
.has-pillar .infinite-footer-wrapper a,
.has-pillar .infinite-footer-wrapper li,
.has-pillar .infinite-footer-wrapper span,
.has-pillar .infinite-footer-wrapper .infinite-footer-widget-title,
.has-pillar .infinite-footer-wrapper .widget-title {
color: var(--cclm-pillar-fg) !important;
}
/* The footer wave SVG (.infinite-footer-wrapper::before) automatically picks
up --cclm-footer-wave-color from the pillar block above — no override
needed here. */
/* Footer 'Get Urgent Help' button keeps its own yellow (#f3b94b) fill, #222
text and #222 border on every pillar — the locked rules near the top of
this file beat the pillar text/border cascade above, so the button stays
identical to the header button regardless of which pillar footer it sits
on. */
/* --- Mega menu pillar tiles --- */
/* Section-heading anchors are matched by their pillar URL via [href$="..."],
so these stay pillar-coloured regardless of the page being viewed and don't
depend on adding CSS classes in the menu admin. Mind Your Wellbeing uses
#000 text (client request, matching its pillar title/footer); the other
three use #222. */
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner > a[href$="/connect-belong/"] {
background-color: var(--cclm-blue) !important;
color: #222 !important;
}
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner > a[href$="/mind-your-wellbeing/"] {
background-color: var(--cclm-pink) !important;
color: #000 !important;
}
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner > a[href$="/healthy-living/"] {
background-color: var(--cclm-green) !important;
color: #222 !important;
}
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner > a[href$="/learn-connect-contribute/"] {
background-color: var(--cclm-yellow) !important;
color: #222 !important;
}
/* --- Mega menu sub-menu items (hover / focus / current) --- */
/* Each sub-item adopts its parent section's pillar colour. The `:has()`
selector matches a section by its heading URL — so the mapping doesn't
depend on DOM order or per-item CSS classes. Covers :hover, :focus,
current-menu-item and current-menu-ancestor for accessibility. Text is #222
on every pillar except Mind Your Wellbeing, which uses #000 on its pink to
stay consistent with its tile, title and footer. */
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/connect-belong/"]) .sub-menu > li > a:hover,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/connect-belong/"]) .sub-menu > li > a:focus,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/connect-belong/"]) .sub-menu > li.current-menu-item > a,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/connect-belong/"]) .sub-menu > li.current-menu-ancestor > a {
background-color: var(--cclm-blue) !important;
color: #222 !important;
}
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/mind-your-wellbeing/"]) .sub-menu > li > a:hover,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/mind-your-wellbeing/"]) .sub-menu > li > a:focus,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/mind-your-wellbeing/"]) .sub-menu > li.current-menu-item > a,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/mind-your-wellbeing/"]) .sub-menu > li.current-menu-ancestor > a {
background-color: var(--cclm-pink) !important;
color: #000 !important;
}
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/healthy-living/"]) .sub-menu > li > a:hover,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/healthy-living/"]) .sub-menu > li > a:focus,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/healthy-living/"]) .sub-menu > li.current-menu-item > a,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/healthy-living/"]) .sub-menu > li.current-menu-ancestor > a {
background-color: var(--cclm-green) !important;
color: #222 !important;
}
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/learn-connect-contribute/"]) .sub-menu > li > a:hover,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/learn-connect-contribute/"]) .sub-menu > li > a:focus,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/learn-connect-contribute/"]) .sub-menu > li.current-menu-item > a,
.infinite-navigation .sf-menu > .infinite-mega-menu .sf-mega-section-inner:has(> a[href$="/learn-connect-contribute/"]) .sub-menu > li.current-menu-ancestor > a {
background-color: var(--cclm-yellow) !important;
color: #222 !important;
}
/*-------- Pillar Color Schemes End --------*/
/*---- Community & Wellbeing Widget Columns ----*/
/*
* Page 1261 (Community & Wellbeing) shows the four pillar sidebar menus side
* by side in 1/4 columns. Each column wrapper carries one element class, in
* pillar order: connect-widget-border, mind-wellbeing-widget-border,
* healthy-widget-border, learn-widget-border.
*
* Goodlayers prints a column's class on its .gdlr-core-pbf-column-content-margin
* div (pb-wrapper-column.php, front-end branch), and nowhere else in the column
* markup, so a single-class selector is unambiguous. That div is also the box
* carrying the column padding and the shared sync-height, so it is the right
* element to colour. Padding stays in the page builder.
*/
.connect-widget-border { background-color: var(--cclm-blue); }
.mind-wellbeing-widget-border { background-color: var(--cclm-pink); }
.healthy-widget-border { background-color: var(--cclm-green); }
.learn-widget-border { background-color: var(--cclm-yellow); }
/* Widget titles are