coopcloud.tech/themes/cloud.autonomic.zone/assets/scss/main.scss

@charset "utf-8";

// Branding
$autonomic-red: #EE4A33;
$coopcloud-blue: #202674;
$coopcloud-pink: #ff4f88;
$white: white;
$text-color: #1C1C1C;
$bg-color: #EFEFEF;

$footer-background-color: $coopcloud-blue;
$footer-color: true;

$danger: $autonomic-red;

// HACK: Changing button behaviour globally as quick fix for the "visit: autonomic.zone" button
$button-border-width: 2px;
$button-hover-border-color: $white;
$button-focus-border-color: $white;
$button-active-border-color: $white;
$button-ghost-border-color: $white;
$button-ghost-hover-color: $white;
$button-text-hover-color: $white;
$button-focus-box-shadow-size: 0;

@import "./bulma/bulma.sass";

@mixin define-manrope-family($weight, $uri) {
    font-family: 'Manrope';
    src: url($uri) format("woff2");
    font-weight: $weight;
}

@mixin thick-hr {
    height: 4px;
}

@font-face { 
    @include define-manrope-family(bold, '../font/manrope.bold.woff2')
}
@font-face { 
    @include define-manrope-family(300, '../font/manrope.light.woff2')
}

@font-face { 
    @include define-manrope-family(medium, '../font/manrope.medium.woff2')
}

body {
    background-color: $bg-color;
    color: $text-color;
    padding: 0;
    margin: 0;
    font-family: 'Manrope', sans-serif;
}

.question {
    padding: 10px;
    h2 {
        font-weight: bold;
        font-size: 2em;
        margin-bottom: 9px;
    }
    p {
        padding: 0;
        margin: 0;
    }
}


.hr-header {
    @include thick-hr();
}

hr {
    background-color: $text-color;
    border: none;
    height: 1px;
}

.is-autonomic {
    background-color: $autonomic-red;
    color: $white;
    h1 {
        color: $white !important;
    }
    hr {
        @include thick-hr();
        background-color: $white;
    }
    a {
        color: $white;
        text-decoration: underline;
    }
    .content {
        padding-bottom: 20px;
    }
    #who-is-involved {
        padding-bottom: 40px;
    }
}

#header {
    background-color: $coopcloud-pink;
    padding: 10px;
    margin: 0;

}


// Do not show server image when using mobile viewport
// Is a little bigger than the actual mobile viewport in bulma due to the text overlapping with the server icon
@media all and (min-width: 769px) {
    #server-hero {
        background-image: url("/svg/hero-server.svg");
        background-repeat: no-repeat;
        background-size: 20%;
        background-position: calc(100% - 20px) ;
    }
}