stratis.css

/*
Index
======
1. GENERIC STYLE
	1.1 TABLE
2. TYPO
	2.1 HEADINGS
	2.2 TEXT
3. HEADER
4. VOLET
5. TOOLBAR
	5.1 NAVIGATION ELEMENTS
	5.2 RELATED LINKS
6. PAGINATION SLIDE LINEAR LAYOUT
7. SLIDES
	7.1 COLUMN
	7.2 FREAKY DISC
8. TOOL BLOCK (SUMMARY & CONFIG)
	8.1 TOOLS ELEMENTS
9. CSS TRANSITIONS
*/

@import url('../breakpoint.css');
@import url('../fonts.css');

/**
 * -------------------------
 * @section 1. GENERIC STYLE
 * -------------------------
 */
:root {
    --font: #000;
    --font-alt: #fff;
    --main-bg: #fff;
    --backg: #ddd;
    --backg-alt: #e2e2e2;
    --theme: #ca3432;

}

body {
    background-color: var(--main-bg);
    color: var(--font);
    font-family: 'os-light';
}

a,
a:hover,
a:focus,
button,
button:hover,
button:focus,
input,
input:hover,
input:focus {
    transition: all 0.5s ease;
}

a,
.icon {
    color: var(--font);
}

a:hover,
a:focus {
    text-decoration: none;
}

.btn
a:focus,
select:focus,
button:focus,
input:focus {
    box-shadow: 0 0 6px 0 #1e90ff;
    outline: 1px solid rgba(30, 144, 255, 0.5);
    outline-offset: 0;
}

button {
    background: none;
    border: none;
}

.slide button {
    border: 1px solid var(--backg-alt);
    border-radius: 3px;
    font-size: 90%;
    margin-bottom: 2px;
}

.slide button:hover {
    border: 1px solid var(--theme);
    background: var(--backg-alt);
}

figcaption {
    font-size: 60%;
    font-style: italic;
}

strong {
    font-family: 'os-regular';
}

blockquote {
    font-style: italic;
    text-align: left;
    padding: 0 0 0 7rem;
    position: relative;
}

blockquote::before {
    content: "ʼʼ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12rem;
    color: var(--backg);
    line-height: 0.7em;
    letter-spacing: -0.2em;
}

code,
kbd {
    position: relative;
    top: -2px;
    padding: 1px 3px;
    border: 1px solid var(--backg);
    background: var(--backg-alt);
    font-size: 70%;
    line-height: 1em;
    white-space: nowrap;
    border-radius: 2px;
}

code.--big {
    font-size: 100%;
}

h3 code,
h3 kbd {
    background: inherit;
}

pre code {
    border: 0;
    white-space: pre-wrap;
}

.hljs {
    padding: 10px;
}

/** @subsection 1.1 TABLE **/

table {
    width: auto;
    min-width: 70%;
    margin: auto;
}

table,
th,
td {
    border: 1px solid grey;
}

caption {
    padding: 5px;
    font-size: 60%;
    font-weight: bold;
    text-align: left;
    background: var(--backg-alt);
}

thead {
    border-bottom: 1px solid var(--backg);
}

