medicalalert-web-reloaded/wp/wp-content/themes/medicalalert/src/scss/global.scss

// type elements
body {
    font-family: 'Inter', sans-serif;
}

.py-1 {
    padding: 1rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}

.py-4 {
    padding: 4rem 0;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

// .consumer-brand {
//     h1 {
//         color: $consumer-primary;
//     }
// }

.business-brand {
    h1 {
        color: $business-primary;
    }
}

// .consumer-brand {
//     h2 {
//         color: $consumer-primary;
//     }
// }

.business-brand {
    h2 {
        color: $business-primary;
    }
}



// .consumer-brand {
//     h3 {
//         color: $consumer-primary;
//     }
// }

// .business-brand {
//     h3 {
//         color: $business-primary;
//     }
// }
.rounded {
    border-radius: 27px !important;
}

h4 {
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
}

.consumer-brand {
    h4 {
        color: $consumer-primary;
    }
}

.business-brand {
    h4 {
        color: $business-primary;
    }
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.pe-3 {
    padding-right: 3rem;
}

p {
    font-size: 20px;
    line-height: 32px;
    color: $light-gray;
}

a {
    color: $light-gray;
    text-decoration: none;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}

ul,
ol {
    font-size: 20px;
    line-height: 45px;
    margin-bottom: unset;
    color: $light-gray;
}

// cta
a.button--primary,
input[type="submit"].gform_button,
button[type="submit"].single_add_to_cart_button,
#searchBtn {
    border: none;
    padding: 10px 36px;
    background-color: $orange !important;
    color: $white !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    display: inline-block;
    line-height: 20.21px;
    border-radius: 8px;
}

// Background Colors Configurations
.bg-color-white {
    background-color: $white;
}

.bg-color-pink {
    background-color: $gray;

    p {
        color: $light-gray;
    }
}

.bg-color-red {
    background-color: $consumer-primary;

    p {
        color: $white;
    }
}

.bg-color-light-blue {
    background-color: $light-blue;
}

.bg-color-blue {
    background-color: $consumer-primary;
}

// Top and Bottom Background Color Configurations
.bg-color-top-white {
    position: relative;
    width: 100%;

    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $white;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-white {
    position: relative;
    width: 100%;

    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $white;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-top-pink {
    position: relative;
    width: 100%;

    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $gray;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-pink {
    position: relative;
    width: 100%;

    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $gray;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.bg-color-top-red {
    position: relative;
    width: 100%;

    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $consumer-highlight;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-red {
    position: relative;
    width: 100%;

    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $consumer-highlight;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.bg-color-top-light-blue {
    position: relative;
    width: 100%;

    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $light-blue;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-light-blue {
    position: relative;
    width: 100%;

    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $light-blue;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

// Border Color Configurations
.border-color-none {
    border: none;
}

.border-color-white {
    border: 2px solid $white;
}

.border-color-red {
    border: 2px solid $consumer-primary;
}

.border-color-black {
    border: 2px solid $black;
}

.padding-top-none {
    padding-top: 0;
}

.padding-bottom-none {
    padding-bottom: 0;
}

// Padding classes for slice configs
.padding-top-small {
    @include media-breakpoint-up(xs) {
        padding-top: 0.25rem;
    }

    @include media-breakpoint-up(md) {
        padding-top: 0.5rem;
    }

    @include media-breakpoint-up(lg) {
        padding-top: 1rem;
    }
}

.padding-bottom-small {
    @include media-breakpoint-up(xs) {
        padding-bottom: 0.25rem;
    }

    @include media-breakpoint-up(md) {
        padding-bottom: 0.5rem;
    }

    @include media-breakpoint-up(lg) {
        padding-bottom: 1rem;
    }
}

.padding-top-medium {
    @include media-breakpoint-up(xs) {
        padding-top: 1rem;
    }

    @include media-breakpoint-up(md) {
        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 {
    @include media-breakpoint-up(xs) {
        padding-bottom: 3rem;
    }

    @include media-breakpoint-up(md) {
        padding-bottom: 4rem;
    }

    @include media-breakpoint-up(lg) {
        padding-bottom: 6rem;
    }
}


.sonar-svg-right {
    top: 0;
    right: 0;
    overflow-x: hidden;


    svg {
        max-width: 300px;
        width: 100%;
    }
}

.sonar-svg-right-big {
    top: 0;
    right: -13%;
    overflow-x: hidden;


    svg {
        max-width: 1000px;
        width: 100%;
    }
}

.f-white {
    color: white;

    &:hover {
        color: white !important;
    }

    p {
        color: white;
    }

    a {
        color: white;

        &:hover {
            color: white !important;
        }
    }

}

.f-black {
    color: #110F24;

    p {
        color: #110F24;
    }
}

.f-purple {
    color: $ma-purple;

    p {
        color: $ma-purple !important;

    }
}

.f-navy {
    color: $ma-navy;

    p {
        color: $ma-navy !important;

    }
}

.f-sky {
    color: $ma-sky;
}

.f-red {
    color: $ma-red;
}

.f-gray {
    color: $ma-gray;
}

.f-yellow {
    color: $ma-yellow;
}

.f-green {
    color: $ma-green;
}

.bg-navy {
    background: $ma-navy;
}

.bg-red {
    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;
}

.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 {
    background: $ma-purple;
}

.bg-yellow {
    background: $ma-yellow;
}

.bg-green {
    background: $ma-green;
}

.bg-color-navy-sky {
    background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(51, 153, 255, 1) 100%);

    h1 {
        color: white !important;
    }

    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 {
    background: linear-gradient(90deg, rgba(51, 153, 255, 0.5) 0%, rgba(51, 153, 255, 0.1) 100%);
}

.g-sky-hero {
    background: linear-gradient(90deg, rgba(51, 153, 255, 0.1) 0%, rgba(51, 153, 255, 0.5) 100%);
    border-bottom-right-radius: 45px;
    border-bottom-left-radius: 45px;
}

.bg-color-sky-red {
    background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(204, 1, 51, 1) 100%);

    h1 {
        color: white !important;
    }

    h2 {
        color: white !important;
    }

    h3 {
        color: white !important;
    }

    strong {
        color: white !important;
    }

    p {
        color: white !important;
    }
}

.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;
}

.g-purple-border {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(to left top, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
    padding: 5px;
    max-width: 458px;

    img {
        border-radius: 17px;
    }
}

.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;

    p {
        font-size: 14px;
        line-height: 19px;
    }
}

.fs-sm {
    font-size: 16px;

    p {
        font-size: 16px;
        line-height: 26px;
    }
}