style.css

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
/* CSS Reset */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;

    scrollbar-width: thin;
}

body {
    line-height: 1.5;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* */

:root {
    --color-primary: #689c80;

    --color-background: #09090b;
    --color-surface: #18181b;
    --color-surface-dim: #141416;

    --color-text: white;
    --color-text-alt: #e4e4e7;
    --color-text-dim: #71717a;

    --color-outline: #3f3f46;

    --font-display: 'Dela Gothic One', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', sans-serif;

    --border: 0.1rem solid var(--color-outline);
}

body {
    display: flex;

    max-height: 100vh;

    font-size: 13px;
    font-family: var(--font-body);
    color: var(--color-text);

    background: var(--color-surface);

    scrollbar-color: var(--color-outline) transparent;
}

/* Weapon Selector */

#sidebar-weapon-selector {
    flex-shrink: 0;

    position: relative;

    width: 18rem;
    height: 100vh;

    border-right: var(--border);

    background: var(--color-background);

    overflow: hidden;
}

#sidebar-weapon-selector:before {
    position: absolute;
    top: 4rem;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 1rem;

    background: linear-gradient(var(--color-background), transparent);

    content: '';
}

#sidebar-weapon-selector:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 1rem;

    background: linear-gradient(transparent, var(--color-background));

    content: '';
}

#sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 4rem;

    padding-left: 1rem;
}

#sidebar-collapse-toggle {
    display: none;
}

#collapse-button {
    height: 2.618em;

    color: var(--color-text-alt);

    cursor: pointer;
}

#weapon-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    max-height: calc(100vh - 4rem);

    padding: 0;

    border: none;

    overflow-y: scroll;
}

#sidebar-weapon-selector:has(#sidebar-collapse-toggle:checked) {
    width: 4rem;
}

#sidebar-weapon-selector:has(#sidebar-collapse-toggle:checked) .selectable-weapon {
    display: none;
}

.selectable-weapon {
    flex-shrink: 0;

    position: relative;

    width: 16rem;
    height: 8rem;

    border: var(--border);
    border-radius: 0.15rem;

    background: url('images/weaponbg.jpg') center/cover no-repeat;
}

.selectable-weapon::before {
    position: absolute;
    top: calc((8rem - 128px) / 2);
    left: calc((16rem - 256px) / 2);
    
    width: 256px;
    height: 128px;
    scale: 80%;

    background: var(--image-url) var(--image-x-offset) var(--image-y-offset) no-repeat;

    pointer-events: none;

    content: '';
}

.selectable-weapon::after {
    font-size: 1.5em;
}

.selectable-weapon:first-child { margin-top: 1rem; }
.selectable-weapon:last-child { margin-bottom: 1rem; }

.selectable-weapon input {
    width: 16rem;
    height: 8rem;

    opacity: 0;

    cursor: pointer;
}

.selectable-weapon label.selectable-weapon-name {
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;

    padding: 0 0.5rem;

    font-weight: 600;
    line-height: 1.5rem;
}

.selectable-weapon label.selectable-weapon-dlc {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;

    padding: 0 0.5rem;

    border-radius: 0.1rem;

    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.5rem;
    text-transform: uppercase;

    background-color: var(--color-primary);
}

/* Main */

main {
    flex-grow: 1;

    max-height: 100vh;

    padding: 0 1rem 0 1rem;

    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2309090b' fill-opacity='0.25'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    overflow: hidden;
}

#main-header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;

    height: 4rem;

    margin-bottom: 1rem;
}

h1 {
    font-family: var(--font-display);
    font-size: 2.618em;
    font-weight: 500;
    color: var(--color-text-alt);
    text-transform: uppercase;
}

#options {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2em;
}

#options > div {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

#options svg {
    flex-shrink: 0;

    height: 2em;
}

#options select {
    height: 2.618em;

    padding: 0.25em 1em;

    color: var(--color-text);

    border: var(--border);
    border-radius: 0.15rem;

    background: var(--color-surface-dim);
    backdrop-filter: blur(5px);
}

#content {
    display: grid;
    grid-template-columns: 1fr 36rem;
    gap: 2rem;
}

#loadout,
#stats {
    max-height: calc(100vh - 8rem);

    overflow-y: scroll;
}

#loadout-header {
    display: flex;
    align-items: flex-end;

    height: 18rem;
}

#stats-header {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;

    height: 17rem;

    margin-bottom: 1rem;
}

#weapon-name {
    position: relative;
}

#weapon-name h3 {
    position: absolute;
    top: -0.5em;

    font-size: 2em;
    font-weight: 1000;
    color: var(--color-text-dim);
    line-height: 1em;
}

#weapon-name h2 {
    position: relative;

    padding-bottom: 1rem;

    font-family: var(--font-display);
    font-size: 6.854em;
    line-height: 1em;

    overflow: hidden;
    overflow-wrap: break-word;

    z-index: 1;
}

@media only screen and (max-width: 1600px) {
    #content {
        display: flex;
        flex-flow: column nowrap;

        max-height: calc(100vh - 8rem);

        overflow: scroll;
    }

    #loadout,
    #stats {
        max-height: 100%;

        overflow: visible;
    }
    
    h1 { font-size: 2em; }
    #options select { height: 2em; }
    #options svg { height: 1.618em; }

    #loadout h2 { font-size: 4.236em; }
    #loadout h3 { font-size: 1.618em; }
}

#skill-selector { margin-bottom: 1.618em }

.loadout-category legend {
    margin-bottom: 0.25em;
    font-weight: 600;
}

.loadout-category {
    padding: 0;
    border: none;
}

