:root {
--background: #f0ddff;
--text: #203;
--accent: #60A;
}
body {
text-shadow: -0.5px -0.5px #3021, 1px 1px #fff8;
background-image: url("/index/shiskin.webp");
background-position: center;
background-size: cover;
}
main {
max-inline-size: 72.5ch;
padding-inline: 2rem;
background-color: var(--background);
background-image: url("/index/paper-test.png");
box-shadow: 0 0 1em #0008;
}
h1 {
margin-block: 0.25em;
font-weight: normal;
hyphens: none;
}
h1 .subtitle {
display: block;
font-size: 0.85rem;
font-style: italic;
opacity: 0.8;
}
h2,
h3 {
font-weight: normal;
text-align: start;
border-block-end: 1px dotted var(--accent-translucent);
}
h2 a,
h3 a {
text-decoration: none;
}
ul li::marker,
ol li::marker {
color: var(--accent);
font-variant-numeric: oldstyle-nums;
}
main img {
border: none;
margin: 0;
}
main img:not(#passport img, figure.full img) {
border-radius: 1em;
opacity: 0.9;
}
main figure {
max-inline-size: 33%;
margin-block-end: 0;
padding-block-end: 0;
}
img.left,
figure.left {
float: left;
margin-inline-end: 1em;
}
img.right,
figure.right {
float: right;
margin-inline-start: 1em;
}
img.full,
figure.full {
margin-block-end: 1rem;
margin-inline: auto;
max-inline-size: 100%;
text-align: center;
}
figure.full img {
margin: auto;
}
figcaption {
padding: 0.25em;
color: var(--accent);
font-size: 0.9em;
font-style: italic;
line-height: 1.2;
}
figcaption i,
figcaption em {
font-style: normal;
}
figcaption .cite {
font-family: var(--verdana);
font-size: 11px;
font-style: normal;
display: inline-block;
color: var(--text);
}
figcaption .cite::after {
content: none;
}
#sidenotes {
max-inline-size: 27.5ch;
}
#sidenotes aside.note {
margin-block-end: 1em;
padding-block-start: 1em;
padding-inline: 0.75em;
background-color: var(--background);
background-image: url("/index/paper-test.png");
border-radius: 10px;
box-shadow: 0 0 1em #0008;
& .note-number {
padding-inline-end: 1ch;
background-color: transparent;
border-block-end: none;
border-inline-end: 1px solid var(--accent);
}
}
#passport {
--passport-width: min(60ch, 80vw);
--light-x-raw: 0.45;
--light-y-raw: 0.15;
--light-x: calc(var(--light-x-raw) * 100%);
--light-y: calc(var(--light-y-raw) * 100%);
--light-xy: sqrt(
calc(
(var(--light-x-raw) - 0.5) * (var(--light-x-raw) - 0.5) +
(var(--light-y-raw) - 0.5) *
(var(--light-y-raw) - 0.5) * 81 / 256
)
);
--rotation: rotate3d(
calc((0.5 - var(--light-y-raw)) * 9 / 16),
calc(var(--light-x-raw) - 0.5),
0,
min(calc(70deg * var(--light-xy)), 60deg)
);
position: relative;
inline-size: var(--passport-width);
margin-block: 2rem;
margin-inline: auto;
aspect-ratio: 16 / 9;
filter: drop-shadow(0 5px 10px #0008);
perspective: 30cm;
& .passport-projected {
position: absolute;
block-size: 100%;
inline-size: 100%;
border-radius: calc(var(--passport-width) / 18);
transform: var(--rotation);
animation-duration: 0.5s;
transition: visibility 0.5s;
}
& .passport-inside {
visibility: hidden;
}
&[data-side="inside"] .passport-cover,
&[data-side="cover"] .passport-inside {
visibility: hidden;
animation-name: passport-flip-start;
}
&[data-side="inside"] .passport-inside,
&[data-side="cover"] .passport-cover {
visibility: visible;
animation-name: passport-flip-end;
}
& img {
position: absolute;
display: block;
block-size: 100%;
inline-size: 100%;
}
& .passport-colour {
z-index: 20;
border-radius: calc(var(--passport-width) / 18);
}
& .passport-shine {
position: absolute;
z-index: 70;
block-size: 100%;
inline-size: 100%;
background: white;
border-radius: calc(var(--passport-width) / 18);
mask-image: radial-gradient(
circle var(--passport-width) at var(--light-x)
var(--light-y),
white,
#eee 30%,
black
),
url("/about/foil-mask.webp");
mask-composite: intersect;
mask-mode: luminance;
mask-size: cover;
mix-blend-mode: hard-light;
}
& .passport-sheen {
position: absolute;
z-index: 60;
block-size: 100%;
inline-size: 100%;
border-radius: calc(var(--passport-width) / 18);
mask: radial-gradient(
circle var(--passport-width) at var(--light-x)
var(--light-y),
white,
#eee 30%,
black
)
luminance;
mix-blend-mode: soft-light;
& .passport-sheen-glare {
position: absolute;
z-index: 32;
block-size: 100%;
inline-size: 100%;
background-image: radial-gradient(
circle var(--passport-width) at var(--light-x)
var(--light-y),
white,
#fff8 10%,
#fff4 20%,
#fff2 30%,
#fff1 40%,
transparent
);
}
& .passport-sheen-y {
z-index: 30;
&.passport-sheen-top {
filter: invert(1);
mask: conic-gradient(
from -90deg at var(--light-x) var(--light-y),
black,
white 90deg,
black 180deg
)
luminance;
}
&.passport-sheen-bottom {
mask: conic-gradient(
from 90deg at var(--light-x) var(--light-y),
black,
white 90deg,
black 180deg
)
luminance;
}
}
& .passport-sheen-x {
z-index: 25;
&.passport-sheen-left {
z-index: 26;
clip-path: polygon(
0% 0%,
var(--light-x) 0%,
var(--light-x) 100%,
0% 100%
);
}
&.passport-sheen-right {
filter: invert(1);
}
}
}
& .passport-inside-sheen {
position: absolute;
z-index: 60;
block-size: 100%;
inline-size: 100%;
background: white;
border-radius: calc(var(--passport-width) / 18);
mask: radial-gradient(
circle var(--passport-width) at var(--light-x)
var(--light-y),
white,
#888 10%,
#444 20%,
#222 30%,
#111 40%,
black
)
luminance;
mix-blend-mode: soft-light;
}
& .passport-inside-shimmer {
--space: 7.5ch;
position: absolute;
z-index: 59;
block-size: 100%;
inline-size: 100%;
border-radius: calc(var(--passport-width) / 18);
background-image: repeating-linear-gradient(
80deg,
hsla(283, 49%, 60%, 0.75) calc(var(--space) * 1),
hsla(2, 74%, 59%, 0.75) calc(var(--space) * 2),
hsla(53, 67%, 53%, 0.75) calc(var(--space) * 3),
hsla(93, 56%, 52%, 0.75) calc(var(--space) * 4),
hsla(176, 38%, 50%, 0.75) calc(var(--space) * 5),
hsla(228, 100%, 77%, 0.75) calc(var(--space) * 6),
hsla(283, 49%, 61%, 0.75) calc(var(--space) * 7)
);
mask: radial-gradient(
circle var(--passport-width) at var(--light-x)
var(--light-y),
white,
#666 40%,
black
)
luminance;
mix-blend-mode: color-dodge;
}
}
@keyframes passport-flip-start {
0% {
visibility: visible;
transform: var(--rotation);
}
50%,
100% {
visibility: hidden;
transform: rotate3d(1, 0, 0, 90deg);
}
}
@keyframes passport-flip-end {
0%,
50% {
visibility: hidden;
transform: rotate3d(1, 0, 0, -90deg);
}
100% {
visibility: visible;
transform: var(--rotation);
}
}
@media only screen and (max-width: 500px) {
main figure {
max-inline-size: none;
}
figure.left,
figure.right,
main img,
figcaption {
margin-inline-start: auto;
margin-inline-end: auto;
float: none;
}
figcaption {
text-align: center;
}
main img {
max-block-size: 30vh;
}
}