%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/projetos/cartaovisita.gracaeditorial.com.br/assets/styles/
Upload File :
Create Path :
Current File : /var/www/projetos/cartaovisita.gracaeditorial.com.br/assets/styles/david-soares.css

:root {
    --green: #026632;
    --gray-light: #cbcbcb;
    --white: #fff;
    --gray-pink: #706e6f;

    --bg-page: var(--gray-light);
    --bg-header: var(--green);
    --bg-body: var(--white);
    --border-body: var(--gray-pink);
    --bg-profile: var(--green);
    --bg-icon: var(--green);
    --bg-footer: var(--green);
    --title-name: var(--green);
    --title-division: var(--gray-pink);
    --social-media-description: var(--green);
    --footer-link: var(--white);

    --font: "Myriad Pro";
}

.welcomecard-area-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-page);
}

.welcomecard-area-page .welcomecard-area-card {
    width: 800px;
    margin: 13px 0;
    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 45%);
    position: relative;
}

.welcomecard-area-page .card-header {
    background-color: var(--bg-header);
}

.welcomecard-area-page .card-header a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcomecard-area-page .card-header img {
    width: 68%;
    padding: 9.56% 0;
}

.welcomecard-area-page .card-header-language img
{
    position: absolute;
    width: 7%;
    height: 4%;
    right: 0;
}

.welcomecard-area-page .card-body {
    background-color: var(--bg-body);
    border-top: 6px solid;
    border-bottom: 7px solid;
    border-color: var(--border-body);
    position: relative;
}

.welcomecard-area-page .card-body .card-body-water-mark {
    position: absolute;
    right: 0;
    top: -25px;
    height: 65%;
}

.welcomecard-area-page .card-body .card-body-water-mark img {
    height: 100%;
    opacity: 0.03;
}

.welcomecard-area-page .card-body .card-body-content {
    padding: 6.3% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.welcomecard-area-page .card-body-content .card-body-profile {
    --profile-width: 316px;

    width: var(--profile-width);
    height: var(--profile-width);
    border-radius: 50%;
    margin: 45px 0 29px;
    background-color: var(--bg-profile);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.welcomecard-area-page .card-body-profile img {
    height: 94%;
    margin-right: 2%;
}

.welcomecard-area-page .card-body-content .card-body-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.welcomecard-area-page .card-body-title .card-body-name p,
.welcomecard-area-page .card-body-title .card-body-job p {
    font-size: 59px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--title-name);
}

.welcomecard-area-page .card-body-title span {
    width: 75%;
    height: 3px;
    margin: 1.2% 0 1.4%;
    background-color: var(--title-division);
}

.welcomecard-area-page .card-body-title .card-body-job p {
    font-size: 34px;
}

.welcomecard-area-page .card-body-content .card-body-area-social-media {
    margin: 6.6% 0 1.6%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.welcomecard-area-page .card-body-area-social-media .card-body-social-media {
    --item-count: 3;
    --item-width: 103px;
    --item-margin: 40px;
    
    width: calc(var(--item-count) * (var(--item-width) + var(--item-margin)));
}

.welcomecard-area-page .card-body-social-media .social-media-item {
    width: var(--item-width);
    height: var(--item-width);
    background-color: var(--bg-icon);
    float: left;
    margin: calc(var(--item-margin) / 2);
    margin-bottom: calc((var(--item-margin) / 2) - 4px);
    border-radius: 50%;
}

.welcomecard-area-page .social-media-item a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcomecard-area-page .social-media-item img {
    width: 52px;
}

.welcomecard-area-page .social-media-item .social-media-email img {
    width: 49px;
}

.welcomecard-area-page .social-media-item .social-media-maps img {
    width: 38px;
}

.welcomecard-area-page .social-media-item .social-media-instagram img {
    width: 48px;
}

.welcomecard-area-page .social-media-item .social-media-catalogo-online img {
    width: 44px;
}

.welcomecard-area-page .social-media-description {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6.6%;
}

.welcomecard-area-page .social-media-description p {
    font-size: 27px;
    font-weight: 700;
    color: var(--social-media-description);
    font-family: var(--font);
}

.welcomecard-area-page .card-footer {
    width: 100%;
    background-color: var(--bg-footer);
}

.welcomecard-area-page .card-footer a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcomecard-area-page .card-footer p {
    font-size: 36px;
    font-weight: 700;
    color: var(--footer-link);
    padding: 4.5% 0;
    font-family: var(--font);
}

@media (max-width: 820px) {
    .welcomecard-area-page .welcomecard-area-card {
        width: 100%;
        margin: 0;
    }

    .welcomecard-area-page .card-body-content .card-body-profile {
        --profile-width: 38.5vw;
    }

    .welcomecard-area-page .card-body-title .card-body-name p {
        font-size: 7vw;
    }

    .welcomecard-area-page .card-body-title .card-body-job p {
        font-size: 4vw;
    }

    .welcomecard-area-page .card-body-title span {
        height: 0.3vw;
    }

    .welcomecard-area-page .card-body-area-social-media .card-body-social-media {
        --item-width: 12.6vw;
        --item-margin: 4.9vw;
    }

    .welcomecard-area-page .social-media-item img {
        width: 6.3vw;
    }
    
    .welcomecard-area-page .social-media-item .social-media-email img {
        width: 6vw;
    }
    
    .welcomecard-area-page .social-media-item .social-media-maps img {
        width: 4.6vw;
    }
    
    .welcomecard-area-page .social-media-item .social-media-instagram img {
        width: 5.8vw;
    }
    
    .welcomecard-area-page .social-media-item .social-media-catalogo-online img {
        width: 5.4vw;
    }

    .welcomecard-area-page .social-media-description p {
        font-size: 3.2vw;
    }

    .welcomecard-area-page .card-footer p {
        font-size: 4.37vw;
    }
}

Zerion Mini Shell 1.0