chill_hugoplate/assets/scss/custom.scss

///// HOMEPAGE

/// Chill brand colors
$chill-blue: #334d5c;
$chill-green: #43b29d;
$chill-beige: #d3c7b1;
$chill-red: #dc516d;
$chill-pink: #e57469;
$chill-orange: #e89463;
$chill-lightgray: #efefef;
$chill-yellow: #f1d275;

/// Other custom colors
$bg-dark-blue: #0d242e;
$bg-light-blue: #a0dcff;
$btn-orange: #f46839;
$text-green: #56c4aa;
$icon-red: #f0384d;
$icon-yellow: #fcc958;

// Pattern
// hugo needs to precompile images in public dir, and make it automatically with images called from content.
// here we need to use it in css, then need to generate it, calling it first from a content md file.
@mixin apply-bgpattern-01() {
    background-repeat: repeat;
    background-position: top center;
    background-image: url('../images/bg/pattern-1.png'); 
}

// Sections bg transitions
@mixin curve-bottom($id) {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 100%; 
        height: 100%;
        background-image: url('../images/svg/curve-#{$id}.svg');
        background-size: contain;
        background-position: bottom center;
        background-repeat: no-repeat;
        z-index: 10;
    }
}

// Title design element, with colored circle
@mixin circle-in-title($color) {
    position: relative;
    z-index: 1;
    &:before {
        content: '';
        position: absolute;
        width: 45px; 
        height: 45px;
        left: -70px; 
        top: -20px;
        border-radius: 25px;
        background-color: $color;
        z-index: 0;
    }
}

// Theme custom sections
header.header {
    background-color: $bg-dark-blue;
}
main > section {
    &.hero {
        background-color: $bg-dark-blue;
        @include apply-bgpattern-01();
        @include curve-bottom(1);        
        h1 {
            color: $text-green;
        }
        p {
            color: white;
            font-weight: bolder;
        }
    }
    &.section-1 {
        @include curve-bottom(2);
        li {
            font-weight: 600;
        }
    }
    &.section-2 {
        background-color: $bg-light-blue;
    }
    &.section-3 {
        background-color: $text-green;
        h2 {
            @include circle-in-title($icon-red);
        }
    }
    &.section-4 {
    }
    &.section-5 {
        background-color: transparentize($color: $text-green, $amount: 0.7)
    }
    &.section-6 {
        background-color: $bg-dark-blue;
        @include apply-bgpattern-01();        
    }
    &.section-7 {
        background-color: $bg-light-blue;
        h2 {
            @include circle-in-title($icon-yellow);
        }
    }
}

// Change bulletlists rendering in flex bloc
section.section-1,
section.section-5,
section.section-7 {
    .container .row {
        & > div {
            &:last-child {
                width: 100%;
            }
            h2, p {
                //text-align: center;
            }
            ul {
                display: flex;
                li {
                    i:first-child {
                        display: none;
                    }
                    flex: 1 0 0;
                    margin: 0.5em;
                    padding: 1.5em;
                    text-align: center;
                    //border: 1px solid #767676;
                    border-radius: 4px;    
                    background-color: white;
                }
            }
        }    
    }
}

// Dark context (homepage header, hero, footer)
.dark {

    // Overwrite primary button design
    .btn-primary {
        background-color: $btn-orange;
        color: white;
        border: 1px solid $btn-orange;
        border-radius: 2em;
    }
}