html.site-loader-active,
html.site-loader-active body {
overflow: hidden !important;
height: 100%;
overscroll-behavior: none;
}
/* State class on , set by site-loader.js. Deliberately NOT the same name
as the .site-loader-dismiss button below: when it was, the button's own
`position:absolute` rule matched the root element on every skipped load and
took the entire document out of flow. */
html.site-loader-skip #site-loader {
display: none !important;
}
#site-loader {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
overflow: hidden;
min-height: 100dvh;
background: #0d1117;
color: #f6f2ea;
touch-action: none;
overscroll-behavior: none;
will-change: transform;
}
#site-loader.is-exiting {
transform: translate3d(0, -101%, 0);
transition: transform .40s cubic-bezier(.77, 0, .175, 1);
}
#site-loader.is-exiting .site-loader-percent {
opacity: 0;
transform: translate3d(0, -22px, 0);
transition: opacity .24s ease, transform .24s ease;
}
#site-loader.is-exiting .site-loader-mark {
opacity: 0;
transform: translate3d(0, -18px, 0) scale(.88);
transition: opacity .24s ease, transform .32s cubic-bezier(.65, 0, .35, 1);
}
#site-loader.is-exiting .site-loader-name-left {
opacity: 0;
transform: translate3d(-18%, 0, 0);
}
#site-loader.is-exiting .site-loader-name-right {
opacity: 0;
transform: translate3d(18%, 0, 0);
}
#site-loader.is-exiting .site-loader-name,
#site-loader.is-exiting .site-loader-track {
transition: opacity .44s ease, transform .44s cubic-bezier(.65, 0, .35, 1);
}
#site-loader.is-exiting .site-loader-track {
opacity: 0;
transform: scaleX(1.06);
}
.site-loader-panel {
width: 100%;
padding: clamp(24px, 3.5vw, 60px);
}
.site-loader-meta {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(16px, 1.8vw, 28px);
}
.site-loader-mark {
display: block;
width: clamp(3.5rem, 5.4vw, 6.5rem);
aspect-ratio: 619.75 / 512;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url('../img/ry-monogram.svg') center / contain no-repeat;
mask: url('../img/ry-monogram.svg') center / contain no-repeat;
transform-origin: left bottom;
animation: site-loader-mark-in .52s cubic-bezier(.16, 1, .3, 1) both;
will-change: transform, opacity;
}
@keyframes site-loader-mark-in {
from {
opacity: 0;
transform: translate3d(0, 16px, 0) scale(.88);
}
}
.site-loader-percent {
display: flex;
align-items: flex-start;
gap: .08em;
margin-bottom: 0;
font-family: var(--sans, "Instrument Sans", sans-serif);
font-size: clamp(3rem, 5.8vw, 6.4rem);
font-weight: 500;
line-height: .84;
letter-spacing: -.07em;
font-variant-numeric: tabular-nums;
will-change: transform, opacity;
}
.site-loader-unit {
margin-top: .08em;
font-size: .44em;
font-weight: 500;
letter-spacing: -.03em;
color: #c8a863;
}
/* The rule between the names *is* the gap: its flex-grow is the fraction loaded,
so at 0% the two words sit locked up as one wordmark and the line draws them
apart as it fills. Growing the flex box beats translating the words off a
measured width — the resting state is already correct before this component's
JS has run, and there is no cached geometry to go stale on a resize or on a
webfont that lands late and changes how wide RYAN is. */
.site-loader-wordmark {
--p: 0;
--rule-inset: clamp(10px, 1.1vw, 22px);
display: flex;
align-items: center;
width: 100%;
}
.site-loader-name {
flex: 0 0 auto;
font-family: var(--sans, "Instrument Sans", sans-serif);
font-size: clamp(3.5rem, 9.8vw, 11.5rem);
font-weight: 600;
line-height: .76;
letter-spacing: -.085em;
text-transform: uppercase;
will-change: transform, opacity;
}
.site-loader-track {
position: relative;
flex-grow: var(--p);
flex-shrink: 1;
flex-basis: 0;
margin-inline: var(--rule-inset);
height: clamp(5px, .55vw, 8px);
border-radius: 999px;
}
.site-loader-fill {
position: absolute;
inset: 0;
display: block;
border-radius: inherit;
background: #c8a863;
}
.site-loader-status {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* The whole cover is click-to-skip; this is the same exit for anyone arriving
by keyboard or screen reader. It fades in behind the wordmark so the opening
beat reads as a title card rather than as a dialog with a dismiss button. */
.site-loader-dismiss {
position: absolute;
right: clamp(20px, 3.5vw, 56px);
bottom: clamp(22px, 4.5vh, 52px);
padding: 11px 22px;
border: 1px solid rgba(246, 242, 234, .24);
border-radius: 999px;
background: transparent;
color: rgba(246, 242, 234, .7);
font: 600 clamp(.6rem, .78vw, .72rem)/1 var(--sans, "Instrument Sans", sans-serif);
letter-spacing: .16em;
text-transform: uppercase;
cursor: pointer;
opacity: 0;
transform: translateY(8px);
animation: site-loader-dismiss-in .32s cubic-bezier(.22, 1, .36, 1) .32s forwards;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
@keyframes site-loader-dismiss-in {
to {
opacity: 1;
transform: translateY(0);
}
}
.site-loader-dismiss:hover,
.site-loader-dismiss:focus-visible {
border-color: rgba(200, 168, 99, .72);
background: rgba(200, 168, 99, .14);
color: #f6f2ea;
}
#site-loader.is-complete .site-loader-dismiss {
opacity: 0;
transition: opacity .18s ease;
}
@media (max-width: 700px) {
.site-loader-panel {
padding: 20px;
}
.site-loader-wordmark {
--rule-inset: 8px;
}
.site-loader-meta {
margin-bottom: 18px;
}
.site-loader-mark {
width: clamp(3rem, 14vw, 4.25rem);
}
.site-loader-name {
font-size: clamp(2.35rem, 12.5vw, 4.5rem);
}
.site-loader-track {
height: 5px;
}
}
@media (prefers-reduced-motion: reduce) {
#site-loader {
display: none !important;
}
}