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
@mixin add-bg-pattern($id) {
    background-repeat: repeat;
    background-position: top center;
    background-image: url('/images/bg/pattern-#{$id}.png'); 
}

// Sections bg transitions
@mixin add-horizontal-curve($id, $pos) {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 100%; 
        height: 100%;
        background-image: url('/images/svg/curve-#{$id}.svg');
        background-size: contain;
        background-position: $pos center;
        background-repeat: no-repeat;
        pointer-events: none;
    }
}

// Colored design element: square or circle
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1 , $pos: -70px) {
    position: relative;
    z-index: 1;
    &:before {
        content: '';
        position: absolute;
        width: 45px * $scale; 
        height: 45px * $scale;
        left: $pos; 
        top: -20px;
        background-color: $color;
        z-index: 0;
        @if $shape == 'circle' {
            border-radius: 25px;
          }
        @else {
            border-radius: 0;
        }
    }
}

// Theme custom sections
header.header {
    background-color: $bg-dark-blue;
}
main > section {
    &.hero {
        background-color: $bg-dark-blue;
        @include add-bg-pattern(1);
        @include add-horizontal-curve(1, bottom);        
        h1 { color: $text-green; }
    }
    &.section-1 {
        li { font-weight: 600; }
    }
    &.section-2 {
        background-color: transparentize($color: $text-green, $amount: 0.7)
    }
    &.section-3 {
        background-color: $text-green;
        //@include add-horizontal-curve(4, bottom);
        h2 {
            @include add-decorative-shape($icon-red, 'circle');
        }
    }
    &.section-4 {
        //@include add-horizontal-curve(2, bottom);
    }
    &.section-5 {
        background-color: transparentize($color: $text-green, $amount: 0.5)
    }
    &.section-6 {
        background-color: $bg-dark-blue;
        @include add-bg-pattern(1);        
    }
    &.section-7 {
        background-color: $text-green;
        h2 {
            @include add-decorative-shape($icon-yellow);
        }
    }
}
.dark > footer {
    margin-top: 4rem;
    @include add-horizontal-curve(3, top);
    &:before {
        top: -70px;
    }
}

section {
    // Centered text
    &.big-text,
    &.li-block {
        h2, p {
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }        
    }
    &.big-text {
        .container .row {
            & > div {
                &:last-child {
                    width: 80%;
                    margin-left: 10%;
                }
            }
        }
        p.text-xl {
            //font-size: 1.4rem;
        }
    }
    // Change bulletlists rendering in flex bloc    }
    &.li-block {
        .container .row {
            & > div {
                &:last-child {
                    width: 100%;
                }
                ul {
                    display: flex;
                    li {
                        i:first-child {
                            display: none;
                        }
                        flex: 1 0 0;
                        margin: 0.5em;
                        padding: 1.5em;
                        text-align: center;
                        border-radius: 4px;    
                        background-color: #ffffff3b;
                    }
                }
            }    
        }
        // Add custom colored icons on each item 
        &.section-1 {
            //text-transform: uppercase;
            ul li {
                font-weight: 500;
                font-size: large;
                &:nth-child(1) {
                    @include add-decorative-shape($text-green, 'square', 0.7, 105px);
                }
                &:nth-child(2) {
                    @include add-decorative-shape($icon-red, 'circle', 0.7, 105px);
                }
                &:nth-child(3) {
                    @include add-decorative-shape($chill-orange, 'square', 0.7, 105px);
                }
                &:nth-child(4) {
                    @include add-decorative-shape($icon-yellow, 'circle', 0.7, 105px);
                }
            }
        }    
    }
}

// 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;
    }
}

// Dark but only in sections
section.dark {
    p {
        color: white;
        font-weight: bolder;
    }
}

.hop {
    color: red;
}


///// PAGES

main > section {
    &.page-hero {
        background-color: $bg-dark-blue;
        @include add-bg-pattern(1);
        @include add-horizontal-curve(1, bottom);        
        h1 { color: $text-green; }
    }
}

.chapo {
    font-size: large;
    font-weight: 600;
}

figure.image {
    //background-color: $chill-lightgray;
    //padding: 1em;
    display: flex;
    flex-direction: column;
    &.left {
        float: left;
        margin-right: 1.5em;
    }
    &.right {
        float: right;
        margin-left: 1.5em;
    }
    &.center {
        display: flex; 
        justify-content: center; 
        align-items: center;
    }
    img {
        margin-bottom: 0;
    }
    figcaption {}
}