335 lines
11 KiB
CSS
335 lines
11 KiB
CSS
/* 13 · Curtain call — frieze → 3D sea → landfall → frieze → cave, with the look of the whole as a toggle. */
|
|
@import "@fontsource/cormorant-garamond/latin-500.css";
|
|
@import "@fontsource/cormorant-garamond/latin-600.css";
|
|
@import "@fontsource/cormorant-garamond/latin-700.css";
|
|
@import "@fontsource/cormorant-garamond/latin-500-italic.css";
|
|
@import "@fontsource/inter/latin-400.css";
|
|
@import "@fontsource/inter/latin-600.css";
|
|
|
|
:root {
|
|
/* black-figure (04) */
|
|
--clay: #c46a33;
|
|
--clay-hi: #dc8d52;
|
|
--glaze: #1d140e;
|
|
--added-white: #efe3c8;
|
|
/* vellum (12) */
|
|
--vellum: #e3d6b4;
|
|
--vellum-hi: #ece2c6;
|
|
--iron: #2b2118;
|
|
--iron-soft: #5e4d3a;
|
|
--rhumb-red: #a23a2a;
|
|
--desk: #3a2f24;
|
|
--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
|
|
--sans: "Inter", system-ui, sans-serif;
|
|
--ease-out: cubic-bezier(0.22, 0.8, 0.2, 1);
|
|
|
|
/* the frieze, per look (default: look 2, terracotta and black) */
|
|
--surround: var(--glaze);
|
|
--band: var(--clay);
|
|
--ink: var(--glaze);
|
|
--inc: var(--clay);
|
|
/* the interface, per look */
|
|
--ui-bg: rgb(236 226 198 / 0.94);
|
|
--ui-fg: var(--iron);
|
|
--ui-soft: var(--iron-soft);
|
|
--ui-line: rgb(43 33 24 / 0.22);
|
|
--ui-accent: var(--rhumb-red);
|
|
--cut: var(--glaze);
|
|
--foot-bg: var(--desk);
|
|
--foot-fg: var(--vellum-hi);
|
|
}
|
|
body[data-look="1"] {
|
|
--surround: #ddcfa9;
|
|
--band: var(--vellum-hi);
|
|
--ink: #5b4128;
|
|
--inc: var(--vellum-hi);
|
|
--cut: var(--vellum);
|
|
--foot-bg: #d6c69e;
|
|
--foot-fg: var(--iron);
|
|
}
|
|
body[data-look="3"] {
|
|
--ui-bg: rgb(29 20 14 / 0.9);
|
|
--ui-fg: var(--added-white);
|
|
--ui-soft: var(--clay-hi);
|
|
--ui-line: rgb(196 106 51 / 0.45);
|
|
--ui-accent: var(--clay-hi);
|
|
--foot-bg: var(--glaze);
|
|
--foot-fg: var(--clay-hi);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
height: 100dvh;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
overflow: hidden;
|
|
background: var(--foot-bg);
|
|
color: var(--ui-fg);
|
|
font-family: var(--sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
button { font: inherit; color: inherit; }
|
|
:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
|
|
[hidden] { display: none !important; }
|
|
|
|
#app { min-height: 0; display: grid; }
|
|
[data-fan-credits] {
|
|
position: relative;
|
|
z-index: 5;
|
|
padding: 0.85rem 1.5rem;
|
|
background: var(--foot-bg);
|
|
color: var(--foot-fg);
|
|
opacity: 1;
|
|
border-top: 1px solid var(--ui-line);
|
|
}
|
|
|
|
/* ---------- stage ---------- */
|
|
.stage {
|
|
position: relative;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--surround);
|
|
isolation: isolate;
|
|
}
|
|
.stage__three, .frieze-host, .cut, .stage__paper, .stage__fallback { position: absolute; inset: 0; }
|
|
.stage__three { z-index: 0; }
|
|
.stage__canvas { display: block; width: 100%; height: 100%; }
|
|
body[data-look="1"] .stage__canvas { filter: sepia(0.38) saturate(0.85) contrast(0.96); }
|
|
.stage__fallback { display: grid; place-items: center; background: linear-gradient(#6f9fb4, #efc996 60%, #185a70 61%); color: var(--iron); }
|
|
|
|
/* Look 1 lays a vellum grain over the 3D, so sea and chart read as one sheet. */
|
|
.stage__paper {
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
background:
|
|
radial-gradient(ellipse at center, transparent 55%, rgb(120 92 52 / 0.32) 100%),
|
|
repeating-linear-gradient(90deg, rgb(91 65 40 / 0.035) 0 1px, transparent 1px 7px),
|
|
repeating-linear-gradient(0deg, rgb(91 65 40 / 0.03) 0 1px, transparent 1px 9px);
|
|
mix-blend-mode: multiply;
|
|
transition: opacity 0.4s;
|
|
}
|
|
body[data-look="1"] .stage__paper { opacity: 1; }
|
|
|
|
/* ---------- friezes ---------- */
|
|
.frieze-host { z-index: 2; pointer-events: none; will-change: transform, opacity; }
|
|
.frieze { display: block; width: 100%; height: 100%; overflow: visible; }
|
|
.frieze-host--cyclops { z-index: 3; }
|
|
.f-surround { fill: var(--surround); }
|
|
.f-band { fill: var(--band); }
|
|
.ink { fill: var(--ink); }
|
|
.clay { fill: var(--inc); }
|
|
.inc { fill: none; stroke: var(--inc); stroke-linecap: round; stroke-linejoin: round; }
|
|
.limb { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
|
|
.limb-edge { fill: none; stroke: var(--inc); stroke-linecap: round; stroke-linejoin: round; }
|
|
.oar { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
|
|
.rig { fill: none; stroke: var(--ink); stroke-width: 1.4; }
|
|
.wave { fill: none; stroke: var(--ink); stroke-linecap: round; }
|
|
.ground { stroke: var(--ink); stroke-width: 3.5; }
|
|
.rule { fill: none; stroke: var(--ink); stroke-width: 2.6; }
|
|
.vol { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
|
|
.mean { fill: none; stroke: var(--ink); stroke-width: 3; }
|
|
.frame-rule { fill: none; stroke: var(--ink); stroke-width: 1.2; display: none; }
|
|
.inscr { font: 600 19px var(--serif); letter-spacing: 0.2em; fill: var(--ink); }
|
|
.saga-name { font: 600 15px var(--serif); letter-spacing: 0.22em; fill: var(--ink); }
|
|
.glow-a { stop-color: #e2803a; }
|
|
.glow-b { stop-color: #3a170a; }
|
|
.glow-c { stop-color: #0c0705; }
|
|
|
|
/* Look 1: the same figures, redrawn as pen and wash on vellum — the chart's illustrated border. */
|
|
body[data-look="1"] .frieze .ink { fill: rgb(91 65 40 / 0.14); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
|
|
body[data-look="1"] .frieze .inc { stroke: var(--ink); opacity: 0.55; }
|
|
body[data-look="1"] .frieze .limb { stroke-width: 3px; }
|
|
body[data-look="1"] .frieze .limb-edge { stroke: transparent; }
|
|
body[data-look="1"] .frieze .clay { fill: var(--ink); }
|
|
body[data-look="1"] .mean, body[data-look="1"] .rule { stroke-width: 1.6; }
|
|
body[data-look="1"] .frame-rule { display: inline; }
|
|
body[data-look="1"] .inscr, body[data-look="1"] .saga-name { font-style: italic; font-weight: 500; letter-spacing: 0.12em; fill: var(--rhumb-red); }
|
|
body[data-look="1"] .glow-a { stop-color: #d99a55; }
|
|
body[data-look="1"] .glow-b { stop-color: #4a3420; }
|
|
body[data-look="1"] .glow-c { stop-color: #241911; }
|
|
|
|
/* the fade-through used for jumps and under reduced motion */
|
|
.cut {
|
|
z-index: 6;
|
|
background: var(--cut);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.cut.is-on { opacity: 1; }
|
|
|
|
/* ---------- the captain's-table map ---------- */
|
|
.chart {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 28px;
|
|
bottom: 112px;
|
|
width: 330px;
|
|
margin: 0;
|
|
padding: 10px 12px 12px;
|
|
background: linear-gradient(160deg, #ece2c6, #dccca5);
|
|
color: var(--iron);
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 18px 30px -12px rgb(20 12 6 / 0.55), 0 3px 8px rgb(20 12 6 / 0.3);
|
|
transform-origin: 30% 100%;
|
|
}
|
|
.chart::before, .chart::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -6px; bottom: -6px;
|
|
width: 9px;
|
|
border-radius: 5px;
|
|
background: linear-gradient(90deg, #8e7b58, #e2d5b2 45%, #8e7b58);
|
|
}
|
|
.chart::before { left: -5px; }
|
|
.chart::after { right: -5px; }
|
|
.chart__head { margin: 0 0 6px; font: 600 1.05rem/1.1 var(--serif); }
|
|
.chart__head span { display: block; font: italic 500 0.8rem/1.2 var(--serif); color: var(--iron-soft); }
|
|
.chart__svg { display: block; width: 100%; height: auto; }
|
|
.c-vellum { fill: #e6dab9; }
|
|
.c-frame { fill: none; stroke: var(--iron); stroke-width: 0.8; }
|
|
.c-rhumb { fill: none; stroke: rgb(162 58 42 / 0.18); stroke-width: 0.5; }
|
|
.c-land { fill: #c9b07a; stroke: var(--iron); stroke-width: 0.9; }
|
|
.c-ink { fill: none; stroke: var(--iron); stroke-width: 0.7; }
|
|
.c-course { fill: none; stroke: var(--rhumb-red); stroke-width: 1.3; stroke-dasharray: 3 2.4; }
|
|
.c-port { fill: #f3ebd6; stroke: var(--iron); stroke-width: 0.9; }
|
|
.c-num { font: 600 6.5px var(--sans); fill: var(--iron); }
|
|
.c-place { font: 600 italic 13px var(--serif); fill: var(--iron); }
|
|
.c-sea { font: italic 500 8.5px var(--serif); fill: var(--rhumb-red); }
|
|
.c-rose circle { fill: none; stroke: var(--iron-soft); stroke-width: 0.6; }
|
|
.c-rose path { fill: var(--iron-soft); }
|
|
.c-here__ring { fill: rgb(162 58 42 / 0.18); stroke: var(--rhumb-red); stroke-width: 1.4; }
|
|
.c-here__dot { fill: var(--rhumb-red); }
|
|
.c-here__label { font: 600 8.5px var(--sans); fill: var(--rhumb-red); paint-order: stroke; stroke: #efe6cd; stroke-width: 2.5px; }
|
|
|
|
/* ---------- caption ---------- */
|
|
.cap {
|
|
position: absolute;
|
|
z-index: 7;
|
|
top: 22px;
|
|
left: 28px;
|
|
min-width: 300px;
|
|
max-width: 460px;
|
|
padding: 12px 18px 14px;
|
|
background: var(--ui-bg);
|
|
color: var(--ui-fg);
|
|
border-left: 3px solid var(--ui-accent);
|
|
border-radius: 4px;
|
|
box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.6);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.cap__eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ui-soft); }
|
|
.cap__title { margin: 2px 0 8px; font: 600 2rem/1.05 var(--serif); }
|
|
.cap__row { margin: 0; display: flex; align-items: center; gap: 10px; min-height: 26px; }
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 3px 10px 3px 4px;
|
|
border: 1px solid var(--ui-line);
|
|
border-radius: 999px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
.chip__n {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 19px; height: 19px;
|
|
border-radius: 50%;
|
|
background: var(--ui-fg);
|
|
color: var(--ui-bg);
|
|
font-size: 0.68rem;
|
|
}
|
|
.back {
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--ui-accent);
|
|
border-radius: 999px;
|
|
background: var(--ui-accent);
|
|
color: #fff8ea;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
body[data-look="3"] .back { color: var(--glaze); }
|
|
|
|
/* ---------- control bar ---------- */
|
|
.bar {
|
|
position: absolute;
|
|
z-index: 7;
|
|
left: 50%;
|
|
bottom: 18px;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 14px;
|
|
background: var(--ui-bg);
|
|
color: var(--ui-fg);
|
|
border-radius: 6px;
|
|
box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.65);
|
|
backdrop-filter: blur(4px);
|
|
white-space: nowrap;
|
|
}
|
|
.bar button { cursor: pointer; }
|
|
.bar__play {
|
|
min-width: 74px;
|
|
padding: 7px 14px;
|
|
border: 1px solid var(--ui-accent);
|
|
border-radius: 999px;
|
|
background: var(--ui-accent);
|
|
color: #fff8ea;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
body[data-look="3"] .bar__play { color: var(--glaze); }
|
|
.bar__step {
|
|
width: 32px; height: 32px;
|
|
border: 1px solid var(--ui-line);
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
}
|
|
.bar__step:disabled { opacity: 0.35; cursor: default; }
|
|
.dots { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
|
|
.dots button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 9px 5px 5px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
font-size: 0.8rem;
|
|
color: var(--ui-soft);
|
|
}
|
|
.dots__n {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 20px; height: 20px;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 50%;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
.dots button[aria-current] { color: var(--ui-fg); font-weight: 600; }
|
|
.dots button[aria-current] .dots__n { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-bg); }
|
|
.looks { display: flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--ui-line); font-size: 0.8rem; }
|
|
.looks__label { margin-right: 4px; color: var(--ui-soft); }
|
|
.looks__sep { color: var(--ui-soft); }
|
|
.looks button {
|
|
width: 26px; height: 26px;
|
|
border: 1px solid transparent;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
font-weight: 600;
|
|
}
|
|
.looks button[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
|
|
.looks__name { min-width: 118px; margin-left: 6px; font: italic 500 0.95rem var(--serif); color: var(--ui-soft); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.cut { transition-duration: 0.25s; }
|
|
.stage__paper { transition: none; }
|
|
}
|