style.css

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

/**
 * n.b. the order
 *
 * global: apply to tags
 *     e.g. body { color: red }
 *
 * atom: commonly used
 *     e.g. .flex { display: flex }
 *
 * component: custom
 *     e.g. .my-special-modal { height: 114px }
 *
 * overrides: media query
 *     e.g. @media (max-width: 514px) {}
 *
 * ---------------------------------------------------------------------------
 * n.b. the class="..." order
 *
 * class="component(optional) atom1 atom2..."
 */

body {
    --main-color: #444E60;
    --gray-color: #7A7B7C;
    --silver-color: #DBE1EA;
    --primary-color: #3381FF;
    color: var(--main-color, #444E60);
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

select {
    border: none;
    background: transparent;
    color: var(--main-color, #444E60);
    cursor: pointer;
}

/*===========================================================================*/

.flex {
    display: flex;
    align-items: center;
}

.inline-flex {
    display: inline-flex;
    align-items: center;
}

.capsule {
    border-radius: 114514px;
}

.dim { opacity: 0.618 }
.flex-1 { flex-grow: 1 }
.content-center { justify-content: center }
.ma0 { margin: 0 }
.mt3 { margin-top: 2em }
.pa0 { padding: 0 }
.pa2 { padding: 1em }
.pb3 { padding-bottom: 2em }
.pl1 { padding-left: .5em }
.pl2 { padding-left: 1em }
.list-none { list-style-type: none }
.vh-100 { min-height: 100vh }
.f1 { font-size: .875em }
.f3 { font-size: 1.5em }
.normal { font-weight: normal }
.center { text-align: center }
.indent { text-indent: 2em }

/*===========================================================================*/

.navheader {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
}

.hero {
    position: relative;
    padding-top: 64px;
    padding-left: 12px;
    background-color: rgba(51, 129, 255, 0.04);
    background-image: url(./image/mark.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.hero h1 {
    font-size: 32px;
    text-align: center;
}
.hero .desc {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    text-indent: 2em;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}
.hero .desc.last {
    margin-bottom: 1em;
}
.hero .image img {
    max-width: 100%;
}
.hero .foot {
    position: absolute;
    bottom: 0; left: 0; right: 0;
}
.hero .foot a {
    color: black;
}

.start-btn {
    padding: .618em 2.718em;
    color: white;
    background: var(--primary-color, #3381FF);
    transition: background-color .3s;
}

.start-btn:hover {
    background: #3373da;
    transition: background-color .3s;
}

.get-source-btn {
    padding: .618em 2.718em;
    margin-left: 1.2em;
    background-color: #e3edff;
    color: #4f5959;
    border-color: #e3edff;
    transition: opacity .3s;
}

.get-source-btn:hover {
    opacity: .8;
    transition: opacity .3s;
}

.opensource {
    line-height: 1.75;
}
.opensource p:first-child {
    margin-top: 32px;
}
.opensource p:last-child {
    margin-bottom: 32px;
}
.download-list {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
}
.download-list > a,
.download-list-macos {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--silver-color, #DBE1EA);
}
.download-list > a:not(:first-child) {
    margin-top: 20px;
}
.download-list > a:hover,
.download-list-macos:hover {
    border-color: #f1f2f3;
    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 8%);
}
.download-list > a img,
.download-list-macos img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}
.download-list-macos-list {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 8px;
    overflow: hidden;
    transition: height .3s;
}
.download-list-macos .download-list-macos-list {
    height: 0;
}
.download-list-macos:hover .download-list-macos-list {
    height: 18px;
}
.download-list-macos-list a:hover,
.download-list-extra a:hover {
    text-decoration: underline var(--gray-color, #7A7B7C);
}
.download-list small {
    padding: 0;
    color: var(--gray-color, #7A7B7C);
}
.download-list-extra {
    position: absolute;
    top: 37px;
    right: 32px;
    transform: translateY(-50%);
    color: var(--gray-color, #7A7B7C);
}

.kinds {
    color: white;
    background-image: url("./image/dark-bg.svg");
    background-color: #2e3440;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.kinds .tabs {
    margin: 40px 12px;
    flex-flow: column nowrap;
}
.kinds .item {
    cursor: pointer;
}
.kinds .images {
    display: none;
}
.kinds .images img {
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.skin .center img {
    max-width: 100%;
    margin-top: 32px;
}
.plugin .center img {
    max-width: 100%;
    margin-top: 32px;
}

.start {
    background: url(./image/sec7.svg);
    background-color: #f8faff;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.copyright {
    color: white;
    font-size: 14px;
    justify-content: space-around;
    padding: 32px 16px;
    background: #2D3441;
}
.copyright a:hover {
    color: inherit;
}

/*===========================================================================*/
@media (max-width: 59em) { /* mobile */
    .hero {
        margin-bottom: 3em;
    }
    
    .btn-group {
        position: absolute;
        justify-content: center;
        flex-flow: row wrap;
        width: 100%;
        bottom: -5.5em;
    }
}

@media (min-width: 30em) { /* tablet */
}

@media (min-width: 60em) { /* desktop */
    .navheader {
        padding: 36px 24px;
    }
    .hero {
        height: 100vh;
        padding-top: 96px;
        padding-left: 24px;
    }
    .hero h1 {
        text-align: left;
    }
    .hero .desc {
        font-size: 22px;
        font-weight: 300;
        line-height: 1.75;
        width: 40%;
    }
    .hero .image {
        display: block;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
    }
    .hero .image img {
        position: absolute;
        bottom: 0; right: 0;
        transform: scale(0.5);
        transform-origin: bottom right;
    }
    .start-btn, .get-source-btn {
        margin-top: 0;
    }
    .opensource p {
        margin-left: 120px;
        margin-right: 120px;
    }
    .download-list {
        margin: 32px 0 48px;
        flex-flow: row wrap;
        justify-content: center;
    }
    .download-list > a,
    .download-list-macos {
        width: 160px;
        height: 160px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        transition: border-color .1s linear,
                    box-shadow .2s ease;
        cursor: pointer;
    }
    .download-list > a:not(:first-child) {
        margin-top: 0;
        margin-left: 20px;
    }
    .download-list > a img,
    .download-list-macos img {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .download-list-extra {
        position: absolute;
        top: 110%;
        left: calc(50% - 360px);
        right: auto;
        transform: translateX(-50%);
        color: var(--gray-color, #7A7B7C);
    }
    .kinds .tabs {
        flex-flow: row nowrap;
        margin: 40px 120px 0;
    }
    .kinds .item {
        width: 276px;
        height: 175px;
        opacity: .12;
        transition: opacity .1s;
    }
    .kinds .item.active {
        opacity: 1;
        transition-duration: 0s;
    }
    .kinds .images {
        display: block;
        margin-left: 16px;
        margin-bottom: 32px;
    }
    .skin .center img {
        width: 720px;
        height: 525px;
    }
    .plugin .center img {
        width: 740px;
        height: 493px;
    }
}
@media (min-width: 70em) {
    .navheader {
        margin: 0 120px;
    }
    .hero .content {
        margin: 0 120px;
    }
    .hero .image {
        right: 120px;
    }
}

/*===========================================================================*/
.ol-zh-num {
    counter-reset: ol-zh-item;
}
.ol-zh-num li {
    counter-increment: ol-zh-item;
}
.ol-zh-num li::marker {
    content: '（' counter(ol-zh-item, decimal) '）';
}

.ol-abc {
    counter-reset: ol-abc-item;
}
.ol-abc li {
    counter-increment: ol-abc-item;
}
.ol-abc li::marker {
    content: '（' counter(ol-abc-item, lower-alpha) '）';
    font-family: monospace;
}

.ol-abcd {
    counter-reset: ol-abc-item;
}
.ol-abcd li {
    counter-increment: ol-abc-item;
}
.ol-abcd li::marker {
    content: counter(ol-abc-item, lower-alpha) '.';
    font-family: monospace;
}

.ol-iii {
    counter-reset: ol-iii-item;
}
.ol-iii li {
    counter-increment: ol-iii-item;
}
.ol-iii li::marker {
    content: counter(ol-iii-item, lower-roman) '.';
    font-family: monospace;
}

.ol-cjk {
    counter-reset: ol-cjk-item;
}
.ol-cjk li {
    counter-increment: ol-cjk-item;
}
.ol-cjk li::marker {
    content: counter(ol-cjk-item, cjk-ideographic) '、';
}

.ol-abc\) {
    counter-reset: ol-abc-item;
}
.ol-abc\) li {
    counter-increment: ol-abc-item;
}
.ol-abc\) li::marker {
    content: counter(ol-abc-item, lower-alpha) '）';
}