Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/common/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// TITLES
// ==============================================

.title-1 {
    font-weight: $fw-roboto-bold;
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 15px;
    color: $c-blue-dark;

    @include breakpoint(sm) {
        font-size: 2.8rem;
        margin-bottom: 20px;
    }
}

.title-2 {
    font-weight: $fw-roboto-bold;
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 10px;
    color: $c-blue-dark;

    @include breakpoint(sm) {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

.title-3 {
    font-weight: $fw-roboto-medium;
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 10px;
    color: $c-blue-dark;

    @include breakpoint(sm) {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
}

.subtitle {
    display: block;
    font-weight: $fw-roboto-regular;
    font-size: 1.2rem;
    line-height: 1.3;

    @include breakpoint(sm) {
        font-size: 1.8rem;
    }

}

.subtitle-2 {
    @extend .subtitle;
    color: $c-blue;
}

// Product Status Titles
.status-titles-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px 0;

    .status-title {
        width: 50%;
        padding-right: 4%;
    }
}
.status-title {
    min-width: 115px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.5;
    font-size: 1.2rem;
    text-align: left;
    text-transform: uppercase;

    @include breakpoint(md) {
        min-width: 130px;
    }

    > span {
        display: block;
        position: relative;
        padding-bottom: 5px;
        max-width: 195px;
        white-space: nowrap;

        &:after {
            content:"";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 5px;
            background-color: $c-base;
        }
    }

    &.state-new > span {
        &:after {
            background-color: $c-status-new;
        }
    }
    &.state-used > span {
        &:after {
            background-color: $c-status-used;
        }
    }
    &.state-refurbished > span {
        &:after {
            background-color: $c-status-refurbished;
        }
    }
    &.state-exchange > span {
        &:after {
            background-color: $c-status-exchange;
        }
    }
}

.state-new,
.state-used,
.state-refurbished,
.state-exchange {
    @extend .status-title;
}