/* @layer config { */ :root { --color-text : #F1CB0B; --color-text-invert : #f4f4f4; --color-bg : #1C1A1C; --color-dim : #ccc; --hx-font : "CeraPro-Bold", Helvetica, Arial, sans-serif; --hx-font-color : #F1CB0B; --font : 'Old Standard TT', serif; /* Use system UI font. */ --font-italic : "Atkinson Hyperlegible", serif; /* Remove this var completely if you don't care for pretty italics. */ --font-mono : "lucida console", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; --font-size : 100%; /* % ensures browser zoom is supported. */ --hx-font-weight-regular: 350; --font-weight-regular : 400; --font-weight-semibold : 700; --font-weight-bold : 900; --tracking : -0.006em; /* Reduce this to 0 if your font does not need adjustment. */ --leading : 1.45; /* Standard leading for good legibility. Adjust this based on the font you are using if you decides to not use system UI font. */ --gutter : clamp(1ch, 2.5vmax, 3ch); --stack : clamp(1.25ex, 2.5vmax, 1.75ex); --line-length : 78ch; --min-inline-size : 20ch; --page-padding-inline : calc((100vi - min(var(--line-length), 80vi)) / 2); --border-width : 1px; --border-style : dotted; --border-style-readonly : dashed; --border-radius : 0.125em; --ol-style-type : decimal; --bullet-hanging-offset : 1.1em; --quote-hanging-offset : -1ex; } /* } */ /* @layer color { */ :root { color: var(--color-text); background-color: var(--color-bg); accent-color: var(--color-text); color-scheme: light; } :where(a) { color: var(--color-primary, var(--color-text)); } :where(button) { color: var(--color-bg); background-color: var(--color-primary, var(--color-text)); } :where(input, textarea, select) { color: var(--color-text); background-color: var(--color-bg); } :where(code) { color: #000; background-color: #eee; } :where(table) { background-color: var(--color-dim); /* This is acting as border color because there is spacing between cells. */ } :where(th, td) { background-color: var(--color-bg); } :where( .custom-bg ) { background-color: #eee; } :where( .deepblue-bg ) { background-color: #2E247A; color: #f6f6f6; } @media (prefers-contrast: more) { :root { --color-text: black; --color-bg: white; } } /* @media (prefers-color-scheme: dark) { :root, :root[data-theme="dark"] { --font-weight-regular: 300; / * Knockout text appears bolder, reduce weight to make body text more legible. * / --tracking: 0.006em; --color-text: #f4f4f4; --color-bg: #202020; --color-dim: #444; color-scheme: dark; } :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-bg); } :where( .custom-bg ) { background-color: #282828; } :where(code) { color: #fff; background-color: #111; } } */ @media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root, :root[data-theme="dark"] { --color-text: white; --color-bg: black; } } /* } */ /* @layer typography { */ :root { font-size: clamp( var(--font-size), var(--font-size) * 0.9 + 0.25vi, var(--font-size) * 2 ); font-family: var(--font); font-weight: var(--font-weight-regular); line-height: var(--leading); letter-spacing: var(--tracking); --section-spacing: clamp(var(--stack) * 4, 10vmax, var(--stack) * 6); --pt-double-canon: 4.666rem; --pt-canon: 3.999rem; --pt-double-great-primer: 2.999rem; --pt-double-english: 2.333rem; --pt-double-pica: 2rem; --pt-paragon: 1.666rem; --pt-great-primer: 1.5rem; --pt-english: 1.166rem; --pt-pica: 1rem; --pt-small-pica: 0.916rem; --pt-long-primer: 0.833rem; --pt-bourgeois: 0.75rem; --pt-chu: 3.499rem; --pt-xiaochu: 2.999rem; --pt-yi: 2.166rem; --pt-xiaoyi: 1.999rem; --pt-er: 1.833rem; --pt-xiaoer: 1.5rem; --pt-san: 1.333rem; --pt-xiaosan: 1.25rem; --pt-si: 1.166rem; --pt-xiaosi: 1rem; --pt-wu: 0.875rem; --pt-xiaowu: 0.75rem; } :where(button, select, input, textarea, a) { font: inherit; /* Reset font. */ } :where(a) { text-decoration: underline; text-decoration-thickness: var(--border-width); text-underline-offset: calc(var(--border-width) * 2); } :where(a):hover { text-decoration-thickness: calc(var(--border-width) * 3); } :where(pre, code, kbd, dl, figcaption, abbr, table) { font-family: var(--font-mono); /* Differentiate preformatted, code, description, and table text from body text. */ } :where(pre, code, kbd, dl, small, figcaption, table) { font-size: 0.8em; /* Make monospace and small text smaller than body text. */ } :where(big) { font-size: 1.2em; /* is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. */ } :where(pre code) { display: block; /* Define block code. */ font-size: 1em; /* Prevent cascading. */ } :where(blockquote, em, i, cite) { font-family: var(--font-italic, var(--font)); /* Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly. */ font-weight: var(--font-weight-regular); /* Prevent italics to be bold. Bold italic is also ugly and unnecessary. */ } :where(blockquote) { font-size: clamp(1.5rem, 1.25rem + 1vi, 2.5rem); letter-spacing: 0; } :where(blockquote p) { max-inline-size: 35ch; } :where(blockquote q)::before { position: absolute; -webkit-margin-start: var(--quote-hanging-offset); margin-inline-start: var(--quote-hanging-offset); } :where(blockquote q q)::before { position: static; -webkit-margin-start: unset; margin-inline-start: unset; } :where(blockquote cite) { font-size: clamp(0.75rem, 0.625rem + 1vi, 1.25rem); opacity: 0.5; } :where(strong, b, kbd, th, button) { font-weight: var(--font-weight-semibold); /* Make non-heading emphasized text less bold than heading text. */ } :where(h1, h2, h3, h4, h5, h6, summary strong, legend) { font-family: var(--hx-font); font-weight: var(--hx-font-weight-regular); color: var(--hx-font-color); overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } h1:after, h2:after, h3:after { content: ""; display: block; background-color: var(--hx-font-color); width: 3rem; height: 2px; margin: 1rem 0 2rem; } h1.centered, h2.centered, h3.centered { text-align: center; } h1.centered:after, h2.centered:after, h3.centered:after { margin-left: auto; margin-right: auto; } :where(abbr) { text-decoration: underline; -webkit-text-decoration-style: dotted; text-decoration-style: dotted; /* Differentiate abbreviaions from links. */ text-underline-offset: calc(var(--border-width) * 2); } :where(button, label, select, summary) { cursor: pointer; } :where(summary:hover > *) { text-decoration: underline; text-underline-offset: calc(var(--border-width) * 2); } :where(figcaption) { text-align: center; } :where(th) { text-align: start; } :where(th, td) { vertical-align: baseline; } :where(ol) { list-style-type: var(--ol-style-type); } :where(fieldset > ol) { list-style: none; } /* Chinese Typesetting */ [lang^=zh-] { --font-italic: var(--font); --font-size: 90%; --font-weight-regular: 400; --tracking: 0; --leading: 1.6; --gutter: clamp(0.75rem, 2.5vmax, 1rem); --stack: clamp(0.75rem, 2.5vmax, 1rem); --line-length: 36rem; --min-inline-size: 10rem; --page-padding-inline: calc((100vi - min(var(--line-length), 90vi)) / 2); --ol-style-type: cjk-ideographic; --bullet-hanging-offset: 2em; --quote-hanging-offset: -2ex; } /* } */ /* @layer spacing { */ :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) { -webkit-margin-after: 0; margin-block-end: 0; } :where(h1, h2, h3, h4, h5, h6) { -webkit-margin-before: calc(var(--stack) * 1.75); margin-block-start: calc(var(--stack) * 1.75); letter-spacing: -0.025rem; } :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, [is-stack]) { margin-inline: 0; -webkit-margin-before: var(--stack); margin-block-start: var(--stack); } :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details, [is-stack]):first-child, :where(legend + *) { -webkit-margin-before: 0; margin-block-start: 0; } :where(h1, h2, h3, h4, h5, h6) + * { -webkit-margin-before: calc(var(--stack) / 5); margin-block-start: calc(var(--stack) / 5); } :where(ul, ol) { -webkit-padding-start: var(--bullet-hanging-offset); padding-inline-start: var(--bullet-hanging-offset); } :where(li > ul, li > ol) { -webkit-margin-before: calc(var(--stack) / 5); margin-block-start: calc(var(--stack) / 5); } :where(details ul, details ol) { -webkit-margin-start: 4ch; margin-inline-start: 4ch; /* Unify indent for all lists inside details. */ } :where(table ul, table ol) { -webkit-margin-start: 2ch; margin-inline-start: 2ch; /* Unify indent for all lists inside table. */ } :where(li > ul, li > ol, fieldset ul, fieldset ol) { -webkit-margin-start: 2.25ch; margin-inline-start: 2.25ch; /* Unify indent for all nested lists. */ } :where(li + li) { -webkit-margin-before: calc(var(--stack) / 5); margin-block-start: calc(var(--stack) / 5); } :where(fieldset > ol li + li) { -webkit-margin-before: calc(var(--stack) / 2); margin-block-start: calc(var(--stack) / 2); } :where(fieldset > ol) { margin-inline: 0; } :where(hr) { -webkit-margin-before: calc(var(--stack) * 3); margin-block-start: calc(var(--stack) * 3); -webkit-margin-after: calc(var(--stack) * 3); margin-block-end: calc(var(--stack) * 3); width: 100%; } :where(hr + *) { -webkit-margin-before: 0; margin-block-start: 0; } :where(figure > img, table) { margin-inline: auto; } :where(blockquote > *) { -webkit-margin-before: calc(var(--stack) / 4); margin-block-start: calc(var(--stack) / 4); } :where(blockquote:not(:last-child)) { -webkit-padding-after: calc(var(--stack) / 2); padding-block-end: calc(var(--stack) / 2); } :where(button, dd, th, td, code, kbd, select, input:not([type="radio"], [type="checkbox"]), textarea) { /* Unify inset spacing on bordered elements. */ padding-block: calc(var(--stack) / 6); padding-inline: calc(var(--gutter) / 3); } :where(button) { padding-inline: var(--gutter); /* Give button more spacing. */ } :where(kbd) { padding-block: calc(var(--stack) / 6); padding-inline: calc(var(--gutter) / 6); } :where(caption, figcaption) { padding-block: calc(var(--stack) / 2); } :where(figure, pre, [is-box]) { -webkit-padding-before: calc( var(--stack) / 2.5 ); padding-block-start: calc( var(--stack) / 2.5 ); /* Line up top of images/codeblocks with text in an adjacent column layout. */ } :where(pre) { -webkit-padding-after: calc(var(--stack) / 2.5); padding-block-end: calc(var(--stack) / 2.5); } :where(pre code) { padding-block: var(--stack); padding-inline: var(--gutter); } details[open] summary + * { -webkit-margin-before: calc(var(--stack) / 4); margin-block-start: calc(var(--stack) / 4); } /* } */ /* @layer elements { */ body { margin: 0; } *, *::before, *::after { font-feature-settings: "kern"; -webkit-font-kerning: normal; font-kerning: normal; -moz-osx-font-smoothing: grayscale !important; -webkit-font-smoothing: antialiased !important; box-sizing: border-box; } *:focus-visible { outline: calc(var(--border-width) * 2) solid var(--color-primary, var(--color-text)); outline-offset: calc(var(--border-width) * 2); } *:disabled { cursor: not-allowed; } *[readonly] { border-style: var(--border-style-readonly); } :where(button) { border: 0; } :where(kbd) { border: var(--border-width) solid; } :where(input, textarea, select, fieldset, dd) { border: var(--border-width) var(--border-style); /* Unify border styles. */ } :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, fieldset, button, img, code, dd, table) { border-radius: var(--border-radius); /* Unify interactive elements border radius. */ } :where(table > *:first-child tr:first-child > *:first-child, table > caption + * tr:first-child > *:first-child) { border-start-start-radius: var(--border-radius); } :where(table > *:first-child tr:first-child > *:last-child, table > caption + * tr:first-child > *:last-child) { border-start-end-radius: var(--border-radius); } :where(table > *:last-child tr:last-child > *:first-child) { border-end-start-radius: var(--border-radius); } :where(table > *:last-child tr:last-child > *:last-child) { border-end-end-radius: var(--border-radius); } :where(kbd) { border-radius: 0.3em; } :where(pre) { white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-spacing: normal; word-break: normal; word-wrap: break-word; } :where(pre code) { max-block-size: 60vh; overflow: auto; } :where(dl) { display: grid; grid-template-columns: auto minmax(75%, 1fr); gap: calc(var(--gutter) / 2); align-items: baseline; } :where(dt) { -webkit-border-after: var(--border-width) dotted; border-block-end: var(--border-width) dotted; } :where(dd) { block-size: 100%; -webkit-margin-start: 0; margin-inline-start: 0; } :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { display: block; inline-size: 100%; } :where(input[type="radio"], input[type="checkbox"]) { inline-size: 1.5ex; block-size: 1.5ex; vertical-align: baseline; } :where(input[type="file"]) { padding-inline: 0; border: 0; } ::-webkit-file-upload-button { -webkit-appearance: button; appearance: button; cursor: pointer; font: inherit; } :where(select) { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ""; } :where(hr) { block-size: 0; border: 0; -webkit-border-before: var(--border-width) var(--border-style) var(--color-dim); border-block-start: var(--border-width) var(--border-style) var(--color-dim); } :where(img) { display: block; max-inline-size: 100%; block-size: auto; } :where(figure) { overflow-x: auto; } :where(figure > img) { display: block; } :where(table) { caption-side: bottom; border-spacing: var(--border-width); } :where(tr > *:first-child) { white-space: nowrap; } :where(summary > *) { display: inline; vertical-align: middle; } /* } */ /* @layer complex-elements { */ /* Advanced responsive table */ /* MT: where is the usefulness of that one? */ /* :where(figure:has(table)) { position: relative; inset-inline-start: 50%; inset-inline-end: 50%; inline-size: 100%; inline-size: 100vi; -webkit-margin-start: -50vi; margin-inline-start: -50vi; -webkit-margin-end: -50vi; margin-inline-end: -50vi; padding-inline: var(--page-padding-inline); } +/ /* Validation text */ :where(input, textarea, select) ~ * { -webkit-margin-before: 0; margin-block-start: 0; font-size: 0.8em; } :where(input:required + mark) { display: none; color: var(--color-text); background-color: transparent; } :where(input:required:invalid + mark) { display: block; } /* Skip link */ body > a:first-child { position: fixed; top: var(--stack); left: var(--gutter); inline-size: auto; padding: 2px; text-align: center; background-color: var(--color-bg); } body > a:first-child:not(:focus) { opacity: 0; pointer-events: none; } /* } */ /* minimal responsive table formatting */ .cell-output-display:not(.no-overflow-x) { overflow-x: auto; } .table-striped > tbody > tr:nth-of-type(2n+1) > * { --bs-table-color-type: var(--bs-table-striped-color); --bs-table-bg-type: var(--bs-table-striped-bg); } .table > :not(caption) > * > * { padding: .5rem .5rem; color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); background-color: var(--bs-table-bg); border-bottom-width: 1px; box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); } .table > :not(caption) > :not(:last-child) > * { border-bottom-color: #ebeced; border-bottom-style: solid; border-bottom-width: 1px; } .table { --bs-table-color-type: initial; --bs-table-bg-type: initial; --bs-table-color-state: initial; --bs-table-bg-state: initial; --bs-table-color: #373a3c; --bs-table-bg: #fff; --bs-table-border-color: #dee2e6; --bs-table-accent-bg: transparent; --bs-table-striped-color: #373a3c; --bs-table-striped-bg: rgba(0, 0, 0, 0.05); --bs-table-active-color: #373a3c; --bs-table-active-bg: rgba(0, 0, 0, 0.1); --bs-table-hover-color: #373a3c; --bs-table-hover-bg: rgba(0, 0, 0, 0.075); } /* */ [class^=pt-] + [class^=pt-] { -webkit-margin-before: 2vmax; margin-block-start: 2vmax; } .pt-double-canon { font-size: var(--pt-double-canon); } .pt-double-canon::before { content: "56"; } .pt-canon { font-size: var(--pt-canon); } .pt-canon::before { content: "48"; } .pt-double-great-primer { font-size: var(--pt-double-great-primer); } .pt-double-great-primer::before { content: "36"; } .pt-double-english { font-size: var(--pt-double-english); } .pt-double-english::before { content: "28"; } .pt-double-pica { font-size: var(--pt-double-pica); } .pt-double-pica::before { content: "24"; } .pt-paragon { font-size: var(--pt-paragon); } .pt-paragon::before { content: "20"; } .pt-great-primer { font-size: var(--pt-great-primer); } .pt-great-primer::before { content: "18"; } .pt-english { font-size: var(--pt-english); } .pt-english::before { content: "14"; } .pt-pica { font-size: var(--pt-pica); } .pt-pica::before { content: "12"; } .pt-small-pica { font-size: var(--pt-small-pica); } .pt-small-pica::before { content: "11"; } .pt-long-primer { font-size: var(--pt-long-primer); } .pt-long-primer::before { content: "10"; } .pt-bourgeois { font-size: var(--pt-bourgeois); } .pt-bourgeois::before { content: "09"; } .pt-chu { font-size: var(--pt-chu); } .pt-chu::before { content: "42"; } .pt-xiaochu { font-size: var(--pt-xiaochu); } .pt-xiaochu::before { content: "36"; } .pt-yi { font-size: var(--pt-yi); } .pt-yi::before { content: "26"; } .pt-xiaoyi { font-size: var(--pt-xiaoyi); } .pt-xiaoyi::before { content: "24"; } .pt-er { font-size: var(--pt-er); } .pt-er::before { content: "22"; } .pt-xiaoer { font-size: var(--pt-xiaoer); } .pt-xiaoer::before { content: "18"; } .pt-san { font-size: var(--pt-san); } .pt-san::before { content: "16"; } .pt-xiaosan { font-size: var(--pt-xiaosan); } .pt-xiaosan::before { content: "15"; } .pt-si { font-size: var(--pt-si); } .pt-si::before { content: "14"; } .pt-xiaosi { font-size: var(--pt-xiaosi); } .pt-xiaosi::before { content: "12"; } .pt-wu { font-size: var(--pt-wu); } .pt-wu::before { content: "10.5"; } .pt-xiaowu { font-size: var(--pt-xiaowu); } .pt-xiaowu::before { content: "9"; } /* @layer content-first { */ html, body { min-height:100%; } /* mtness content-first */ body { display: flex; flex-flow: column; min-height: 100vh; } body > h1 { order: 50; } body > aside { order: 10; } body > header { order: 20; } body > main { order: 30; background-color: --var(--color-bg); z-index: 1; display: flex; flex-flow: column; flex: 1; } body > footer { order: 40; } /* } */ /* @layer sticky { */ /* mtness sticky header */ #header { position:sticky; top:0; padding-block: 3rem; z-index: 2; transition: .1s padding ease-in-out; } /* second sticky */ /* main > section.second-sticky { position:sticky; top:5rem; padding:1rem 0; background:#AEC; } */ body > aside { padding: 1rem; text-align: center; background-color: var(--color-bg); } body > aside p { margin: 0; } main > section { /*position: sticky;*/ /*top: 6rem;*/ /* padding:1rem 0; */ /* background:#AEC; */ } main > section + section { margin-top: 2rem; } main > section.nm + section { margin-top: 0; } .content > *:first-child { margin-top: 3rem; } .content > *:last-child { margin-bottom: 3rem; } #footer { /* position:sticky; */ position:static; bottom: 0; padding: 0; z-index: 0; } /* prefers-color-scheme: light */ /* #header {background:#fff;} #content{background:#fff;} #footer {background:#eee;} #aside {background:#ccc;} */ /* @media (prefers-color-scheme: dark) { html[data-theme="dark"] #header {background:#333;} html[data-theme="dark"] #footer {background:#000;} html[data-theme="dark"] #aside {background:#444;} } */ /* } */ body, .page-row-navigation { grid-template-rows: [page-top] max-content [contents-top] max-content [contents-bottom] max-content [page-bottom]; } body { --screen-margin : 1.5rem; --screen-inset-width : 5fr; --page-margin : 3rem; --page-inset-left-min : 3rem; --page-inset-left-max : 10rem; --page-inset-right-min: 3rem; --page-inset-right-max: 10rem; --body-outset : 3rem; --body-margin : 1.5rem; --body-content-min : 30rem; --body-content-max : 46rem; --body-max-width : 2560px; margin: 0 auto; /*max-width: var(--body-max-width);*/ } body .sidebar.sidebar-navigation { grid-column: page-start/body-start; grid-row : content-top/page-bottom; } body .grid { display: grid; gap: 0; grid-template-columns: [screen-start] var(--screen-margin) [screen-inset-start] var(--screen-inset-width) [page-start page-inset-start body-outset-start body-start body-content-start] var(--page-margin) minmax( var(--page-inset-left-min), var(--page-inset-left-max) ) var(--body-outset) var(--body-margin) minmax( calc( var(--body-content-min) / 2 ) , calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 ) ) [center-line] minmax( calc( var(--body-content-min) / 2 ) , calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 ) ) [body-content-end] var(--body-margin) [body-end] var(--body-outset) [body-outset-end] minmax( var(--page-inset-right-min), var(--page-inset-right-max) ) [page-inset-end] var(--page-margin) [page-end] var(--screen-inset-width) [screen-inset-end] var(--screen-margin) [screen-end]; } @media (max-width: 78rem) { body .grid { grid-template-columns: [screen-start] var(--screen-margin) [screen-inset-start page-start page-inset-start] minmax( var(--page-inset-left-min), var(--page-inset-left-max) ) [body-outset-start] var(--body-outset) [body-start] var(--body-margin) [body-content-start] minmax( calc( var(--body-content-min) / 2 ) , calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 ) ) [center-line] minmax( calc( var(--body-content-min) / 2 ) , calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 ) ) [body-content-end] var(--body-margin) [body-end] var(--body-outset) [body-outset-end] minmax( var(--page-inset-right-min), var(--page-inset-right-max) ) [page-inset-end page-end screen-inset-end] var(--screen-margin) [screen-end]; } } @media (max-width: 46rem) { body { --screen-margin: .75rem; } body .grid { grid-template-columns: [screen-start] var(--screen-margin) [screen-inset-start page-start page-inset-start body-outset-start body-start body-content-start] minmax(0px, 1fr) [center-line] minmax(0px, 1fr) [body-content-end body-end body-outset-end page-inset-end page-end screen-inset-end] var(--screen-margin) [screen-end]; } } .page-full { grid-column: screen-start/screen-end !important; } .grid > * { grid-column: body-content-start/body-content-end; } .grid .content { grid-column : body-content-start/body-content-end; grid-row : content-top/content-bottom; align-content: flex-start; } .grid .column-body { grid-column: body-content-start/body-content-end; } .grid .column-body-outset { grid-column: body-outset-start/body-outset-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-page { grid-column: page-start/page-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-page-inset { grid-column: page-inset-start/page-inset-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen { grid-column: screen-start/screen-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen-inset { grid-column: screen-inset-start/screen-inset-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen-inset.shaded { grid-column: screen-start/screen-end; padding: 1em; background: #009de4; z-index: 998; transform: translate3d(0, 0, 0); margin-bottom: 1em; overflow: hidden; } .grid .column-screen-inset.shaded { } @media (min-width: 992px) { .column-before { grid-column: page-start/body-start; z-index: 998; } .margin-caption, .aside, aside:not(.footnotes):not(.sidebar), .column-margin { grid-column: body-end/page-end; z-index: 998; } } .grid .column-body-outset-right, .grid .column-body-right { grid-column: body-content-start/body-outset-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-page-inset-right { grid-column: body-content-start/page-inset-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-page-right { grid-column: body-content-start/page-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen-inset-right { grid-column: body-content-start/screen-inset-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen-right { grid-column: body-content-start/screen-end; z-index: 998; transform: translate3d(0, 0, 0); } .left { text-align: left; padding-left: 1em; } .grid .column-body-outset-left, .grid .column-body-left { grid-column: body-outset-start/body-content-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-page-inset-left { grid-column: page-inset-start/body-content-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-page-left { grid-column: page-start/body-content-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen-inset-left { grid-column: screen-inset-start/body-content-end; z-index: 998; transform: translate3d(0, 0, 0); } .grid .column-screen-left { grid-column: screen-start/body-content-end; z-index: 998; transform: translate3d(0, 0, 0); } .right { text-align: right; padding-right: 1em; } .sidebar.margin-sidebar { grid-column: body-end/page-end; grid-row: content-top/page-bottom; } .sidebar { will-change: top; transition: top 200ms linear; position: sticky; overflow-y: auto; padding-top: 0; max-height: 100vh; } @media (max-width: 767.98px) { .sidebar.margin-sidebar { margin: 0 var(--screen-margin); } } .layout-row:not(.grid), .layout-row.grid > div { --min: 10ch; --gap: 0; display: grid; gap: var(--gap); grid-auto-flow: column; grid-auto-columns: 1fr; } .layout-row.g-75-25 { grid-template-columns: calc(75% - var(--gap) / 2 ) calc(25% - var(--gap) / 2); } .layout-row.g-66-33 { grid-template-columns: calc(100% / 3 * 2 - var(--gap) / 2 ) calc(100% / 3 - var(--gap) / 2 ); } .layout-row.g-33-66 { grid-template-columns: calc(100% / 3 - var(--gap) / 2) calc(100% / 3 * 2 - var(--gap) / 2); } .layout-row.g-25-75 { grid-template-columns: calc(25% - var(--gap) / 2 ) calc(75% - var(--gap) / 2); } .layout-row > * img { display: block; width: 100%; height: auto; } .layout-row.txt-img, .layout-row.img-txt { gap: 0; } /* three elements necessary for the t3 translation anchor */ .txt-img:not(.container).grid > div > :nth-child(1), .txt-img:not(.container):not(.grid) > :nth-child(1) { order: 2; } .txt-img:not(.container).grid > div > :nth-child(2), .txt-img:not(.container):not(.grid) > :nth-child(2) { order: 1; } .txt-img:not(.container).grid > div > :nth-child(3), .txt-img:not(.container):not(.grid) > :nth-child(3) { order: 0; } @media (max-width: 104rem) { .layout-row:not(.grid), .layout-row.grid > div { grid-auto-flow: row; } .txt-img > :nth-child(1) { order: 0; } .txt-img > :nth-child(2) { order: 1; } } .bg-img.fixed { background-attachment: fixed; } .bg-img { background-position: center center; background-size: cover; background-repeat: no-repeat; } [class*="height-"] { display: grid; align-content: center; } .height-full { min-height: 100vh; } .height-half { min-height: 50vh; } .height-phi { min-height: 40vh; } .height-third { min-height: 33vh; } .height-quarter { min-height: 25vh; } /* accessible dropdown navigation */ ul.dd { --hover-bg: #000; --hover-fg: #fff; --selected: #D37119FF; /* background: darkorange; */ list-style: none; margin: 0; padding-left: 0; } ul.dd li { color: #000; display: block; float: left; margin: 0; /* padding: 1rem; */ /* position: relative; */ text-decoration: none; transition-duration: .25s; } ul.dd li a { display: block; padding: .75rem 1rem; font-family: var(--menu-font); font-size: 1.25rem; font-weight: 400; color: #F1CB0B; } ul.dd li a.selected { color: var(--selected); } ul.dd li:hover, ul.dd li:focus-within { background: var(--hover-bg); cursor: pointer; } ul.dd li:hover a { background: var(--hover-bg); color: var(--hover-fg); } ul.dd li > [aria-haspopup="true"] { padding-right: 1.5rem; position: relative; } ul.dd > li > [aria-haspopup="true"]:after { content: " "; background-image: url('data:image/svg+xml;charset=utf-8,'); /* found here: https://iconmonstr.com/arrow-25-svg/ */ background-size: 10px; filter: invert(51%) sepia(21%) saturate(2047%) hue-rotate(349deg) brightness(93%) contrast(91%); width: 10px; height: 10px; font-size: 12px; position: absolute; right: 0.66rem; top: 50%; transform: translateY(-40%) rotate(90deg); } ul.dd > li.has-sub > [aria-haspopup="true"]:hover:after, ul.dd > li.has-sub:hover > [aria-haspopup="true"]:hover:after { transform: translateY(-50%) rotate(90deg); } ul.dd > li:hover > a:after { filter: invert(1); transform: translateY(-50%) rotate(270deg); } ul.dd > li > [aria-haspopup="true"] + button { display: none; } ul.dd li ul { background: var(--hover-bg); visibility: hidden; opacity: 0; min-width: 14rem; position: absolute; transition: all .25s ease; margin-top: 0; margin-left: 0; padding-left: 0; /* display: none; */ } ul.dd li:hover > ul, ul.dd li:focus-within > ul, ul.dd li ul:hover, ul.dd li ul:focus { visibility: visible; opacity: 1; display: block; box-shadow: 0 16px 24px #0001; } ul.dd li ul li { background: var(--hover-bg); clear: both; width: 100%; } ul.dd li ul li a { background: var(--hover-bg); /*color: #fff;*/ font-weight: 300; font-size: 1rem; padding: .33rem 1rem; } ul.dd li:hover ul li a { color: #F1CB0B; } ul.dd li ul li a:hover { color: #fff; } ul.dd li a { text-decoration: none; } ul.dd li ul ul, ul.dd li:hover ul ul { display: none; /* we just want 1 level dropdowns here */ } /* mobile menu magic */ @media (max-width:70rem) { /* menu overflow magic */ html.menu-open { overflow: hidden; } body.menu-open { /*overflow: scroll;*/ height: 100%; } body > aside { order: 20; } #mainMenuOpen { position: relative; display:block; flex-grow:0; font-size:1.8em; line-height:1; border:0; background:transparent; color: inherit; float: right; padding: 1.1rem 1.33rem .9rem; } #mainMenuOpen:after { content:"\2630"; } #mainMenuOpen + nav { position:fixed; top:0; left:-100%; width:100%; height:100%; overflow:auto; display:flex; opacity:0; background: #000; transition:left 0s 0.5s, opacity 0.5s; padding-top: 3.9rem; } /* #mainMenuOpen + nav, /* debug */ #mainMenuOpen:focus + nav, #mainMenuOpen + nav:focus-within { left:0; opacity:1; transition:left 0s, opacity 0.5s; } #mainMenuOpen:focus + #nav::before, #mainMenuOpen + #nav:focus-within::before { content: " "; background-image: url('data:image/svg+xml;charset=utf-8,'); /* found here: https://iconmonstr.com/x-mark-circle-lined-svg/ */ filter: invert(91%) sepia(9%) saturate(4957%) hue-rotate(353deg) brightness(96%) contrast(96%); background-repeat: no-repeat; background-position: center center; background-size: 2rem; display: block; position: fixed; top: 0; right: .66rem; height: 3.8rem; padding: 1rem 1.3rem; font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 23; color: #fff; } #nav { flex-flow: column; } #nav ul li { float: unset; position: relative; } #nav ul.utilities li { display: block; } ul.dd { --hover-bg: #000; --hover-fg: inherit; } ul.dd > li > [aria-haspopup="true"]::after { display: none; } ul.dd > li > [aria-haspopup="true"] + button { display: block; background-image: url('data:image/svg+xml;charset=utf-8,'); /* found here: https://iconmonstr.com/arrow-25-svg/ */ background-size: 12px; background-repeat: no-repeat; background-position: center center; filter: invert(51%) sepia(21%) saturate(2047%) hue-rotate(349deg) brightness(93%) contrast(91%); transform: translateY(-50%) rotate(0); background-color: inherit; padding: 1rem; z-index: 12; position: absolute; top: 1.125rem; right: 1rem; } ul.dd > li > [aria-haspopup="true"] + button:hover, ul.dd > li:hover > [aria-haspopup="true"] + button:hover, ul.dd > li > [aria-haspopup="true"] + button:focus:has( + ul ), ul.dd > li:hover > [aria-haspopup="true"] + button:has( + ul:focus-within ) { transform: translateY(-50%) rotate(90deg); background-color: unset; } ul.dd > li:hover > a:after { transform: translateY(-50%) rotate(90deg); } ul.dd li ul { box-shadow: unset; left: auto; margin: 0; max-height: 0; opacity: 1; overflow: hidden; padding: 0; position: relative; transition: all .25s ease-in-out; } #nav ul li a[aria-haspopup="true"]+button:focus + ul, #nav ul li a[aria-haspopup="true"]+button + ul:focus-within { display: block; margin: 0 0 10px; max-height: 1000vh; transition: all .25s ease-in-out; } ul.dd li ul li:last-child { padding-block-end: .25rem; } #menu #nav .primary { margin: 0; background: none; } #menu #nav .secondary { margin: 0; background: none; } #menu #nav .utilities { margin: 0 0 1rem; } ul.dd li > [aria-haspopup="true"] { padding-right: 4rem; } ul.dd > li > [aria-haspopup="true"]::after { background-size: 14px; width: 14px; height: 14px; right: 1.75rem; } } /* ---------------------------------------------------------------------------- */ /* txtimg positioning */ .above-center .img { } .above-center .img img { width: 100%; height: auto; } .above-left .img img { margin-inline: 0 auto; } .above-right .img img { margin-inline: auto 0; } .below-center .img { margin-inline: auto; } .below-center .img img { width: 100%; height: auto; } .below-left .img img { margin-inline: 0 auto; } .below-right .img img { margin-inline: auto 0; } .align-left { width: 50%; margin-top: 0; margin-right: 1rem; float: left; } .align-right { margin-top: 0; margin-left: 1rem; float: right; } .align-left img, .align-right img { width: 100%; height: auto; display: block; } .align-left.half, .align-right.half { width: 50%; } .align-left.phi, .align-right.phi { width: 40%; } .align-left.quarter, .align-right.quarter { width: 25%; } .align-left.outset.column-body { margin-right: 2rem; margin-left: calc( -1 * var(--body-outset) - var(--body-margin) ); } .align-right.outset.column-body { margin-right: calc( -1 * var(--body-outset) - var(--body-margin) ); margin-left: 2rem; } .align-left.outset.column-page { margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) ); } .align-right.outset.column-page { margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) ); } .align-left.outset.column-screen-inset { margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) ); } .align-right.outset.column-screen-inset { margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) ) ); } .align-left.outset.column-screen { margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) - var(--screen-margin) ); } .align-right.outset.column-screen { margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) - var(--screen-margin) ); } .column-before img, .column-margin img, .beside-left .column-body img, .beside-right .column-body img { width: 100%; height: auto; display: block; } div[class*="col-"] { display: grid; gap: .5rem; align-items: center; text-align: center; } .imgs.col-2 { grid-template-columns: repeat(2, 1fr); } .imgs.col-3 { grid-template-columns: repeat(3, 1fr); } .imgs.col-4 { grid-template-columns: repeat(4, 1fr); } .imgs.col-5 { grid-template-columns: repeat(5, 1fr); } .imgs.col-6 { grid-template-columns: repeat(6, 1fr); } .imgs.col-7 { grid-template-columns: repeat(7, 1fr); } .imgs.col-8 { grid-template-columns: repeat(8, 1fr); } @media screen and (min-width: 1024px + 1px) { .align-left.half-bleed { width: 75%; margin-left: -25%; float: left; } .align-left.half-bleed .caption { text-align: right; } .align-right.half-bleed { width: 75%; margin-right: -25%; float: right; } .align-right.half-bleed .caption { text-align: left; } .align-half, .align-full, .align-full-left, .align-full-right, .align-half-left, .align-half-right { margin-left: calc(((100vw - (2* var(--colsize)) + 3rem) / 2) * -1); width: 100vw; display: grid; grid-template-columns: [full-start] minmax(1rem, 1fr) [wide-start] minmax(0, 1fr) [content-start] minmax(0, calc( (2* var(--colsize)) + 3rem)) [content-end] minmax(0, 1fr) [wide-end] minmax(1rem, 1fr) [full-end]; } .align-half > * { grid-column: wide; } .align-full > * { grid-column: full; } .align-full-left { width: calc(100vw - 6rem); } .align-full-left a { grid-column: full-start/content-end; } .align-full-left .caption { grid-column: content-start/content-end; text-align: right; } .align-full-right { padding-left: 4.5rem; width: calc(100vw - 3rem); } .align-full-right a { grid-column: content-start/full-end; grid-row: 1; } .align-full-right .caption { grid-column: content-start/full-end; align-self: end; text-align: left; padding-right: 1rem; } .align-half-left a { grid-column: full-start/wide-end; } .align-half-left .caption { grid-column: full-start/wide-end; grid-row: 2; text-align: right; } .align-half-right a { grid-column: wide-start/full-end; } .align-half-right .caption { grid-column: wide-start/full-end; grid-row: 2; text-align: left; } } @media screen and (max-width: 1024px) { .align-left.half-bleed { width: 100%; } .align-right.half-bleed { width: 100%; } .align-half, .align-full, .align-full-left, .align-full-right, .align-half-left, .align-half-right { margin-left: -1.5rem; width: 100vw; } } @media screen and (min-width: 1680px + 1px) { .align-full-left { width: calc(100vw - 6rem); } .align-full-left a { grid-column: full-start/content-end; margin-bottom: 1.25rem; } .align-full-left .caption { grid-column: content-end/full-end; align-self: end; text-align: left; padding-left: 1rem; padding-bottom: 1.25rem; } .align-full-right { padding-left: 4.5rem; width: calc(100vw - 3rem); } .align-full-right a { grid-column: content-start/full-end; grid-row: 1; margin-bottom: 1.25rem; } .align-full-right .caption { grid-column: full-start/content-start; grid-row: 1; align-self: end; text-align: right; padding-right: 1rem; padding-bottom: 1.25rem; } } .imgs { margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: repeat( var(--grid-type, auto-fit), minmax(min(var(--imgwidth, 10rem), 100%), 1fr) ); grid-auto-rows: auto; container-type: inline-size; } .layout-row .txt { max-width: 100%; display:grid; justify-items: center; align-content: center; padding: max(1rem, 3vw); } /* ---------------------------------------------------------------------------- */ /* copyright hover */ figure { position: relative; } .img { position: relative; top: 0; display: block; align-items: center; object-fit: contain; margin: 0; } .img > a, .img > div, .img img { display: block; position: relative; } .beside-right .img img, .beside-left .img img, .txt-beside-right .img img, .txt-beside-left .img img { width: 100%; height: auto; } .img .copy { position: absolute; right: 0; bottom: 0; font-size: 12px; width: 100%; text-align: right; z-index: 1; mix-blend-mode: difference; color: #fff; } .copy .trigger { display : inline-block; padding: 2px 6px 2px 4px; opacity: 1; } .copy .data { position: absolute; width: auto; max-width: 85%; bottom: 0; right: 0; padding: 2px 6px 2px 4px; opacity: 0; background-color : #8888; } @media only screen and (max-width: 991px) { .copy .data { max-width: 96%; } } .copy:hover { mix-blend-mode: unset; transition: .2s mix-blend-mode ease-in-out; } .copy:hover .trigger, .copy:hover .trigger { opacity: 0; transition: .2s opacity ease-in-out; } .copy:hover .data, .copy:hover .data { opacity: 1; transition: .2s opacity ease-in-out; } figure.img > figcaption { position: relative; bottom: 0; } /* ---------------------------------------------------------------------------- */ /* video facades */ .videoEmbed { position:relative; overflow:hidden; aspect-ratio:var(--aspect-ratio); max-height:90vh; margin:1rem auto; font-family:arial,helvetica,sans-serif; background-color:#000; background-image:var(--video-poster); background-size:cover; background-repeat: no-repeat; background-position: center; } .videoEmbed > * { box-sizing:border-box; position:absolute; left:0; top:0; width:100%; height:100%; border:0; } .videoEmbed header { display: none; } .videoEmbed a span { display: none; position:absolute; left:0; bottom:1rem; z-index:99; padding:1rem; line-height:1.5rem; text-decoration:none; background:#222; color:#EEE; transition:background 0.3s; } .videoEmbed a:focus span, .videoEmbed a:hover span { background:#444; } .videoEmbed a b, .videoEmbed button { background-color:transparent; color:transparent; cursor:pointer; } .videoEmbed button { background: left 2rem bottom 2rem no-repeat; transition: all 0.3s; box-shadow: inset 0 0 32px 2px #0003; filter: drop-shadow(0 0 1px #0008 ); } .videoEmbed button:focus, .videoEmbed button:hover { /*scale:1.1;*/ background-color: #fff0; filter: drop-shadow(0 0 1px #fff3 ); } .videoEmbed header { padding:0.5rem; color:#FFF; text-shadow: -0.0625em -0.0625em 0.125em #000, 0.0625em -0.0625em 0.125em #000, 0.0625em 0.0625em 0.125em #000, -0.0625em 0.0625em 0.125em #000, 0 0 0.25em #000; } .videoEmbed a b { display:inline-block; font-size:1.25em; vertical-align:top; background:center no-repeat; background-size:contain; } .videoEmbed.vimeo span { background:#025; } .videoEmbed.vimeo a:focus span, .videoEmbed.vimeo a:hover span { background:#008; } .videoEmbed.vimeo button { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%0A%0A%3Cpath fill='%23fff' d='M19 12a1 1 0 0 1-.496.864l-12 7A1 1 0 0 1 5 19V5a1 1 0 0 1 1.504-.864l12 7A1 1 0 0 1 19 12' /%3E%0A%0A%3C/svg%3E%0A"); background-size:1.5rem; } .videoEmbed.vimeo a b { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 24' fill='%230BF' %3E%3Cpath d='m 15.72,9.431 c -0.069,1.514 -1.127,3.588 -3.172,6.22 -2.114,2.749 -3.903,4.124 -5.367,4.124 -0.906,0 -1.673,-0.837 -2.3,-2.512 C 4.463,15.728 4.044,14.194 3.626,12.659 3.161,10.985 2.662,10.147 2.128,10.147 c -0.116,0 -0.524,0.245 -1.221,0.733 L 0.176,9.937 C 0.943,9.263 1.7,8.588 2.445,7.912 3.469,7.028 4.237,6.562 4.75,6.515 5.96,6.399 6.705,7.227 6.985,8.998 c 0.302,1.912 0.511,3.101 0.628,3.566 0.349,1.586 0.733,2.378 1.152,2.378 0.326,0 0.815,-0.515 1.467,-1.543 0.651,-1.029 1,-1.812 1.047,-2.349 0.093,-0.888 -0.256,-1.333 -1.047,-1.333 -0.373,0 -0.757,0.085 -1.151,0.255 0.764,-2.504 2.224,-3.721 4.38,-3.652 1.598,0.047 2.351,1.084 2.259,3.111' id='path4' /%3E%3Cpath d='m 22.281,1.918 c -0.023,0.58 -0.314,1.136 -0.874,1.669 -0.628,0.602 -1.373,0.903 -2.234,0.903 -1.327,0 -1.968,-0.579 -1.921,-1.737 0.022,-0.602 0.378,-1.182 1.064,-1.738 0.687,-0.555 1.449,-0.834 2.288,-0.834 0.489,0 0.896,0.192 1.223,0.574 0.325,0.382 0.477,0.77 0.454,1.163 z m 3.038,12.419 c -0.652,1.232 -1.548,2.349 -2.689,3.349 -1.56,1.349 -3.119,2.024 -4.679,2.024 -0.723,0 -1.275,-0.233 -1.659,-0.699 -0.384,-0.465 -0.565,-1.069 -0.541,-1.814 0.022,-0.767 0.261,-1.954 0.715,-3.56 0.454,-1.605 0.682,-2.466 0.682,-2.582 0,-0.605 -0.21,-0.908 -0.629,-0.908 -0.139,0 -0.536,0.245 -1.188,0.733 L 14.528,9.937 c 0.745,-0.674 1.49,-1.349 2.235,-2.025 1.001,-0.884 1.746,-1.35 2.236,-1.397 0.768,-0.069 1.332,0.157 1.693,0.679 0.36,0.523 0.494,1.2 0.402,2.035 -0.303,1.415 -0.629,3.212 -0.978,5.392 -0.024,0.998 0.337,1.496 1.082,1.496 0.326,0 0.908,-0.344 1.746,-1.033 0.699,-0.574 1.269,-1.114 1.712,-1.62 l 0.663,0.873' id='path6' /%3E%3Cpath d='m 47.127,14.336 c -0.652,1.233 -1.548,2.349 -2.689,3.349 -1.56,1.349 -3.12,2.024 -4.679,2.024 -1.514,0 -2.247,-0.837 -2.2,-2.513 0.022,-0.745 0.168,-1.639 0.436,-2.686 0.267,-1.048 0.413,-1.862 0.436,-2.444 0.024,-0.883 -0.245,-1.326 -0.806,-1.326 -0.607,0 -1.331,0.722 -2.172,2.165 -0.887,1.514 -1.367,2.98 -1.436,4.4 -0.05,1.002 0.05,1.77 0.293,2.305 -1.624,0.047 -2.762,-0.221 -3.411,-0.803 -0.582,-0.512 -0.848,-1.361 -0.801,-2.549 0.02,-0.745 0.136,-1.49 0.343,-2.235 0.205,-0.745 0.319,-1.408 0.342,-1.991 0.05,-0.861 -0.268,-1.292 -0.944,-1.292 -0.583,0 -1.213,0.664 -1.888,1.991 -0.676,1.326 -1.049,2.712 -1.119,4.155 -0.05,1.305 0.04,2.212 0.25,2.724 -1.598,0.047 -2.733,-0.29 -3.404,-1.01 -0.558,-0.603 -0.812,-1.52 -0.765,-2.751 0.02,-0.603 0.129,-1.445 0.321,-2.524 0.192,-1.08 0.299,-1.921 0.321,-2.525 0.05,-0.417 -0.06,-0.627 -0.314,-0.627 -0.14,0 -0.536,0.236 -1.188,0.707 L 21.215,9.937 c 0.117,-0.092 0.849,-0.768 2.2,-2.025 0.978,-0.907 1.641,-1.373 1.99,-1.396 0.606,-0.047 1.094,0.203 1.467,0.75 0.372,0.547 0.559,1.182 0.559,1.903 0,0.233 -0.02,0.454 -0.07,0.664 0.349,-0.535 0.756,-1.002 1.222,-1.398 1.071,-0.93 2.27,-1.455 3.597,-1.571 1.141,-0.093 1.955,0.174 2.445,0.803 0.395,0.512 0.581,1.246 0.558,2.2 0.163,-0.139 0.338,-0.291 0.525,-0.454 0.534,-0.628 1.058,-1.128 1.57,-1.501 0.861,-0.629 1.759,-0.978 2.689,-1.048 1.118,-0.093 1.921,0.173 2.41,0.8 0.418,0.51 0.605,1.241 0.559,2.191 -0.024,0.65 -0.181,1.595 -0.472,2.836 -0.292,1.241 -0.436,1.953 -0.436,2.139 -0.024,0.488 0.023,0.824 0.139,1.009 0.117,0.186 0.395,0.278 0.838,0.278 0.326,0 0.907,-0.344 1.746,-1.034 0.698,-0.573 1.269,-1.113 1.712,-1.619 l 0.664,0.872' id='path8' /%3E%3Cpath d='m 52.295,10.654 c 0.022,-0.625 -0.233,-0.938 -0.767,-0.938 -0.698,0 -1.407,0.481 -2.127,1.442 -0.721,0.961 -1.093,1.882 -1.116,2.762 -0.013,0 -0.013,0.151 0,0.452 1.139,-0.417 2.127,-1.053 2.964,-1.911 0.674,-0.741 1.022,-1.344 1.046,-1.807 z m 7.927,3.646 c -0.675,1.117 -2.002,2.232 -3.981,3.348 -2.467,1.418 -4.971,2.126 -7.508,2.126 -1.885,0 -3.237,-0.628 -4.051,-1.885 -0.582,-0.861 -0.861,-1.885 -0.838,-3.072 0.023,-1.885 0.862,-3.677 2.515,-5.377 1.815,-1.862 3.957,-2.794 6.425,-2.794 2.282,0 3.492,0.93 3.632,2.787 0.093,1.184 -0.559,2.404 -1.956,3.658 -1.49,1.371 -3.365,2.241 -5.622,2.612 0.418,0.581 1.046,0.871 1.885,0.871 1.676,0 3.504,-0.426 5.483,-1.279 1.42,-0.599 2.538,-1.221 3.353,-1.866 l 0.663,0.871' id='path10' /%3E%3Cpath d='m 65.755,11.828 c 0.023,-0.63 -0.064,-1.207 -0.262,-1.732 -0.198,-0.524 -0.484,-0.788 -0.855,-0.788 -1.188,0 -2.166,0.642 -2.933,1.925 -0.653,1.05 -1.003,2.17 -1.048,3.358 -0.024,0.584 0.081,1.098 0.314,1.54 0.255,0.514 0.616,0.77 1.083,0.77 1.047,0 1.944,-0.617 2.689,-1.854 0.628,-1.027 0.965,-2.1 1.012,-3.219 z m 3.946,0.132 c -0.093,2.139 -0.884,3.987 -2.374,5.544 -1.49,1.557 -3.342,2.336 -5.553,2.336 -1.839,0 -3.236,-0.593 -4.19,-1.779 -0.698,-0.883 -1.083,-1.987 -1.152,-3.311 -0.118,-2 0.604,-3.836 2.165,-5.51 1.676,-1.859 3.782,-2.789 6.32,-2.789 1.629,0 2.863,0.547 3.702,1.639 0.792,1 1.152,2.29 1.082,3.87' id='path12' /%3E%3C/svg%3E%0A"); } .videoEmbed.youtube button { background-image:url("data:image/svg+xml,%3Csvg width='159' height='110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z' fill='%23f00'/%3E%3Cpath d='m105 55-40.8-23.4v46.8z' fill='%23fff'/%3E%3C/svg%3E%0A"); background-size: 4rem 3rem; } .videoEmbed.youtube a b { margin-left:0.25rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } /* ---------------------------------------------------------------------------- */ /* splide slider */ .slider { margin: 0 auto; background: #888; width: 100%; height: 100%; overflow: hidden; position: relative; grid-column: screen-start/screen-end; } .slider .splide { height: 100%; } .slider .splide__track { width: 100%; } .splide__slide img { width: 100%; height: auto; } .splide .imgs { margin: 0; } /* main heading styling */ body > h1 { position: relative; top: -3.1rem; text-align: center; font-size: .8rem; line-height: 2.5rem; /* background-color: #fff; */ /* border-top: 1px solid #ddd; */ letter-spacing: -0.025rem; display: none; } @media screen and (max-width: 70rem) { body > h1 { display: none; } } /* accessible skip link */ .skiplink { position: absolute; left: -9999px; z-index: 999; padding: 1em; background-color: black; color: white; opacity: 0; } .skiplink:focus { left: 50%; transform: translateX(-50%); opacity: 1; } /* --- */ #header { background-color: rgba(0,0,0,0.8); border-bottom: 1px solid #F1CB0B22; padding: 0; z-index: 123; } #header .center { grid-column: screen-start/screen-end; display: grid; grid-template-columns: 24rem 1fr; grid-template-rows: 1fr; height: 5rem; /* width: 100%; */ } @media screen and (max-width: 70rem) { #header .center { grid-column: screen-start/screen-end; grid-template-columns: 1fr 6rem; grid-template-rows: 1fr; height: 4.5rem; } } .sticky #header { box-shadow: 0 0 32px rgba(0,0,0,.067); } /* logo */ #logo { grid-area: 1 / 1 / 1 / 1; z-index: 123; display: flex; flex-flow: row; gap: 1.5rem; align-items: center; translate: 1rem; } #logo > a { display: inline-block; background: transparent url('../../../_assets/a5e19e6e0581559309142352e47dcfd9/img/reichspostbitter-logo.png') center center / 100% auto no-repeat; border: none; width: 6rem; height: 4rem; text-indent: -1000%; overflow: hidden; /* transition: all .2s ease-in-out; */ } #logo a + span { display: none; } @media screen and (max-width: 70rem) { #logo { width: 100%; height: 4.5rem; } #logo a { top: .75rem; width: 4rem; height: 3rem; translate: 0; } #logo a + span { font-size: 1rem; } } #menu { grid-row-start: 1; grid-row-end: 1; grid-column-start: 2; grid-column-end: 2; height: 5rem; } @media screen and (max-width: 70rem) { #menu { height: 4.5rem; max-width: 10rem; } #mainMenuOpen + nav { background-color: #000; } #mainMenuOpen +nav ul:not(.dl-submenu) { border-top: 1px solid #F1CB0B44; } } /* hero */ .hero { order: 22; display: block; margin: 0 auto; aspect-ratio: 16/10; width: 100%; max-width: 100%; min-height: 120px; background: var(--bgimg) center center / cover no-repeat; position: relative; } #date { position: absolute; bottom: 0; width: 100%; text-align: center; background-color: #fff8; } #date p { margin: 0; padding: 0.25rem; font-size: .8rem; } /* header nav layout */ #nav { display: flex; justify-content: end; align-items: end; padding: 0; height: 4rem; } @media screen and (max-width: 70rem) { #nav { display: none; justify-content: start; align-items: unset; } } #nav ul { --menu-font: 'Contrail One'; margin: 0; padding: 0; width: auto; text-transform: uppercase; } #nav .primary { /* margin-left: 2.5rem; */ /* background: linear-gradient(to bottom,#88C7D4 0%,#88C7D4 2px,#fff 2px,#fff 100%) */ display: flex; align-items: center; padding-inline-end: 2rem; } @media screen and (max-width: 70rem) { #nav .primary { display: block; padding-inline-end: 0; } } #nav .secondary { border-inline-start: 1px solid rgb(211, 113, 25); padding-inline: 2rem; } #langswitch { border-left: 1px solid #F1CB0B44; transition: all .2s ease-in-out; } #langswitch a { display: flex; font-size: .8rem; letter-spacing: 0; text-decoration: none; } /* above header message area */ @media (min-width:60rem) { body > aside { z-index: 23; } } #topics *:focus-visible, ul.dd *:focus-visible { outline: calc(var(--border-width) * 2) solid var(--color-primary, var(--color-text)); outline-offset: calc(var(--border-width) * -2); } #footer { bottom:0; padding: 0; } #footer .center { grid-column: screen-start/screen-end; width: 100%; /* max-width: 1600px; */ margin: 0 auto; padding: 0 .5rem; } /* footer menus */ #footer .menus { padding: 3rem 1rem 0; font-size: 0.95rem; } #footer .menus .center { } #footer .menus h4 { /* margin-block-end: .5rem; */ font-family: var(--font); font-weight: 300; letter-spacing: 0.025rem; color: inherit; } #footer .menus ul { list-style: none; margin: 0; padding: 0; } #footer .menus li { margin: 0; } #footer .menus a { text-decoration: none; color: inherit; } #footer .menus a:hover { color: #fff; } @media screen and (max-width: 40rem) { #footer .menus .center { flex-flow: column; gap: 2rem; text-align: center; } } /* footer bottom */ #footer .bottom { font-family: var(--font); font-size: 0.8rem; font-weight: var(--font-weight-regular); padding: 1rem; background-color: #000; color: #D37119; } #footer .bottom a { text-decoration: none; color: inherit; } #footer .bottom a:hover { color: #fff; } #footer .bottom .center { display: grid; grid-template-columns: 4fr 1fr 4fr; grid-template-areas: "copy social legal"; } #footer .legal { grid-area: legal; justify-self: end; } #footer .social { grid-area: social; } #footer .copy { grid-area: copy; } @media screen and (max-width: 70rem) { #footer .bottom { padding: 1.5rem 1rem; font-size: .95rem; font-weight: 500; } #footer .bottom .center { grid-template-columns: 1fr; grid-template-areas: "legal" "social" "copy"; } #footer .legal, #footer .copy { justify-self: center; } #footer .social { margin-block: 2rem; } #footer .bottom { font-size: 1rem; color: var(--color-text-invert); } } #footer .bottom ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; } #footer .bottom li { margin: 0; } #footer .bottom li a { display: inline-block; transition: color .1s ease-in-out; } /* social icons */ #social { display: flex; justify-content: center; /*padding: 2em 0;*/ } #social.logolist ul { display: flex; list-style: none; margin: 0; padding: 0; } #social.logolist li { display: inline-block; padding: 0 .01rem; margin: 0; } #social.logolist li a { display: block; width: 20px; height:20px; opacity: 0.66; transition: all 0.1s ease-out; overflow: hidden; text-indent: 30px; background-repeat: no-repeat; background-position: center center; } #social.logolist li a:hover { opacity: 1; } /* icons from here: https://simpleicons.org/ */ #social a[href*="facebook"] { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,Facebook icon'); } #social a[href*="instagram"] { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,Instagram '); } #social a[href*="linkedin"] { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,LinkedIn icon'); } #social a[href*="twitter"] { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,Twitter icon '); } #social a[href*="youtube"] { height: 20px; background-size: 20px auto; background-image: url('data:image/svg+xml;charset=utf-8,YouTube icon '); } @media screen and (max-width: 70rem) { footer .logos li a { margin: 0 auto !important; transform: scale(1.2); } } .images { display: flex; gap: .5rem; } .images .image { width: 100%; height: auto; } .images img { width: 100%; height: auto; }