th {
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

td {
    padding: 10px;
    text-align: center;
}

th,
td {
    font-size: 60%;
}

/**
 * -------------------------
 * @section 2. TYPO
 * -------------------------
 */

/** @subsection 2.1 HEADINGS **/

h2 {
    color: var(--font);
    margin-bottom: 1.5em;
    /*border-left: 5px solid var(--theme);*/
    font-variant: small-caps;
    line-height: 1.1em; /*background: var(--backg-alt);*/
    font-family: 'os-bold';
    position: relative;
}

h2::after {
    content: "";
    position: absolute;
    bottom: -0.5em;
    left: 0;
    width: 2em;
    height: 0.2em;
    background: var(--theme);
}

.couv h2, .end h2 {
    float: none;
    border-left: 0;
    text-align: center;
    background: transparent;
}

h3 {
    margin: 1.3em 0 0.5em;
    color: var(--font);
    font-variant: small-caps;
    font-weight: normal;
    font-family: 'os-regular';
}

h4,
h5,
h6 {
    margin: 1em 0 0.3em 0;
}

dl {
    margin: 2em 0;
    padding: 0;
    font-family: georgia, times, serif;
}

dt {
    position: relative;
    left: 0;
    top: 1.1em;
    width: 3.5em;
    font-weight: bold;
}

dd {
    border-left: 1px solid #000;
    margin: 0 0 0 4.5em;
    padding: 0 0 .5em .5em;
}

q {
    font-style: italic;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line */
    border: 0;
}

/** @subsection 2.2 TEXT **/

.slide p,
.slide ul,
.slide ol,
.slide blockquote {
    margin: 0.2em 0 0.5em 0;
    line-height: 130%;
}

.slide ul ul,
.slide ul ol {
    font-size: 100%;
    line-height: 100%;
}

.slide li {
    margin: 0.5em 0;
}

.slide .small {
    font-family: 'os-light';
    font-size: 70%;
    font-weight: normal;
}

.slide .small * {
    font-size: 100%;
    font-weight: normal;
}

/**
 * -------------------------
 * @section 3. HEADER
 * -------------------------
 */

.main-logo {
    max-width: 200px;
}

.main-header h1 {
    font-size: 3vh;
    color: var(--font);
    font-weight: normal;
}

.main-header {
    background: #fff;
    box-shadow: 0 2px 3px #bbb;
}

.modeplan .main-header {
    position: static;
}

/**
 * -------------------------
 * @section 4. VOLET
 * -------------------------
 */

#volet {
    background: var(--main-bg);
}

/**
 * -------------------------
 * @section 5. TOOLBAR
 * -------------------------
 */

.tool-bar {
    background: var(--main-bg);
}

.modeplan .tool-bar {
    box-shadow: 0 -2px 3px #bbb;
    background: var(--main-bg);
}

/** @subsection 5.1 NAVIGATION ELEMENTS **/

.select-goto {
    color: var(--font);
    border: none;
}

.slide-simple,
.slide-double {
    padding: 3.5rem 2rem;
}

.slide-double--title {
    background: #fff;
}

.slide-double--title h2, .slide-double--title h3 {
    margin: 0;
}

.slide-double--title p {
    background: #fff;
    margin: 0;
    padding: 0.5em 0;
}

.slide-counter-current {
    background-color: var(--main-bg);
    color: var(--font);
    border: 1px solid var(--backg);
}

.slide-counter-total {
    background-color: var(--backg);
    /*color: var(--font-alt);*/
    border: 1px solid transparent;
}

.btn:hover .icon {
    opacity: 0.5;
}

.btn[disabled="disabled"]:hover {
    opacity: 1;
    cursor: default;
}

/** @subsection 5.2 RELATED LINKS **/

.related a {
    padding: 2px 3px;
    font-size: 70%;
    border-radius: 3px;
    text-decoration: none;
}

.related a img {
    position: relative;
    margin-top: -4px;
}

/**
 * -------------------------
 * @section 6. PAGINATION SLIDE LINEAR LAYOUT
 * -------------------------
 */

.index {
    padding-top: 15px;
    border-radius: 0;
}

.index span {
    padding: 0;
    color: var(--font-alt);
    background-color: var(--backg);
}

#navbar li:nth-child(2) {
    display: none;
}

/**
 * -------------------------
 * @section 7. SLIDES
 * -------------------------
 */

.modeplan .slide {
    border-bottom: 2px solid var(--backg);
    padding-top: 1em;
}

.couv,
.end {
    text-align: center;
    color: var(--font);
}

.credit {
    padding: 0;
}

.credit li {
    display: inline-block;
}

.credit a {
    padding: 2px 3px;
    border: 1px solid var(--backg-alt);
    border-radius: 3px;
    text-decoration: none;
}

