site/_includes/styles/base.css

/* ╭────────────────────────╮
/  │  _                     │
/  │ | |__   __ _ ___  ___  │
/  │ | '_ \ / _` / __|/ _ \ │
/  │ | |_) | (_| \__ \  __/ │
/  │ |_.__/ \__,_|___/\___| │
/  ╰────────────────────────╯
/  base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */

/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */

html {
    background: var(--background);
    background-repeat: repeat;
    background-size: auto;
}

body {    
    font-family: var(--font-family);
    font-size: 1.05rem;
    line-height: 1.45rem;
    text-transform: lowercase;
    margin: unset !important;
}

bg-gradient {
    background: linear-gradient(color-mix(in srgb, var(--accent) 10%, var(--background)), color-mix(in srgb, var(--accent) 50%, var(--background)));
    background-repeat: repeat;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    z-index: -10001;
}

bg-image {
    display: block;
    position: fixed;
    animation: 80s linear infinite bg-move;
    opacity: .6;
    background-repeat: repeat;
    background-size: auto;
    background-image: url(/assets/bg.png);
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -10000;
}

content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
    max-width: 60rem;

    transition: opacity .5s, translate .5s;
    opacity: 1;
    translate: 0 0;
    @starting-style {
        opacity: 0;
        translate: 0 1rem;
    }

    main {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    @media screen and (max-width: 60rem) {
        & { 
            gap: 2rem !important;
            margin-bottom: 1rem;
            margin-top: 3.4rem;
        }

        main {
            gap: 1.5rem !important;
        }
    }
}

/* text formatting and config stuff */

/* headings */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--foreground);
    margin-top: .5rem;
    text-decoration-color: transparent;
    transition: .2s;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    text-decoration-color: var(--accent);
    text-decoration-thickness: .3rem !important;
    text-decoration: underline;
    transition: .2s;
}

h1,
h1 a {
    font-size: 2rem;
}

h2,
h2 a {
    font-size: 1.8rem;
}

h3, h4,
h3 a, h4 a {
    font-size: 1.4rem;
}

/* text */
p,
li,
button {
    .icon {
        transform: scale(1.13);
    }
}

/* links should look good i think */
a {
    color: var(--foreground);
    text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
    text-decoration-thickness: 0.1em;
    transition: 0.2s;

    &:hover {
        color: var(--link);
        text-decoration-color: var(--accent);
        text-decoration-skip-ink: none;
        text-decoration-thickness: .3em;
        transition: 0.2s;
    }
}

/* smol text */
small,
small a {
    font-size: 0.875rem;
}

/* lists need some styling */
li {
    margin-left: -.7em;
    padding-bottom: .5rem;
}

/* text with "title", little hover-over info tibblets */
._info {
    cursor: help;
    text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 0.1em;
    transition: 0.2s;

    &:hover {
        text-decoration-color: color-mix(in srgb, var(--foreground) 80%, transparent);
        text-decoration-skip-ink: none;
        transition: 0.2s;
    }
}

/* the tabler icons svgs styling */
.tabler-icon,
.icon .icon-tabler {
    width: 1.3rem;
    height: 1.3rem;
    padding-bottom: .2rem;
    vertical-align: middle !important;
    color: var(--foreground) !important;
}

/* code (enforced monospace) */
.code {
    font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
}

/* caption styled text */
.caption {
    font-size: small;
    opacity: .8;

    .section {
        font-size: smaller;
        opacity: .9;
    }
}

/* styled details elements */
details.styled {
    summary {
        span {
            padding-right: .6rem;
            transform: translateY(.1rem);
            vertical-align: middle;
        }

        .tabler--arrow-autofit-height:last-of-type {
            margin-left: auto;
        }

        background: linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
        border-bottom: unset !important;
        cursor: pointer;
        padding: .65rem;
    }

    section {
        padding: 1rem;
        text-align: start !important;

        ul {
            margin: 0 0 0 -.5rem;
        }

        p:first-of-type {
            margin-top: 0 !important;
        }

        p:last-of-type {
            margin-bottom: 0 !important;
        }
    }

    .last {
        margin-bottom: .8rem;
    }

    background-color: color-mix(in srgb, var(--accent) 3%, transparent);
    border-radius: .8rem .4rem .8rem .4rem;
    border: .13rem solid var(--accent);
    margin-top: 1.3rem;
    overflow: clip;
}

details.styled[open] {
    summary {
        border-bottom: .1rem solid var(--accent) !important;
    }
}

