/**
* The entrance flight -- shown before first paint on arrival at any page
* except the homepage (see jrh-page-transitions.php's own enqueue for why
* the homepage is excluded, and curtain.css for its own separate
* black-only version of this same idea). Built as ::before/::after on
* rather than real markup: the class-adding script
* (jrh_page_transitions_inline_script in jrh-page-transitions.php) runs
* from an inline snippet, before exists yet to append
* anything real into -- pure CSS content sidesteps that entirely.
*
* Ported as-is from jrh-gallery-filters/gallery-filters.css, which used to
* be the only page this ran on. See page-transitions.js for how the
* pseudo-element's own centered logo hands off to a real, travel-able
* ![]()
that actually flies to the destination page's own header logo.
*/
html.jrh-page-transition-pending {
/* The logo's own real aspect ratio (737x220 -- jhorowlogo.svg's own
viewBox), as custom properties rather than a number repeated in
each rule below -- specifically so ::after's own position (right
below) can be computed FROM the logo's actual rendered height, not
an independent guess. */
--jrh-pt-logo-w: min(70vw, 340px);
--jrh-pt-logo-h: calc(var(--jrh-pt-logo-w) * 220 / 737);
}
html.jrh-page-transition-pending::before {
content: '';
position: fixed;
inset: 0;
z-index: 999999;
background-color: #fff;
background-image: url('https://joshuarhorowitz.com/wp-content/uploads/2019/02/jhorowlogo.svg');
background-repeat: no-repeat;
background-position: center 44%;
background-size: var(--jrh-pt-logo-w) auto;
}
/* Added by page-transitions.js at the exact instant it hands this logo
off to a real, travel-able ![]()
(.jrh-pt-travel-logo, below)
positioned to land pixel-for-pixel on top of this one -- so hiding the
pseudo-element's own copy right then is invisible, not a swap you can
see. */
html.jrh-page-transition-pending.jrh-pt-logo-swapped::before {
background-image: none;
}
html.jrh-page-transition-pending::after {
content: 'Opera | Theatre Director';
position: fixed;
left: 50%;
/* background-position-y's real formula (CSS spec): the image's TOP
edge lands at (viewport height - image height) * percentage -- 44%
here, matching ::before above -- so the logo's BOTTOM edge is that
plus its own height, and this sits 14px under that: the same gap
.jrh-page-transition-subtitle's own margin-top uses for the exit
half of this same overlay, in page-transitions.css. */
top: calc( ( 100vh - var(--jrh-pt-logo-h) ) * 0.44 + var(--jrh-pt-logo-h) + 14px );
transform: translateX(-50%);
z-index: 1000000;
white-space: nowrap;
color: #1a1a1a;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 18px;
}
html.jrh-page-transition-pending::before,
html.jrh-page-transition-pending::after {
transition: opacity 900ms ease;
}
/* The real, travel-able stand-in for the overlay logo -- built and
positioned by page-transitions.js (a pseudo-element like ::before
above can't be individually measured or animated, which is why this
exists as an actual DOM element instead). Removed by JS once the
flight lands. */
.jrh-pt-travel-logo {
position: fixed;
z-index: 1000001;
transition: top 900ms ease, left 900ms ease, width 900ms ease, height 900ms ease;
}
/* Added by page-transitions.js once the real page is ready to be seen --
fades this overlay away to reveal it. */
html.jrh-page-transition-pending.jrh-page-transition-out::before,
html.jrh-page-transition-pending.jrh-page-transition-out::after {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
html.jrh-page-transition-pending::before,
html.jrh-page-transition-pending::after,
.jrh-pt-travel-logo {
transition-duration: 0.01ms;
}
}