:root {
--icon-feature-ev-tick: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
--icon-feature-entries: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" %3F>');
--icon-feature-events: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
--icon-feature-rose-tick-circle: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
--icon-feature-tag: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
body.ev-subscription {
main {
color: var(--colour-dark-blue);
&::before {
background-color: var(--colour-light-blue-2);
}
}
}
.summary {
text-wrap: balance;
h2 {
text-wrap: auto;
}
}
.button {
font-weight: bold;
display: block;
max-width: 20rem;
padding: 0.5rem;
text-align: center;
text-wrap: balance;
border-radius: 0.5rem;
background: var(--colour-light-blue);
}
.product {
display: flex;
flex-flow: row wrap;
gap: 1rem;
@media screen and (min-width: 32rem) {
margin-left: 4rem;
}
figure {
flex: 0 1 auto;
}
}
.product-info {
flex-grow: 1;
width: min(30rem, 90%);
p:has(a) {
margin-block: 4rem;
a {
text-decoration: underline;
}
}
}
.ev-subscription h1:first-of-type {
color: var(--colour-blue);
margin-block: 2rem;
@media screen and (min-width: 32rem) {
position: relative;
padding-left: 2.5em;
&::before {
position: absolute;
top: calc(50% - 1em);
left: 0;
display: block;
width: 2em;
content: '';
background-color: var(--colour-blue);
mask-image: var(--icon-feature-rose-tick-circle);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
aspect-ratio: 1 / 1;
}
}
}
.ev-subscription-plan {
h3 {
margin-bottom: 0.4em;
}
p {
margin: 0;
}
.ev-product {
position: relative;
max-width: 30rem;
min-height: 6rem;
padding-left: 6rem;
border: 1px solid var(--colour-blue);
h2 {
font-size: 1.3rem;
color: var(--colour-active);
&::after {
display: none;
}
}
&::before {
position: absolute;
top: 1rem;
left: 1rem;
display: block;
width: 4rem;
content: '';
background-color: var(--colour-active);
mask-image: var(--icon-feature-rose-tick);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
aspect-ratio: 1 / 1;
}
}
}
.variation-features {
font-weight: bold;
margin: 0;
list-style: none;
padding-inline: 0;
li {
font-size: 0.8rem;
position: relative;
border-bottom: 0.1rem solid var(--colour-active);
padding-inline: 3rem 0;
padding-block: 1rem;
margin-block: 0;
&:last-of-type {
border-bottom: none;
}
&::before {
position: absolute;
top: calc(50% - 1.25rem);
left: 0;
display: block;
width: 2.5rem;
content: '';
background: var(--colour-active);
aspect-ratio: 1 / 1;
mask-image: var(--mask-image);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
}
}
li {
&.events {
--mask-image: var(--icon-feature-events);
}
&.entries {
--mask-image: var(--icon-feature-entries);
}
&.eventaly {
--mask-image: var(--icon-feature-ev-tick);
}
&.price {
font-size: 1.3rem;
--mask-image: var(--icon-feature-tag);
[data-footnote] {
font-size: 0.8rem;
font-weight: normal;
display: block;
}
}
}
.readmore a {
display: block;
text-decoration: underline;
margin-block: 4rem;
}
.xgiMz { /* calculators div */
margin: 0 !important;
}
.select-frequency {
font-size: 1.2rem;
font-weight: bold;
display: flex;
width: max-content;
margin: auto;
padding: 0;
color: var(--colour-white);
input {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
&:checked + label {
background-color: var(--colour-blue);
}
}
label {
padding: 0.5rem;
cursor: pointer;
transition: background-color 0.25s ease-in-out;
background-color: var(--colour-grey);
padding-inline: 1rem;
&:first-of-type {
border-radius: 1rem 0 0 1rem;
padding-inline-start: 0.5rem;
}
&:last-of-type {
border-radius: 0 1rem 1rem 0;
padding-inline-end: 0.5rem;
}
}
}
.hidden {
display: none;
}
[data-footnote] {
position: relative;
&::after {
display: inline;
padding-left: 0.2em;
content: attr(data-footnote);
vertical-align: top;
}
}