/* more minimal "content warning" styled details elements */
details.cw {
    summary {
        span {
            color: var(--yellow);
            padding-right: .6rem;
            transform: translateY(.1rem);
            vertical-align: middle;
        }

        .tabler--chevron-down:last-of-type {
            margin-left: .5rem;
        }

        background: color-mix(in srgb, var(--yellow) 5%, var(--background));
        border-radius: .4rem;
        border: .1rem solid var(--yellow);
        cursor: pointer;
        padding: .3rem;
        transform: 0.2s;
        width: fit-content;
    }

    section {
        background-color: color-mix(in srgb, var(--background) 95%, white);
        border-radius: .4rem;
        border: .1rem solid var(--border);
        margin-top: .7rem;
        padding: .4rem;
        text-align: start !important;

        ul {
            margin: 0 0 0 -.5rem;
        }

        p:first-of-type {
            margin-top: 0 !important;
        }

        p:last-of-type {
            margin-bottom: 0 !important;
        }
    }

    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow: clip;
}

details.cw[open] {
    .tabler--chevron-down:last-of-type {
        transform: 0.2s;
        transform: rotate(180deg);
    }
}

/* badge text styling */
.badge {
    border-radius: .2rem;
    border: .1rem solid var(--accent);
    color: var(--link);
    font-size: .8rem;
    font-weight: normal;
    padding: .15rem;
}

/* card styling */
card-container {
    display: flex;
    gap: .5rem;

    .card {
        background-color: ;
    }

    &[horizontal] {
        flex-flow: row wrap;
    }
}

.card {
    background-color: color-mix(in srgb, var(--background) 95%, white);
    border-radius: 1rem;
    border: .2rem solid var(--border);
    gap: .5rem;
    margin-bottom: 1.4rem;
    padding: 1rem;

    h4 {
        margin-top: unset !important;
        margin-bottom: .4rem !important;
    }
}

.card.last {
    margin-bottom: unset !important;
}

.card.tilde-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    margin-bottom: unset !important;
}

.card.question {
    p {
        margin: .6rem !important;
    }
}

/* Dashed border */
hr.dashed {
    border: .1rem dashed var(--border);
}

/* Dotted border */
hr.dotted {
    border: .1rem dotted var(--border);
}

/* Solid border */
hr.solid {
    border: .1rem solid var(--border);
}

/* Rounded border */
hr.rounded {
    border: .2rem solid var(--border);
    border-radius: 5px;
}

/* text formatting, like github kinda */
.info-box {
    padding: .5rem;
    border: .1rem solid;
    border-radius: .4rem;

    &.info {
        background-color: color-mix(in srgb, var(--blue) 8%, transparent);
        border-color: var(--blue);
        .icon { color: var(--blue); }
    }

    &.warn {
        background-color: color-mix(in srgb, var(--orange) 8%, transparent);
        border-color: var(--orange);
        .icon { color: var(--orange); }
    }
}

/* audio */
audio {
    border-radius: 3rem;
}

/* summary styling */
summary {
    display: flex;
}

/* button link styling */
.button {
    background-color: color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 1rem;
    color: var(--foreground);
    padding: .4rem;
    text-decoration: none;
    text-shadow: none;
    transition: all .2s;
    white-space: nowrap;
    line-height: 3rem;

    .icon {
        transform: scale(1.13) translateY(.7rem);
    }
}

.button:hover {
    background-color: var(--accent);
    color: var(--foreground);
    transition: all .2s;
}

.button-container {
    margin-bottom: unset !important;
}

/* focus styling */
*:focus-visible {
    outline: .4rem solid var(--ui-purple) !important;
    border-radius: .2rem;
    z-index: 999999 !important;
}

/* image-button grid */
.img-buttons {
    align-items: normal;
    display: flex;
    flex-wrap: wrap;
    font-size: 0 !important;
    gap: 5px;
    justify-content: center;
    margin-inline: auto;

    img {
        height: 31px;
        image-rendering: crisp-edges !important;
        margin: unset !important;
        transition: transform 0.2s;
        width: 88px;
    }

    .generic {
        align-content: center;
        background-color: color-mix(in srgb, var(--background) 90%, white);
        border: solid .15rem;
        box-sizing: border-box;
        color: var(--foreground);
        font-size: .95rem !important;
        height: 31px;
        text-align: center;
        transition: transform 0.2s;
        width: 88px;
    }

    .generic:hover, img:hover {
        transform: scale(2);
    }
}

/* no forced uncapitalization */
[no-uncap] {
    text-transform: none !important;
}

