matrix.org/sass/_support.scss

.page-header.support {

    .donate-row {
        display: flex;
        gap: 1rem;
        margin-block-start: 2rem;

        @media (max-width: 767px) {
            flex-direction: column;
        }
    }

    .call-to-action {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        background: #fff;
        color: #000;
        border-radius: 9999px;
        padding: .5rem 1rem;

        font-size: 1.125rem;
        font-weight: 600;

        @media (max-width: 767px) {
            justify-content: center;
        }
    }
}

.support.main {

    &>div {
        padding-block: 3rem;

        @media (max-width: 767px) {
            padding-block: 2rem;
        }
    }

    #join-foundation {
        padding-inline: 1rem;
        max-width: var(--page-max-width);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-inline: auto;

        h2 {
            text-align: center;
        }

        p {
            text-align: center;
        }

        .call-to-action {
            background-color: #000;
            font-weight: 600;
            color: #fff;
            border-radius: 9999px;
            padding: .5rem 2rem;
        }
    }

    #platinum-supporters .supporters-card {
        --cards-per-row: 4;
    }

    #gold-supporters .supporters-card {
        --cards-per-row: 4;
    }

    #silver-supporters .supporters-card {
        --cards-per-row: 5;
    }

    #associate-supporters .supporters-card {
        --cards-per-row: 5;
    }

    #ecosystem-supporters .supporters-card {
        --cards-per-row: 5;
    }

    #supporters {
        display: flex;
        flex-direction: column;
        max-width: var(--page-max-width);
        margin-inline: auto;
        --supporters-padding-inline: 1rem;
        padding-inline: var(--supporters-padding-inline);

        .supporters-section {
            display: flex;
            flex-direction: column;

            h2 {
                text-align: center;
            }

            .cards {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                --cards-gap: 1rem;
                gap: var(--cards-gap);
                justify-content: center;

                .supporters-card {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    --supporters-card-border-width: 1px;
                    border: var(--supporters-card-border-width) solid var(--borders-color);
                    border-radius: 16px;
                    --supporters-card-hpadding: 8px;
                    padding: var(--supporters-card-hpadding);
                    // The whitespace of the text at the bottom visually adds to the padding so we account for this on the top a little.
                    padding-top: calc(1.5 * var(--supporters-card-hpadding));
                    // This adds some space between the text and the image
                    gap: var(--supporters-card-hpadding);

                    img {
                        aspect-ratio: 1/1;
                        object-fit: contain;
                        width: calc((var(--page-max-width) - 2* var(--supporters-padding-inline) - calc(var(--cards-per-row) - 1)* var(--cards-gap)) / var(--cards-per-row) - 2* var(--supporters-card-hpadding) - 2* var(--supporters-card-border-width));
                    }
                }
            }
        }
    }

    #the-spec {
        background-color: #fafafa;

        .content {
            display: flex;
            flex-direction: row;
            gap: 3rem;

            @media (max-width: 767px) {
                flex-direction: column-reverse;
            }

            img {
                max-width: 50%;
                margin-inline: auto;
            }
        }
    }

    #tangible-work {
        background-color: #000;
        color: #fff;

        .content {
            display: flex;
            flex-direction: row;
            gap: 3rem;

            @media (max-width: 767px) {
                flex-direction: column;
            }
        }
    }

    #all-your-comms {

        .content {
            display: flex;
            flex-direction: row;
            gap: 3rem;

            div {
                flex: 2;
            }

            img {
                flex: 1;
                min-width: 0;
            }

            @media (max-width: 767px) {
                flex-direction: column-reverse;
            }
        }
    }

    #open-dev {
        background-color: #000;
        color: #fff;

        .content {
            max-width: 50rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3rem;
        }
    }

    #help-us {
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;

            @media (max-width: 767px) {
                grid-template-columns: 1fr;
            }

            .blurb {
                display: flex;
                flex-direction: column;
                align-items: start;
            }
        }

        .call-to-action {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: .6rem 1.5rem;
        }
    }
}

.membership {

    max-width: 65rem;
    padding-inline: 1rem;
    margin-inline: auto;

    h3 {
        font-size: 1.25rem;
    }

    .row {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        margin-block: 2rem 3rem;

        @media (max-width: 767px) {
            flex-direction: column;
        }
    }

    .representatives {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        h3 {
            text-align: center;
        }

        ul {
            padding-inline: 0;
            width: 100%;
        }

        li {
            list-style: none;
            text-align: center;
            background-color: #fafafa;
            border-radius: 8px;
            margin-block: .5em;
            padding: .5em 1rem;
        }
    }

    .tiers-row {
        display: grid;
        grid-template-columns: repeat(4, 15rem);
        gap: 1rem;
        overflow-y: auto;
        padding-block-start: 1.5em;
        margin-block-end: 2em;

        .tier-card {
            border: 1px solid var(--borders-color);
            border-radius: 16px;
            background-color: #fff;

            display: flex;
            flex-direction: column;
            padding: 1em;

            h3 {
                margin-inline: auto;
                margin-block-start: .5rem;
            }

            .pricing {
                background-color: #e9e9e9;
                border-radius: 9999px;
                margin-inline: auto;
                padding-inline: .8em;
            }

            ul {
                margin-block-start: 1rem;
                padding-inline-start: 1em;

                li {
                    list-style-image: url('/assets/tick_supported.svg');
                    margin-block: .3em;
                }
            }
        }
    }
}