/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
/* MINSTYLE
* - uses CSS variables
* - dark mode enabled
*/
:root {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-serif: Iowan Old Style, Apple Garamond, Georgia, Droid Serif, Times New Roman, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--color-bg: #fff;
--color-text: #3F3F46;
--color-contrast: #fff;
--color-link: #27272A;
--color-link-hover: #6B7280;
--color-line: #D1D5DB;
--color-primary: #AA0F62; /* AA0F62 */
--color-secondary: #1fa5bc;
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #3F3F46;
--color-gray-800: #27272A;
--color-gray-900: #18181B;
--font-size-xxs: 1.0rem;
--font-size-xs: 1.2rem;
--font-size-s: 1.4rem;
--font-size-m: 1.6rem;
--font-size-l: 2.0rem;
--font-size-xl: 2.4rem;
--font-size-xxl: 3.9rem;
--space-xs: 0.4rem;
--space-s: 0.6rem;
--space: 1.6rem;
--space-l: 2.4rem;
--space-xl: 3.2rem;
}
@media (min-width: 70em) {
:root {
--font-size-xxs: 1.2rem;
--font-size-xs: 1.3rem;
--font-size-s: 1.5rem;
--font-size-m: 1.9rem;
--font-size-l: 2.3rem;
--font-size-xl: 2.7rem;
--font-size-xxl: 4.2rem;
--space-xs: 0.4rem;
--space-s: 0.8rem;
--space: 1.6rem;
--space-l: 3.2rem;
--space-xl: 5.6rem;
}
}
/* currently commented out. add .dark to body to simulate */
/* @media (prefers-color-scheme: dark) {
:root {
--color-bg: #000;
--color-text: #FAFAFA;
--color-contrast: #000;
}
} */
/* BASIC PAGE STRUCTURE
* -
* - sticky footer always at the bottom of the page
*/
html {
font-family: var(--font-sans);
font-size: 62.5%;
line-height: 1.5;
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
/* sticky footer at the bottom */
display: flex;
flex-direction: column;
min-height: 100vh;
/* default font */
font-size: var(--font-size-m);
font-weight: 400;
}
body.dark {
--color-bg: #000;
--color-text: #FAFAFA;
--color-contrast: #000;
}
main {
flex: 1;
}
article, header, footer, .container {
margin: 0 auto;
max-width: 74rem;
padding: var(--space);
}
/********** TYPOGRAPHY **********/
h1 {
color: var(--color-gray-900);
font-size: var(--font-size-xxl);
font-weight: 800;
text-align: center;
letter-spacing: -1.0px;
line-height: 1.2;
}
h2 {
color: var(--color-gray-900);
font-size: var(--font-size-xl);
letter-spacing: -0.6px;
line-height: 1.3;
}
h3 {
color: var(--color-gray-900);
font-size: var(--font-size-l);
}
a {
color: var(--color-link);
font-weight: 600;
}
a:hover {
color: var(--color-link-hover);
}
/********** PAGE ELEMENTS **********/
.active-category {
text-align: center;
margin: 0;
margin-bottom: calc(var(--space) * -1);
}
.active-category a {
margin: 0 auto;
display: inline-block;
text-decoration: none;
font-weight: 440;
text-transform: uppercase;
color: var(--color-gray-400);
font-size: var(--font-size-s);
}
.active-category a:hover {
color: var(--color-gray-500);
text-decoration: underline;
}
button, .button {
align-self: center;
background-color: var(--color-gray-100);
border: 0;
border-width: 1px;
color: var(--color-text);
border-radius: 24px;
padding: 0.4rem 1.2rem;
font-size: var(--font-size-s);
height: auto;
cursor: pointer;
}
a.button {
text-decoration: none;
}
button:hover {
background-color: var(--color-gray-300);
}
/********** SPACING **********/
p {
margin: var(--space) 0;
}
p + h2,
div + h2,
ul + h2,
ol + h2,
figure + h2,
table + h2,
.card + h2 {
margin-top: var(--space-xl);
}
p + h3,
div + h3,
ul + h3,
ol + h3,
figure + h3,
table + h3,
.card + h3 {
margin-top: var(--space-xl);
}
/********** ARTICLE ELEMENTS **********/
/* external link styles, use :before or :after if you want! */
article a[href*="//"]:not([href*="mynfp.de"]):after {
content: url("data:image/svg+xml;utf8,");
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-left: 2px;
margin-bottom: 5px;
}
a.caret {
color: var(--color-primary);
text-decoration: none;
}
a.caret:hover {
text-decoration: underline;
}
a.caret:after {
content: url("data:image/svg+xml;utf8,");
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-left: 2px;
margin-bottom: 5px;
color: var(--color-primary);
}
@media (min-width: 70em) {
article a[href*="//"]:after {
margin-bottom: 12px;
}
a.caret:after {
margin-bottom: 12px;
}
}
article a.no-icon:after {
content: none !important;
margin: 0;
}
/* external link dark mode */
.dark a[href*="//"]:after {
content: url("data:image/svg+xml;utf8,");
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-left: 2px;
margin-bottom: 5px;
}
hr {
margin: var(--space-l) 0;
border: 0;
background-color: var(--color-gray-200);
height: 1px;
}
ul, ol {
margin: 0;
padding: 0 var(--space-s);
}
ul > li, ol > li {
margin: var(--space);
padding: 0 var(--space-s);
}
ul li::marker {
color: var(--color-gray-300);
}
ol li::marker {
color: var(--color-gray-700);
}
blockquote {
font-family: var(--font-serif);
font-size: var(--font-size-xl);
font-style: italic;
margin: var(--space-l);
}
cite {
font-family: var(--font-sans);
font-size: var(--font-size-s);
font-style: normal;
color: var(--color-gray-500);
}
figure {
margin: var(--space-l) calc(var(--space) * -1);
padding: 0;
text-align: center;
}
figure img, article img {
max-width: 100%;
}
figcaption {
font-size: var(--font-size-s);
color: var(--color-gray-500);
padding: 0 2em;
}
.info,
.rule,
.tip,
.reference,
.box,
.article pre {
margin: var(--space-l) calc(var(--space) * -1);
padding: var(--space);
}
@media (min-width: 760px) {
.info,
.rule,
.tip,
.reference,
.toc,
.box,
.article pre,
figure img {
border-radius: 8px;
}
}
.info h4,
.info h3,
.info h2,
.info p,
.rule h4,
.rule h3,
.rule h2,
.rule p,
.tip h4,
.tip h3,
.tip h2,
.tip p,
.box h4,
.box h3,
.box h2,
.box p,
.reference h4,
.reference h3,
.reference h2,
.reference p {
margin: 0 0 var(--space);
}
.info p:last-child,
.rule p:last-child,
.tip p:last-child,
.box p:last-child,
.reference p:last-child {
margin-bottom: 0;
}
.info, .articleSearchResults em {
background: #FEFCE8;
color: #713F12;
}
.info h3, .info h2, .info a {
color: #713F12;
}
.reference {
background-color: var(--color-gray-100);
}
.summary, .summary a {
background-color: #F0FDFA;
color: #0D9488;
}
.summary h3, .summary h2 {
color: #0D9488;
}
.tip, .tip a {
background-color: #F0F9FF;
color: #0C4A6E;
}
.tip h3, .tip h2 {
color: #0369A1;
}
.rule, .rule a {
background-color: #FEF2F2;
color: #7F1D1D;
}
.rule h3, .rule h2 {
color: #B91C1C;
}
.toc {
background-color: var(--color-gray-100);
margin: var(--space-l) calc(var(--space) * -1);
padding: var(--space);
}
.toc ul {
list-style-type: none;
padding: 0;
}
.toc li {
margin: var(--space-s);
}
.toc > ul > li {
margin-left: 0;
padding: 0;
}
.toc > ul > li > ul a {
font-weight: 440;
color: var(--color-gray-600);
}
.toc h3 {
margin: 0 0 var(--space);
}
/*
.article .source,
.article blockquote footer,
.article .note {
color: #606f7b;
font-style: italic;
padding-left: 1rem;
padding-right: 1rem;
font-size: .875em;
}
.article .source a,
.article blockquote footer a,
.article .note a {
color: #3b485a;
text-decoration: underline;
}
.article .source,
.article blockquote footer {
margin-bottom: 0;
}
.article .source::before,
.article blockquote footer::before,
.article blockquote span::before {
content: "\2014\00A0";
}
.article blockquote footer,
.article blockquote span {
margin-top: 1rem;
display: block;
font-style: normal;
font-size: 0.75em;
color: #606f7b;
}
*/
/********** HEADER AND NAV **********/
header {
margin: var(--space-xl) auto;
display: flex;
justify-content: space-between;
}
header nav.main {
display: flex;
}
header nav.main a {
margin-left: var(--space-s);
background-color: transparent;
/* color: #CB0072; */
}
@media (max-width: 520px) {
header {
margin-top: var(--space);
flex-direction: column-reverse;
}
header .logo-link {
text-align: center;
}
header nav.main {
justify-content: space-between;
margin-bottom: var(--space-xl);
}
header nav.main a {
margin: 0;
padding: 0 var(--space-xs);
}
}
.categories {
margin: var(--space-l) 0;
padding: 0 var(--space);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.categories a {
display: inline-block;
margin: 0 var(--space-xs) var(--space-s);
}
.button-search svg {
margin-top: -1px;
display: inline-block;
vertical-align: middle;
}
footer {
border-top: 5px solid var(--color-gray-100);
padding-top: var(--space);
width: 100%;
font-size: var(--font-size-s);
color: var(--color-gray-500);
font-weight: 440;
margin-bottom: var(--space-l);
}
.back-to-top {
text-align: center;
margin-bottom: var(--space-xl);
}
footer .grid {
display: flex;
flex-direction: column;
justify-content: space-between;
}
footer p {
margin: var(--space-s) 0;
letter-spacing: -0.3px;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer li {
margin: 0 0 var(--space-s);
padding: 0;
}
footer .mynfp-info {
text-align: center;
margin-bottom: var(--space);
}
footer .links {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-grow: 2;
}
footer .download a:first-child {
margin-right: var(--space-xs);
}
@media (min-width: 50em) {
footer .grid {
flex-direction: row;
}
footer .mynfp-info {
text-align: left;
margin-right: var(--space-l);
}
}
.related-articles {
margin-top: var(--space-l);
border-top: 1px solid var(--color-gray-200);
}
a.card {
text-decoration: none;
font-weight: normal;
font-size: var(--font-size-s);
}
.card {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
margin-bottom: var(--space);
background-color: var(--color-bg);
transition: transform 0.15s ease-out;
}
.card:hover {
transform: scale(1.02);
}
.card-content {
padding: var(--space-s) var(--space) var(--space);
}
.card h4 {
margin: var(--space-s) 0;
font-size: var(--font-size-l);
line-height: 1.2;
}
.card p {
margin: 0;
}
.card img, .card .placeholder {
width: 100%;
height: 20rem;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
object-fit: cover;
}
.card .placeholder {
background-color: #AA0F62;
}
.card .category {
font-size: var(--font-size-xs);
color: var(--color-gray-400);
text-transform: uppercase;
}
.card-inline {
width: 100%;
}
a.card-inline {
display: flex;
}
@media (min-width: 480px) {
.card {
flex-direction: row;
}
.card img, .card .placeholder {
max-width: 30%;
height: auto;
max-height: 20rem;
border-bottom-left-radius: 8px;
border-top-right-radius: 0;
}
.card-content {
padding-left: calc(var(--space) + var(--space-s));
}
}
.note, .note a, a.note {
font-size: var(--font-size-s);
font-weight: normal;
color: var(--color-gray-500);
}
.subtitle {
color: var(--color-primary);
font-size: var(--font-size-l);
text-align: center;
}
h1 + .subtitle {
margin-top: calc(var(--space) * -1);
margin-bottom: var(--space-l);
}
input {
appearance: none;
outline: none;
border-radius: 4px;
width: 100%;
padding: 0.8rem 1.2rem;
font-size: var(--font-size-s);
color: var(--color-text);
border: 1px solid var(--color-gray-300);
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
/* shadow-inner appearance-none rounded w-full py-2 px-3 text-grey-darkest leading-tight focus:outline-none border focus:border-grey */
}
input:focus {
border: 1px solid var(--color-gray-400);
outline: none;
}
.anchor {
color: rgba(0, 0, 0, .1) !important;
text-decoration: none !important;
border: 0;
font-weight: normal;
}
.text-center {
text-align: center;
}
.list-reset ul, ul.list-reset {
margin: 0;
padding: 0;
list-style: none;
}
.list-reset li {
margin: 0;
padding: 0;
display: inline-block;
}
.media-references img {
filter: grayscale(1.0) brightness(1.2);
margin: 10px;
}
.media-references img:hover {
filter: none;
}
.h-uppercase {
text-transform: uppercase;
font-size: var(--font-size-s);
color: var(--color-gray-500);
letter-spacing: 0.8px;
text-align: center;
margin-top: calc(var(--space-xl) * 1.5) !important;
margin-bottom: var(--space-l);
}
.mt {
margin-top: var(--space-xl);
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.article table {
display: table;
max-width: 100%;
overflow-x: auto;
margin: var(--space) auto;
font-size: var(--font-size-s);
}
.article td,
.article th {
padding: var(--space-s);
}
.article thead tr {
background-color: var(--color-gray-100);
text-transform: uppercase;
}
.article th {
font-weight: 600;
font-size: var(--font-size-xs);
letter-spacing: .07142857142857142em;
}
.article tbody tr:nth-child(even) {
background-color: var(--color-gray-100);
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gallery figure {
width: calc(50% - var(--space));
display: block;
margin: 0 0 var(--space);
}
.gallery figure img {
border-radius: 8px;
}
@media (max-width: 479px) {
.gallery figure {
width: 100%;
}
}
.article pre {
font-size: var(--font-size-s);
background-color: var(--color-gray-100);
}
/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hidden {
display: none;
}
.modal {
position: fixed;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: var(--space);
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, .6);
}
.modal--loader {
text-align: center;
}
/* Modal Content/Box */
.modal-content {
background-color: #fff;
margin-top: var(--space-l);
margin-bottom: var(--space-l);
margin-left: auto;
margin-right: auto;
padding: var(--space);
border-radius: .25rem;
max-width: 60rem;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.whatsnew {
text-align: center;
font-size: var(--font-size-s);
text-transform: uppercase;
}
.whatsnew span {
background-color: #F0FDF4;
color: #15803D;
padding: var(--space-xs) var(--space-s);
border-radius: 8px;
}