|
|
|
|
|
|
|
|
|
/membership/form/
/membership/form/
|
|
|
|
{"togglable_footerCTA":null,"togglable_memberCTA":"on","togglable_testCTA":null,"togglable_newslettercta":null}
{"togglable_footerCTA":null,"togglable_memberCTA":"on","togglable_testCTA":null,"togglable_newslettercta":null}
|
|
.fieldset {
border: 1px solid #d2042d;
margin-bottom: 2rem;
padding: 3rem 2rem 1rem;
position: relative;
h4 {
background: #d2042d;
color: #fff;
display: inline-block;
font-weight: 500;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
}
h4::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d2042d transparent transparent;
bottom: -5px;
left: 1px;
}
}
.membership-product-repeater
{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
justify-content: center;
gap: 1rem;
.membership-product
{
position: relative;
padding: 1rem;
background: #efefef;
min-width: 200px;
&.selected
{
background: #d2042d;
color: #fff;
}
}
.s8-radiobutton-container
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0px !important;
display: block;
}
.product-price
{
font-weight: 900;
font-size: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-name
{
font-size: 1.5rem;
}
.s8-radiobutton-container input ~ .s8-radiobutton
{
border-radius: 0 !important;
display: none;
visibility: hidden;
opacity: 0;
}
.small-text
{
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
}
.fieldset {
border: 1px solid #d2042d;
margin-bottom: 2rem;
padding: 3rem 2rem 1rem;
position: relative;
h4 {
background: #d2042d;
color: #fff;
display: inline-block;
font-weight: 500;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
}
h4::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d2042d transparent transparent;
bottom: -5px;
left: 1px;
}
}
.membership-product-repeater
{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
justify-content: center;
gap: 1rem;
.membership-product
{
position: relative;
padding: 1rem;
background: #efefef;
min-width: 200px;
&.selected
{
background: #d2042d;
color: #fff;
}
}
.s8-radiobutton-container
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0px !important;
display: block;
}
.product-price
{
font-weight: 900;
font-size: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-name
{
font-size: 1.5rem;
}
.s8-radiobutton-container input ~ .s8-radiobutton
{
border-radius: 0 !important;
display: none;
visibility: hidden;
opacity: 0;
}
.small-text
{
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
}
|
|
// Add 'selected' class to .membership-product when radio button is checked
document.addEventListener('DOMContentLoaded', function() {
// Function to update selected classes
function updateSelectedClasses() {
// Get all membership product containers
const membershipProducts = document.querySelectorAll('.membership-product');
// Remove 'selected' class from all containers
membershipProducts.forEach(product => {
product.classList.remove('selected');
});
// Find all radio buttons within membership products
const radioButtons = document.querySelectorAll('.membership-product input[type="radio"]');
// Add 'selected' class to the container of the checked radio button
radioButtons.forEach(radioButton => {
if (radioButton.checked) {
const membershipProduct = radioButton.closest('.membership-product');
if (membershipProduct) {
membershipProduct.classList.add('selected');
}
}
});
}
// Run on page load
updateSelectedClasses();
// Run on any change event within membership products
const membershipProductRepeater = document.querySelector('.membership-product-repeater');
if (membershipProductRepeater) {
membershipProductRepeater.addEventListener('change', function(e) {
if (e.target.type === 'radio') {
updateSelectedClasses();
}
});
}
});
// Add 'selected' class to .membership-product when radio button is checked
document.addEventListener('DOMContentLoaded', function() {
// Function to update selected classes
function updateSelectedClasses() {
// Get all membership product containers
const membershipProducts = document.querySelectorAll('.membership-product');
// Remove 'selected' class from all containers
membershipProducts.forEach(product => {
product.classList.remove('selected');
});
// Find all radio buttons within membership products
const radioButtons = document.querySelectorAll('.membership-product input[type="radio"]');
// Add 'selected' class to the container of the checked radio button
radioButtons.forEach(radioButton => {
if (radioButton.checked) {
const membershipProduct = radioButton.closest('.membership-product');
if (membershipProduct) {
membershipProduct.classList.add('selected');
}
}
});
}
// Run on page load
updateSelectedClasses();
// Run on any change event within membership products
const membershipProductRepeater = document.querySelector('.membership-product-repeater');
if (membershipProductRepeater) {
membershipProductRepeater.addEventListener('change', function(e) {
if (e.target.type === 'radio') {
updateSelectedClasses();
}
});
}
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/membership/
/membership/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|