/*! 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: system-ui, -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;
--font-mono: Menlo, Courier, Courier New, Andale Mono, monospace;
--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: #356AA0;
--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;
--measure: 70ch;
--space-xs: 0.4rem;
--space-s: 0.8rem;
--space: 1.6rem;
--space-l: 2.4rem;
--space-xl: 3.2rem;
--space-xxl: 4.8rem;
}
@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;
--space-xxl: 6.4rem;
}
}
/* 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 {
font-family: var(--font-sans);
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: #0e2439;
--color-text: #FAFAFA;
--color-contrast: #000;
--color-link: #63809c;
--color-link-hover: #59738c;
--color-line: #D1D5DB;
--color-primary: #AA0F62;
--color-secondary: #356AA0;
--color-gray-900: #F9FAFB;
--color-gray-800: #F3F4F6;
--color-gray-700: #E5E7EB;
--color-gray-600: #D1D5DB;
--color-gray-500: #9CA3AF;
--color-gray-400: #6B7280;
--color-gray-300: #4B5563;
--color-gray-200: #3F3F46;
--color-gray-100: #27272A;
--color-gray-50: #18181B;
} */
main {
flex: 1;
}
article, header, footer, .container {
margin: 0 auto;
max-width: var(--measure);
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 **********/
.breadcrumb-category {
text-align: center;
margin: 0;
margin-bottom: calc(var(--space) * -1);
}
.breadcrumb-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);
}
.breadcrumb-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-xxl);
}
p + h3,
div + h3,
ul + h3,
ol + h3,
figure + h3,
table + h3,
.card + h3 {
margin-top: var(--space-xxl);
}
/********** 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-xl) 0;
border: 0;
background-color: var(--color-gray-200);
height: 1px;
}
hr.none {
background-color: transparent;
}
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);
}
.styled-list ol {
list-style-type: none;
counter-reset: list-counter;
margin: 0;
padding: 0;
}
.styled-list ol > li {
position: relative;
padding-left: var(--space);
counter-increment: list-counter;
}
.styled-list ol > li::before {
content: counter(list-counter);
display: block;
border-radius: 50%;
background: var(--color-secondary);
height: 2.4rem;
width: 2.4rem;
position: absolute;
left: calc(var(--space) * -1);
top: var(--space-s);
color: white;
font-size: var(--font-size-s);
font-weight: 600;
text-align: center;
line-height: 1.6;
}
.checkmark-list ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.checkmark-list ul > li {
position: relative;
padding-left: 1.0rem;
}
.checkmark-list ul > li::before {
content: " ";
display: block;
border-radius: 50%;
background: url("data:image/svg+xml;utf8,") no-repeat;
height: 2.4rem;
width: 2.4rem;
position: absolute;
left: calc(var(--space) * -1);
top: 0.5ex;
color: white;
font-size: var(--font-size-s);
font-weight: 600;
text-align: center;
line-height: 1.6;
}
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-xxl) calc(var(--space) * -1);
padding: 0;
text-align: center;
}
figure img, article img, article video {
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: #fef3c7;
color: #713F12;
}
.info h3, .info h2, .info a, .info ul li::marker, .info ol li::marker {
color: #713F12;
}
.reference {
background-color: var(--color-gray-100);
}
.tip, .tip a {
background-color: #F0F9FF;
color: #356AA0;
}
.tip h3, .tip h2, .tip ul li::marker, .tip ol li::marker {
color: #356AA0;
}
.rule, .rule a {
background-color: #FEF2F2;
color: #7F1D1D;
}
.rule h3, .rule h2, .rule ul li::marker, .rule ol li::marker {
color: #B91C1C;
}
.toc {
background-color: var(--color-gray-100);
margin: var(--space-l) calc(var(--space) * -1);
padding: var(--space);
font-size: var(--font-size-s);
}
.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: 400;
color: var(--color-gray-600);
}
.toc h3 {
margin: 0 0 var(--space);
font-size: var(--font-size-m);
}
.toc a {
text-decoration-color: var(--color-line);
}
/*
.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;
background-color: var(--color-gray-100);
}
.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);
}
.small {
font-size: var(--font-size-s);
}
.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;
font-size: var(--font-size-m);
line-height: 1;
}
.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;
}
.highlight {
padding-left: .5rem;
padding-right: .5rem;
border-top-left-radius: .5rem;
border-bottom-left-radius: .125rem;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
background-image: linear-gradient(119deg,#fff,#FFF5A6 10.5%,#FFF5A6 85.29%,#fff);
}
.letter {
font-family: var(--font-mono);
font-size: var(--font-size-s);
border: 3px solid var(--color-gray-500);
position: relative;
font-weight: 600;
margin: calc(var(--space-xl) * 2) var(--space);
border-radius: 8px;
}
.letter::before {
content: "";
background: var(--color-gray-100);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
transform: rotate(-2deg);
z-index: -1;
}
.avatar {
border-radius: 50%;
}
.updated {
text-align: center;
text-decoration: none;
font-weight: 440;
text-transform: uppercase;
color: var(--color-gray-400);
font-size: var(--font-size-s);
}
.active-category {
background-color: #fef3c7;
color: #713F12;
}