decidim.scss

// // Variables
// 
$primary: #52ACAA;
$primary-rgb: 82,172,170;
// $secondary: #599aa6;
// $secondary-rgb: 89,154,166;
// $success: #57d685;
// $success-rgb: 87,214,133;
// $warning: #ffae00;
// $warning-rgb: 255,174,0;
// $alert: #ec5840;
// $alert-rgb: 236,88,64;
// 
$proposals: #238ff7;
// $actions: #57d685;
// $debates: #fa6c96;
// $meetings: #fabc6c;
// 
// $twitter: #55acee;
// $facebook: #3b5998;
// $google: #4285f4;
// 
// // background colors used in public diff views
// $color-addition: #e6ffed;
// $color-removal: #ffeef0;
// 
// // Define custom properties as css color variables
// 
:root{
   --primary: #{$primary};
   --primary-rgb: #{$primary-rgb};
//   --secondary: #{$secondary};
//   --secondary-rgb: #{$secondary-rgb};
//   --success: #{$success};
//   --success-rgb: #{$success-rgb};
//   --warning: #{$warning};
//   --warning-rgb: #{$warning-rgb};
//   --alert: #{$alert};
//   --alert-rgb: #{$alert-rgb};
   --proposals: #{$proposals};
//   --actions: #{$actions};
//   --debates: #{$debates};
//   --meetings: #{$meetings};
//   --twitter: #{$twitter};
//   --facebook: #{$facebook};
//   --google: #{$google};

    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6,
    a, .a {
    font-family: "Segoe UI", Helvetica, Roboto, Arial, sans-serif;
    font-style: normal;
    text-rendering: optimizeLegibility;
    }

    p, .p,
    ul, .ul {
    font-family: "Segoe UI", Helvetica, Roboto, Arial, sans-serif;
    }

    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
        font-weight: normal;
    }

    .title-bar a {
        font-size: large;
        font-weight: bold;
        color: #fff;
      
        &:hover{
          color: #000;
        }
    }
      
    .main-nav__link--active a{
    color: black;
    }

    .title-bar {
        padding-bottom: 16px;
        background-color: $primary;
        & .navbar{
            background-color: $primary;
        }

        & .topbar {
            justify-content: flex-start;
            & div {
                flex: auto;
            }
        }
        @media (max-width: 639px) {
            & .topbar {
                justify-content: flex-end;
                & div {
                    display: block;
                }
                
            }
        }
        & .header-hero {
            margin: 0px;
            padding: 0px;
            height: 500px;
        }
    }
    .logo-bar {
        background-color: $primary;
        justify-content: space-around;
        @media (max-width: 639px) {
            padding-top: 16px;
            padding-bottom: 0px;
        }
        @media (min-width: 640px) {
            padding-top: 0px;
            padding-bottom: 18px;
        }
    }
    @media screen and (max-width: 39.9375em){
        .logo-bar {
            border-top: 0px;
            position: absolute;
            top: 34px;
        }

    }

    .off-canvas .navbar a{
        color: white;
        font-size: large;
        font-weight: bold;
      
        &:hover{
          color: rgba(255,255,255,0.8);
        }
    }

    .dropdown.menu {
        margin-top: 2px;
        .is-active > a {
          color: #000;
        }
    }

    .main-footer {
        background-color: $primary;
        & a {
            color: white;
        }
    }
    .mini-footer {
        background-color: $primary;
        & a {
            color: white;
        }
        & .footer-div {
            padding-top: 20px;
        }
        @media screen and (max-width: 39.9375em){
            .footer-div {
                padding-top: 10px;
            }
        }
    }
    
    .footer-logo-div {
        height: 100%;
        text-align: center;
        & .footer-logo {
            margin: auto;
        }
    }

    .footer-left {
        text-align: right;
    }

    .footer-right {
        text-align: left;
    }

    .hero-picture {
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 500px;
        background-color: #007a86;
    }
    @media screen and (max-width: 39.9375em){
        .hero-picture {
            height: 250px;
        }
    }
    @media screen and (min-width: 39.9375em){
        .hero-picture {
            height: 350px;
        }
    }
    @media screen and (min-width: 1053px){
        .hero-picture {
            height: 500px;
        }
    }
    @media screen and (min-width: 1450px){
        .hero-picture {
            background-size: contain;
        }
    }
    .card--process__column {
        background-color: transparent !important;
    }
    .card--full__image {
        background-size: contain;
        object-fit: contain;
    }
    .custom-process_card {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom left;
    }
    .custom-process-header {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .custom-card__content {
        background-color: rgba(255,255,255,0.5);
    }
    .column.row.row, .row.row.columns {
        float: none;
        justify-content: space-between;
    }
    .topbar__user, .topbar__dropmenu {
        margin: 0px;
    }
    .is-dropdown-submenu-parent {
        margin-bottom: 1px;
    }
    @media screen and (max-width: 799px){
        .custom-button-margin {
            margin-bottom: 110px;
        }
    }
    .footer-separator{
        flex-grow: 0;
    }

    .footer-social__icon .icon{
        width: 32px;
        height: 32px;
    }

    .subhero{
        padding: 4rem 0;
        text-align: center;
    }

    .new-background{
        background-image:  url("/assets/proposal-background/add-idea.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .compare-background{
        background-image:  url("/assets/proposal-background/compare.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        min-height: 650px;
    }

    .publish-background{
        background-image:  url("/assets/proposal-background/publish.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .add-image-background{
        background-image:  url("/assets/proposal-background/add-image.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    @media screen and (min-width: 1450px){
        .add-image-background, .new-background, .compare-background, .publish-background{
            background-size: 1250px auto;
        }
    }
}

@import "decidim/application";