Octobot/assets/css/styles.css

/*
    Octobot for Discord. Made by mctaylors.
    Inspired by splatoon3.ink.
*/

@import url(fonts.css);

:root {
    color: #eee;
    background-color: #000;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOIAAADiBAMAAAChPgbkAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAqUExURRcXF0dwTBUVFRYWFgAAABoaGhkZGRUVFRgYGAAAAAAAAB4eHiQkJBISEkRDNy8AAAAOdFJOUxYAGBcDEwoMFQUBEQcOBwHpdgAAAjdJREFUeNrt271NBDEUReGnjUlGIoGICCKkbYIKqIASqIEm6IGMDiiBjtj5XXvGz9k9Cde5dfTFvo6Xc6TnacjP/Xd+7/TbuRi3r52b752bXw/5xedecaCRMdDIGGjkpQgjL0UYORZZ5FhkkVMRRU5FFDkXSeRcJJFLEUQuRRC5FjnkWuSQWxFDbkUMeS1SyGuRQhZFCFkUIWRZZJBlkUFWRQRZFRFkXSSQdZFA7ooAclcEkPuiHrkv6pGHohx5KMqRx6IaeSyqkY2iGNkoipGtohbZKmqRzaIU2SxKke2iEtkuKpFJUYhMikJkVtQhs6IOmRZlyLQoQ+ZFFTIvqpCdogjZKYqQvaIGGW80Mh5pZJxoZBhppJFGGmmkkUYaaaSRRhpppJFGGmmkkUYaaeR/Rp5pZHzQyPikkXFHI2OgkTHQyBho5KUII8f3RxY5Flnk9MaKIqciipzfkUnkXCSRy1s5iFyKIHLdA3DItcght80DhtyKGPK666CQ1yKFLLYrELIoQshyn8MgyyKDrDZICLIqIsh6Z0Ug6yKB3G3JAOSuCCD3ezk9cl/UIw+bQDnyUJQjj7tHNfJYVCMb204xslEUI1v7VS2yVdQimxtdKbJZlCLbO2Qlsl1UIpOttRCZFIXIbE+uQ2ZFHTLdzMuQaVGGzP8FqJB5UYXs/H0QITtFEbL3v0OD7BU1yPihkXFDIwNHhpFGGmmkkUYaaaSRRhpppJFGGmmkkUYaaaSRRhoJIgNH/gHUGcb6oO4YfwAAAABJRU5ErkJggg==");
    font-family: BlitzMain, sans-serif;
}

a, a:visited {
    color: chartreuse;
}

a:hover {
    color: aquamarine;
}

a:active {
    color: darkcyan;
}

a.alternative {
    text-decoration: none;
}

.highlight {
    font-family: BlitzBold, sans-serif;
    font-size: 32px;
}

.header {
    font-size: 24px;
    padding: 16px;
    position: fixed;
    width: calc(100% - 48px);
    z-index: 10;
}

.header > .left {
    float: left;
}

.header > .right {
    float: right;
}

.header > .left img {
    margin: 0 8px;
    height: 64px;
}

.header > .right .social img {
    height: 32px;
    width: 32px;
    border: #999 1px solid;
    border-radius: 16px;
    background-color: #0009;
    padding: 8px;
    transition: 200ms;
}

.header > .right .social img:hover {
    border-color: #eee;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 64px;
    padding: 100px 16px 80px;
}

.content > .card {
    mask-image: url("../svg/card-header.svg");
    mask-size: 2000px auto;
    mask-position: top;
    background-image: url("../png/tapes-transparent.png");
    background-size: contain;
    width: 480px;
    min-height: 520px;
    padding: 48px 16px 8px;
    border-radius: 16px;
}

.content > .card.first {
    background-color: #1bbeab; /* Splatoon 3 TurquoisePink Alpha */
    rotate: -2deg;
}

.content > .card.second {
    background-color: #c43a6e; /* Splatoon 3 TurquoisePink Bravo */
    rotate: 2deg;
}

.content > .card * {
    text-align: left;
}

.content > .card span {
    line-height: 1em;
    filter: drop-shadow(1px 1px #000);
}

.content > .card > .title {
    margin: 8px 0;
}

.content > .card > .title > * {
    vertical-align: middle;
}

.content > .card > .title > span {
    font-size: 24px;
}

.content > .card > .title > img {
    height: 32px;
    width: 32px;
}

.content > .card > .frame {
    padding: 4px 8px 8px;
    border-radius: 8px;
    background-color: #0009;
    backdrop-filter: blur(4px);
}

.content > .card > .frame > ul {
    padding: 0 0 0 24px;
}

.invite {
    margin-top: 8px;
    padding: 12px 0;
    width: 100%;
    font-family: BlitzBold, sans-serif;
    font-size: 20px;
    color: white;
    background-color: #4d5058;
    border-radius: 4px;
    border: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    transition: 200ms;
}

.invite:hover {
    background-color: #6d6f78;
    cursor: pointer;
}

.invite:active {
    background-color: #80848e;
}

.invite > img {
    height: 24px;
    width: 24px;
}

.invite > span {
    filter: none !important;
}

.invite > * {
    vertical-align: middle;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 8px;
    color: #999;
    font-size: 14px;
    text-align: center;
    background-color: #0009;
    backdrop-filter: blur(4px);
}

.footer img {
    vertical-align: sub;
}

.splatoon {
    height: 24px;
    filter: brightness(75%);
}