blap/src/vector/mobile_guide/index.css

/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");

html {
    min-height: 100%;
    position: relative;
}

body {
    background: var(--cpd-color-bg-canvas-default);
    max-width: 680px;
    margin: var(--cpd-space-0x) auto;
    padding-bottom: 178px; /* Match the height of mx_BottomGradient */
    font-family: var(--cpd-font-family-sans);
    font-size: var(--cpd-font-size-body-lg); /* Design says 16px, this is 17px */
    color: var(--cpd-color-text-primary);
}

hr {
    border: none;
    height: var(--cpd-border-width-1);
    background-color: var(
        --cpd-color-bg-subtle-primary /* Design uses Border token from "Compound Marketing" set, but this matches. */
    );
    color: var(
        --cpd-color-bg-subtle-primary /* Design uses Border token from "Compound Marketing" set, but this matches. */
    );
    margin: 0;
}

p {
    margin: var(--cpd-space-1x) var(--cpd-space-0x);
    padding: var(--cpd-space-0x);
}

.mx_Button {
    border: 0;
    border-radius: 100px;
    min-width: 80px;
    background-color: var(--cpd-color-bg-action-primary-rest);
    color: var(--cpd-color-text-on-solid-primary);
    cursor: pointer;
    padding: 12px 22px;
    word-break: break-word;
    text-decoration: none;
}

#deep_link_button {
    margin-top: 12px;
    display: inline-block;
    width: auto;
    box-sizing: border-box;
}

.mx_StoreLinks {
    margin: 15px 0 12px 0;
}

.mx_StoreBadge {
    text-decoration: none !important;
    margin: 16px 16px 16px 0px;
}

#f_droid_link {
    color: var(--cpd-color-text-action-accent);
    font-weight: bold;
    text-decoration: none;
}

#f_droid_link:visited {
    color: var(--cpd-color-text-action-accent);
}

.mx_HomePage_header {
    color: var(--cpd-color-text-secondary);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 48px;
    padding-bottom: 48px;
}

.mx_HomePage_header #header_title {
    margin-top: 8px;
    margin-bottom: 0px;
}

.mx_HomePage h3 {
    margin-top: 30px;
}

.mx_HomePage_col {
    display: flex;
    flex-direction: row;
}

.mx_HomePage_row {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.mx_HomePage_container {
    margin: 10px 20px;
}

.mx_HomePage_errorContainer {
    display: none; /* shown in JS if needed */
    margin: 20px;
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-critical-primary);
    background-color: var(--cpd-color-bg-critical-subtle);
    padding: 5px;
}

.mx_HomePage_container h1,
.mx_HomePage_container h2,
.mx_HomePage_container h3,
.mx_HomePage_container h4 {
    font-weight: var(--cpd-font-weight-semibold);
    font-size: var(--cpd-font-size-body-lg); /* Design says 16px, this is 17px */
    margin-bottom: 8px;
    margin-top: 4px;
}

.mx_Spacer {
    margin-top: 48px;
}

.mx_DesktopLink {
    color: var(--cpd-color-text-action-accent);
    font-weight: var(--cpd-font-weight-semibold);
    text-decoration: none;
}

/*
 * The bottom gradient is a full-width background image that stretches horizontally across the page.
 * It is positioned pinned to the bottom of the viewport unless the content is taller than the viewport,
 * in which case it will be pinned to the bottom of the content.
 */
.mx_BottomGradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 178px; /* Match the height of assets/bottom-gradient.svg so the gradient only stretches horizontally */
    background-image: url("assets/bottom-gradient.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    margin-left: calc(50% - 50vw); /* Center the gradient regardless of body width */
}

.mx_HomePage_step_number {
    display: flex;
    align-items: flex-start;
    margin-right: 8px;
}

.mx_HomePage_step_number span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cpd-space-6x);
    height: var(--cpd-space-6x);
    border-radius: 50%;
    border: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary); /* Not a border token, but matches the Design (Border token from the "Compound Marketing" set). */
    background-color: transparent;
    color: var(--cpd-color-text-secondary);
    font-size: var(--cpd-font-size-body-md); /* Design says 14px, this is 15px */
}

#step2_description {
    color: var(--cpd-color-text-secondary);
}