ofco/medicalalert-web-reloaded
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ofco:553e789bd6c73df2d3fdaa49723b59176dd03461
Branches Tags
ofco:develop
...
compare: ofco:8e92d0617e50ac36f6da7825b4d18c0d3df82ff1
Branches Tags
ofco:develop

2 Commits
553e789bd6 ... 8e92d0617e

Author SHA1 Message Date
Haley
8e92d0617e WIP 2025-01-09 09:30:12 -08:00
Haley
ca58f24df3 WIP 2025-01-08 17:04:55 -08:00
32 changed files with 1202 additions and 947 deletions
Expand all files Collapse all files

677
wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
View File

File diff suppressed because it is too large Load Diff

363
wp/wp-content/themes/medicalalert/dist/app.css vendored
View File

@@ -11221,6 +11221,10 @@ body {
overflow: hidden;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.z-0 {
z-index: 0;
}
@@ -11294,31 +11298,16 @@ input[type=submit].gform_button,
button[type=submit].single_add_to_cart_button,
#searchBtn {
border: none;
padding: 14px;
padding: 10px 36px;
background-color: #CC0033 !important;
color: #FFFFFF !important;
font-size: 20px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
box-sizing: border-box;
display: inline-block;
line-height: 20.21px;
border-radius: 10px;
}
.button--primary {
border: none;
padding: 8px 20px;
background-color: #CC0033;
/* Define the actual color, not a variable */
color: #FFFFFF;
/* Define the actual color, not a variable */
font-size: 25px;
font-weight: 600;
text-decoration: none;
display: inline-block;
line-height: 36px;
/* Add any additional styles you want here */
border-radius: 8px;
}
.bg-color-white {
@@ -11509,34 +11498,6 @@ button[type=submit].single_add_to_cart_button,
}
}
.padding-top-medium {
padding-top: 0.75rem;
}
@media (min-width: 768px) {
.padding-top-medium {
padding-top: 1rem;
}
}
@media (min-width: 768px) {
.padding-top-medium {
padding-top: 2rem;
}
}
.padding-top-large {
padding-top: 3rem;
}
@media (min-width: 768px) {
.padding-top-large {
padding-top: 4rem;
}
}
@media (min-width: 992px) {
.padding-top-large {
padding-top: 6rem;
}
}
.padding-bottom-small {
padding-bottom: 0.25rem;
}
@@ -11551,17 +11512,45 @@ button[type=submit].single_add_to_cart_button,
}
}
.padding-top-medium {
padding-top: 1rem;
}
@media (min-width: 768px) {
.padding-top-medium {
padding-top: 2rem;
}
}
@media (min-width: 992px) {
.padding-top-medium {
padding-top: 3rem;
}
}
.padding-bottom-medium {
padding-bottom: 0.75rem;
padding-bottom: 1rem;
}
@media (min-width: 768px) {
.padding-bottom-medium {
padding-bottom: 1rem;
padding-bottom: 2rem;
}
}
@media (min-width: 992px) {
.padding-bottom-medium {
padding-bottom: 2rem;
padding-bottom: 3rem;
}
}
.padding-top-large {
padding-top: 3rem;
}
@media (min-width: 768px) {
.padding-top-large {
padding-top: 4rem;
}
}
@media (min-width: 992px) {
.padding-top-large {
padding-top: 6rem;
}
}
@@ -11655,37 +11644,92 @@ button[type=submit].single_add_to_cart_button,
background: #cc0133;
}
.btn {
border-radius: 0.5rem;
padding: 0.4rem 2rem;
font-weight: bold;
}
.btn-red {
background: #cc0133;
color: white;
font-weight: bold;
padding: 0.5em 3em;
border-radius: 10px;
}
.btn-outline-primary {
color: #3399FF;
border-color: #3399FF;
background: white;
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
color: #3399FF;
border-color: #3399FF;
background: #EBF5FF;
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(153, 173, 237, 0.5);
}
.bg-sky {
color: #3399FF;
background: #3399FF;
}
.bg-purple {
color: #7e5bef;
background: #7e5bef;
}
.bg-yellow {
color: #ffb020;
background: #ffb020;
}
.bg-green {
color: #5CB25D;
background: #5CB25D;
}
.g-navy-sky {
.bg-color-navy-sky {
background: linear-gradient(90deg, #000066 0%, #3399ff 100%);
}
.bg-color-navy-sky h1, .bg-color-navy-sky .headline-largest, .bg-color-navy-sky .h1 {
color: white !important;
}
.bg-color-navy-sky h2, .bg-color-navy-sky .headline-large, .bg-color-navy-sky .h2 {
color: white !important;
}
.bg-color-navy-sky h3, .bg-color-navy-sky .headline-standard, .bg-color-navy-sky .h3 {
color: white !important;
}
.bg-color-navy-sky strong {
color: white !important;
}
.bg-color-navy-sky p {
color: white !important;
}
.g-sky-bright {
.bg-color-sky-bright {
background: linear-gradient(90deg, #3399ff 0%, rgba(51, 153, 255, 0.5) 100%);
}
.bg-color-sky-bright h1, .bg-color-sky-bright .headline-largest, .bg-color-sky-bright .h1 {
color: white !important;
}
.bg-color-sky-bright h2, .bg-color-sky-bright .headline-large, .bg-color-sky-bright .h2 {
color: white !important;
}
.bg-color-sky-bright h3, .bg-color-sky-bright .headline-standard, .bg-color-sky-bright .h3 {
color: white !important;
}
.bg-color-sky-bright strong {
color: white !important;
}
.bg-color-sky-bright p {
color: white !important;
}
.bg-color-gradient-light-blue {
background: linear-gradient(90deg, rgba(51, 153, 255, 0.5) 0%, rgba(51, 153, 255, 0.1) 100%);
@@ -11718,21 +11762,51 @@ button[type=submit].single_add_to_cart_button,
.bg-color-navy-purple {
background: linear-gradient(90deg, #000066 0%, #7e5bef 100%);
color: white;
}
.bg-color-navy-purple li {
color: white;
}
.bg-color-navy-purple p {
color: white;
}
.bg-color-navy-purple a {
color: white;
}
.bg-color-red-yellow {
background: linear-gradient(90deg, #cc0133 0%, #ffb020 100%);
color: white;
}
.bg-color-red-yellow li {
color: white;
}
.bg-color-red-yellow p {
color: white;
}
.bg-color-red-yellow a {
color: white;
}
.g-sky-border {
border-radius: 20px;
background: linear-gradient(to left top, rgba(51, 153, 255, 0.1) 0%, rgba(51, 153, 255, 0.5) 100%);
padding: 5px;
color: white;
}
.g-sky-border img {
border-radius: 17px;
}
ul,
ol {
line-height: 30px !important;
}
ul li,
ol li {
margin-bottom: 6px;
}
.mw-250 {
max-width: 250px;
}
@@ -11748,6 +11822,15 @@ button[type=submit].single_add_to_cart_button,
border-radius: 17px;
}
.border-color-purple-gradient {
background: linear-gradient(to left top, #000066 0%, #7e5bef 100%);
padding: 5px;
position: relative;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
.fs-xs {
font-size: 14px;
}
@@ -11756,30 +11839,49 @@ button[type=submit].single_add_to_cart_button,
line-height: 19px;
}
.col2-circle-content-slice-container .highlighted-circle img {
border-radius: 50%;
width: 225px;
height: 225px;
.fs-sm {
font-size: 16px;
}
.fs-sm p {
font-size: 16px;
line-height: 26px;
}
.col2-circle-content-slice-container .rounded-circle {
max-width: 260px;
margin: 0 auto;
}
@media (min-width: 768px) {
.col2-circle-content-slice-container .rounded-circle {
margin-left: auto;
}
}
.col2-circle-content-slice-container img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.col2-circle-content-slice-container .highlighted-circle-title {
color: #000066;
}
.col2-circle-content-slice-container .highlighted-circle-title h3, .col2-circle-content-slice-container .highlighted-circle-title .headline-standard, .col2-circle-content-slice-container .highlighted-circle-title .h3 {
font-weight: bold;
}
.col2-circle-content-slice-container .highlighted-circle-copy p {
line-height: 41px;
line-height: 32px;
}
.col2-circle-content-slice-container .highlighted-circle-link a {
line-height: 41px;
line-height: 32px;
}
.col2-circle-cta-list-slice-container .circle-image {
padding: 0 0 20px;
.col2-circle-cta-list-slice-container .rounded-circle {
max-width: 460px;
margin-left: auto;
}
.col2-circle-cta-list-slice-container .circle-image img {
.col2-circle-cta-list-slice-container img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 50%;
}
.col2-circle-cta-list-slice-container .title {
color: #000066;
@@ -11803,6 +11905,24 @@ button[type=submit].single_add_to_cart_button,
line-height: 41px;
}
.col2-media-highlights-slice-container svg {
max-width: 1500px;
}
.col2-media-highlights-slice-container .none-graphic {
display: none;
}
.col2-media-highlights-slice-container .radial-left-graphic {
top: 0;
left: -200px;
}
.col2-media-highlights-slice-container .radial-right-graphic {
top: 50%;
right: -71%;
}
.col2-media-highlights-slice-container .radial-center-graphic {
top: -50%;
right: -30%;
}
.col2-media-highlights-slice-container .border-side-1 {
border-right: 1px solid black;
}
@@ -11846,31 +11966,19 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.col3-card-slice-container .radial {
.col3-card-slice-container .radial-top {
left: 0;
width: 250px;
top: -646px;
top: 0;
}
.col3-card-slice-container .radial svg {
.col3-card-slice-container .radial-top svg {
width: 100%;
max-width: 250px;
}
@media (min-width: 768px) {
.col3-card-slice-container .radial {
top: -666px;
}
}
@media (min-width: 992px) {
.col3-card-slice-container .radial {
top: -706px;
}
max-width: 350px;
}
.col3-card-slice-container .col3-card-wrapper {
z-index: 1;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item {
position: relative;
background-color: #FFFFFF;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-img {
width: 100%;
@@ -11878,14 +11986,6 @@ button[type=submit].single_add_to_cart_button,
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-item-inner-wrapper .col3-card-title {
color: #000066;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-item-inner-wrapper .col3-card-link {
position: absolute;
bottom: 0;
width: -moz-fit-content;
width: fit-content;
left: 50%;
transform: translate(-50%, -50%);
}
.color-header-card-grid-slice-container .color-header-card .header {
width: 100%;
@@ -11930,6 +12030,23 @@ button[type=submit].single_add_to_cart_button,
color: #FFFFFF;
}
.header-color-navy-purple {
background: linear-gradient(90deg, #000066 0%, #7e5bef 100%);
padding: 5px;
position: relative;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
border-radius: 25px;
}
.header-color-navy-purple .copy {
border-bottom-right-radius: 19px;
border-bottom-left-radius: 19px;
}
.header-color-navy-purple h4, .header-color-navy-purple .headline-small, .header-color-navy-purple .h4 {
color: #FFFFFF;
}
.faq-dropdown-slice-container.bg-color-light-blue .accordion-body,
.faq-dropdown-slice-container.bg-color-light-blue .accordion-button {
background-color: #EBF5FF !important;
@@ -12150,6 +12267,11 @@ h6, .h6 {
max-width: 500px;
}
.tile-1-3-grid {
max-width: 300px;
z-index: 1;
}
.tile-2 {
right: 2%;
bottom: -6%;
@@ -12165,11 +12287,21 @@ h6, .h6 {
}
.radial {
bottom: -42%;
top: 600px;
right: -18%;
max-width: 450px;
}
body {
overflow-x: hidden;
}
@media (min-width: 768px) {
.radial {
top: 300px;
right: -4%;
}
.pos {
margin-bottom: -175px;
}
@@ -12184,23 +12316,20 @@ h6, .h6 {
width: 100%;
}
}
@media (min-width: 992px) {
.radial {
top: 500px;
right: -4%;
}
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card {
display: grid;
grid-template-rows: 1fr auto 1fr;
width: 100%;
position: relative;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .icon-img {
max-width: 50px;
height: 50px;
display: flex;
align-items: end;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .content-wrapper .icon-link {
position: absolute;
bottom: 0;
width: -moz-fit-content;
width: fit-content;
}
.consumer-brand .icon-info-grid-slice-container .icon-card .title {
@@ -12269,6 +12398,8 @@ h6, .h6 {
.logo-grid-slice-container .logo img {
width: 100%;
filter: grayscale(1);
opacity: 0.5;
}
.phone-contact-slice-container h3, .phone-contact-slice-container .headline-standard, .phone-contact-slice-container .h3 {
@@ -12378,17 +12509,19 @@ h6, .h6 {
padding-bottom: 9rem;
}
@media (min-width: 992px) {
.testimonial-slice-container .g-sky-border {
margin-bottom: -73px;
.testimonial-slice-container .offset {
position: absolute;
left: 20px;
}
}
.testimonial-slice-container .testimonial-img {
width: 100%;
max-width: 300px;
max-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
.testimonial-slice-container .testimonial-inner-content-wrapper {
padding-left: 3em;
}
.testimonial-slice-container .testimonial-inner-content-wrapper .testimonial-title {
font-size: 32px;
font-weight: bold;
@@ -12420,26 +12553,26 @@ h6, .h6 {
.video-copy-slice-container .ratio {
max-width: 620px;
}
.video-copy-slice-container svg {
max-width: 1000px;
}
.video-copy-slice-container .none-graphic {
display: none;
}
.video-copy-slice-container .radial-right-graphic {
top: 0;
right: -200px;
}
.video-copy-slice-container .radial-right-graphic svg {
max-width: 1000px;
}
.video-copy-slice-container .radial-left-graphic {
top: 0;
left: -200px;
}
.video-copy-slice-container .radial-left-graphic svg {
max-width: 1000px;
}
.video-copy-slice-container .radial-center-graphic {
top: 0;
left: 50%;
left: calc(50% - 500px);
}
.video-copy-slice-container .radial-center-graphic svg {
max-width: 1000px;
width: 1000px;
}
.video-grid-slice-container .heading {

2
wp/wp-content/themes/medicalalert/dist/mix-manifest.json vendored
View File

@@ -1,4 +1,4 @@
{
"/app.js": "/app.js?id=def087bfee86b3ced20472c4fd21ee05",
"/app.css": "/app.css?id=de1a7709a8feae26fe77c1e84c9664f6"
"/app.css": "/app.css?id=ce0cb2dfa7a09d1c721b431100aa8cfe"
}

2
wp/wp-content/themes/medicalalert/footer.php
View File

@@ -58,7 +58,7 @@ $col_4_consumer_menu_title = get_field('col_4_consumer_menu_title', 'option');
?>
<footer class="site-footer <?php echo $stylesheet; ?>">
<div class="footer-wrapper g-navy-sky pt-5 pb-2">
<div class="footer-wrapper bg-color-navy-sky pt-5 pb-2">
<div class="container">
<div class="d-flex justify-content-center pb-2 mt-1">
<img class="img-fluid footer-logo" src="<?php echo $company_logo['url']; ?>" alt="<?php echo $company_logo['alt']; ?>" />

28
wp/wp-content/themes/medicalalert/src/scss/col2-circle-content.scss
View File

@@ -1,23 +1,35 @@
.col2-circle-content-slice-container {
.highlighted-circle {
.rounded-circle {
max-width: 260px;
margin: 0 auto;
@include media-breakpoint-up(md) {
margin-left: auto
}
}
img {
border-radius: 50%;
width: 225px;
height: 225px;
object-fit: cover;
width: 100%;
}
}
.highlighted-circle-title {
color: $consumer-primary
color: $consumer-primary;
h3 {
font-weight: bold;
}
}
.highlighted-circle-copy {
p {
line-height: 41px;
line-height: 32px;
}
}
.highlighted-circle-link {
a {
line-height: 41px;
line-height: 32px;
}
}
}

12
wp/wp-content/themes/medicalalert/src/scss/col2-circle-cta-list.scss
View File

@@ -1,12 +1,14 @@
.col2-circle-cta-list-slice-container {
.circle-image {
padding: 0 0 20px;
.rounded-circle {
max-width: 460px;
margin-left: auto
}
img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.title {
color: $consumer-primary;
padding-bottom: 10px;

28
wp/wp-content/themes/medicalalert/src/scss/col2-media-highlights.scss
View File

@@ -1,25 +1,53 @@
.col2-media-highlights-slice-container {
svg {
max-width: 1500px;
}
.none-graphic {
display: none
}
.radial-left-graphic {
top: 0;
left: -200px;
}
.radial-right-graphic {
top: 50%;
right: -71%;
}
.radial-center-graphic {
top: -50%;
right: -30%;
}
.border-side-1 {
border-right: 1px solid black;
}
.border-side-3 {
border-left: 1px solid black;
}
.video-aside {
video {
width: 100%;
}
}
.copy {
strong {
font-weight: bold;
}
}
@include media-breakpoint-down(lg) {
.border-side-1 {
border-left: none;
border-bottom: 1px solid black;
}
.border-side-3 {
border-left: none;
border-bottom: 1px solid black;

34
wp/wp-content/themes/medicalalert/src/scss/col3-card.scss
View File

@@ -1,24 +1,24 @@
.col3-card-slice-container {
.radial {
.radial-top {
left: 0;
width: 250px;
top: 0;
svg {
width: 100%;
max-width: 250px;
max-width: 350px;
}
@include media-breakpoint-up(xs) {
top: -646px;
}
// @include media-breakpoint-up(xs) {
// top: -646px;
// }
@include media-breakpoint-up(md) {
top: -666px;
}
// @include media-breakpoint-up(md) {
// top: -666px;
// }
@include media-breakpoint-up(lg) {
top: -706px;
}
// @include media-breakpoint-up(lg) {
// top: -706px;
// }
}
.col3-card-wrapper {
@@ -26,8 +26,6 @@
.col3-card-item {
position: relative;
background-color: $white;
// min-height: 40em;
.col3-card-img {
width: 100%;
@@ -38,14 +36,6 @@
.col3-card-title {
color: $consumer-primary;
}
.col3-card-link {
position: absolute;
bottom: 0;
width: fit-content;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}

28
wp/wp-content/themes/medicalalert/src/scss/color-header-card-grid.scss
View File

@@ -4,6 +4,7 @@
width: 100%;
height: 100px;
}
.copy {
min-height: 17rem;
}
@@ -12,6 +13,7 @@
.header-color-white {
background-color: $white;
h4 {
color: $light-gray;
}
@@ -19,6 +21,7 @@
.header-color-gray {
background-color: $gray;
h4 {
color: $light-gray;
}
@@ -26,6 +29,7 @@
.header-color-red {
background-color: $consumer-primary;
h4 {
color: $white;
}
@@ -33,6 +37,7 @@
.header-color-light-blue {
background-color: $light-blue;
h4 {
color: $light-gray;
}
@@ -40,6 +45,29 @@
.header-color-blue {
background-color: $business-primary;
h4 {
color: $white;
}
}
// .border-color-purple-gradient {
// background: linear-gradient(to left top, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
// }
.header-color-navy-purple {
background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
padding: 5px;
position: relative;
width: fit-content;
margin: 0 auto;
border-radius: 25px;
.copy {
border-bottom-right-radius: 19px;
border-bottom-left-radius: 19px;
}
h4 {
color: $white;
}

3
wp/wp-content/themes/medicalalert/src/scss/faq-dropdown.scss
View File

@@ -21,9 +21,6 @@
font-weight: 700;
padding: 1.3rem 0;
line-height: normal;
// &::after {
// filter: invert(1) grayscale(1);
// }
}
.accordion-body {

229
wp/wp-content/themes/medicalalert/src/scss/global.scss
View File

@@ -20,7 +20,11 @@ body {
}
.overflow-hidden {
overflow: hidden
overflow: hidden;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.z-0 {
@@ -130,31 +134,16 @@ input[type="submit"].gform_button,
button[type="submit"].single_add_to_cart_button,
#searchBtn {
border: none;
padding: 14px;
padding: 10px 36px;
background-color: $orange !important;
color: $white !important;
font-size: 20px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
box-sizing: border-box;
display: inline-block;
line-height: 20.21px;
border-radius: 10px;
}
.button--primary {
border: none;
padding: 8px 20px;
background-color: $orange;
/* Define the actual color, not a variable */
color: $white;
/* Define the actual color, not a variable */
font-size: 25px;
font-weight: 600;
text-decoration: none;
display: inline-block;
line-height: 36px;
/* Add any additional styles you want here */
border-radius: 8px;
}
// Background Colors Configurations
@@ -359,34 +348,6 @@ button[type="submit"].single_add_to_cart_button,
}
}
.padding-top-medium {
@include media-breakpoint-up(xs) {
padding-top: .75rem;
}
@include media-breakpoint-up(md) {
padding-top: 1rem;
}
@include media-breakpoint-up(md) {
padding-top: 2rem;
}
}
.padding-top-large {
@include media-breakpoint-up(xs) {
padding-top: 3rem;
}
@include media-breakpoint-up(md) {
padding-top: 4rem;
}
@include media-breakpoint-up(lg) {
padding-top: 6rem;
}
}
.padding-bottom-small {
@include media-breakpoint-up(xs) {
padding-bottom: 0.25rem;
@@ -401,18 +362,46 @@ button[type="submit"].single_add_to_cart_button,
}
}
.padding-bottom-medium {
.padding-top-medium {
@include media-breakpoint-up(xs) {
padding-bottom: .75rem;
padding-top: 1rem;
}
@include media-breakpoint-up(md) {
padding-bottom: 1rem;
padding-top: 2rem;
}
@include media-breakpoint-up(lg) {
padding-top: 3rem;
}
}
.padding-bottom-medium {
@include media-breakpoint-up(xs) {
padding-bottom: 1rem;
}
@include media-breakpoint-up(md) {
padding-bottom: 2rem;
}
@include media-breakpoint-up(lg) {
padding-bottom: 3rem;
}
}
.padding-top-large {
@include media-breakpoint-up(xs) {
padding-top: 3rem;
}
@include media-breakpoint-up(md) {
padding-top: 4rem;
}
@include media-breakpoint-up(lg) {
padding-top: 6rem;
}
}
.padding-bottom-large {
@@ -516,36 +505,105 @@ button[type="submit"].single_add_to_cart_button,
background: $ma-red;
}
.btn {
border-radius: 0.5rem;
padding: 0.4rem 2rem;
font-weight: bold;
}
.btn-red {
background: $ma-red;
color: white;
font-weight: bold;
padding: .5em 3em;
border-radius: 10px;
// font-weight: bold;
// padding: .5em 3em;
// border-radius: 10px;
}
.bg-sky {
.btn-outline-primary {
color: $ma-sky;
border-color: $ma-sky;
background: white;
}
.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
color: $ma-sky;
border-color: $ma-sky;
background: #EBF5FF;
}
.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(153, 173, 237, 0.5);
}
.bg-sky {
background: $ma-sky;
}
.bg-purple {
color: $ma-purple;
background: $ma-purple;
}
.bg-yellow {
color: $ma-yellow;
background: $ma-yellow;
}
.bg-green {
color: $ma-green;
background: $ma-green;
}
.g-navy-sky {
.bg-color-navy-sky {
background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(51, 153, 255, 1) 100%);
h1 {
color: white !important;
}
.g-sky-bright {
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
color: white !important;
}
}
.bg-color-sky-bright {
background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(51, 153, 255, 0.5) 100%);
h1 {
color: white !important;
}
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
color: white !important;
}
}
.bg-color-gradient-light-blue {
@@ -584,22 +642,58 @@ button[type="submit"].single_add_to_cart_button,
.bg-color-navy-purple {
background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
color: white;
li {
color: white;
}
p {
color: white;
}
a {
color: white;
}
}
.bg-color-red-yellow {
background: linear-gradient(90deg, rgba(204, 1, 51, 1)0%, rgba(255, 176, 32, 1) 100%);
color: white;
li {
color: white;
}
p {
color: white;
}
a {
color: white;
}
}
.g-sky-border {
border-radius: 20px;
background: linear-gradient(to left top, rgba(51, 153, 255, .1) 0%, rgba(51, 153, 255, 0.5) 100%);
padding: 5px;
color: white;
img {
border-radius: 17px;
}
}
ul,
ol {
line-height: 30px !important;
li {
margin-bottom: 6px;
}
}
.mw-250 {
max-width: 250px;
}
@@ -616,6 +710,14 @@ button[type="submit"].single_add_to_cart_button,
}
}
.border-color-purple-gradient {
background: linear-gradient(to left top, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
padding: 5px;
position: relative;
width: fit-content;
margin: 0 auto;
}
.fs-xs {
font-size: 14px;
@@ -624,3 +726,12 @@ button[type="submit"].single_add_to_cart_button,
line-height: 19px;
}
}
.fs-sm {
font-size: 16px;
p {
font-size: 16px;
line-height: 26px;
}
}

24
wp/wp-content/themes/medicalalert/src/scss/hero.scss
View File

@@ -29,6 +29,11 @@
max-width: 500px;
}
.tile-1-3-grid {
max-width: 300px;
z-index: 1;
}
.tile-2 {
right: 2%;
bottom: -6%;
@@ -44,12 +49,21 @@
}
.radial {
bottom: -42%;
top: 600px;
right: -18%;
max-width: 450px;
}
body {
overflow-x: hidden;
}
@include media-breakpoint-up(md) {
.radial {
top: 300px;
right: -4%
}
.pos {
margin-bottom: -175px;
@@ -66,3 +80,11 @@
}
}
@include media-breakpoint-up(lg) {
.radial {
top: 500px;
right: -4%
}
}

10
wp/wp-content/themes/medicalalert/src/scss/icon-info-grid.scss
View File

@@ -4,22 +4,12 @@
display: grid;
grid-template-rows: 1fr auto 1fr;
width: 100%;
position: relative;
.icon-img {
max-width: 50px;
height: 50px;
display: flex;
align-items: end;
}
.content-wrapper {
.icon-link {
position: absolute;
bottom: 0;
width: fit-content;
}
}
}
}
}

2
wp/wp-content/themes/medicalalert/src/scss/logo-grid.scss
View File

@@ -2,6 +2,8 @@
.logo {
img {
width: 100%;
filter: grayscale(1);
opacity: 0.5;
}
}
}

11
wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
View File

@@ -2,21 +2,20 @@
padding-bottom: 9rem;
@include media-breakpoint-up(lg) {
.g-sky-border {
margin-bottom: -73px;
.offset {
position: absolute;
left: 20px;
}
}
.testimonial-img {
width: 100%;
max-width: 300px;
max-height: 300px;
object-fit: cover;
}
.testimonial-inner-content-wrapper {
padding-left: 3em;
.testimonial-title {
font-size: 32px;
font-weight: bold;

24
wp/wp-content/themes/medicalalert/src/scss/video-copy.scss
View File

@@ -7,31 +7,31 @@
max-width: 620px;
}
.radial-right-graphic {
top: 0;
right: -200px;
svg {
max-width: 1000px;
}
.none-graphic {
display: none
}
.radial-right-graphic {
top: 0;
right: -200px;
}
.radial-left-graphic {
top: 0;
left: -200px;
svg {
max-width: 1000px;
}
}
.radial-center-graphic {
top: 0;
left: 50%;
svg {
max-width: 1000px;
width: 1000px;
}
top: 0;
left: calc(50% - 500px);
}
}

14
wp/wp-content/themes/medicalalert/tpl/col2_circle_content.tpl
View File

@@ -5,22 +5,22 @@
{{#each circle_features}}
<div class="col-12 col-xl-6">
<div class="row">
<div class="col-12 col-md-auto text-center text-md-start">
<div class="highlighted-circle">
<img class="border-color-{{../border_color}}" src="{{image.url}}" alt="{{image.alt}}" />
<div class="col-12 col-md-auto">
<div class="rounded-circle {{../border_color}}">
<img class="rounded-circle" src="{{image.url}}" alt="{{image.alt}}" />
</div>
</div>
<div class="col align-content-center text-center text-md-start me-xl-5">
<div class="highlighted-circle-title mt-4">
<div class="highlighted-circle-title">
<h3>{{title}}</h3>
</div>
<div class="highlighted-circle-copy">
<p>{{copy}}</p>
</div>
{{#if link}}
<div class="highlighted-circle-link">
<a href="{{link.url}}">{{link.title}} ></a>
</div>
<button type="button" class="btn btn-outline-primary" href="{{link.url}}">
{{link.title}}
</button>
{{/if}}
</div>
</div>

28
wp/wp-content/themes/medicalalert/tpl/col2_circle_cta_list.tpl
View File

@@ -2,27 +2,27 @@
<section class="col2-circle-cta-list-slice-container bg-color-{{ background_color }} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row">
<div class="col-12 col-lg-5 my-auto order-lg-{{ alignment }}">
<div class="circle-image ms-4 me-4">
<img class="border-color-{{border_color}}" src="{{ image.url }}" alt="{{ image.alt }}">
<div class="col-12 col-md-6 my-sm-3 my-md-auto order-lg-{{ alignment }}">
<div class="rounded-circle {{border_color}}">
<img class="rounded-circle" src="{{ image.url }}" alt="{{ image.alt }}">
</div>
{{#if link}}
<div class="circle-link d-flex justify-content-center">
<a class="button--primary" href="{{ link.url }}">
{{ link.title }}
</a>
</div>
{{/if}}
</div>
<div class="col-12 col-lg-7 mt-4 order-lg-2">
<div class="title">
<h3>{{ title }}</h3>
</div>
<div class="col-12 col-md-5 order-lg-2 d-flex align-items-center text-center text-md-start">
<div>
<h3 class="title fw-bold">{{ title }}</h3>
<div class="copy">
{{{ copy }}}
</div>
{{#if link}}
<button class="btn btn-outline-primary" href="{{ link.url }}">
{{ link.title }}
</button>
{{/if}}
</div>
</div>
</div>
</div>
</section>
<!-- Col2 Circle CTA List END -->

29
wp/wp-content/themes/medicalalert/tpl/col2_media_highlights.tpl
View File

@@ -1,19 +1,34 @@
<!-- Col2 Media Highlights BEGIN -->
<section class="col2-media-highlights-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<section class="col2-media-highlights-slice-container p-relative overflow-hidden bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="p-absolute radial-{{radial_graphic}}">
<svg class="w-100" width="1289" height="1289" viewBox="0 0 1289 1289" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_293_291)">
<path opacity="0.72" d="M644.507 406.193C676.748 406.193 707.968 412.537 737.274 424.922C765.662 436.928 791.167 454.136 813.015 475.998C834.864 497.846 852.072 523.351 864.091 551.74C876.49 581.032 882.82 612.265 882.82 644.507C882.82 676.748 876.476 707.968 864.091 737.274C852.085 765.662 834.877 791.167 813.015 813.015C791.167 834.864 765.662 852.072 737.274 864.091C707.981 876.49 676.748 882.82 644.507 882.82C612.265 882.82 581.045 876.476 551.74 864.091C523.351 852.085 497.846 834.877 475.998 813.015C454.149 791.167 436.941 765.662 424.922 737.274C412.523 707.981 406.193 676.748 406.193 644.507C406.193 612.265 412.537 581.045 424.922 551.74C436.928 523.351 454.136 497.846 475.998 475.998C497.846 454.149 523.351 436.941 551.74 424.922C581.032 412.523 612.265 406.193 644.507 406.193Z" fill="white" fill-opacity="0.1" />
<path opacity="0.62" d="M644.506 351.461C482.918 351.461 351.461 482.918 351.461 644.506C351.461 806.095 482.918 937.552 644.506 937.552C806.095 937.552 937.552 806.095 937.552 644.506C937.552 482.918 806.095 351.461 644.506 351.461ZM644.506 338.499C685.87 338.499 725.963 346.625 763.617 362.549C800.066 377.962 832.806 400.059 860.88 428.133C888.954 456.207 911.038 488.947 926.464 525.396C942.388 563.05 950.514 603.143 950.514 644.506C950.514 685.87 942.388 725.963 926.464 763.617C911.051 800.066 888.954 832.806 860.88 860.88C832.806 888.954 800.066 911.038 763.617 926.464C725.963 942.388 685.87 950.514 644.506 950.514C603.143 950.514 563.05 942.388 525.396 926.464C488.947 911.051 456.207 888.954 428.133 860.88C400.059 832.806 377.975 800.066 362.549 763.617C346.625 725.963 338.499 685.87 338.499 644.506C338.499 603.143 346.625 563.05 362.549 525.396C377.962 488.947 400.059 456.207 428.133 428.133C456.207 400.059 488.947 377.975 525.396 362.549C563.05 346.625 603.143 338.499 644.506 338.499Z" fill="white" fill-opacity="0.1" />
<path opacity="0.53" d="M644.507 283.19C445.276 283.19 283.203 445.276 283.203 644.493C283.203 843.711 445.289 1005.8 644.507 1005.8C843.724 1005.8 1005.81 843.711 1005.81 644.493C1005.81 445.276 843.724 283.19 644.507 283.19ZM644.507 270.791C695.005 270.791 743.958 280.699 789.974 300.162C834.484 318.983 874.458 345.956 908.758 380.256C943.057 414.555 970.017 454.529 988.851 499.039C1008.31 545.055 1018.22 594.008 1018.22 644.507C1018.22 695.005 1008.31 743.958 988.851 789.974C970.03 834.484 943.057 874.458 908.758 908.758C874.458 943.057 834.484 970.017 789.974 988.851C743.958 1008.31 695.005 1018.22 644.507 1018.22C594.008 1018.22 545.055 1008.31 499.039 988.851C454.529 970.03 414.555 943.057 380.256 908.758C345.956 874.458 318.996 834.484 300.162 789.974C280.699 743.958 270.791 695.005 270.791 644.507C270.791 594.008 280.699 545.055 300.162 499.039C318.983 454.529 345.956 414.555 380.256 380.256C414.555 345.956 454.529 318.996 499.039 300.162C545.055 280.699 594.008 270.791 644.507 270.791Z" fill="white" fill-opacity="0.1" />
<path opacity="0.43" d="M644.507 214.932C407.635 214.932 214.932 407.635 214.932 644.507C214.932 881.378 407.635 1074.08 644.507 1074.08C881.378 1074.08 1074.08 881.378 1074.08 644.507C1074.08 407.635 881.378 214.932 644.507 214.932ZM644.507 203.097C704.128 203.097 761.94 214.788 816.318 237.789C868.888 260.031 916.097 291.866 956.622 332.391C997.147 372.916 1028.98 420.125 1051.22 472.695C1074.23 527.073 1085.92 584.886 1085.92 644.507C1085.92 704.128 1074.23 761.94 1051.22 816.318C1028.98 868.888 997.147 916.097 956.622 956.622C916.097 997.147 868.888 1028.98 816.318 1051.22C761.94 1074.23 704.128 1085.92 644.507 1085.92C584.886 1085.92 527.073 1074.23 472.695 1051.22C420.125 1028.98 372.916 997.147 332.391 956.622C291.866 916.097 260.031 868.888 237.789 816.318C214.788 761.94 203.097 704.128 203.097 644.507C203.097 584.886 214.788 527.073 237.789 472.695C260.031 420.125 291.866 372.916 332.391 332.391C372.916 291.866 420.125 260.031 472.695 237.789C527.073 214.788 584.886 203.097 644.507 203.097Z" fill="white" fill-opacity="0.1" />
<path opacity="0.34" d="M644.506 146.674C370.006 146.674 146.674 370.006 146.674 644.507C146.674 919.007 370.006 1142.34 644.506 1142.34C919.007 1142.34 1142.34 919.007 1142.34 644.507C1142.34 370.006 919.007 146.674 644.506 146.674ZM644.506 135.402C713.263 135.402 779.935 148.875 842.675 175.416C903.305 201.065 957.749 237.776 1004.5 284.513C1051.24 331.251 1087.96 385.708 1113.6 446.338C1140.14 509.078 1153.61 575.75 1153.61 644.507C1153.61 713.263 1140.14 779.935 1113.6 842.675C1087.95 903.305 1051.24 957.749 1004.5 1004.5C957.762 1051.24 903.305 1087.96 842.675 1113.6C779.935 1140.14 713.263 1153.61 644.506 1153.61C575.75 1153.61 509.078 1140.14 446.338 1113.6C385.708 1087.95 331.264 1051.24 284.513 1004.5C237.776 957.762 201.052 903.305 175.403 842.675C148.862 779.935 135.389 713.263 135.389 644.507C135.389 575.75 148.862 509.078 175.403 446.338C201.052 385.708 237.763 331.264 284.513 284.513C331.251 237.776 385.708 201.052 446.338 175.416C509.078 148.875 575.75 135.402 644.506 135.402Z" fill="white" fill-opacity="0.1" />
<path opacity="0.24" d="M644.507 78.4025C332.365 78.4025 78.4156 332.352 78.4156 644.493C78.4156 956.635 332.365 1210.58 644.507 1210.58C956.648 1210.58 1210.6 956.635 1210.6 644.493C1210.6 332.352 956.648 78.4025 644.507 78.4025ZM644.507 67.6946C722.385 67.6946 797.93 82.9504 869.032 113.03C937.723 142.086 999.401 183.673 1052.38 236.636C1105.34 289.599 1146.94 351.291 1175.98 419.981C1206.06 491.083 1221.32 566.628 1221.32 644.493C1221.32 722.359 1206.06 797.917 1175.98 869.006C1146.93 937.696 1105.34 999.375 1052.38 1052.35C999.415 1105.31 937.723 1146.91 869.032 1175.96C797.93 1206.04 722.385 1221.29 644.507 1221.29C566.629 1221.29 491.083 1206.04 419.981 1175.96C351.291 1146.9 289.612 1105.31 236.636 1052.35C183.673 999.388 142.073 937.696 113.03 869.006C82.9504 797.904 67.6946 722.359 67.6946 644.493C67.6946 566.628 82.9504 491.07 113.03 419.981C142.086 351.291 183.673 289.612 236.636 236.636C289.599 183.673 351.291 142.073 419.981 113.03C491.083 82.9504 566.629 67.6946 644.507 67.6946Z" fill="white" fill-opacity="0.1" />
<path opacity="0.15" d="M644.507 10.1443C294.71 10.1443 10.1443 294.71 10.1443 644.507C10.1443 994.303 294.71 1278.87 644.507 1278.87C994.303 1278.87 1278.87 994.303 1278.87 644.507C1278.87 294.71 994.29 10.1443 644.507 10.1443ZM644.507 1289C557.506 1289 473.101 1271.96 393.637 1238.34C316.886 1205.88 247.96 1159.42 188.771 1100.23C129.583 1041.04 83.1076 972.114 50.6562 895.363C17.0383 815.912 0 731.507 0 644.507C0 557.506 17.0383 473.101 50.6562 393.637C83.1207 316.886 129.583 247.96 188.771 188.771C247.96 129.583 316.886 83.1076 393.637 50.6562C473.088 17.0383 557.493 0 644.507 0C731.52 0 815.912 17.0383 895.376 50.6562C972.127 83.1207 1041.05 129.583 1100.24 188.771C1159.43 247.96 1205.91 316.886 1238.36 393.637C1271.96 473.101 1289.01 557.506 1289.01 644.507C1289.01 731.507 1271.97 815.912 1238.36 895.376C1205.89 972.127 1159.43 1041.05 1100.24 1100.24C1041.05 1159.43 972.127 1205.91 895.376 1238.36C815.912 1271.96 731.507 1289.01 644.507 1289.01V1289Z" fill="white" fill-opacity="0.1" />
</g>
<defs>
<clipPath id="clip0_293_291">
<rect width="1289" height="1289" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-lg-2 pb-5 gy-5">
<div class="col col-lg-6 order-lg-{{alignment}} border-side-{{alignment}}">
<div class="row row-cols-1 row-cols-lg-2">
<div class="col col-lg-6 my-auto order-lg-{{alignment}} border-side-{{alignment}}">
<div class="video-aside">
<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/{{video}}" allowfullscreen></iframe>
</div>
</div>
<div class="video-copy mt-4 mb-4">
{{{video_copy}}}
</div>
</div>
<div class="col col-lg-6 order-lg-2 my-auto">
<div class="copy mt-4">
<div class="copy">
{{{copy}}}
</div>
</div>

15
wp/wp-content/themes/medicalalert/tpl/col3_card.tpl
View File

@@ -1,10 +1,7 @@
<!-- Col3 Card BEGIN -->
<section class="container-fluid col3-card-slice-container p-relative z-0 bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
{{#if radial_graphic}}
<div class="p-absolute radial z-1">
<div class="p-absolute radial-top z-1">
<svg class="w-100" width="645" height="1023" viewBox="0 0 645 1023" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_293_290" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-378" y="0" width="1023" height="1023">
<g opacity="0.4" clip-path="url(#clip0_293_290)">
@@ -57,16 +54,22 @@
</div>
{{/if}}
<div class="container">
<div class="row">
{{#if section_header}}
<h2 class="text-{{header_alignment}} pb-3 pt-5">
{{section_header}}
</h2>
{{/if}}
{{#each image_card}}
<div class="col-lg-4 col3-card-wrapper">
<div class="mb-3 col3-card-item">
<div class="mb-3 col3-card-item bg-color-{{background_color}}">
<div class="g-sky-border">
<img class="col3-card-img" src="{{image.url}}" alt="{{image.alt}}" />
</div>
<div class="col3-card-item-inner-wrapper p-2">
<h3 class="col3-card-title mb-2 mt-3 fw-bold">{{title}}</h3>
<div class="col3-card-copy">{{{copy}}}</div>
<div class="col3-card-copy mb-2">{{{copy}}}</div>
{{#if link}}
<a class="text-nowrap button--primary col3-card-link" href="{{link.url}}">{{link.title}}</a>
{{/if}}

6
wp/wp-content/themes/medicalalert/tpl/color_header_card_grid.tpl
View File

@@ -4,11 +4,11 @@
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 justify-content-evenly gx-2 gy-3">
{{#each color_header_cards}}
<div class="col">
<div class="color-header-card shadow-sm border">
<div class="header text-center p-3 header-color-{{../header_background_color}}">
<div class="color-header-card header-color-{{../header_background_color}}">
<div class="header p-3">
<h4>{{header}}</h4>
</div>
<div class="copy text-center p-3">
<div class="copy p-3 bg-white">
<p>{{copy}}</p>
</div>
</div>

4
wp/wp-content/themes/medicalalert/tpl/cta_buttons.tpl
View File

@@ -1,11 +1,11 @@
<!-- CTA Buttons BEGIN -->
<section class="cta-buttons-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row justify-content-center">
<div class="row {{alignment}}">
{{#each buttons}}
<div class="col-auto">
<div class="cta-button">
<a class="button--primary" href="{{button.url}}">{{button.title}}</a>
<a class="{{../button_color}}" href="{{button.url}}">{{button.title}}</a>
</div>
</div>
{{/each}}

2
wp/wp-content/themes/medicalalert/tpl/form_with_image.tpl
View File

@@ -2,7 +2,7 @@
<section id="formAnchor" class="form-with-image-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-6 order-{{alignment}}">
<div class="col-12 col-md-6 order-{{alignment}} my-3">
<div class="g-purple-border m-auto">
<img class="w-100" src="{{image.url}}" alt="{{image.alt}}" />
</div>

50
wp/wp-content/themes/medicalalert/tpl/hero.tpl
View File

@@ -1,4 +1,5 @@
<section class="hero-slice-container g-sky-hero overflow-x-hidden">
<section class="hero-slice-container">
<div class="g-sky-hero">
<div class="container hero-wrapper">
<div class="row h-100 pb-5 p-relative d-flex align-items-center">
<div class="col-md-6 pt-5 d-flex flex-column justify-content-center h-100">
@@ -11,31 +12,13 @@
{{/if}}
</div>
<div class="col-md-6">
<div class="p-absolute radial">
<svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_252_440)">
<path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
<path opacity="0.66" d="M226.002 141.034C179.151 141.034 141.034 179.151 141.034 226.002C141.034 272.853 179.151 310.971 226.002 310.971C272.853 310.971 310.971 272.853 310.971 226.002C310.971 179.151 272.853 141.034 226.002 141.034ZM226.002 123.79C239.832 123.79 253.226 126.513 265.791 131.828C277.968 136.979 288.907 144.362 298.277 153.732C307.647 163.102 315.03 174.041 320.181 186.218C325.496 198.778 328.218 212.172 328.218 226.007C328.218 239.841 325.496 253.23 320.181 265.795C315.03 277.973 307.647 288.911 298.277 298.281C288.907 307.651 277.968 315.034 265.791 320.185C253.23 325.501 239.837 328.223 226.002 328.223C212.167 328.223 198.778 325.501 186.214 320.185C174.036 315.034 163.098 307.651 153.728 298.281C144.357 288.911 136.975 277.973 131.824 265.795C126.508 253.235 123.786 239.841 123.786 226.007C123.786 212.172 126.508 198.783 131.824 186.218C136.975 174.041 144.357 163.102 153.728 153.732C163.098 144.362 174.036 136.979 186.214 131.828C198.774 126.513 212.167 123.79 226.002 123.79Z" fill="white" fill-opacity="0.3" />
<path opacity="0.49" d="M226.002 99.7701C156.397 99.7701 99.7702 156.397 99.7702 226.002C99.7702 295.608 156.397 352.234 226.002 352.234C295.608 352.234 352.234 295.608 352.234 226.002C352.234 156.397 295.608 99.7701 226.002 99.7701ZM226.002 82.5269C245.393 82.5269 264.187 86.332 281.849 93.8085C298.936 101.036 314.286 111.39 327.448 124.557C340.61 137.719 350.964 153.068 358.196 170.156C365.668 187.818 369.473 206.611 369.473 226.002C369.473 245.393 365.668 264.187 358.196 281.849C350.969 298.936 340.614 314.286 327.448 327.448C314.286 340.61 298.936 350.964 281.849 358.196C264.187 365.668 245.389 369.478 226.002 369.478C206.616 369.478 187.818 365.672 170.156 358.196C153.068 350.969 137.719 340.614 124.557 327.448C111.395 314.286 101.04 298.936 93.8085 281.849C86.3365 264.187 82.5314 245.393 82.5314 226.002C82.5314 206.611 86.3365 187.818 93.8085 170.156C101.036 153.068 111.39 137.719 124.557 124.557C137.719 111.395 153.068 101.04 170.156 93.8085C187.818 86.3365 206.616 82.5314 226.002 82.5314V82.5269Z" fill="white" fill-opacity="0.3" />
<path opacity="0.32" d="M226.002 58.5067C133.646 58.5067 58.5067 133.646 58.5067 226.002C58.5067 318.358 133.646 393.498 226.002 393.498C318.358 393.498 393.498 318.358 393.498 226.002C393.498 133.646 318.358 58.5067 226.002 58.5067ZM226.002 41.2635C250.949 41.2635 275.148 46.1557 297.911 55.7843C319.913 65.0921 339.669 78.4144 356.628 95.3725C373.586 112.331 386.908 132.091 396.216 154.089C405.844 176.852 410.737 201.051 410.737 225.998C410.737 250.945 405.844 275.143 396.216 297.907C386.908 319.909 373.586 339.665 356.628 356.623C339.669 373.581 319.909 386.903 297.911 396.211C275.148 405.84 250.949 410.732 226.002 410.732C201.055 410.732 176.857 405.84 154.093 396.211C132.091 386.903 112.335 373.581 95.3769 356.623C78.4189 339.665 65.0966 319.904 55.7888 297.907C46.1602 275.143 41.2679 250.945 41.2679 225.998C41.2679 201.051 46.1602 176.852 55.7888 154.089C65.0966 132.087 78.4189 112.331 95.3769 95.3725C112.335 78.4144 132.096 65.0921 154.093 55.7843C176.857 46.1557 201.055 41.2635 226.002 41.2635Z" fill="white" fill-opacity="0.3" />
<path opacity="0.15" d="M226.002 17.2432C110.891 17.2432 17.2432 110.891 17.2432 226.002C17.2432 341.113 110.891 434.761 226.002 434.761C341.113 434.761 434.761 341.113 434.761 226.002C434.761 110.891 341.109 17.2432 226.002 17.2432ZM226.002 452C195.495 452 165.896 446.025 138.031 434.235C111.119 422.851 86.9469 406.557 66.1971 385.807C45.4428 365.053 29.1486 340.886 17.769 313.974C5.97498 286.104 0 256.505 0 226.002C0 195.499 5.97498 165.896 17.7645 138.031C29.1486 111.119 45.4428 86.9469 66.1926 66.1971C86.9469 45.4428 111.114 29.1486 138.026 17.769C165.896 5.97498 195.495 0 226.002 0C256.51 0 286.108 5.97498 313.974 17.7645C340.886 29.1486 365.058 45.4428 385.807 66.1926C406.562 86.9469 422.856 111.114 434.235 138.026C446.021 165.896 452 195.49 452 225.998C452 256.505 446.025 286.104 434.235 313.969C422.851 340.881 406.557 365.053 385.807 385.803C365.053 406.557 340.886 422.851 313.974 434.231C286.104 446.016 256.51 451.996 226.002 451.996V452Z" fill="white" fill-opacity="0.3" />
</g>
<defs>
<clipPath id="clip0_252_440">
<rect width="452" height="452" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="d-flex align-items-center justify-content-center">
{{#if tile_image_3}}
<div class="pt-md-5 mt-md-5">
<div class="g-sky-border mt-5 me-3 tile-1 p-relative z-0">
<div class="g-sky-border mt-5 me-3 tile-1-3-grid p-relative z-0">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
</div>
<div>
<div class="pos z-1 p-relative">
<div class="g-sky-border mb-3">
@@ -53,26 +36,39 @@
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
</div>
<div class="p-absolute tile-square tile-2">
<div class="g-sky-border">
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
</div>
</div>
{{else}}
{{#if tile_image_1}}
<div class="g-sky-border mt-5 tile-1 p-relative z-0 ms-auto">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-absolute radial w-100">
<svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_252_440)">
<path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
<path opacity="0.66" d="M226.002 141.034C179.151 141.034 141.034 179.151 141.034 226.002C141.034 272.853 179.151 310.971 226.002 310.971C272.853 310.971 310.971 272.853 310.971 226.002C310.971 179.151 272.853 141.034 226.002 141.034ZM226.002 123.79C239.832 123.79 253.226 126.513 265.791 131.828C277.968 136.979 288.907 144.362 298.277 153.732C307.647 163.102 315.03 174.041 320.181 186.218C325.496 198.778 328.218 212.172 328.218 226.007C328.218 239.841 325.496 253.23 320.181 265.795C315.03 277.973 307.647 288.911 298.277 298.281C288.907 307.651 277.968 315.034 265.791 320.185C253.23 325.501 239.837 328.223 226.002 328.223C212.167 328.223 198.778 325.501 186.214 320.185C174.036 315.034 163.098 307.651 153.728 298.281C144.357 288.911 136.975 277.973 131.824 265.795C126.508 253.235 123.786 239.841 123.786 226.007C123.786 212.172 126.508 198.783 131.824 186.218C136.975 174.041 144.357 163.102 153.728 153.732C163.098 144.362 174.036 136.979 186.214 131.828C198.774 126.513 212.167 123.79 226.002 123.79Z" fill="white" fill-opacity="0.3" />
<path opacity="0.49" d="M226.002 99.7701C156.397 99.7701 99.7702 156.397 99.7702 226.002C99.7702 295.608 156.397 352.234 226.002 352.234C295.608 352.234 352.234 295.608 352.234 226.002C352.234 156.397 295.608 99.7701 226.002 99.7701ZM226.002 82.5269C245.393 82.5269 264.187 86.332 281.849 93.8085C298.936 101.036 314.286 111.39 327.448 124.557C340.61 137.719 350.964 153.068 358.196 170.156C365.668 187.818 369.473 206.611 369.473 226.002C369.473 245.393 365.668 264.187 358.196 281.849C350.969 298.936 340.614 314.286 327.448 327.448C314.286 340.61 298.936 350.964 281.849 358.196C264.187 365.668 245.389 369.478 226.002 369.478C206.616 369.478 187.818 365.672 170.156 358.196C153.068 350.969 137.719 340.614 124.557 327.448C111.395 314.286 101.04 298.936 93.8085 281.849C86.3365 264.187 82.5314 245.393 82.5314 226.002C82.5314 206.611 86.3365 187.818 93.8085 170.156C101.036 153.068 111.39 137.719 124.557 124.557C137.719 111.395 153.068 101.04 170.156 93.8085C187.818 86.3365 206.616 82.5314 226.002 82.5314V82.5269Z" fill="white" fill-opacity="0.3" />
<path opacity="0.32" d="M226.002 58.5067C133.646 58.5067 58.5067 133.646 58.5067 226.002C58.5067 318.358 133.646 393.498 226.002 393.498C318.358 393.498 393.498 318.358 393.498 226.002C393.498 133.646 318.358 58.5067 226.002 58.5067ZM226.002 41.2635C250.949 41.2635 275.148 46.1557 297.911 55.7843C319.913 65.0921 339.669 78.4144 356.628 95.3725C373.586 112.331 386.908 132.091 396.216 154.089C405.844 176.852 410.737 201.051 410.737 225.998C410.737 250.945 405.844 275.143 396.216 297.907C386.908 319.909 373.586 339.665 356.628 356.623C339.669 373.581 319.909 386.903 297.911 396.211C275.148 405.84 250.949 410.732 226.002 410.732C201.055 410.732 176.857 405.84 154.093 396.211C132.091 386.903 112.335 373.581 95.3769 356.623C78.4189 339.665 65.0966 319.904 55.7888 297.907C46.1602 275.143 41.2679 250.945 41.2679 225.998C41.2679 201.051 46.1602 176.852 55.7888 154.089C65.0966 132.087 78.4189 112.331 95.3769 95.3725C112.335 78.4144 132.096 65.0921 154.093 55.7843C176.857 46.1557 201.055 41.2635 226.002 41.2635Z" fill="white" fill-opacity="0.3" />
<path opacity="0.15" d="M226.002 17.2432C110.891 17.2432 17.2432 110.891 17.2432 226.002C17.2432 341.113 110.891 434.761 226.002 434.761C341.113 434.761 434.761 341.113 434.761 226.002C434.761 110.891 341.109 17.2432 226.002 17.2432ZM226.002 452C195.495 452 165.896 446.025 138.031 434.235C111.119 422.851 86.9469 406.557 66.1971 385.807C45.4428 365.053 29.1486 340.886 17.769 313.974C5.97498 286.104 0 256.505 0 226.002C0 195.499 5.97498 165.896 17.7645 138.031C29.1486 111.119 45.4428 86.9469 66.1926 66.1971C86.9469 45.4428 111.114 29.1486 138.026 17.769C165.896 5.97498 195.495 0 226.002 0C256.51 0 286.108 5.97498 313.974 17.7645C340.886 29.1486 365.058 45.4428 385.807 66.1926C406.562 86.9469 422.856 111.114 434.235 138.026C446.021 165.896 452 195.49 452 225.998C452 256.505 446.025 286.104 434.235 313.969C422.851 340.881 406.557 365.053 385.807 385.803C365.053 406.557 340.886 422.851 313.974 434.231C286.104 446.016 256.51 451.996 226.002 451.996V452Z" fill="white" fill-opacity="0.3" />
</g>
<defs>
<clipPath id="clip0_252_440">
<rect width="452" height="452" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</section>

8
wp/wp-content/themes/medicalalert/tpl/icon_info_grid.tpl
View File

@@ -1,11 +1,11 @@
<!-- Icon Info Grid BEGIN -->
<section class="icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container pb-4">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{number_of_columns}} d-flex justify-content-center gx-5">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{number_of_columns}} d-flex justify-content-center gx-5 gy-5">
{{#each icon_cards}}
<div class="col icon-card-wrapper">
<div class="icon-card">
<div class="icon-img">
<div class="icon-card d-flex {{../align_icons}}">
<div class="icon-img mt-2 me-3">
<img class="img-fluid" src="{{icon.url}}" alt="{{icon.alt}}" />
</div>
<div class="content-wrapper">
@@ -14,9 +14,11 @@
{{{copy}}}
</div>
{{#if link}}
<div>
<div class="icon-link">
<a href="{{link.url}}" class="text-nowrap button--primary">{{link.title}}</a>
</div>
</div>
{{/if}}
</div>
</div>

22
wp/wp-content/themes/medicalalert/tpl/icon_video_aside.tpl
View File

@@ -2,33 +2,33 @@
<section class="icon-video-aside-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row">
<div class="col">
<div class="col-12 col-md-6">
<div class="icon-video-rows">
{{#each icon_video_rows}}
<div class="row">
<div class="col-auto mt-3">
<div class="icon">
<div class="d-flex mt-3">
<div class="icon me-3">
<img src="{{icon.url}}" alt="{{icon.alt}}">
</div>
</div>
<div class="col-12 col-lg-6 pt-3">
<div class="info">
<div class="title mb-2">
<h4>{{title}}</h4>
</div>
<div class="copy mb-3">
<div class="copy mb-3 fs-sm">
{{{copy}}}
</div>
<div class="link mb-5">
{{#if link}}
<div class="link mb-5">
<a href="{{link.url}}">
{{link.title}}
</a>
</div>
{{/if}}
</div>
</div>
{{/each}}
</div>
<div class="col-12 col-lg-5">
</div>
<div class="col-12 col-md-6 mt-4">
<div class="video">
<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/{{video}}" allowfullscreen></iframe>
@@ -36,10 +36,6 @@
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</section>
<!-- Icon Video Aside END -->

13
wp/wp-content/themes/medicalalert/tpl/image_aside.tpl
View File

@@ -2,18 +2,17 @@
<section class="image-aside-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row row-cols-2 gx-4">
<div class="col-12 col-md-6 my-auto order-lg-{{alignment}}">
<div class="col-12 col-md-6 my-auto py-3 order-lg-{{alignment}}">
<div class="g-sky-border">
<img class="img-fluid image-aside-img" src="{{image.url}}" alt="{{image.alt}}">
</div>
</div>
<div class="col-12 col-md-6 my-auto py-3">
<div class="image-aside-copy">
{{{copy}}}
</div>
</div>
<div class="col-12 col-md-6 order-lg-2">
<div class="image-aside-img-wrapper">
<img class="img-fluid image-aside-img" src="{{image.url}}" alt="{{image.alt}}">
</div>
</div>
</div>
</div>
</section>
<!-- Image Aside END -->

26
wp/wp-content/themes/medicalalert/tpl/image_with_checklist.tpl
View File

@@ -2,30 +2,30 @@
<section class="image-with-checklist-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container-fluid image-with-checklist-wrapper">
<div class="container">
<div class="row justify-content-center align-items-center gx-5">
<div class="col-auto mb-4">
<img class="img-fluid image-with-checklist-img" src="{{image.url}}" alt="{{image.alt}}" />
<div class="row justify-content-center align-items-center">
<div class="col-auto p-3">
<img class="img-fluid g-sky-border" src="{{image.url}}" alt="{{image.alt}}" />
</div>
<div class="col-auto col-lg-6 my-auto">
<div class="col-auto col-lg-6 my-auto p-3">
<div class="image-with-checklist-copy">{{{copy}}}</div>
<div class="mt-4 mb-4 image-with-checklist-list">
<div class="image-with-checklist-list">
{{#each checklist_items}}
<div class="row mt-3 mb-3">
<div class="col-1">
<div class="check">
<img src="/wp-content/themes/medicalalert/assets/media/images/medicalalert__custom-list-image.png" alt="Checkmark">
<div class="row mb-2">
<div class="d-flex">
<div class="check me-2 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#5BB25D" class="bi bi-check-lg" viewBox="0 0 16 16">
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" />
</svg>
</div>
</div>
<div class="col-11">
<div class="checklist-item">
<p>{{checklist_item}}</p>
<p class="m-0">{{checklist_item}}</p>
</div>
</div>
</div>
{{/each}}
</div>
{{#if link}}
<div class="link mb-5">
<div class="link mt-4">
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
</div>
{{/if}}

11
wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
View File

@@ -1,16 +1,15 @@
<!-- Image With Icon Info Grid BEGIN -->
<section class="image-with-icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row gx-3">
<div class="col-12 col-md col-lg-3 order-{{alignment}} align-self-center">
<div class="image">
<img src="{{image.url}}" alt="{{image.alt}}">
<div class="col-12 col-md col-lg-4 order-md-{{alignment}} align-self-center py-3">
<div class="g-purple-border">
<img class="w-100" src="{{image.url}}" alt="{{image.alt}}">
</div>
</div>
<div class="col-12 col-md col-lg-9 order-2 my-auto">
<div class="col-12 col-md col-lg-8 my-auto py-3">
<div class="icon-info-grid">
<div class="row row-cols-lg-2 gx-3 gy-5">
<div class="row row-cols-lg-2 gx-3 gy-3">
{{#each icon_info_cards}}
<div class="col-12">
<div class="row">

2
wp/wp-content/themes/medicalalert/tpl/notification_bar.tpl
View File

@@ -3,7 +3,7 @@
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="notification-bar">
<div class="notification-bar border py-1 px-2 mt-3">
{{{ copy }}}
</div>
</div>

4
wp/wp-content/themes/medicalalert/tpl/products_list.tpl
View File

@@ -1,7 +1,7 @@
<!-- Products List BEGIN -->
<section class="products-list-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row">
<div class="row gx-2">
{{#each products}}
<div class="col-12 col-lg-4 mb-2">
<div class="products-list-item h-100">
@@ -12,7 +12,7 @@
</div>
<div class="products-list-item-inner-wrapper align-self-stretch">
<div class="line-sm pt-1"></div>
<h3 class="products-list-title mb-3 pt-4">{{title}}</h3>
<h3 class="products-list-title mb-3 pt-4 fw-bold">{{title}}</h3>
<div class="products-list-copy pb-2">
<p>{{{copy}}}</p>
</div>

14
wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
View File

@@ -1,5 +1,5 @@
<!-- Testimonial BEGIN -->
<section class="testimonial-slice-container p-relative mx-xs-2 mx-md-0 overflow-hidden">
<section class="testimonial-slice-container mx-xs-2 mx-md-0 overflow-hidden p-relative padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="p-absolute radial">
<svg class="w-100" width="614" height="1023" viewBox="0 0 614 1023" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" clip-path="url(#clip0_252_476)">
@@ -46,19 +46,19 @@
</defs>
</svg>
</div>
<div class="container rounded bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center mb-4">
<div class="g-sky-border z-0">
<div class="container rounded p-4 bg-color-{{background_color}}">
<div class="row gx-5">
<div class="col-lg-5 p-relative d-flex justify-content-center mb-4">
<div class="g-sky-border z-0 offset">
<img class="testimonial-img" src="{{image.url}}" alt="{{image.alt}}" />
</div>
</div>
<div class="col-lg-8 my-auto testimonial-inner-content-wrapper">
<div class="col-lg-7 my-auto testimonial-inner-content-wrapper">
<svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.93 28.57V18.49C19.93 13.99 21.16 10.06 23.62 6.7C26.08 3.28 29.86 1.18 34.96 0.399999V6.97C32.02 7.33 30.07 8.29 29.11 9.85C28.15 11.41 27.67 13.48 27.67 16.06L22.36 14.98H34.78V28.57H19.93ZM0.4 28.57V18.49C0.4 13.99 1.63 10.06 4.09 6.7C6.55 3.28 10.33 1.18 15.43 0.399999V6.97C12.49 7.33 10.54 8.29 9.58 9.85C8.62 11.41 8.14 13.48 8.14 16.06L2.83 14.98H15.25V28.57H0.4Z" fill="white" />
</svg>
<h3 class="fw-bold f-navy mb-2">{{header}}</h3>
<h3 class="fw-bold f-navy mb-2 mt-1">{{header}}</h3>
<div class="f-black">{{{copy}}}</div>
<p class="f-black mt-4">
{{quote_attribution}}