/* spoiler text */
spoiler {
    filter: blur(.4rem) contrast(200%);
    transition: 0.2s;

    &:hover {
        filter: unset !important;
        transition: 0.2s;
    }
}

/* ------------------
- nsfw toggle group -
------------------ */

.nsfw-toggle-holder {
    background-color: color-mix(in srgb, var(--background) 95%, white);
    border-radius: 1rem;
    border: .2rem solid var(--border);
    color: var(--foreground);
    padding: .5rem;
    position: fixed;
    max-width: 30rem;
    margin-left: .4rem;
    z-index: 30;
    right: .4rem;
    top: 3rem;
    transition: 0.2s;

    /* inital "shrunken" state */
    opacity: .5;
    scale: .75;
    transform-origin: top right;


    /* hide captions when unhovered */
    .caption {
        display: none;
    }

    &:hover {
        transition: 0.2s;

        /* hovered "full" state */
        opacity: 1;
        scale: 1;

        .caption {
            opacity: .9;
            display: unset;
        }
    }

    .nsfw-toggle, .spoil-nsfw-toggle {
        display: block;
    }

    /* hide the spoil option if nsfw itself is disabled */
    .spoil-nsfw-toggle {
        display: none;
        margin-top: 1rem;
    }

    &:has(input[type="checkbox"]#view-nsfw-content:checked) .spoil-nsfw-toggle {
        display: inherit !important;
    }

    /* shrink it even more if on a small display */
    @media screen and (max-width: 580px) {
        scale: .5;
    }
}

/* _is-nsfw class for elements that are "nsfw" - will be hidden and spoiled by default */
._is-nsfw {
    display: none;
}

/* inverse to remove elements if they aren't nsfw while the option is toggled */
._is-nsfw-inverse {
    display: inherit;
}

/* show if enabled */
html:has(input[type="checkbox"]#view-nsfw-content:checked) {
    ._is-nsfw {
        display: inherit;
    }

    ._is-nsfw-inverse {
        display: none;
    }
}

/* blue/spoiler if enabled */
html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
    ._is-nsfw {
        filter: blur(.4rem) contrast(200%);
        transition: 0.2s;

        &:hover {
            filter: unset !important;
            transition: 0.2s;
        }
    }
    
    /* _always-show to ignore the "spoiler" option */
    ._always-show {
        filter: unset !important;
    }
}

/* alt text popup */

.alt-popup {
    position: fixed;
    text-transform: none !important;
    background-color: color-mix(in srgb, var(--background) 85%, transparent);
    backdrop-filter: blur(.5rem);
    color: var(--foreground);
    padding: .5rem;
    border: solid .01rem var(--accent);
    border-radius: .5rem;
    font-size: 1rem;
    max-width: 30rem;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}

/* widgets */

radio-button-group {
    display: flex;
    flex-flow: row wrap;
    gap: .4rem;

    label {
        border-radius: .4rem;
        border: .13rem solid var(--border);
        cursor: pointer;
        padding: .2rem;
        width: fit-content;
        word-break: break-word;

        &:has(input:checked) {
            border-color: var(--accent);
            background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
        }

        &:hover, &:focus-visible {
            background: var(--hover);
        }
    }

    input {
        /* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
}

checkbox-button-group {
    display: flex;
    flex-flow: column;
    gap: .5rem;

    label {
        border-radius: .4rem;
        border: .13rem solid var(--border);
        cursor: pointer;
        margin-right: .3rem;
        padding: .2rem;
        width: fit-content;
        word-break: break-word;

        &::before {
            background: var(--border);
            border-radius: 10rem;
            content: '';
            display: inline-flex;
            height: 1rem;
            margin-bottom: -.15rem;
            margin-left: .2rem;
            margin-right: .3rem;
            position: relative;
            transition: .2s;
            width: 1rem;
        }

        &:has(input:checked) {
            border-color: var(--accent);
            background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
            
            &::before {
                background: var(--accent);
            }
        }

        &:hover, &:focus-visible {
            background: var(--hover);
        }
    }

    input {
        /* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
}

/* atmedia*/

@media screen and (max-width: 1083px) {
    details.styled {
        section {

            /* reset margins for list on mobile view */
            ul {
                margin: unset !important;
            }
        }
    }
}

/* different styling for elements in dark mode 
   must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
html:not([data-theme="light"]) {
    @media (prefers-color-scheme: dark) {
        .button:hover {
            color: var(--background);
        }
    }
}

html[data-theme="dark"] {
    .button:hover {
        color: var(--background);
    }
}