Produits Entr'ouvert » Intégrations graphiques Publik

$toplink-separator: 1px solid rgba(34, 34, 34, 0.3);

$required-label-color: #ff0000;

%button {

    box-shadow: none;

    text-transform: uppercase;

    &:hover {

        box-shadow: none;

    }

}

%inverted-button {

    background-color: $white;

    color: $carbon;

    border: 2px solid $button-background;

    &:hover {

        border: 2px solid $button-hover-background;

        background: $gray-light-2;

        color: $carbon;

    }

}

%title {

    text-transform: uppercase;

}

main {

    line-height: 1.5em;

}

// header and navigation

div#header {

    background: $white;

    max-width: 100%;

    box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);

    padding: $space-small $space-medium;

    @media screen and ($min-desktop-viewport) {

        padding: $space-large;

    }

}

#logo {

    @media screen and ($max-mobile-viewport) {

        padding-left: unset;

    }

}

#logo.has-logo a::before {

    @media screen and ($min-desktop-viewport) {

        z-index: 3;

        width: 100px;

        height: 62.5px

    }

}

.site-nav {

    z-index: 2;

    margin-bottom: $space-xlarge;

    @media screen and ($min-desktop-viewport) {

        margin-top: -$space-xlarge * 1.75;

    }

}

div#nav {

    max-width: 100%;

    padding: 0 $space-large 0 $space-small;

}

div.gru-nav {

    @media screen and ($min-desktop-viewport) {

        text-align: right;

    }

    @media screen and ($max-mobile-viewport) {

        .gru-nav-button {

            right: $space-medium;

            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;

            }

        }

    }

    li .menu--label, li .submenu--label {

        text-transform: uppercase;

        font-size: $fz-small;

        &:hover {

            padding-bottom: $space-small;

            border-bottom: 2px solid $carbon;

        }

    }

    li.selected .menu--label {

        padding-bottom: $space-small;

        border-bottom: 2px solid $carbon;

    }

    .submenu {

        @media screen and ($min-desktop-viewport) {

            box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);

            font-size: $fz-xsmall;

            z-index: 101;

        }

    }

}

#toplinks {

    text-transform: uppercase;

    font-size: $fz-xxsmall;

    font-weight: 700;

    right: $space-xlarge;

    @media screen and ($max-mobile-viewport) {

        margin-right: $nav-menu-side;

        background: transparent;

    }

    a {

        color: $carbon;

        @media screen and ($max-mobile-viewport) {

            padding: $space-medium 0;

            margin-left: $space-large;

        }

        @media screen and ($min-desktop-viewport) {

            padding: $space-xsmall;

            &:not(:first-child) {

                padding-left: $space-medium;

                border-left: $toplink-separator;

            }

        }

    }

}

div#main-content-wrapper {

    z-index: 1;

}

a#publik-portal-agent {

    right: 45%;

    left: 45%;

    text-align: center;

}

// forms

.title label {

    text-transform: uppercase;

    font-weight: 700;

}

#side {

    font-size: 90%;

    border: $wcs-step-border-bottom;

    @media screen and ($min-desktop-viewport) {

        box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.1);

    }

}

[role="radiogroup"] {

    margin-top: $space-medium;

}

.previous-button button {

    @extend %inverted-button;

}

label .required {

    color: $required-label-color;

}

// cells

.cell {

    h1, h2, h3, h4, h5, h6 {

        text-transform: uppercase;

        text-align: center;

    }

    h1 {

        font-size: 52px;

    }

    h2 {

        font-size: 36px;

    }

}

// links / underline expand/collapse animation

main a:not(.links-list *, .categories-cell *, .carrousel-content *, .pk-button, .pk-big-button, .account-management *) {

    background-size: 100% 2px;

    background-repeat: no-repeat;

    background-position: center 100%;

    background-image: linear-gradient(120deg, lighten($epicea, 15%), lighten($epicea, 15%));

    transition: background-size .2s ease-in-out;

    &:hover {

        background-image: linear-gradient(120deg, lighten($epicea, 35%), lighten($epicea, 35%));

        background-size: 100% 100%;

    }

}

//  other content

hr {

    margin: $space-large 0;

    border: none;

    border-bottom: 1px solid $gray-light-3;

}