.credit a:hover,
.credit a:focus {
    background: var(--theme);
    border: 1px solid var(--backg);
}

/** @subsection 7.1 COLUMN **/

/** @subsection 7.2 FREAKY DISC **/

.list-disc {
    padding: 0;
}

.list-disc li {
    list-style: none;
}

button.disc {
    display: block;
    width: 100%;
    border: none;
    padding-top: 85px;
}

button.disc1 {
    background: transparent url("../img/disc_1_gray.png") center top no-repeat;
}

button.disc1:hover,
button.disc1:focus {
    background: transparent url("../img/disc_1.png") center top no-repeat;
}

/**
 * -------------------------
 * @section 8. TOOL BLOCK (SUMMARY & CONFIG)
 * -------------------------
 */

.tool-block {
    background-color: var(--backg-alt);
    color: var(--font);
    box-shadow: 0 0 10px #000;
    width: 400px;
}

.tool-block-title {
    padding-top: 5px;
    font-size: 1.2em;
    text-align: center;
    border-bottom: 1px dashed var(--backg);
    text-transform: uppercase;
}

.tool-block li,
.tool-block label,
.tool-block select {
    font-size: 0.75em;
}

/** @subsection 8.1 TOOLS ELEMENTS **/

.tool-block-settings fieldset {
    border: none;
}

.tool-block-settings legend {
    font-size: 1.5em;
    -moz-font-feature-settings: "c2sc";
    font-feature-settings: "c2sc";
    font-variant: small-caps;
}

.help {
    border: 1px solid var(--theme);
    border-radius: 5px;
    background: var(--backg);
    color: var(--font-alt);
}

.tool-block button:hover,
.tool-block button:focus {
    color: var(--font);
}

.btn-setting { /* Save & Default button*/
    background-color: var(--backg);
    border: 1px solid var(--backg);
    color: var(--font-alt);
}

.btn-setting:hover,
.btn-setting:focus {
    background: var(--backg-alt);
    color: var(--font);
}

/**
 * -------------------------
 * @section 9. CSS TRANSITIONS
 * -------------------------
 */

#volet.Flash {
    background: var(--backg);
}

#volet.Rotate {
}

/**
 * -------------------------
 * @section 9. IMG
 * -------------------------
 */

.slide img.margin-normal {
    margin: 1rem 0;
}

.slide img.margin-big {
    margin: 2rem 0;
}

.slide .left {
    float: left;
    margin: 0 2rem 2rem 0;
}

/**
 * -------------------------
 * @section 10. ENCADRE
 * -------------------------
 */

.slide .encadre {
    background: var(--backg);
    font-family: 'os-bold';
    padding: 1rem;
}

.slide .encadre.--light {
    font-family: 'os-light';
}

.showalt {
    position: relative;
    display: inline-block;
}

.showalt::after {
    content: attr(data-alt);
    border: 1px solid red;
    position: absolute;
    top: 50%;
    right: 100%;
}

@media (--medium) {

    h2 { /*float: left;*/
    }

    h2 + * {
        clear: both;
    }

    h3 + * {
        clear: both;
    }

    .col-left {
        float: left;
        width: 50%;
        padding: 0 5% 0 0;
    }

    .col-right {
        float: right;
        width: 50%;
        padding: 0 0 0 5%;
    }

    .list-disc li {
        float: left;
        width: 25%;
    }

    .slide img.margin-normal {
        margin: 2rem 0;
    }

    .slide img.margin-big {
        margin: 3rem 0;
    }

}

@media (--bw) {

    .list-disc li {
        float: left;
        width: 50%;
    }

}

@media (--small) {

    .main-header h1 {
        font-size: 80%;
    }

    .main-header {
        padding: 5px;
    }

    .tool-bar {
        box-shadow: 0 -2px 3px #bbb;
    }

    .related {
        background: #fff;
        border-left: 0;
        border-bottom: 0;
    }

}