/* ================================================================== THE BOOK OF ETERNITY Design system: DARK PAPYRUS RITUALISM ------------------------------------------------------------------ 1 Tokens 2 Reset & base 3 Typography 4 Atmosphere 5 Utilities & controls 6 Vol. I — the seal 7 Navigation & index 8 Volume scaffolding 9 Vol. II — creation 10 Vol. III — hall of gods + record dialog 11 Vol. IV — the broken king 12 Vol. V — the night journey 13 Vol. VI — the weighing 14 Vol. VII — signs 15 Vol. VIII — lineage 16 Vol. IX — field of reeds 17 Footer & floating controls 18 Responsive 19 Reduced motion ================================================================== */ /* -- 1. Tokens ----------------------------------------------------- */ :root { /* palette */ --color-void: #070807; --color-obsidian: #0d0f0e; --color-charcoal: #171916; --color-papyrus-dark: #28251f; --color-papyrus: #d7c49b; --color-ivory: #eee4c9; --color-sandstone: #af9361; --color-gold: #b99343; --color-gold-light: #d2b66f; --color-lapis: #17445f; --color-malachite: #285849; --color-oxide: #714033; --color-muted: #948b78; /* semantic */ --bg: var(--color-obsidian); --bg-deep: var(--color-void); --ink: var(--color-ivory); --ink-body: #cfc4a8; --ink-dim: var(--color-muted); --rule: rgba(185, 147, 67, 0.28); --rule-soft: rgba(215, 196, 155, 0.14); --accent: var(--color-gold); --chapter-accent: var(--color-gold); /* type */ --font-display: 'Cinzel', 'Cormorant Garamond', 'Noto Serif SC', Georgia, 'Songti SC', serif; --font-serif: 'Cormorant Garamond', 'Noto Serif SC', Georgia, 'Songti SC', serif; --font-body: 'Manrope', 'Noto Serif SC', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace; --size-display-xl: clamp(2.9rem, 8.5vw, 7.5rem); --size-display-lg: clamp(2.2rem, 6vw, 5rem); --size-display-md: clamp(1.6rem, 3.6vw, 3rem); --size-display-sm: clamp(1.15rem, 2.2vw, 1.7rem); --size-lead: clamp(1.02rem, 1.55vw, 1.35rem); --size-body: clamp(0.95rem, 1.06vw, 1.06rem); --size-caption: clamp(0.68rem, 0.86vw, 0.8rem); --size-index: clamp(0.66rem, 0.8vw, 0.76rem); --track-display: 0.1em; --track-caption: 0.28em; --leading-display: 1.05; --leading-body: 1.75; /* space */ --space-1: 0.35rem; --space-2: 0.7rem; --space-3: 1.1rem; --space-4: 1.8rem; --space-5: 2.8rem; --space-6: 4.4rem; --space-7: 7rem; --space-8: 11rem; --gutter: clamp(1.25rem, 5vw, 6rem); --measure: 62ch; --measure-narrow: 46ch; /* motion */ --ease-ritual: cubic-bezier(0.22, 0.61, 0.24, 1); --ease-stone: cubic-bezier(0.16, 0.84, 0.3, 1); --dur-1: 240ms; --dur-2: 620ms; --dur-3: 1200ms; --dur-4: 2200ms; --nav-h: 4.25rem; --z-atmos: 1; --z-content: 2; --z-nav: 60; --z-overlay: 80; --z-seal: 100; } /* per-volume colour temperature, set by JS on */ body[data-tone='creation'] { --chapter-accent: var(--color-lapis); } body[data-tone='gods'] { --chapter-accent: var(--color-gold); } body[data-tone='myth'] { --chapter-accent: var(--color-oxide); } body[data-tone='night'] { --chapter-accent: var(--color-lapis); } body[data-tone='scales'] { --chapter-accent: var(--color-sandstone); } body[data-tone='signs'] { --chapter-accent: var(--color-gold-light); } body[data-tone='lineage'] { --chapter-accent: #5b7f96; } body[data-tone='reeds'] { --chapter-accent: var(--color-malachite); } /* -- 2. Reset & base ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* class-based layout must never win over the hidden attribute */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(120% 80% at 50% -10%, rgba(23, 68, 95, 0.16), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(40, 88, 73, 0.12), transparent 60%); color: var(--ink-body); font-family: var(--font-body); font-size: var(--size-body); font-weight: 300; line-height: var(--leading-body); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.is-sealed { overflow: hidden; } body.is-locked { overflow: hidden; } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; } a { color: var(--color-gold-light); text-underline-offset: 0.25em; } a:hover { color: var(--color-ivory); } :focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(185, 147, 67, 0.3); color: var(--color-ivory); } /* -- 3. Typography -------------------------------------------------- */ .display { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-display); letter-spacing: var(--track-display); color: var(--ink); margin: 0; text-wrap: balance; } .display--xl { font-size: var(--size-display-xl); letter-spacing: 0.06em; } .display--lg { font-size: var(--size-display-lg); } .display--md { font-size: var(--size-display-md); } .display--sm { font-size: var(--size-display-sm); letter-spacing: 0.16em; text-transform: uppercase; } .kicker { font-family: var(--font-body); font-size: var(--size-index); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--color-gold); margin: 0 0 var(--space-3); } .kicker::before { content: ''; display: inline-block; width: 2.2rem; height: 1px; margin-right: 0.9rem; vertical-align: 0.32em; background: currentColor; opacity: 0.6; } .lead { font-family: var(--font-serif); font-size: var(--size-lead); font-weight: 300; line-height: 1.6; color: var(--color-papyrus); max-width: var(--measure); margin: var(--space-4) 0 0; text-wrap: pretty; } .body { max-width: var(--measure); margin: var(--space-4) 0 0; } .body--sm { font-size: 0.94em; color: var(--ink-dim); } .caption { font-family: var(--font-body); font-size: var(--size-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--ink-dim); margin: 0; } .caption--dim { color: rgba(148, 139, 120, 0.6); } .caption--rule { margin-top: var(--space-4); } .caption--rule::before { content: ''; display: block; width: 3.5rem; height: 1px; background: var(--rule); margin: 0 auto var(--space-3); } .pull { margin: var(--space-5) 0; padding: var(--space-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.1vw, 1.6rem); line-height: 1.5; color: var(--color-papyrus); } .pull p { margin: 0; } /* Chinese typography tuning */ html[lang='zh-Hans'] body { line-height: 1.95; } html[lang='zh-Hans'] .display { letter-spacing: 0.12em; } html[lang='zh-Hans'] .display--xl { font-size: clamp(2.4rem, 7vw, 6rem); } html[lang='zh-Hans'] .lead, html[lang='zh-Hans'] .body { text-align: justify; text-justify: inter-ideograph; } html[lang='zh-Hans'] .caption { letter-spacing: 0.18em; } /* -- 4. Atmosphere -------------------------------------------------- */ .dust, .grain, .vignette { position: fixed; inset: 0; z-index: var(--z-atmos); pointer-events: none; } .grain { background-image: url('assets/textures/grain.svg'); background-size: 200px 200px; opacity: 0.05; mix-blend-mode: overlay; } .vignette { background: radial-gradient(130% 100% at 50% 50%, transparent 42%, rgba(7, 8, 7, 0.72) 100%); } /* -- 5. Utilities & controls --------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 0.6rem; left: 50%; transform: translate(-50%, -160%); z-index: 200; padding: 0.7rem 1.4rem; background: var(--color-charcoal); border: 1px solid var(--rule); color: var(--color-ivory); font-size: var(--size-caption); letter-spacing: var(--track-caption); text-transform: uppercase; text-decoration: none; transition: transform var(--dur-1) var(--ease-stone); } .skip-link:focus { transform: translate(-50%, 0); } .btn { --btn-fg: var(--color-papyrus); --btn-bd: var(--rule); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 44px; padding: 0.85rem 1.9rem; background: transparent; border: 1px solid var(--btn-bd); color: var(--btn-fg); font-family: var(--font-body); font-size: var(--size-caption); font-weight: 400; letter-spacing: var(--track-caption); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color var(--dur-1) var(--ease-stone), border-color var(--dur-1) var(--ease-stone), background-color var(--dur-1) var(--ease-stone); } .btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 140% at 50% 120%, rgba(185, 147, 67, 0.22), transparent 70%); opacity: 0; transition: opacity var(--dur-2) var(--ease-stone); pointer-events: none; } .btn:hover { color: var(--color-ivory); border-color: rgba(210, 182, 111, 0.65); } .btn:hover::after { opacity: 1; } .btn[disabled] { opacity: 0.45; cursor: default; } .btn[disabled]:hover::after { opacity: 0; } .btn--gold { --btn-fg: var(--color-gold-light); --btn-bd: rgba(185, 147, 67, 0.5); } .btn--ghost { --btn-fg: var(--ink-dim); --btn-bd: rgba(215, 196, 155, 0.18); padding: 0.7rem 1.2rem; } .btn--seal { padding: 1rem 2.6rem; --btn-fg: var(--color-gold-light); --btn-bd: rgba(185, 147, 67, 0.55); } .btn--icon { min-width: 44px; padding: 0; border-color: transparent; font-size: 1rem; letter-spacing: 0; } .btn--icon:hover { border-color: var(--rule); } .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; border: 1px solid currentColor; } .dot--heart { color: var(--color-oxide); background: rgba(113, 64, 51, 0.6); } .dot--feather { color: var(--color-papyrus); background: rgba(215, 196, 155, 0.5); } .dot--anubis { color: #4a5a5e; background: rgba(74, 90, 94, 0.6); } .dot--thoth { color: #5b7f96; background: rgba(91, 127, 150, 0.5); } /* -- 6. Vol. I — the seal ------------------------------------------ */ .seal { position: fixed; inset: 0; z-index: var(--z-seal); display: grid; place-items: center; padding: var(--gutter); background: radial-gradient(80% 60% at 50% 42%, rgba(185, 147, 67, 0.09), transparent 62%), var(--color-void); text-align: center; transition: opacity var(--dur-3) var(--ease-ritual), visibility var(--dur-3); } .seal[data-state='open'] { opacity: 0; visibility: hidden; pointer-events: none; } .seal__inner { max-width: 46rem; width: 100%; } .seal__book { position: relative; width: min(34rem, 78vw); margin: 0 auto var(--space-5); filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.7)); } .seal__book-img { width: 100%; } .seal__crack { position: absolute; inset: 0; width: 100%; height: 100%; } .seal__crack-line { fill: none; stroke: var(--color-gold-light); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(210, 182, 111, 0.8)); stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .seal.is-breaking .seal__book { animation: seal-tremor 900ms var(--ease-ritual); } @keyframes seal-tremor { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-1.5px, 1px, 0); } 55% { transform: translate3d(1.5px, -1px, 0); } 80% { transform: translate3d(-1px, 0, 0); } } .seal__title { margin: 0; } .seal__title-line { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 5.2vw, 4.2rem); font-weight: 400; letter-spacing: 0.14em; line-height: 1.1; color: var(--ink); } .seal__subtitle { font-family: var(--font-serif); font-size: var(--size-lead); color: var(--color-sandstone); margin: var(--space-3) auto 0; max-width: 34ch; } .seal__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* -- 7. Navigation & index ----------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: transparent; transition: transform var(--dur-2) var(--ease-stone), background-color var(--dur-2) var(--ease-stone), backdrop-filter var(--dur-2) var(--ease-stone), border-color var(--dur-2) var(--ease-stone); border-bottom: 1px solid transparent; } .nav.is-solid { background: rgba(13, 15, 14, 0.72); backdrop-filter: blur(10px) saturate(0.9); border-bottom-color: var(--rule-soft); } .nav.is-hidden { transform: translateY(-102%); } body.is-sealed .nav { opacity: 0; pointer-events: none; } .nav__progress { height: 1px; background: rgba(215, 196, 155, 0.1); } .nav__progress-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(185, 147, 67, 0.35), var(--color-gold-light)); transform-origin: 0 50%; } .nav__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); min-height: var(--nav-h); padding: 0 var(--gutter); } .nav__brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: var(--size-caption); letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-papyrus); text-decoration: none; justify-self: start; } .nav__brand-mark { width: 0.5rem; height: 0.5rem; border: 1px solid var(--color-gold); transform: rotate(45deg); } .nav__brand:hover { color: var(--color-ivory); } .nav__current { justify-self: center; margin: 0; display: flex; align-items: baseline; gap: 0.6rem; font-size: var(--size-index); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; } .nav__current-num { color: var(--color-gold); } .nav__current-name { color: var(--color-papyrus); } .nav__tools { justify-self: end; display: flex; align-items: center; gap: var(--space-1); } .nav__btn { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 0.85rem; background: none; border: 1px solid transparent; font-size: var(--size-index); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--ink-dim); cursor: pointer; transition: color var(--dur-1) var(--ease-stone), border-color var(--dur-1) var(--ease-stone); } .nav__btn:hover { color: var(--color-ivory); border-color: var(--rule-soft); } .nav__lang { opacity: 0.4; transition: opacity var(--dur-1); } .nav__lang-sep { opacity: 0.25; margin: 0 0.2em; } html[lang='en'] .nav__lang[data-lang-en], html[lang='zh-Hans'] .nav__lang[data-lang-zh] { opacity: 1; color: var(--color-gold-light); } .nav__sound-icon { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.75rem; } .nav__sound-icon i { width: 2px; height: 30%; background: currentColor; opacity: 0.5; } .nav__sound-icon i:nth-child(2) { height: 60%; } .nav__sound-icon i:nth-child(3) { height: 40%; } #sound-toggle[aria-pressed='true'] { color: var(--color-gold-light); } #sound-toggle[aria-pressed='true'] .nav__sound-icon i { opacity: 1; animation: sound-bob 2.4s ease-in-out infinite; } #sound-toggle[aria-pressed='true'] .nav__sound-icon i:nth-child(2) { animation-delay: 0.4s; } #sound-toggle[aria-pressed='true'] .nav__sound-icon i:nth-child(3) { animation-delay: 0.8s; } @keyframes sound-bob { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.7); } } /* index overlay */ .index { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(7, 8, 7, 0.94); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--dur-2) var(--ease-stone); } .index.is-open { opacity: 1; } .index__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; filter: saturate(0.6) brightness(0.5); transition: opacity var(--dur-3) var(--ease-ritual); } .index__bg.is-visible { opacity: 0.3; } .index__inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: var(--gutter); overflow-y: auto; overscroll-behavior: contain; } .index__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule-soft); } .index__title { font-family: var(--font-body); font-size: var(--size-caption); font-weight: 400; letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--ink-dim); margin: 0; } .index__list { list-style: none; margin: auto 0; padding: var(--space-5) 0; counter-reset: vol; } .index__item { border-bottom: 1px solid rgba(215, 196, 155, 0.07); } .index__link { display: flex; align-items: baseline; gap: clamp(0.8rem, 3vw, 2.5rem); padding: clamp(0.6rem, 1.6vw, 1.1rem) 0; text-decoration: none; color: var(--color-muted); transition: color var(--dur-1) var(--ease-stone), padding-left var(--dur-2) var(--ease-stone); } .index__link:hover, .index__link:focus-visible { color: var(--ink); padding-left: 0.9rem; } .index__num { font-family: var(--font-display); font-size: var(--size-index); letter-spacing: 0.2em; color: var(--color-gold); min-width: 3.2em; } .index__name { font-family: var(--font-display); font-size: clamp(1.35rem, 4.4vw, 3.1rem); letter-spacing: 0.06em; line-height: 1.15; } .index__link[aria-current='true'] { color: var(--color-gold-light); } .index__link[aria-current='true'] .index__num::after { content: '·'; margin-left: 0.4em; } /* -- 8. Volume scaffolding ------------------------------------------ */ #content { position: relative; z-index: var(--z-content); } .vol { position: relative; padding: var(--space-8) 0; } .vol--title { min-height: 100svh; display: grid; place-items: center; text-align: center; } .vol__frame { position: relative; width: min(100% - (var(--gutter) * 2), 82rem); margin-inline: auto; } .vol__frame--center { text-align: center; } .vol__frame--center .lead, .vol__frame--center .body { margin-inline: auto; } html[lang='zh-Hans'] .vol__frame--center .lead, html[lang='zh-Hans'] .vol__frame--center .body { text-align: center; } .vol__frame--center .kicker { display: inline-block; } /* stone-cut reveal used across the site */ .reveal { opacity: 0; } /* -- 9. Vol. II — creation ------------------------------------------ */ .vol--creation { overflow: hidden; background: linear-gradient(180deg, var(--color-void) 0%, #090d11 55%, #0a1219 100%); } .creation__water { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46vh; opacity: 0.55; } .creation__stars { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; } .creation__sun { position: absolute; left: 50%; top: 46%; width: clamp(9rem, 22vw, 20rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(210, 182, 111, 0.5) 0%, rgba(185, 147, 67, 0.15) 45%, transparent 70%); opacity: 0; filter: blur(2px); } .creation__intro { position: relative; padding-bottom: var(--space-6); } .creation__stages { position: relative; list-style: none; margin: 0 auto; padding: 0; width: min(100% - (var(--gutter) * 2), 62rem); display: grid; gap: var(--space-8); } .creation__stage { position: relative; max-width: var(--measure-narrow); } .creation__stage:nth-child(even) { margin-left: auto; text-align: right; } .creation__stage:nth-child(even) .creation__rule { margin-left: auto; } .creation__stage:nth-child(3) { margin-inline: auto; text-align: center; } .creation__stage:nth-child(3) .creation__rule { margin-inline: auto; } .creation__name { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.6rem); letter-spacing: 0.22em; color: var(--ink); margin: 0; } .creation__role { font-size: var(--size-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--color-gold); margin: var(--space-2) 0 0; } .creation__rule { width: 3rem; height: 1px; background: var(--rule); margin: var(--space-3) 0; } .creation__text { margin: 0; color: var(--ink-body); } /* -- 10. Vol. III — hall of gods ------------------------------------ */ .vol--gods { overflow: hidden; } .colonnade { position: absolute; inset: 0; overflow: hidden; opacity: 0.5; } .colonnade__pillar { position: absolute; top: 0; bottom: 0; width: clamp(2.5rem, 6vw, 6rem); background: linear-gradient(90deg, rgba(40, 37, 31, 0) 0%, rgba(40, 37, 31, 0.85) 22%, rgba(64, 58, 47, 0.55) 50%, rgba(40, 37, 31, 0.85) 78%, rgba(40, 37, 31, 0) 100%); } .colonnade__pillar:nth-child(1) { left: 2%; } .colonnade__pillar:nth-child(2) { left: 16%; } .colonnade__pillar:nth-child(3) { right: 16%; } .colonnade__pillar:nth-child(4) { right: 2%; } .colonnade__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; background: linear-gradient(180deg, transparent, rgba(7, 8, 7, 0.9)); } .gods__intro { margin-bottom: var(--space-7); } .gods { display: grid; gap: var(--space-8); width: min(100% - (var(--gutter) * 2), 84rem); margin-inline: auto; } .god { --god-accent: var(--color-gold); position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; } .god:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .god:nth-child(even) .god__plate { order: 2; } .god:nth-child(even) .god__text { order: 1; text-align: right; } .god:nth-child(even) .god__text .god__meta { justify-content: flex-end; } .god:nth-child(even) .god__text .god__rule { margin-left: auto; } .god:nth-child(even) .god__text .lead { margin-left: auto; } .god__plate { position: relative; overflow: hidden; border: 1px solid var(--rule-soft); background: var(--color-obsidian); } .god__plate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(7, 8, 7, 0.6) 100%); pointer-events: none; } .god__img { width: 100%; } .god__index { position: absolute; top: 0; left: 0; padding: 0.6rem 0.9rem; font-family: var(--font-display); font-size: var(--size-index); letter-spacing: 0.3em; color: var(--color-gold); background: rgba(7, 8, 7, 0.6); border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); z-index: 1; } .god__text { position: relative; } .god__name { font-family: var(--font-display); font-size: clamp(2rem, 5.2vw, 4.2rem); font-weight: 400; letter-spacing: 0.08em; line-height: 1; color: var(--ink); margin: 0; } .god__name-zh { display: block; font-family: var(--font-serif); font-size: 0.36em; letter-spacing: 0.5em; color: var(--color-sandstone); margin-top: 0.6em; } .god__title { font-size: var(--size-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--god-accent); margin: var(--space-3) 0 0; } .god__rule { width: 4rem; height: 1px; background: var(--rule); margin: var(--space-4) 0; } .god__desc { font-family: var(--font-serif); font-size: var(--size-lead); color: var(--color-papyrus); margin: 0; max-width: 38ch; } .god__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; } .god__meta div { display: flex; flex-direction: column; gap: 0.15rem; } .god__meta dt { font-size: var(--size-index); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(148, 139, 120, 0.7); } .god__meta dd { margin: 0; font-size: 0.92em; color: var(--color-papyrus); } .god__cta { margin-top: var(--space-5); } /* record dialog */ .record { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 3rem); } .record__scrim { position: absolute; inset: 0; background: rgba(7, 8, 7, 0.88); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur-2) var(--ease-stone); } .record.is-open .record__scrim { opacity: 1; } .record__panel { position: relative; width: min(100%, 68rem); max-height: min(92svh, 60rem); overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgba(23, 25, 22, 0.98), rgba(13, 15, 14, 0.99)); border: 1px solid var(--rule); opacity: 0; transform: translateY(1.5rem); transition: opacity var(--dur-2) var(--ease-ritual), transform var(--dur-2) var(--ease-ritual); } .record.is-open .record__panel { opacity: 1; transform: none; } .record__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; background: rgba(7, 8, 7, 0.6); } .record__body { padding: clamp(1.5rem, 4vw, 3.5rem); } .record__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; } .record__figure { margin: 0; border: 1px solid var(--rule-soft); background: var(--color-void); } .record__cat { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--size-index); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold); padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule-soft); margin-bottom: var(--space-4); } .record__name { font-family: var(--font-display); font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: 0.08em; line-height: 1; color: var(--ink); margin: 0; } .record__name span { display: block; font-family: var(--font-serif); font-size: 0.38em; letter-spacing: 0.42em; color: var(--color-sandstone); margin-top: 0.55em; } .record__title { font-size: var(--size-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--record-accent, var(--color-gold)); margin: var(--space-3) 0 0; } .record__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 1.9vw, 1.4rem); color: var(--color-papyrus); border-left: 1px solid var(--rule); padding-left: var(--space-3); margin: var(--space-4) 0 0; } .record__prose { margin-top: var(--space-5); } .record__prose p { margin: 0 0 var(--space-3); } .record__grid { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); } .record__grid div { min-width: 0; } .record__grid dt { font-size: var(--size-index); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(148, 139, 120, 0.75); margin-bottom: 0.35rem; } .record__grid dd { margin: 0; color: var(--color-papyrus); font-size: 0.95em; } .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .tags li { border: 1px solid var(--rule-soft); padding: 0.2rem 0.6rem; font-size: var(--size-index); letter-spacing: 0.12em; color: var(--color-papyrus); } .record__nav { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) clamp(1.5rem, 4vw, 3.5rem); background: rgba(13, 15, 14, 0.96); border-top: 1px solid var(--rule-soft); } /* -- 11. Vol. IV — the broken king ---------------------------------- */ .vol--myth { overflow: hidden; } .myth__intro { margin-bottom: var(--space-7); } .leaves { list-style: none; margin: 0 auto; padding: 0; width: min(100% - (var(--gutter) * 2), 78rem); display: grid; gap: var(--space-6); } .leaf { position: relative; padding: clamp(1.6rem, 4vw, 3.2rem); width: min(100%, 40rem); background: linear-gradient(180deg, rgba(40, 37, 31, 0.92), rgba(23, 25, 22, 0.92)); background-image: url('assets/textures/papyrus.svg'); background-size: 380px; background-blend-mode: overlay; border: 1px solid rgba(215, 196, 155, 0.1); color: var(--ink-body); /* torn edge */ clip-path: polygon( 0% 2%, 3% 0%, 24% 1.5%, 48% 0.4%, 71% 2%, 92% 0.6%, 100% 2.4%, 98.6% 26%, 100% 51%, 98.8% 74%, 100% 97%, 93% 100%, 68% 98.4%, 43% 100%, 19% 98.2%, 2% 100%, 0.8% 76%, 0% 50%, 1.2% 25%); } .leaf:nth-child(even) { margin-left: auto; } .leaf:nth-child(3n) { margin-inline: auto; } .leaf__num { font-family: var(--font-display); font-size: var(--size-index); letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-oxide); margin: 0 0 var(--space-2); } .leaf__title { font-family: var(--font-display); font-size: clamp(1.3rem, 3.2vw, 2.2rem); letter-spacing: 0.14em; color: var(--ink); margin: 0 0 var(--space-3); } .leaf__text { margin: 0; } /* the wound + the golden suture */ .leaf::before { content: ''; position: absolute; top: 12%; bottom: 12%; left: -1px; width: 2px; background: linear-gradient(180deg, transparent, rgba(113, 64, 51, 0.9), transparent); } .leaf__suture { position: absolute; top: 0; bottom: 0; left: clamp(0.7rem, 2vw, 1.4rem); width: 12px; opacity: 0; } .leaf__suture path { fill: none; stroke: var(--color-gold); stroke-width: 1.2; } .djed { position: relative; margin: var(--space-8) auto 0; text-align: center; color: var(--color-gold); } .djed__svg { width: clamp(4.5rem, 10vw, 8rem); height: auto; margin: 0 auto var(--space-5); } .djed__p { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .myth__closing { color: var(--ink); } /* -- 12. Vol. V — the night journey --------------------------------- */ .vol--night { background: linear-gradient(180deg, #070807, #060a0e 40%, #070807); padding-bottom: 0; } .night__pin { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .night__intro { padding-block: var(--space-6); } .night__hint { margin-top: var(--space-4); color: var(--color-gold); } .night__track { position: relative; padding-block: var(--space-5) var(--space-7); } .night__hours { display: flex; align-items: stretch; gap: clamp(1.5rem, 4vw, 4rem); list-style: none; margin: 0; padding-inline: var(--gutter); will-change: transform; } .night__hour { flex: 0 0 min(22rem, 74vw); border-left: 1px solid var(--rule-soft); padding-left: var(--space-3); } .night__hour-num { font-family: var(--font-display); font-size: var(--size-index); letter-spacing: 0.3em; color: var(--color-gold); margin: 0 0 var(--space-2); } .night__hour-title { font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.75rem); letter-spacing: 0.1em; color: var(--ink); margin: 0 0 var(--space-3); } .night__hour-text { margin: 0; font-size: 0.95em; } .night__hour--peril { border-left-color: rgba(113, 64, 51, 0.7); } .night__hour--peril .night__hour-num { color: var(--color-oxide); } .night__barque { position: absolute; left: 50%; bottom: 0; width: clamp(11rem, 22vw, 19rem); translate: -50% 0; opacity: 0.9; filter: drop-shadow(0 0 2rem rgba(185, 147, 67, 0.25)); pointer-events: none; } .night__serpent { position: absolute; left: 0; bottom: 12%; width: 180%; max-width: none; opacity: 0; pointer-events: none; } /* -- 13. Vol. VI — the weighing ------------------------------------- */ .vol--scales { background: linear-gradient(180deg, #070807, #0c0d0b 50%, #070807); } .scales__intro { margin-bottom: var(--space-6); } .scales { margin: 0 auto; width: min(100% - (var(--gutter) * 2), 62rem); } .scales__svg { width: 100%; height: auto; } .scales__svg g { fill: none; stroke-linecap: round; stroke-linejoin: round; } .scales__hall { stroke: rgba(215, 196, 155, 0.1); stroke-width: 1.5; } .scales__figures { stroke: rgba(148, 139, 120, 0.4); stroke-width: 2; } .scales__osiris { fill: rgba(40, 88, 73, 0.35); stroke: rgba(185, 147, 67, 0.5); } .scales__ammit { stroke: rgba(113, 64, 51, 0.55); } .scales__rig { stroke: var(--color-gold); stroke-width: 2.4; } .scales__anubis { stroke: rgba(148, 139, 120, 0.75); stroke-width: 2.2; } .scales__beam { transform-origin: 450px 120px; } .scales__heart path { fill: rgba(113, 64, 51, 0.55); stroke: var(--color-oxide); } .scales__feather { stroke: var(--color-papyrus); stroke-width: 2; } .scales__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: center; margin-top: var(--space-4); } .scales__legend-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--size-index); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .scales__panel { text-align: center; margin-top: var(--space-6); padding-inline: var(--gutter); } .scales__result { min-height: 5.5rem; margin: var(--space-5) auto 0; max-width: 44ch; } .scales__verdict { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.9rem); letter-spacing: 0.08em; color: var(--color-gold-light); margin: 0; } .scales__gloss { margin: var(--space-3) 0 0; color: var(--ink-dim); font-size: 0.95em; } .scales__note { margin-top: var(--space-5); opacity: 0.6; max-width: 52ch; margin-inline: auto; } body.is-weighing { --dust-quiet: 1; } /* -- 14. Vol. VII — signs ------------------------------------------- */ .signs { list-style: none; margin: var(--space-7) auto 0; padding: 0; width: min(100% - (var(--gutter) * 2), 84rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); } .sign { position: relative; background: var(--color-obsidian); transition: background-color var(--dur-2) var(--ease-stone); } .sign.is-open { background: #101312; } .sign__btn { display: block; width: 100%; padding: clamp(1.4rem, 3vw, 2.4rem); background: none; border: 0; text-align: left; cursor: pointer; } .sign__glow { position: absolute; top: 18%; left: 50%; width: 62%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(185, 147, 67, 0.16), transparent 68%); opacity: 0; transition: opacity var(--dur-2) var(--ease-stone); pointer-events: none; } .sign:hover .sign__glow, .sign.is-open .sign__glow { opacity: 1; } .sign__art { position: relative; width: clamp(5rem, 9vw, 7rem); margin: 0 auto var(--space-4); transition: transform 700ms var(--ease-stone); } .sign__art svg { width: 100%; height: auto; overflow: visible; } .sign__art [data-draw] { fill: none; stroke: var(--color-gold); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-2) var(--ease-stone); } .sign:hover .sign__art [data-draw], .sign.is-open .sign__art [data-draw] { stroke: var(--color-gold-light); } .sign__cat { font-family: var(--font-mono); font-size: var(--size-index); letter-spacing: 0.16em; color: rgba(148, 139, 120, 0.65); margin: 0 0 var(--space-2); text-align: center; } .sign__name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.9vw, 1.35rem); letter-spacing: 0.14em; color: var(--ink); margin: 0; text-align: center; } .sign__name span { display: block; font-family: var(--font-serif); font-size: 0.78em; letter-spacing: 0.3em; color: var(--color-sandstone); margin-top: 0.35em; } .sign__meaning { text-align: center; font-size: var(--size-index); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin: var(--space-3) 0 0; } .sign__record { padding: 0 clamp(1.4rem, 3vw, 2.4rem); display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-ritual); } .sign.is-open .sign__record { grid-template-rows: 1fr; } .sign__record > div { overflow: hidden; } .sign__record dl { margin: 0 0 var(--space-3); } .sign__record dt { font-size: var(--size-index); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(148, 139, 120, 0.7); margin-top: var(--space-2); } .sign__record dd { margin: 0.2rem 0 0; color: var(--color-papyrus); font-size: 0.92em; } .sign__text { margin: 0; padding-bottom: clamp(1.4rem, 3vw, 2.4rem); font-size: 0.94em; } .signs__hint { text-align: center; margin-top: var(--space-4); } /* -- 15. Vol. VIII — lineage ---------------------------------------- */ .vol--lineage { background: linear-gradient(180deg, #070807, #080b10 50%, #070807); } .lineage { width: min(100% - (var(--gutter) * 2), 84rem); margin: var(--space-7) auto 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .lineage__map { position: relative; aspect-ratio: 4 / 3.4; border: 1px solid var(--rule-soft); background: radial-gradient(80% 70% at 50% 40%, rgba(23, 68, 95, 0.16), transparent 70%), var(--color-void); } .lineage__svg { position: absolute; inset: 0; width: 100%; height: 100%; } .lineage__edge { stroke: rgba(215, 196, 155, 0.16); stroke-width: 0.16; fill: none; vector-effect: non-scaling-stroke; transition: stroke var(--dur-2) var(--ease-stone), opacity var(--dur-2) var(--ease-stone); } .lineage__edge--union { stroke-dasharray: 1.2 1.2; } .lineage__edge.is-lit { stroke: var(--color-gold); opacity: 1; } .lineage__map.has-selection .lineage__edge { opacity: 0.22; } .lineage__map.has-selection .lineage__edge.is-lit { opacity: 1; } .lineage__nodes { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; } .lineage__node { position: absolute; translate: -50% -50%; } .star { display: grid; justify-items: center; gap: 0.45rem; padding: 0.5rem 0.6rem; background: none; border: 1px solid transparent; cursor: pointer; color: var(--ink-dim); transition: color var(--dur-1) var(--ease-stone), opacity var(--dur-2) var(--ease-stone); } .star__dot { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-papyrus); box-shadow: 0 0 0.6rem rgba(215, 196, 155, 0.5); transition: background-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-stone); } .star[data-mag='3'] .star__dot { width: 0.7rem; height: 0.7rem; } .star__label { font-family: var(--font-display); font-size: var(--size-index); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .star:hover, .star:focus-visible { color: var(--ink); } .star:hover .star__dot { transform: scale(1.3); } .star[aria-pressed='true'] { color: var(--color-gold-light); } .star[aria-pressed='true'] .star__dot { background: var(--color-gold-light); box-shadow: 0 0 1.4rem rgba(210, 182, 111, 0.9); transform: scale(1.4); } .lineage__map.has-selection .star:not([aria-pressed='true']):not(.is-related) { opacity: 0.3; } .star.is-related { color: var(--color-papyrus); } .lineage__aside { border: 1px solid var(--rule-soft); padding: clamp(1.2rem, 3vw, 2rem); background: rgba(13, 15, 14, 0.7); min-height: 16rem; } .lineage__aside .caption { color: var(--color-gold); } .lineage__name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: 0.1em; color: var(--ink); margin: var(--space-2) 0 0; } .lineage__name span { display: block; font-family: var(--font-serif); font-size: 0.6em; letter-spacing: 0.35em; color: var(--color-sandstone); margin-top: 0.4em; } .lineage__aside dl { margin: var(--space-4) 0 0; } .lineage__aside dt { font-size: var(--size-index); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(148, 139, 120, 0.7); margin-top: var(--space-3); } .lineage__aside dd { margin: 0.2rem 0 0; color: var(--color-papyrus); font-size: 0.93em; } .lineage__aside .btn { margin-top: var(--space-4); } .lineage__hint { text-align: center; margin-top: var(--space-4); } /* mobile generation list, hidden on desktop */ .lineage__gens { display: none; } /* -- 16. Vol. IX — field of reeds ----------------------------------- */ .vol--reeds { position: relative; overflow: hidden; background: linear-gradient(180deg, #070807 0%, #12140f 40%, #1b1c14 100%); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .reeds__sky { position: absolute; inset: 0; background: radial-gradient(80% 55% at 50% 78%, rgba(210, 182, 111, 0.22), transparent 65%); opacity: 0; } .reeds__art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; opacity: 0.55; } .reeds__text { position: relative; padding-block: var(--space-6); } .reeds__end { margin-top: var(--space-5); color: var(--color-gold-light); } .reeds__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .closing-book { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .closing-book__leaf { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, rgba(13, 15, 14, 0.98), rgba(23, 25, 22, 0.9)); transform: scaleX(0); } .closing-book__leaf--l { left: 0; transform-origin: left center; } .closing-book__leaf--r { right: 0; transform-origin: right center; } /* -- 17. Footer & floating controls --------------------------------- */ .colophon { width: min(100% - (var(--gutter) * 2), 62rem); margin: 0 auto; padding: var(--space-6) 0 var(--space-7); border-top: 1px solid var(--rule-soft); text-align: center; display: grid; gap: var(--space-2); text-transform: none; letter-spacing: 0.04em; } .colophon .caption { text-transform: none; letter-spacing: 0.03em; line-height: 1.7; } .to-top { position: fixed; right: clamp(0.9rem, 2vw, 2rem); bottom: clamp(0.9rem, 2vw, 2rem); z-index: 50; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(13, 15, 14, 0.8); border: 1px solid var(--rule); color: var(--color-gold-light); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity var(--dur-2) var(--ease-stone), transform var(--dur-2) var(--ease-stone), visibility var(--dur-2) linear; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .noscript { position: relative; z-index: 5; width: min(100% - 2rem, 46rem); margin: 8rem auto; padding: 1.5rem; border: 1px solid var(--rule); color: var(--color-papyrus); } .boot-warning { position: fixed; inset: auto 0 0 0; z-index: 300; padding: 1.25rem var(--gutter); background: var(--color-charcoal); border-top: 1px solid var(--rule); color: var(--color-papyrus); font-size: 0.9rem; } .boot-warning p { margin: 0 0 0.4rem; } .boot-warning code { font-family: var(--font-mono); color: var(--color-gold-light); } body.boot-failed .seal { display: none; } body.boot-failed { overflow: auto; } /* -- 18. Responsive -------------------------------------------------- */ @media (max-width: 1100px) { .lineage { grid-template-columns: 1fr; } .lineage__map { aspect-ratio: 4 / 4.2; } .record__head { grid-template-columns: 1fr; } .record__figure { max-width: 22rem; } } @media (max-width: 860px) { :root { --space-7: 5rem; --space-8: 6.5rem; --nav-h: 3.6rem; } .nav__row { grid-template-columns: 1fr auto; row-gap: 0; } .nav__current { display: none; } .god, .god:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-4); } .god:nth-child(even) .god__plate { order: 0; } .god:nth-child(even) .god__text { order: 0; text-align: left; } .god:nth-child(even) .god__text .god__rule, .god:nth-child(even) .god__text .lead { margin-left: 0; } .god__plate { max-width: 26rem; } .creation__stage, .creation__stage:nth-child(even), .creation__stage:nth-child(3) { margin: 0; text-align: left; max-width: none; } .creation__stage:nth-child(even) .creation__rule, .creation__stage:nth-child(3) .creation__rule { margin-inline: 0; } .creation__stages { gap: var(--space-6); } .leaf, .leaf:nth-child(even), .leaf:nth-child(3n) { width: 100%; margin: 0; } /* the horizontal journey becomes a vertical read */ .night__pin { min-height: 0; display: block; overflow: visible; } .night__track { padding-block: var(--space-5); } .night__hours { display: grid; gap: var(--space-5); transform: none !important; padding-inline: 0; } .night__hour { flex: none; } .night__barque { position: relative; left: auto; bottom: auto; translate: none; margin: var(--space-5) auto 0; width: min(15rem, 60vw); } .night__serpent { display: none; } .index__link:hover, .index__link:focus-visible { padding-left: 0; } } @media (max-width: 640px) { .signs { grid-template-columns: 1fr; } .record__panel { max-height: 94svh; } .record__nav { padding-inline: 1.25rem; } .record__nav .btn { flex: 1 1 auto; padding-inline: 0.6rem; } .record__count { display: none; } .lineage__map { display: none; } .lineage__gens { display: block; } .lineage__gen { border-top: 1px solid var(--rule-soft); } .lineage__gen summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 0.95rem 0.25rem; min-height: 44px; cursor: pointer; font-size: var(--size-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--color-papyrus); } .lineage__gen summary::-webkit-details-marker { display: none; } .lineage__gen summary::after { content: '+'; color: var(--color-gold); } .lineage__gen[open] summary::after { content: '–'; } .lineage__gen ul { list-style: none; margin: 0 0 var(--space-3); padding: 0 0 0 var(--space-3); border-left: 1px solid var(--rule-soft); } .lineage__gen li { padding: 0.15rem 0; } .lineage__gen .star { justify-items: start; grid-auto-flow: column; justify-content: start; min-height: 44px; } .scales__legend { gap: var(--space-2); } .colophon { padding-bottom: var(--space-6); } } @media (max-width: 400px) { .nav__btn { padding-inline: 0.55rem; } .btn { padding-inline: 1.2rem; } } @media (hover: none) { .btn:hover::after { opacity: 0; } } /* -- 19. Reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .dust { display: none; } .grain { opacity: 0.03; } .reveal { opacity: 1 !important; transform: none !important; } .creation__stars, .creation__sun, .reeds__sky { opacity: 1; } .leaf__suture { opacity: 1; } .night__hours { transform: none !important; } .closing-book__leaf { display: none; } .seal__crack-line { display: none; } } /* honour the JS-level toggle as well (body[data-motion='reduced']) */ body[data-motion='reduced'] .dust { display: none; } body[data-motion='reduced'] .reveal { opacity: 1 !important; transform: none !important; }