*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-block-start: calc(var(--hdr-h) + var(--space-m));
overflow-x: clip;
}
@media (min-width: 30em) {
html {
scrollbar-gutter: stable;
}
}
html[data-font-stack="latin"] {
--font-body: var(--font-latin);
}
html[data-font-stack="arabic"] {
--font-body: var(--font-arabic);
}
html[data-font-stack="sc"] {
--font-body: var(--font-sc);
}
.page {
--marble-strength: calc(var(--marble-opacity) * var(--marble-on, 1));
--marble-veil: color-mix(in srgb, var(--color-bg) calc((1 - var(--marble-strength)) * 100%), transparent);
}
body {
position: relative;
isolation: isolate;
overflow-x: clip;
margin: 0;
min-block-size: 100vh;
min-block-size: 100dvh;
background-color: var(--color-bg);
background-image: var(--pattern-page);
background-size: var(--pattern-page-size);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-m);
line-height: var(--leading-body);
overflow-wrap: anywhere;
}
.page::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--marble-image) var(--marble-position) / cover no-repeat;
opacity: var(--marble-strength);
-webkit-mask-image: var(--marble-mask);
mask-image: var(--marble-mask);
}
@media not all and (prefers-contrast: more) {
.page:not([data-page="home"]) {
background-image: var(--page-light), var(--page-light-floor), var(--pattern-page);
background-attachment: fixed, fixed, scroll;
background-size: 100% 100%, 100% 100%, var(--pattern-page-size);
}
}
[data-pattern="surface"] {
background-image: var(--pattern-surface);
background-size: var(--pattern-surface-size);
}
@media (prefers-contrast: more) {
body,
[data-pattern] {
background-image: none;
}
.page::before {
display: none;
}
}
h1,
h2,
h3 {
margin-block: 0 var(--space-m);
font-family: var(--font-heading);
line-height: var(--leading-heading);
text-wrap: balance;
}
p,
ul,
dl {
margin-block: 0 var(--space-m);
}
ul {
padding-inline-start: 0;
list-style: none;
}
a {
color: var(--color-accent);
text-underline-offset: 0.2em;
text-decoration-thickness: 0.08em;
}
a:hover {
text-decoration-thickness: 0.15em;
}
:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset) + 2px) var(--color-focus-halo);
}
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
inset-inline-start: var(--space-m);
inset-block-start: var(--space-m);
z-index: 100;
padding: var(--space-s) var(--space-m);
background: var(--color-bg);
color: var(--color-text);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-m);
transform: translateY(-300%);
transition: transform var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible {
transform: translateY(0);
}
[hidden] {
display: none !important;
}
@view-transition {
navigation: auto;
}
::view-transition-group(root) {
animation-duration: calc(var(--duration-page-leave) + var(--duration-page-enter));
animation-timing-function: var(--ease-page-enter);
}
::view-transition-group(site-header),
::view-transition-new(site-header),
::view-transition-new(site-footer) {
animation: none;
}
::view-transition-old(site-header),
::view-transition-old(site-footer) {
display: none;
}
::view-transition-group(site-nav) {
animation: none;
}
::view-transition-old(site-nav):only-child {
animation: vt-lift var(--duration-page-leave) var(--ease-page-leave) both;
}
::view-transition-new(site-nav):only-child {
animation: vt-emerge var(--duration-page-enter) var(--ease-page-enter) var(--duration-page-leave) both;
}
::view-transition-old(site-nav):not(:only-child) {
display: none;
}
::view-transition-new(site-nav):not(:only-child) {
animation: none;
}
::view-transition-group(site-footer) {
animation-duration: calc(var(--duration-page-leave) + var(--duration-page-enter));
animation-timing-function: var(--ease-page-enter);
}
::view-transition-group(site-main) {
animation-duration: 0s;
}
::view-transition-old(site-main) {
animation: vt-recede var(--duration-page-leave) var(--ease-page-leave) both;
}
::view-transition-new(site-main) {
animation: vt-emerge var(--duration-page-enter) var(--ease-page-enter) var(--duration-page-leave) both;
}
::view-transition-old(page-veil) {
animation: vt-lift var(--duration-page-enter) var(--ease-page-enter) var(--duration-page-leave) both;
}
@keyframes vt-recede {
to {
opacity: 0;
transform: scale(var(--page-leave-scale));
}
}
@keyframes vt-emerge {
from {
opacity: 0;
}
}
@keyframes vt-lift {
to {
opacity: 0;
}
}
.page-veil {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--selector-tile);
opacity: 0;
transition: opacity var(--duration-selector-exit-fade) linear;
view-transition-name: page-veil;
}
.page-veil[data-state="on"] {
opacity: 1;
}
.page-veil[data-variant="grow"] {
opacity: 1;
transition: none;
}
.main {
position: relative;
}
.main::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline: calc(50% - 50vw);
z-index: 10;
background: var(--selector-tile);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
html[data-veil="out"] .main::after {
visibility: visible;
animation: veil-fall var(--duration-page-veil) var(--ease-page-leave) both;
}
html[data-veil="in"] .main::after {
visibility: visible;
animation: veil-clear var(--duration-page-veil-in) var(--ease-page-enter) both;
}
@keyframes veil-fall {
from {
opacity: 1;
clip-path: inset(0 0 100% 0);
}
to {
opacity: 1;
clip-path: inset(0);
}
}
@keyframes veil-clear {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes veil-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-veil="out"] .main::after {
animation-name: veil-fade;
}
}
:root[dir="rtl"] .page-content [dir="ltr"] {
text-align: end;
}