/*
|--------------------------------------------------------------------------
| Lineage2S Changelog - Bright Theme
|--------------------------------------------------------------------------
*/

:root {

    --log-bg-top: #dff4ff;
    --log-bg-middle: #eef8ff;
    --log-bg-bottom: #f8fcff;

    --log-primary: #005185;
    --log-primary-light: #2d79a8;

    --log-text: #173042;
    --log-text-soft: #5b7891;

    --log-glass:
        rgba(255,255,255,.62);

    --log-border:
        rgba(255,255,255,.58);

    --log-shadow:
        rgba(90,160,255,.12);
}

/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html {
    scroll-behavior: smooth;
}

body {

    background:

        radial-gradient(
            circle at top,
            rgba(120,220,255,.18),
            transparent 35%
        ),

        linear-gradient(
            to bottom,
            var(--log-bg-top) 0%,
            var(--log-bg-middle) 45%,
            var(--log-bg-bottom) 100%
        );

    color:
        var(--log-text);

    min-height:
        100vh;

    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        sans-serif;
}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.log-container {

    max-width:
        1100px;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.page-title {

    font-size:
        clamp(2.2rem, 5vw, 3.5rem);

    font-weight:
        700;

    color:
        #17324a;

    margin-bottom:
        .5rem;
}

.page-subtitle {

    color:
        var(--log-text-soft);
}

/*
|--------------------------------------------------------------------------
| Glass Card
|--------------------------------------------------------------------------
*/

.log-card {

    background:
        var(--log-glass);

    backdrop-filter:
        blur(16px);

    border:
        1px solid var(--log-border);

    border-radius:
        28px;

    box-shadow:
        0 10px 40px var(--log-shadow);
}

/*
|--------------------------------------------------------------------------
| Log Date
|--------------------------------------------------------------------------
*/

.log-date {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .5rem;

    font-size:
        1.15rem;

    font-weight:
        700;

    color:
        var(--log-primary);

    margin-bottom:
        1rem;
}

.log-date::before {

    content:
        '';

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--log-primary),
            var(--log-primary-light)
        );

    box-shadow:
        0 0 12px rgba(80,180,255,.45);
}

/*
|--------------------------------------------------------------------------
| Log Section
|--------------------------------------------------------------------------
*/

.log-section {

    position:
        relative;

    padding-left:
        2rem;

    margin-bottom:
        4rem;
}

.log-section::before {

    content:
        '';

    position:
        absolute;

    left:
        7px;

    top:
        0;

    bottom:
        -2rem;

    width:
        2px;

    background:
        linear-gradient(
            to bottom,
            rgba(80,180,255,.35),
            rgba(80,180,255,0)
        );
}

/*
|--------------------------------------------------------------------------
| Log Item
|--------------------------------------------------------------------------
*/

.log-fix {

    border-left:
        4px solid #ff7676;
}

.log-update {

    border-left:
        4px solid #4aaeff;
}

.log-adjust {

    border-left:
        4px solid #f7b955;
}

.log-event {

    border-left:
        4px solid #8d7dff;
}

.log-hh {

    border-left:
        4px solid #31D492;
}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a {

    color:
        var(--log-primary);

    text-decoration:
        none;
}

a:hover {

    color:
        #1f9dff;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn-log {

    background:
        linear-gradient(
            135deg,
            var(--log-primary),
            var(--log-primary-light)
        );

    border:
        none;

    color:
        white;

    border-radius:
        999px;

    padding:
        .75rem 1.5rem;

    font-weight:
        600;

    box-shadow:
        0 6px 24px rgba(80,170,255,.25);

    transition:
        .25s;
}

.btn-log:hover {

    transform:
        translateY(-2px);

    color:
        white;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.log-footer {

    border-top:
        1px solid rgba(255,255,255,.5);

    color:
        var(--log-text-soft);
}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.45);
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            to bottom,
            var(--log-primary),
            var(--log-primary-light)
        );

    border-radius:
        999px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .log-card {

        border-radius:
            20px;
    }

    .log-section {

        padding-left:
            1.5rem;
    }

    .log-item {

        padding:
            .8rem 1rem;
    }
}