.loadout-category-container {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em;

    padding: 0;

    border: none;
}

.skill input,
.attachment input {
    display: none;
}

.skill label,
.attachment label {
    display: inline-block;

    border: var(--border);
    border-radius: 0.15rem;

    background: var(--color-surface-dim);
    backdrop-filter: blur(5px);

    user-select: none;
    cursor: pointer;
}

.skill label {
    width: 4.236em;
    height: 4.236em;

    color: transparent;
}

.skill label::before {
    position: absolute;
    top: calc((4.236em - 64px) / 2);
    left: calc((4.236em - 64px) / 2);

    width: 64px;
    height: 64px;
    scale: 70%;

    background:
        var(--image-url) var(--image-x-offset) var(--image-y-offset) no-repeat;

    content: '';
}

.skill input:disabled + label::before {
    opacity: 25%;
    background:
        linear-gradient(to bottom right, transparent 49%, white 50%, transparent 51%),
        var(--image-url) var(--image-x-offset) var(--image-y-offset) no-repeat;
}

#loadout-attachments {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.618em;
}

.attachment label {
    padding: 0.25em 1em;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 3rem;

    font-weight: 500;
    color: var(--color-text-alt);
}

footer span:last-child {
    padding: 0.5em 1em;

    font-size: 0.9em;

    border-radius: 0.15rem;

    background-color: var(--color-primary);
}

/* Stats */

.weapon-stat-container, .damage-stat-container {
    min-width: 0;

    border: var(--border);
    border-radius: 0.15rem;

    background-color: var(--color-surface-dim);
}

.weapon-stat-category-title {
    display: block;

    padding: 0.25em 1em;

    font-weight: 600;

    border-bottom: var(--border);

    background-color: var(--color-surface);
}

.weapon-stat-category {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5em;

    margin: 0.5em 0;
    padding: 0 1em;
}

.weapon-stat-category:not(:last-child) {
    border-right: var(--border);
}

.weapon-stat {
    display: flex;
    justify-content: space-between;

    width: 100%;

    font-family: var(--font-mono);
}

.weapon-stat span:first-child {
    color: var(--color-text-alt);
}

.weapon-stat span:last-child {
    font-weight: 500;
}

#weapon-stats-damage > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#damage-stats {
    display: flex;
    flex-flow: column wrap;
    gap: 1rem;
}

.damage-stat-container {
    display: grid;
    grid-template-columns: 10rem 1fr 1fr;

    min-height: 9rem;
}

.enemy-info {
    display: flex;
    flex-flow: column wrap;
    justify-content: end;

    padding: 0.5em 1em;

    border-right: var(--border);

    background-color: var(--color-surface);
}

.enemy-info .enemy-name {
    font-weight: bold;
}

.optimal-ttk,
.body-ttk {
    padding: 0.5em 1em;

    font-family: var(--font-mono);
}

.damage-stat-category-title {
    color: var(--color-text-alt)
}

.ttk-stats {
    display: flex;
    flex-flow: column wrap;
    gap: 0.5em;

    margin-top: 1em;

    line-height: 1em;
}

.shot-stats {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}

.shot-stats > span {
    font-weight: bold;
}

span.damage-breakdown,
span.damage-breakdown span {
    display: block;

    color: var(--color-text-dim);
}

/* Stats Sidebar */

#sidebar-stats {
    flex-shrink: 0;

    width: 13rem;
    height: 100vh;

    border-left: var(--border);

    background: var(--color-surface-dim);

    overflow: hidden;
}

#sidebar-stats svg > * {
    transition: all 0.2s ease-in-out;
}

#stat-previews {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: 1rem;

    margin-top: 5rem;
}

.stat-container {
    display: flex;
    flex-flow: column nowrap;

    width: 11rem;

    /* border: var(--border);
    border-radius: 0.15rem;

    background: var(--color-surface); */

    font-family: var(--font-mono);
}

.stat-container#main-stats {
    justify-content: space-between;
    
    height: 17rem;
}

.stat-container svg {
    border: var(--border);
    border-radius: 0.15rem;

    background: var(--color-surface);
}

.stat-group {
    display: flex;
    flex-flow: column wrap;
    gap: 0.5em;
}

.stat-group:not(#main-stats .stat-group) {
    padding-bottom: 2em;
}

.stat-group > div {
    display: flex;
    justify-content: space-between;
}

/* #sidebar-stats .stat-group div {
    padding: 0 1em;
} */

.stat-group div > span:first-child {
    color: var(--color-text-alt);
}

.stat-group div > span:last-child {
    font-weight: 500;
    text-align: right;
}

/* */

.selectable-weapon:has(> input:checked),
.skill:has(> input:checked) label,
.attachment:has(> input:checked) label {
    border-color: var(--color-primary);
}

.selectable-weapon:has(> input:checked)::after,
.skill:has(> input:checked) label::after,
.attachment:has(> input:checked) label::after {
    position: absolute;
    top: 0;
    right: 0;

    border-top: 1em solid var(--color-primary);
    border-left: 1em solid transparent;

    content: '';
}

#tooltip {
    position: absolute;
    top: 0;
    left: 0;

    visibility: hidden;

    min-width: 16rem;
    max-width: 24rem;

    margin-top: 0.5em;
    padding: 0.5rem 1rem;

    line-height: 1.5em;

    background-color: var(--color-surface-dim);
    border: var(--border);
    border-radius: 0.15rem;

    pointer-events: none;
    z-index: 100;
}

#tooltip .tooltip-title {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text);
}

#tooltip span {
    display: block;

    font-family: var(--font-mono);
    color: var(--color-text-alt);
}