// footers

.dark-footer {

    background: $carbon;

    display: flex;

    align-items: center;

    justify-content: center;

    text-transform: uppercase;

    padding: $space-large;

    img {

        margin-right: $space-large;

    }

    a {

        font-weight: 400;

        color: $white;

        &::after {

            font-family: FontAwesome;

            content: "\f061";

            margin-left: $space-small;

        }

    }

}

#footer-wrapper {

    margin-top: 0;

}

$carbon: #222222;

$white: #ffffff;

$epicea: #5d7b84;

$gray-secondary: #666666;

$gray-light-1: #f5f5f5;

$gray-light-2: #f0f0f0;

$gray-light-3: #d8d8d8;

$gray-secondary: #656565;

$primary-color: $epicea;

$space-xsmall: 0.25em;

$space-small: 0.5em;

$space-medium: 1em;

$space-large: 2em;

$space-xlarge: 3em;

// typo

$font-color: $carbon;

$font-family: Montserrat, Arial, sans-serif;

$font-size: 18px;

$font-line-height: 3.1em;

$base-font: 16;

$fz-1: 30em / $base-font;

$fz-2: 24em / $base-font;

$fz-3: 21em / $base-font;

$fz-4: 18em / $base-font;

$fz-small: 14em / $base-font;

$fz-xsmall: 12em / $base-font;;

$fz-xxsmall: 11em / $base-font;;

$width: 890px;

$link-color: $carbon;

$link-decoration: none;

$link-hover-decoration: none;

$header-logo-size: 59px 37px;

$responsive-menu: left-to-right;

$nav-color: $carbon;

$nav-background: transparent;

$nav-button-background: $white;

$nav-button-color: $carbon;

$nav-mobile-menu-background: $white;

$nav-item-background: transparent;

$nav-item-selected-background: $white;

$nav-item-selected-color: $carbon;

$nav-item-hover-background: transparent;

$nav-item-hover-color: $nav-color;

$nav-item-hover-border: 2px solid $carbon;

$nav-submenu-background: $gray-light-1;

$nav-submenu-color: $gray-secondary;

$toplinks-border-radius: 0;

$toplinks-background: $gray-light-2;

$toplinks-box-shadow: none;

$toplinks-padding: $space-medium;

$toplinks-border: none;

$cell-border: none;

$cell-background: $gray-light-1;

$cell-entry-hover-background: $epicea;

$cell-entry-hover-color: $white;

$title-color: $carbon;

$title-transform: uppercase;

$title-font-size: $fz-2;

$title-weight: 700;

$title-background: transparent;

$title-padding: $space-medium;

$button-background: $epicea;

$button-border-radius: 2px;

$button-border: none;

$button-hover-background: darken($button-background, 20%);

$button-focus-outline: 2px solid $carbon;

$button-focus-outline-offset: 2px;

$cancel-button-style: '%inverted-button';

$buttons-order: previous, cancel (grow), submit;

$form-sidebar-width: 30%;

$form-sidebar-position: right;

$widget-background: lighten($gray-light-1, 2%);

$widget-focus-border: 1px solid $primary-color;

$widget-focus-outline: 1px solid $primary-color;

$wcs-step-color: $carbon;

$wcs-step-border-bottom: 1px solid $gray-light-3;

$footer-background: $epicea;

$footer-color: $white;

$footer-link-color: $white;

{

  "label": "Muséum National d'Histoire Naturelle",

  "variables": {

    "theme_color": "#5d7b84"

  },

  "settings": {

    "combo": {

      "COMBO_ASSET_SLOTS.update": {

        "header:logo": { "label": "Têtière : logo" },

        "footer:logo": { "label": "Pied de page : logo" }

      }

    }

  }

}

@charset "UTF-8";

@import '../includes/fonts/montserrat';

@import 'vars';

@import '../includes/publik';

@import 'custom';

{% extends "theme.html" %}

{% block footer-pre %}

<div class="dark-footer">

    <img src="{{site_base}}/assets/footer:logo" alt="Muséum National d'Histoire Naturelle - Logo">

    <h2>

        <a href="https://www.mnhn.fr/">Retourner sur le site institutionnel du Muséum</a>

    </h2>

</div>

{% endblock %}