Newer
Older
ar-multi / scss / landing.scss
@Aris Green Aris Green on 29 Apr 2024 2 KB updated
:root {
    --cbar-spacing: 4rem;
}

.landing-row {

    margin-left: 4rem;
    margin-top: 2rem;

    ul.simple-lines {
        margin-top: 1rem;
        line-height: 1.2;
    }
}

.landing-row {
    display: flex;
    flex-direction: row;
    height: 100%;

    .headers {
        display: flex;
        flex-direction: column;
        margin-right: 3rem;

        div.header-box {
            display: flex;
            flex-direction: row;
            gap: 3rem;
            .main-header {
                font-weight: bold;
                text-align: right;
                min-width: 7rem;
            }

            .main-header.top {
                margin-top: calc(var(--cbar-spacing)*1);                
            }

            .main-header.bottom {
                display: flex;
                flex-direction: column;
                h2 {
                    margin-top: 20rem;
                }
            }

            .sub-header {

                margin-top: calc(var(--cbar-spacing)*2);
            }
        }

        div.bottom-banner {
            @media (width > 578px) {
                display: none;
            }
            display: flex;
            flex-direction: column;
            background-color: var(--yellow0);
            height: var(--cbar-spacing);
        }


    }

    .color-stack {

        @media (width > 578px ) {
            display: flex;            
        }
        @media (width <= 578px ) { 
            display: none;            
        }

        flex-direction: column;

        >div {
            flex: 1 0 auto;
            display: flex;
            flex-direction: row;
        }

        div.top {
            max-height: calc(var(--cbar-spacing)*2);
            flex: 1 0;
        }

        div.bottom {
            background-color: var(--yellow0);

            div {
                background-color: var(--white0);
            }
        }

        div.color-bar {

            flex: 0 0;

            min-height: var(--cbar-spacing);


            div {
                background-color: var(--white0);
            }


            &.yellow {
                background-color: var(--yellow0);
            }

            &.pink {
                background-color: var(--pink0);
            }

            &.tan {
                background-color: var(--tan0);
            }

        }

    }
}