/************************************************
 * HOMEPAGE THEME
 * Version: 1.0
 * Palette: Everforest
 ************************************************/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {

    --bg-main:#202723;
    --bg-card:#2A332E;
    --bg-card-hover:#36423B;

    --accent:#86B69A;
    --accent-light:#A5CCB4;

    --text:#EDF4EF;
    --text-secondary:#AEB8B2;

    --shadow:
        0 8px 24px rgba(0,0,0,.22);

    --shadow-hover:
        0 18px 42px rgba(0,0,0,.32);

}

html,
body{

    font-family:Inter,sans-serif !important;

    color:var(--text);

    background:var(--bg-main);

}


/***********************************************
 Background
************************************************/

body{

    background:
        radial-gradient(circle at top left,#2A332E 0%,#202723 45%,#181D1A 100%);

}

#background{

    filter:
        brightness(.55)
        saturate(.75)
        blur(0px);

    opacity:.45 !important;

}


/***********************************************
 Main container
************************************************/

.container{

    max-width:1550px;

}


/***********************************************
 Header widgets
************************************************/

#information-widgets{

    width:fit-content !important;

    margin-left:auto;

    margin-right:20px;

    padding:18px 22px;

    border-radius:20px;

    background:rgba(42,51,46,.82);

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    border:1px solid rgba(134,182,154,.12);

}


/***********************************************
 Datetime
************************************************/

.information-widget-datetime{

    padding-right:28px;

}

.information-widget-datetime span:first-child{

    font-size:1.05rem !important;

    font-weight:600;

    color:var(--text);

}

.information-widget-datetime span:last-child{

    color:var(--text-secondary);

}


/***********************************************
 Weather
************************************************/

.information-widget-openmeteo{

    padding-left:24px;

}

.information-widget-openmeteo .primary-text{

    color:var(--text);

    font-weight:600;

}

.information-widget-openmeteo .secondary-text{

    color:var(--text-secondary);

}


/***********************************************
 Groups
************************************************/

h2,
h3,
.group-title{

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.8rem !important;

    font-weight:700;

    color:var(--accent) !important;

}


/***********************************************
 Cards
************************************************/

.service-card{

    position:relative;

    border-radius:18px !important;

    border:1px solid rgba(134,182,154,.10);

    background:var(--bg-card) !important;

    transition:
        transform .25s,
        background .25s,
        box-shadow .25s,
        border-color .25s;

    box-shadow:var(--shadow);

}


/***********************************************
 Accent line
************************************************/

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    border-radius:18px 18px 0 0;

    background:linear-gradient(
        90deg,
        var(--accent),
        var(--accent-light)
    );

}


/***********************************************
 Hover
************************************************/

.service-card:hover{

    transform:translateY(-5px);

    background:var(--bg-card-hover) !important;

    border-color:rgba(134,182,154,.35);

    box-shadow:var(--shadow-hover);

}


/***********************************************
 Service name
************************************************/

.service-name{

    color:var(--text) !important;

    font-weight:600;

}


/***********************************************
 Description
************************************************/

.service-description{

    color:var(--text-secondary) !important;

}


/***********************************************
 Icons
************************************************/

.service-card img{

    transition:
        transform .25s,
        filter .25s;

}

.service-card:hover img{

    transform:scale(1.08);

    filter:
        brightness(1.08)
        saturate(1.15);

}


/***********************************************
 Footer
************************************************/

footer{

    opacity:.45;

}


/***********************************************
 Scrollbar
************************************************/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#46544D;

    border-radius:99px;

}

::-webkit-scrollbar-thumb:hover{

    background:#5B6D64;

}

/************************************************
 Greeting card
************************************************/

#homepage-greeting{

    display:flex;

    flex-direction:column;

    justify-content:center;

    margin-right:28px;

    padding-right:28px;

    border-right:1px solid rgba(134,182,154,.18);

}

.hp-title{

    font-size:1.55rem;

    font-weight:700;

    color:var(--text);

    line-height:1.1;

}

.hp-subtitle{

    margin-top:6px;

    font-size:.88rem;

    color:var(--text-secondary);

    text-transform:capitalize;

}

/***********************************************
 Compact header
************************************************/

#information-widgets{

    display:inline-flex !important;

    width:auto !important;

    gap:20px;

    padding:14px 18px !important;

    align-items:center;

    justify-content:flex-start;

}

#homepage-greeting{

    border:none !important;

    margin:0 !important;

    padding:0 !important;

    min-width:190px;

}

.information-widget-datetime{

    padding:0 !important;

    min-width:240px;

}

.information-widget-openmeteo{

    padding:0 !important;

    min-width:180px;

}

.widget-container{

    margin:0 !important;

}


/************************************************
 HEADER REDESIGN
************************************************/

#information-widgets{

    display:flex !important;

    width:auto !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    backdrop-filter:none !important;

    padding:0 !important;

    margin-left:auto !important;

    gap:18px;

    align-items:stretch;

}

