index.css

/*
**  TRUE -- Manifesto of TRUE Software Engineering
**  Copyright (c) 2019-2021 Dr. Ralf S. Engelschall <http://engelschall.com/>
**  Licensed under CC-BY-NC-ND 4.0 <https://creativecommons.org/licenses/by-nc-nd/4.0/>
*/

@import "lib/typopro/TypoPRO-Overlock/TypoPRO-Overlock.css";
@import "lib/fontawesome/fontawesome.css";

html {
    margin: 0;
    padding: 0;
}
body {
    background-color: #111111;
    background-image: url("true-bg.jpg");
    font-family: "TypoPRO Overlock";
    font-size: 14pt;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.content {
    position: relative;
    margin-top: 20px;
}

.content .header {
    font-size: 12pt;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

.content .header .pages {
    color: #fff0e0;
}
.content .header .pages a.page {
    padding: 1px 8px 1px 8px;
    border: 1px solid #7f7f60;
    border-radius: 4px;
    cursor: pointer;
    color: #fff0e0;
}
.content .header .pages a.page,
.content .header .pages a.page:visited {
    text-decoration: none;
}
.content .header .pages a.page.active {
    background-color: #fff0e0;
    color: #111111;
}

.content .header .langs {
    margin-left: 20px;
    color: #fff0e0;
}
.content .header .langs a.icon-lang {
    padding: 1px 8px 1px 8px;
    border: 1px solid #7f7f60;
    border-radius: 4px;
    cursor: pointer;
    color: #fff0e0;
}
.content .header .langs a.icon-lang,
.content .header .langs a.icon-lang:visited {
    text-decoration: none;
}
.content .header .langs a.icon-lang.active {
    background-color: #fff0e0;
    color: #111111;
}

.content .header .social {
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.content .header .social div {
    margin-left: 5px;
}

.content .title {
    font-size: 39pt;
    font-weight: bold;
    line-height: 100%;
    margin: 0px;
    margin-bottom: 20px;
    width: 900px;
    color: #fff0e0;
    padding-top: 20px;
    padding-bottom: 20px;
}
.content .title b {
    font-weight: 900;
}
.content .title #sea-logo {
    height: 110px;
    float: left;
    margin-right: 40px;
}

.content .footer {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 11pt;
    color: #fff0e0;
    opacity: 0.5;
    width: 100%;
    text-align: center;
}
.content .footer a,
.content .footer a:visited {
    color: #fff0e0;
    text-decoration: underline;
}

.content .text {
    font-size: 16pt;
    width: 850px;
    color: #fff0e0;
}
.content .text a,
.content .text a:visited {
    text-decoration: underline;
    color: #fff0e0;
}

.content .properties {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 900px;
}

.content .properties .property {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
    position: relative;
}

.content .properties .property .icon {
    position: absolute;
    left: 60px;
    top: 20px;
    font-size: 900%;
    opacity: 0.1;
}

.content .properties .property .identifier {
    width: 10px;
    min-width: 100px;
    padding-left: 20px;
    padding-right: 0px;
    text-align: center;
    border-radius: 8px 0 0 8px;
    background-color: #fff0e0;
    color: #111111;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content .properties .property .identifier .letter {
    font-size: 950%;
    font-weight: 900;
}

.content .properties .property .adjectives {
    width: 140px;
    min-width: 140px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff0e0;
    color: #111111;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content .properties .property .adjectives .adjective:first-child {
    margin-bottom: 10px;
    font-weight: 900;
}
.content .properties .property .adjectives .adjective {
    font-size: 140%;
    font-weight: bold;
}
.content .properties .property .adjectives .adjective .minor {
    display: block;
    font-size: 75%;
    font-weight: normal;
}

.content .properties .property .description {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 0 8px 8px 0;
    background-color: #00000080;
    color: #fff0e0;
    width: 660px;
}

.content .properties .property .description .statement {
    padding-top: 8px;
}
.content .properties .property .description .statement,
.content .properties .property .description .rationale,
.content .properties .property .description .implications {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-bottom: 8px;
}
.content .properties .property .description .implications {
    border-top: 1px solid #3f3020;
    width: 100%;
    padding-top: 8px;
}
.content .properties .property .description * .label {
    width: 100px;
    font-size: 75%;
    opacity: 0.7;
}
.content .properties .property .description * .sentences {
    width: 100%;
    line-height: 110%;
}
.content .properties .property .description .statement .sentences {
    font-weight: bold;
}
.content .properties .property .description .implications .sentences {
}
.content .properties .property .description .implications .sentences .sentence {
    margin-bottom: 6px;
}
.content .properties .property .description .implications .sentences .sentence:last-child {
    margin-bottom: 0px;
}
.content .properties .property .description .statement .sentences {
    font-size: 140%;
}
.content .properties .property .description .rationale {
    opacity: 0.85;
}
.content .properties .property .description .implications {
    opacity: 0.70;
}

.content > .page {
    display: none;
}
.content > .page.active {
    display: block;
}

.content .domains {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 900px;
}

.content .domains .domain {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
    position: relative;
}
.content .domains .domain > .icon {
    position: absolute;
    left: 40px;
    top: 10px;
    font-size: 500%;
    opacity: 0.1;
}
.content .domains .domain > .name {
    border-radius: 8px 0 0 8px;
    background-color: #fff0e0;
    color: #111111;
    font-size: 18pt;
    font-weight: 900;
    width: 190px;
    min-width: 190px;
    padding: 10px 10px 10px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content .domains .domain .disciplines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff0e0;
    border-radius: 0 8px 8px 0;
    background-color: #000000;
    width: 100%;
}
.content .domains .domain .disciplines .discipline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.content .domains .domain .disciplines .discipline .name {
    background-color: #fff0e0;
    color: #111111;
    font-size: 16pt;
    font-weight: bold;
    width: 150px;
    min-width: 150px;
    padding: 5px 20px 5px 20px;
    opacity: 0.9;
    text-align: right;
    border-top: 1px solid #dfd0c0;
    position: relative;
}
.content .domains .domain .disciplines .discipline .name .icon {
    position: absolute;
    left: 20px;
    top: 5px;
    font-size: 200%;
    opacity: 0.1;
}
.content .domains .domain .disciplines .discipline:first-child .name {
    border-top: 0px;
}
.content .domains .domain .disciplines .discipline .statement {
    padding: 5px 20px 5px 20px;
    font-size: 16pt;
    border-top: 1px solid #3f3020;
    width: 100%;
}
.content .domains .domain .disciplines .discipline:first-child .statement {
    border-top: 0px;
}

@media print {
    body {
        background-color: transparent;
        background-image: none;
        font-size: 13pt;
    }
    #sea-logo,
    .content .header,
    .content .footer {
        display: none;
    }
    .content .title {
        width: 100%;
        color: #000000;
    }
    .content .properties {
        width: 800px;
    }
    .content .properties .property .identifier,
    .content .properties .property .adjectives,
    .content .properties .property .description {
        background-color: transparent;
        color: #000000;
    }
    .content .properties .property .description * .label {
        color: #000000;
    }
    .content .properties .property .description * .sentences {
        color: #000000;
    }
    .content .properties .property .description {
        width: 500px;
    }
}