publik-base-theme/static/saumur/_custom.scss

$logo-height: 140px;
$banner-height: 300px;

%button {
    box-shadow: none;
    text-transform: uppercase;
    &:hover {
        box-shadow: none;
    }
}

%title {
    text-transform: uppercase;
}

// golbal layout

main {
    background: $gray-light-2;
    padding: $space-large 0;
}


// header and navigation

#logo {
    @media screen and ($max-mobile-viewport) { 
        padding: 0 $space-small;
        display: inline-block;
        
    }
}

#logo.has-logo a {
    z-index: 2;
    height: $logo-height / 2;
    min-width: $logo-height;
    @media screen and ($min-desktop-viewport) { 
        height: $logo-height;
        min-width: $logo-height * 2;
    }
}

.site-nav {
    z-index: 101;
}
.gru-nav-wrapper {
    margin-top: -$logo-height * 0.85;
}
div#nav {
    text-transform: uppercase;
}
div.gru-nav {
    background: transparent;
    @media screen and ($min-desktop-viewport) {
        > ul {
            text-align: right;
            float: right;
        }
    }
    & > ul > li:first-child > a {
        border-radius: $border-radius-1;
    }
    & > ul > li a {
        font-weight: 500;
    }
    .menu--link {
        border-radius: $border-radius-1;
        
    }
    @media screen and ($max-mobile-viewport) {
        .gru-nav-button {
            top: $space-small;
            right: $space-small;
            left: unset;
            & + ul::before {
                display: none;
            }
        }
        &.togglable .menu {
            box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);
            & > li {
                border-bottom: 1px solid $gray-light-3;
            }
        }
    }
}

#toplinks {
    @media screen and ($max-mobile-viewport) {
        position: static;
        display: inline-block;
        margin-right: $nav-menu-side;
        background: transparent;
    }
}

//  banner

.banner {
    background-image: url(/assets/banner:background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: $banner-height / 1.5;
    @media screen and ($min-desktop-viewport) {
        height: $banner-height;
    }
}
// content and cells

h1, h2, h3, h4, h5, h6 {
    @extend %title;
}
h1 {
    font-size: $fz-1;
}
h2 {
    font-size: $fz-2;
}
h3 {
    font-size: $fz-3;
}

.search-cell.transparent {
    border: none;
    background: transparent;
    form {
        padding: 0;
    }
}

div.link-cell {
    &.pk-button, &.pk-big-button {
        background: transparent;
        border: none;
    }
}

#sidebar {
    div#rub_service div.category h3,
    div.a2-block h2,
    .block h2,
    div.links-list h2,
    div#services > ul > li > strong > a,
    div.textcell h2:first-child,
    div.cell h2:first-child {
        background-color: $gray-dark-1;
        color: $white;
        font-weight: 600;
        &::before {
			content: '\f054';
			font-family: FontAwesome;
			margin-right: 0.6em;
            font-size: 0.6em;
			display: inline-block;
			vertical-align: middle;
		}
    }
}

%orange-border {
    content: " ";
    display: block;
    margin: $space-small auto;
    border-bottom: 3px solid $orange;
}

#columns-wrapper {
    div#rub_service div.category h3,
    div.a2-block h2,
    .block h2,
    div.links-list h2,
    div#services > ul > li > strong > a,
    div.textcell h2:first-child,
    div.cell:not(.has-asset-picture) h2:first-child {
        &::after {
            @extend %orange-border
        }
    }
}

.gru-content div.cell.has-asset-picture {
    & > div {
        position: relative;
    }
    h2:first-child {
        padding-left: $space-large;
        width: 100%;
    }
    img {
        position: absolute;
        padding: 0 !important;
        width: $space-large;
        top: $space-small;
        left: 0;
    }
    &.foldable:not(.folded) picture::after {
        @extend %orange-border;
        margin: 0;
    }
    &:not(.foldable) picture::after {
        @extend %orange-border;
        margin: 0;
    }
}


// borderless cells in grid

.gru-content > #columns-wrapper > #columns {
    border: $widget-border;
    background: white;
    padding: $space-medium;
    .cell {
        border: none;
    }
}

// communes selector

div#services-communes {
	select {
		width: 100%;
	}
}

// forms
.form-content {
    @extend %cell;
}

.form-previous {
    &::before {
        content: '\f100';
        font-family: FontAwesome;
        margin-right: 0.6em;
        font-size: 0.6em;
        display: inline-block;
        vertical-align: middle;
    }
}
.form-next {
    &::after {
        content: '\f101';
        font-family: FontAwesome;
        margin-left: 0.6em;
        font-size: 0.6em;
        display: inline-block;
        vertical-align: middle;
    }
}

// footer
#footer-wrapper {
    margin-top: 0;
}
footer {
    text-align: center;
}