/* Все три карточки */

#homepage-greeting,
.information-widget-datetime,
.information-widget-openmeteo{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:220px;

    min-height:110px;

    padding:20px 24px;

    background:rgba(42,51,46,.90);

    border:1px solid rgba(126,179,146,.15);

    border-radius:20px;

    box-shadow:0 10px 28px rgba(0,0,0,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

#homepage-greeting:hover,
.information-widget-datetime:hover,
.information-widget-openmeteo:hover{

    transform:translateY(-4px);

    border-color:rgba(126,179,146,.35);

    box-shadow:0 20px 40px rgba(0,0,0,.32);

}

/* убираем старые отступы */

#homepage-greeting,
.information-widget-datetime,
.information-widget-openmeteo{

    margin:0 !important;

    border-right:none !important;

}

/* Приветствие */

.hp-title{

    font-size:2rem;

    font-weight:700;

    line-height:1;

}

.hp-subtitle{

    margin-top:10px;

    font-size:.95rem;

    color:var(--text-secondary);

    text-transform:capitalize;

}

/* Дата */

.information-widget-datetime{

    text-align:left;

}

.information-widget-datetime span:first-child{

    font-size:1.4rem !important;

    font-weight:700;

}

.information-widget-datetime span:last-child{

    margin-top:8px;

    color:var(--text-secondary);

}

/* Погода */

.information-widget-openmeteo{

    text-align:left;

}

.information-widget-openmeteo .widget-inner{

    justify-content:flex-start !important;

}

.information-widget-openmeteo svg{

    width:40px;

    height:40px;

}


/***********************************************
 HIDE DEFAULT HEADER
************************************************/

#information-widgets{
    display:none !important;
}

/***********************************************
 CUSTOM DASHBOARD HEADER
************************************************/

#custom-header{

    display:flex;

    gap:18px;

    align-items:stretch;

    margin-bottom:28px;

}

.dashboard-card{

    min-width:230px;

    min-height:110px;

    padding:22px;

    border-radius:18px;

    background:rgba(42,51,46,.92);

    border:1px solid rgba(126,179,146,.16);

    box-shadow:0 12px 30px rgba(0,0,0,.22);

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:.25s;

}

.dashboard-card:hover{

    transform:translateY(-4px);

    border-color:rgba(126,179,146,.35);

}

.dashboard-title{

    font-size:1.8rem;

    font-weight:700;

}

.dashboard-subtitle{

    margin-top:8px;

    color:var(--text-secondary);

}

.dashboard-value{

    font-size:1.6rem;

    font-weight:700;

}

.dashboard-label{

    margin-top:8px;

    color:var(--text-secondary);

}


/************************************************
 SERVICES OFFSET
************************************************/

#custom-header{

    margin-top:10px;

    margin-bottom:55px;

}

.service-groups{

    margin-top:25px;

}


/***********************************************
 CENTER HEADER
************************************************/

#custom-header{

    justify-content:center !important;

    width:100%;

}


/************************************************
 SERVICE CARDS V2
************************************************/

.service-card{

    overflow:hidden;

    position:relative;

    border-radius:22px !important;

    padding:18px !important;

}

/* Левая цветная полоса */

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        180deg,
        #8BC5A0,
        #6FA887
    );

    opacity:.9;

}

/* Заголовок */

.service-name{

    font-size:1rem !important;

    font-weight:700 !important;

    margin-left:10px;

}

/* Описание */

.service-description{

    margin-left:10px;

    margin-top:6px;

    font-size:.88rem !important;

    line-height:1.45;

}

/* Иконка */

.service-card img{

    border-radius:12px;

}

/* Hover */

.service-card:hover{

    transform:
        translateY(-5px)
        scale(1.015);

}


/************************************************
 BACKGROUND V2
************************************************/

html,
body{
    background:#1b2320 !important;
}

#background{

    opacity:1 !important;

    filter:none !important;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(126,179,146,.10),
            transparent 35%),

        radial-gradient(circle at 80% 10%,
            rgba(126,179,146,.05),
            transparent 30%),

        radial-gradient(circle at 60% 85%,
            rgba(95,130,110,.08),
            transparent 40%),

        linear-gradient(
            180deg,
            #222b27 0%,
            #1b2320 55%,
            #171d1b 100%
        ) !important;

}


/************************************************
 TOP ACCENT
************************************************/

.service-card::after{

    content:"";

    position:absolute;

    left:16px;

    right:16px;

    top:0;

    height:3px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        rgba(126,179,146,.9),
        rgba(126,179,146,.25)
    );

}


/************************************************
 ICON CONTAINER
************************************************/

.service-card .service-icon{

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:rgba(255,255,255,.04);

    transition:.25s;

}

.service-card:hover .service-icon{

    background:rgba(126,179,146,.10);

}

.service-card .service-icon img{

    width:36px !important;
    height:36px !important;

}