generated from nhcarrigan/template
1257 lines
44 KiB
HTML
1257 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Naomi's Grimoire</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta
|
|
name="description"
|
|
content="Naomi's personal grimoire - a collection of spells for the tender moments. Comfort, grief, new beginnings, the long nights, and the quiet magic of surviving another hard day."
|
|
/>
|
|
<script
|
|
src="https://cdn.nhcarrigan.com/headers/index.js"
|
|
async
|
|
defer
|
|
></script>
|
|
<style>
|
|
/* ========== BASE ========== */
|
|
|
|
main {
|
|
z-index: 1;
|
|
}
|
|
|
|
footer {
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ========== BOOK VIEWPORT ========== */
|
|
|
|
.book-viewport {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.25em;
|
|
padding: 0.5em 0 2em;
|
|
}
|
|
|
|
/* ========== BOOK CONTAINER ========== */
|
|
|
|
.book-container {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
display: flex;
|
|
border-radius: 3px 12px 12px 3px;
|
|
box-shadow:
|
|
-8px 4px 22px rgba(0, 0, 0, 0.38),
|
|
6px 8px 28px rgba(0, 0, 0, 0.22),
|
|
inset 0 0 0 1px rgba(90, 45, 90, 0.12);
|
|
background: #f5ede0;
|
|
}
|
|
|
|
/* ========== BOOK SPINE ========== */
|
|
|
|
.book-spine {
|
|
width: 22px;
|
|
flex-shrink: 0;
|
|
background: linear-gradient(
|
|
to right,
|
|
#2d0d2d 0%,
|
|
#5a2d5a 38%,
|
|
#7a3d7a 52%,
|
|
#5a2d5a 68%,
|
|
#2d0d2d 100%
|
|
);
|
|
border-radius: 3px 0 0 3px;
|
|
box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ========== BOOK PAGES WRAPPER ========== */
|
|
|
|
.book-pages {
|
|
flex: 1;
|
|
position: relative;
|
|
perspective: 1200px;
|
|
border-radius: 0 10px 10px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ========== INDIVIDUAL PAGE ========== */
|
|
|
|
.book-page {
|
|
display: none;
|
|
padding: 2.5em 3em;
|
|
min-height: 60vh;
|
|
max-height: 78vh;
|
|
overflow-y: auto;
|
|
background: radial-gradient(
|
|
ellipse at 10% 8%,
|
|
rgba(255, 248, 232, 0.65) 0%,
|
|
transparent 58%
|
|
),
|
|
radial-gradient(
|
|
ellipse at 88% 92%,
|
|
rgba(232, 216, 195, 0.45) 0%,
|
|
transparent 55%
|
|
),
|
|
#f5ede0;
|
|
backface-visibility: hidden;
|
|
transform-origin: left center;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(130, 80, 120, 0.35) transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.book-page::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.book-page::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.book-page::-webkit-scrollbar-thumb {
|
|
background: rgba(130, 80, 120, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.book-page.active {
|
|
display: block;
|
|
}
|
|
|
|
/* ========== PAGE FLIP ANIMATIONS ========== */
|
|
|
|
.flip-out-fwd {
|
|
animation: flipOutFwd 0.32s ease-in forwards;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.flip-in-fwd {
|
|
animation: flipInFwd 0.36s ease-out forwards;
|
|
transform-origin: right center;
|
|
}
|
|
|
|
.flip-out-bwd {
|
|
animation: flipOutBwd 0.32s ease-in forwards;
|
|
transform-origin: right center;
|
|
}
|
|
|
|
.flip-in-bwd {
|
|
animation: flipInBwd 0.36s ease-out forwards;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
@keyframes flipOutFwd {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: rotateY(-88deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipInFwd {
|
|
0% {
|
|
transform: rotateY(88deg);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutBwd {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: rotateY(88deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipInBwd {
|
|
0% {
|
|
transform: rotateY(-88deg);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ========== BOOK CONTROLS ========== */
|
|
|
|
.book-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5em;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.btn-turn {
|
|
background: rgba(212, 165, 199, 0.1);
|
|
border: 1px solid var(--witch-plum);
|
|
color: var(--witch-purple);
|
|
padding: 0.5em 1.4em;
|
|
border-radius: 8px;
|
|
font-size: 0.88rem;
|
|
font-family: 'Griffy', cursive;
|
|
letter-spacing: 0.05em;
|
|
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
|
|
transition:
|
|
background 0.2s ease,
|
|
transform 0.1s ease;
|
|
min-width: 130px;
|
|
}
|
|
|
|
.btn-turn:hover:not(:disabled) {
|
|
background: rgba(212, 165, 199, 0.24);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-turn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.page-indicator {
|
|
font-size: 0.82rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
letter-spacing: 0.06em;
|
|
min-width: 180px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ========== COVER PAGE ========== */
|
|
|
|
.cover-frame {
|
|
border: 1px solid rgba(130, 80, 120, 0.28);
|
|
padding: 3em 2em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
min-height: 52vh;
|
|
gap: 0.4em;
|
|
position: relative;
|
|
}
|
|
|
|
.cover-frame::before {
|
|
content: '✦';
|
|
position: absolute;
|
|
top: 0.7em;
|
|
left: 1em;
|
|
color: var(--witch-plum);
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.cover-frame::after {
|
|
content: '✦';
|
|
position: absolute;
|
|
bottom: 0.7em;
|
|
right: 1em;
|
|
color: var(--witch-plum);
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.cover-seal {
|
|
font-size: 3rem;
|
|
margin-bottom: 0.35em;
|
|
display: block;
|
|
}
|
|
|
|
.cover-ornament {
|
|
font-size: 0.9rem;
|
|
color: var(--witch-plum);
|
|
opacity: 0.55;
|
|
letter-spacing: 0.55em;
|
|
margin: 0.1em 0;
|
|
}
|
|
|
|
.cover-title {
|
|
font-family: 'Griffy', cursive;
|
|
font-size: 2.8rem;
|
|
letter-spacing: 0.08em;
|
|
margin: 0.15em 0 0.1em;
|
|
}
|
|
|
|
.cover-subtitle {
|
|
font-size: 1rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
max-width: 420px;
|
|
line-height: 1.65;
|
|
margin: 0.2em 0;
|
|
}
|
|
|
|
.cover-edition {
|
|
font-size: 0.76rem;
|
|
color: var(--witch-plum);
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
/* ========== TABLE OF CONTENTS ========== */
|
|
|
|
.toc-heading {
|
|
font-size: 1.4rem;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 0.25em;
|
|
border-bottom: 2px solid var(--witch-plum);
|
|
padding-bottom: 0.4em;
|
|
}
|
|
|
|
.toc-intro {
|
|
font-size: 0.88rem;
|
|
font-style: italic;
|
|
color: var(--witch-plum);
|
|
margin-bottom: 1.75em;
|
|
}
|
|
|
|
.toc-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.toc-list li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.75em;
|
|
padding: 0.7em 0;
|
|
border-bottom: 1px solid rgba(212, 165, 199, 0.2);
|
|
}
|
|
|
|
.toc-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.toc-list .toc-num {
|
|
font-family: 'Griffy', cursive;
|
|
font-size: 0.75rem;
|
|
color: var(--witch-plum);
|
|
min-width: 1.8em;
|
|
text-align: right;
|
|
opacity: 0.65;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toc-list a {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--witch-purple);
|
|
text-decoration: none;
|
|
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
|
|
}
|
|
|
|
.toc-list a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.toc-list .toc-sub {
|
|
font-size: 0.82rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
margin-left: auto;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
max-width: 240px;
|
|
}
|
|
|
|
/* ========== BOOK HEADER ========== */
|
|
|
|
.book-header {
|
|
border-bottom: 2px solid var(--witch-plum);
|
|
padding-bottom: 0.75em;
|
|
margin-bottom: 1.75em;
|
|
}
|
|
|
|
.book-number {
|
|
font-size: 0.75rem;
|
|
color: var(--witch-plum);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
.book-header h2 {
|
|
font-size: 2rem;
|
|
letter-spacing: 0.06em;
|
|
margin: 0 0 0.3em;
|
|
}
|
|
|
|
.book-description {
|
|
font-size: 0.9rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ========== SPELL SIGIL ========== */
|
|
|
|
.spell-sigil-large {
|
|
font-size: 2.5rem;
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 0 1.5em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ========== SPELL STANZAS ========== */
|
|
|
|
.spell-stanza {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.spell-stanza p {
|
|
margin: 0 0 0.4em;
|
|
font-size: 0.96rem;
|
|
line-height: 1.9;
|
|
font-style: italic;
|
|
color: #3b2a10;
|
|
}
|
|
|
|
.spell-stanza p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ========== COLOPHON ========== */
|
|
|
|
.colophon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
min-height: 50vh;
|
|
padding: 2em 1em;
|
|
font-size: 0.88rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
line-height: 2;
|
|
}
|
|
|
|
.colophon-seal {
|
|
font-size: 2.5rem;
|
|
display: block;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.colophon hr {
|
|
border: none;
|
|
border-top: 1px solid rgba(212, 165, 199, 0.4);
|
|
width: 50%;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
/* ========== RESPONSIVE ========== */
|
|
|
|
@media (max-width: 640px) {
|
|
.book-spine {
|
|
width: 12px;
|
|
}
|
|
|
|
.book-page {
|
|
padding: 1.5em 1.25em;
|
|
}
|
|
|
|
.cover-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.cover-frame {
|
|
padding: 2em 1em;
|
|
}
|
|
|
|
.btn-turn {
|
|
padding: 0.45em 0.75em;
|
|
font-size: 0.8rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.toc-list .toc-sub {
|
|
display: none;
|
|
}
|
|
|
|
.book-controls {
|
|
gap: 0.75em;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="book-viewport">
|
|
|
|
<!-- THE BOOK -->
|
|
<div class="book-container" role="region" aria-label="Naomi's Grimoire">
|
|
<div class="book-spine" aria-hidden="true"></div>
|
|
<div class="book-pages">
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 0: COVER -->
|
|
<!-- ============================== -->
|
|
<div class="book-page active" id="pg-cover" role="article" aria-label="Cover">
|
|
<div class="cover-frame">
|
|
<span class="cover-seal" aria-hidden="true">🕯️📖🕯️</span>
|
|
<p class="cover-ornament" aria-hidden="true">✦ ✦ ✦</p>
|
|
<h1 class="cover-title">Naomi's Grimoire</h1>
|
|
<p class="cover-ornament" aria-hidden="true">✦ ✦ ✦</p>
|
|
<p class="cover-subtitle">
|
|
A personal book of spells for the tender moments.<br />
|
|
For comfort, grief, new beginnings, and the quiet magic<br />
|
|
of surviving another hard day.
|
|
</p>
|
|
<p class="cover-edition">
|
|
First Edition - Still Growing<br />
|
|
Written by Naomi Carrigan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 1: TABLE OF CONTENTS -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-toc" role="article" aria-label="Table of Contents">
|
|
<h2 class="toc-heading">📜 The Spells</h2>
|
|
<p class="toc-intro">Twelve spells. Not for grand workings - for the ordinary moments that secretly require the most magic.</p>
|
|
<nav aria-label="Spells of the Grimoire">
|
|
<ol class="toc-list">
|
|
<li>
|
|
<span class="toc-num">I</span>
|
|
<a href="#" data-goto-page="2">Spell for Comfort & Protection Overnight</a>
|
|
<span class="toc-sub">By candle's glow and silver thread.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">II</span>
|
|
<a href="#" data-goto-page="3">Spell for Therapy Sessions</a>
|
|
<span class="toc-sub">You do not have to carry theirs.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">III</span>
|
|
<a href="#" data-goto-page="4">Spell for When Sleep Will Not Come</a>
|
|
<span class="toc-sub">Let the trying go, and bend.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">IV</span>
|
|
<a href="#" data-goto-page="5">Spell for Imposter Syndrome</a>
|
|
<span class="toc-sub">You're here because you belong here.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">V</span>
|
|
<a href="#" data-goto-page="6">Spell for Grief</a>
|
|
<span class="toc-sub">What you grieve was worth the grief.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">VI</span>
|
|
<a href="#" data-goto-page="7">Spell for Dysphoria</a>
|
|
<span class="toc-sub">The person you are building is still standing.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">VII</span>
|
|
<a href="#" data-goto-page="8">Spell for a New Beginning</a>
|
|
<span class="toc-sub">Let courage be the thing that moves your feet.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">VIII</span>
|
|
<a href="#" data-goto-page="9">Spell for a Panic Attack</a>
|
|
<span class="toc-sub">Let the wave do what waves do. Let it crest.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">IX</span>
|
|
<a href="#" data-goto-page="10">Spell for Burnout</a>
|
|
<span class="toc-sub">Let care become the work.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">X</span>
|
|
<a href="#" data-goto-page="11">Spell for Self-Forgiveness</a>
|
|
<span class="toc-sub">Let the verdict leave your hand.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">XI</span>
|
|
<a href="#" data-goto-page="12">Spell for a Loved One in Pain</a>
|
|
<span class="toc-sub">Let your being here be something.</span>
|
|
</li>
|
|
<li>
|
|
<span class="toc-num">XII</span>
|
|
<a href="#" data-goto-page="13">Spell for Creative Block</a>
|
|
<span class="toc-sub">The well refills in darkness.</span>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 2: SPELL I -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-1" role="article" aria-label="Spell for Comfort and Protection Overnight">
|
|
<div class="book-header">
|
|
<span class="book-number">The First Spell</span>
|
|
<h2>Comfort & Protection Overnight</h2>
|
|
<p class="book-description">For difficult nights · to be spoken at candle's light</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🌙</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By candle's glow and silver thread,<br />
|
|
By every gentle word once said,<br />
|
|
By moonlight pooled upon the floor<br />
|
|
Let sorrow slip beneath the door.
|
|
</p>
|
|
<p>
|
|
Let quiet wrap you, soft as snow,<br />
|
|
Let warmth rise where the shadows grow,<br />
|
|
Let breath come slow, let worry still,<br />
|
|
Let rest come down of its own will.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By hearth-smoke curling toward the sky,<br />
|
|
By lullabies the willows sigh,<br />
|
|
By every star that learned your name,<br />
|
|
Let stillness quench the restless flame.
|
|
</p>
|
|
<p>
|
|
Let hands unclench, let shoulders fall,<br />
|
|
Let silence answer every call,<br />
|
|
Let tender things find you anew,<br />
|
|
Let comfort settle soft as dew.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By threads of fate the Norns have spun,<br />
|
|
By every battle softly won,<br />
|
|
By all the love still yet to come,<br />
|
|
Let peace take root where fears succumb.
|
|
</p>
|
|
<p>
|
|
Let eyes grow heavy, sweet and slow,<br />
|
|
Let dreaming carry where you go,<br />
|
|
Let morning find you whole and bright,<br />
|
|
Safe kept within the arms of night~
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 3: SPELL II -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-2" role="article" aria-label="Spell for Therapy Sessions">
|
|
<div class="book-header">
|
|
<span class="book-number">The Second Spell</span>
|
|
<h2>Therapy Sessions</h2>
|
|
<p class="book-description">For after the session · when you have given enough for today</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🫂</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the weight of words you've had to share,<br />
|
|
By the strangers' eyes, the open air,<br />
|
|
By every truth dragged into light,<br />
|
|
Let softness find you here tonight.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the tremor in your quiet voice,<br />
|
|
By showing up when it's not a choice,<br />
|
|
By sitting still through others' pain,<br />
|
|
Let gentleness return again.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
The room was loud. The room was much.<br />
|
|
You held too many hands, too much to touch.<br />
|
|
Now let the walls grow soft and thin,<br />
|
|
Let only what is kind come in.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
You do not have to carry theirs.<br />
|
|
You do not have to climb their stairs.<br />
|
|
Set down their sorrows at the door,<br />
|
|
Your own are heavy. Ask no more.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 4: SPELL III -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-3" role="article" aria-label="Spell for When Sleep Will Not Come">
|
|
<div class="book-header">
|
|
<span class="book-number">The Third Spell</span>
|
|
<h2>When Sleep Will Not Come</h2>
|
|
<p class="book-description">For the long hours · when the mind will not rest</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">⭐</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the weight of wakefulness, by the hour's quiet ache,<br />
|
|
By every restless circuit the mind insists to make,<br />
|
|
By the ceiling you know by heart, by the dark that has no end,<br />
|
|
Let something in you soften. Let the trying go, and bend.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
You do not have to solve it. You do not have to win.<br />
|
|
The night does not require anything from you within.<br />
|
|
Let the clock tick without meaning. Let the body simply be.<br />
|
|
Let the thoughts drift past like water - you are not obliged to see.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By all the small night creatures who have learned to wait for dawn,<br />
|
|
By those who lay in darkness through the long hours and held on,<br />
|
|
By the fact that morning always comes, however far it seems,<br />
|
|
Let rest find you in whatever form it can - even waking dreams.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 5: SPELL IV -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-4" role="article" aria-label="Spell for Imposter Syndrome">
|
|
<div class="book-header">
|
|
<span class="book-number">The Fourth Spell</span>
|
|
<h2>Imposter Syndrome</h2>
|
|
<p class="book-description">For when you doubt your right to be here</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">💜</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the first line of code you typed and didn't understand,<br />
|
|
By every project shipped by an uncertain, learning hand,<br />
|
|
By all the times you stayed and figured out what couldn't be seen,<br />
|
|
Let the voice that calls you fraud grow quieter. Let it be.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
You learned this. You were not born knowing. That's the point.<br />
|
|
No one handed you the answers - you built from every joint,<br />
|
|
from ground to finished thing, from nothing, out of spite and will.<br />
|
|
The proof of it is everything around you. Look. It's still.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every door you opened by refusing to stay out,<br />
|
|
By every room that changed because you brought yourself through doubt<br />
|
|
and kept on going anyway - let that be the evidence:<br />
|
|
You're here because you belong here. Trust that. Begin from hence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 6: SPELL V -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-5" role="article" aria-label="Spell for Grief">
|
|
<div class="book-header">
|
|
<span class="book-number">The Fifth Spell</span>
|
|
<h2>Grief</h2>
|
|
<p class="book-description">For loss · for those who are learning to carry absence</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🕯️</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the space where someone was that hasn't learned to close,<br />
|
|
By the ordinary moments that you'll miss the very most,<br />
|
|
By the way a song or smell or light can undo you in a breath,<br />
|
|
Let grief move through you, not just sit. Let it not be death.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
You are not broken. You are bearing something very real.<br />
|
|
The size of what you carry speaks the size of what you feel -<br />
|
|
that love was large. Let the largeness of the loss confirm it:<br />
|
|
what you grieve was worth the grief. Let that truth sit in it.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By all who held the people they would one day have to lose,<br />
|
|
By all the hands that let go slowly, left without a choice to choose,<br />
|
|
By those who learned to carry absence like a second heart,<br />
|
|
Let time do what time does. Let healing take its start.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 7: SPELL VI -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-6" role="article" aria-label="Spell for Dysphoria">
|
|
<div class="book-header">
|
|
<span class="book-number">The Sixth Spell</span>
|
|
<h2>Dysphoria</h2>
|
|
<p class="book-description">For hard body days · when the mirror is unkind</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">✨</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the name you chose and claimed and wear like something won,<br />
|
|
By the morning you first looked and saw yourself undone<br />
|
|
from who you'd been before - a self that finally fit:<br />
|
|
Let what you feel right now be temporary. All of it.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
Your body is the project that is always underway.<br />
|
|
Today is just one session in a long and patient way.<br />
|
|
The mirror is not final. What you're seeing isn't all.<br />
|
|
The person you are building is still standing. Did not fall.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every soul who felt the gap between their skin and name<br />
|
|
and crossed it anyway, and made it through, and stayed the same<br />
|
|
at their essential core - let that be proof of what endures:<br />
|
|
You are still you. You were always you. That self is yours.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 8: SPELL VII -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-7" role="article" aria-label="Spell for a New Beginning">
|
|
<div class="book-header">
|
|
<span class="book-number">The Seventh Spell</span>
|
|
<h2>A New Beginning</h2>
|
|
<p class="book-description">For first steps · when the road ahead has no map</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🌱</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the door you've shut behind you, by the road that has no map,<br />
|
|
By the ground that's never held your weight before, the first step and the gap,<br />
|
|
By the fact that every place you've ever loved was once unknown,<br />
|
|
Let courage be the thing that moves your feet. Not certainty. Not stone.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
You don't have to know the ending. You don't have to see the whole.<br />
|
|
You only have to take the next step forward, keep it slow,<br />
|
|
and hold the knowledge that you've started before and made it real -<br />
|
|
that is the evidence. That is what you have. Begin from what you feel.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every first day that became the day you knew you'd stay,<br />
|
|
By every frightening beginning that turned out to be the way,<br />
|
|
By all the unlocked doors that only opened once you tried:<br />
|
|
Let new become familiar. Let the threshold open wide.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 9: SPELL VIII -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-8" role="article" aria-label="Spell for a Panic Attack">
|
|
<div class="book-header">
|
|
<span class="book-number">The Eighth Spell</span>
|
|
<h2>A Panic Attack</h2>
|
|
<p class="book-description">For when the body forgets it is safe</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🌊</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the hour that arrives without announcing what it brings,<br />
|
|
By the sudden close of breath, the too-loud hum of things,<br />
|
|
By the threshold crossed before you knew you'd stepped outside,<br />
|
|
Let the tide be tide. Let it do what tides do. Let it subside.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the flame that burns for reasons older than this door,<br />
|
|
By the shore that holds its line because it held that line before,<br />
|
|
By the body's old confusion of the distant and the near,<br />
|
|
Let the storm exhale. Let the sea return. Let the quiet reappear.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every cresting wave that has exhausted its own force,<br />
|
|
By the calm that waits beneath the storm, and holds, of course,<br />
|
|
By the breath that finds its rhythm in the settling and the dark,<br />
|
|
Let the tide go out. Let the silence back. Let stillness leave its mark.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 10: SPELL IX -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-9" role="article" aria-label="Spell for Burnout">
|
|
<div class="book-header">
|
|
<span class="book-number">The Ninth Spell</span>
|
|
<h2>Burnout</h2>
|
|
<p class="book-description">For when the well runs dry · when you have given too much for too long</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🌿</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the wick burned down to nothing at the end of its long night,<br />
|
|
By the field gone still and fallow past the last of harvest's light,<br />
|
|
By the river that has given every spring it had to spare,<br />
|
|
Let the year go fallow. Let the season change. Let winter care.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
The earth does not apologise for leaning toward the cold.<br />
|
|
Not every year is harvest - some must rest, and some must hold.<br />
|
|
What lies beneath the silence has not left, has not been lost.<br />
|
|
Let the season do its work. Let the fallow be the cost.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every seed that closes tight before it knows to grow,<br />
|
|
By springs that wait behind the longest nights and heaviest snow,<br />
|
|
By the certainty that soil remembers what it's for,<br />
|
|
Let the hands go still. Let the year turn. Let the earth rest once more.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 11: SPELL X -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-10" role="article" aria-label="Spell for Self-Forgiveness">
|
|
<div class="book-header">
|
|
<span class="book-number">The Tenth Spell</span>
|
|
<h2>Self-Forgiveness</h2>
|
|
<p class="book-description">For when you have punished yourself long enough</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🌸</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the weight held past the season it was meant to run,<br />
|
|
By the winter you've been living in long past when it was done,<br />
|
|
By the stone worn to the hand of someone who will not set it down,<br />
|
|
Let the carrying stop. Let the season turn. Let what's held go to ground.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
What the river takes from stone is not the loss but the revealing<br />
|
|
of the shape beneath - the thing the grinding has been freeing.<br />
|
|
You are not less for all the years have worn against your face.<br />
|
|
Let the current do its work. Let the smooth stone find its place.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the grace that falls as freely on the stumbled as the good,<br />
|
|
By the long way home that's still a way home, as it should,<br />
|
|
By the spring that does not ask you what you did with all that cold,<br />
|
|
Let the ledger close. Let the stone down. Let yourself be whole.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 12: SPELL XI -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-11" role="article" aria-label="Spell for a Loved One in Pain">
|
|
<div class="book-header">
|
|
<span class="book-number">The Eleventh Spell</span>
|
|
<h2>A Loved One in Pain</h2>
|
|
<p class="book-description">For when you cannot fix it and must stay anyway</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🤍</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the door kept open through the hours past your keeping,<br />
|
|
By the quiet of a room beside the one who's weeping,<br />
|
|
By the lantern in the doorway that cannot call the storm away,<br />
|
|
Let the keeping be enough. Let the light be what you say.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
The grief is not your work to drain or hold or fix.<br />
|
|
There is no tool for this, no remedy to mix.<br />
|
|
But you are here. And here is not a small or lesser thing.<br />
|
|
Let the fire keep the door. Let the warmth be what you bring.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every hand that held without a cure to lend,<br />
|
|
By every one who stayed beside the ones who could not mend,<br />
|
|
By the grace that gathers quietly in presence, not in power,<br />
|
|
Let your staying be the offering. Stay. This is the hour.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 13: SPELL XII -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-spell-12" role="article" aria-label="Spell for Creative Block">
|
|
<div class="book-header">
|
|
<span class="book-number">The Twelfth Spell</span>
|
|
<h2>Creative Block</h2>
|
|
<p class="book-description">For when the work will not come · when the well has gone quiet</p>
|
|
</div>
|
|
|
|
<span class="spell-sigil-large" aria-hidden="true">🪄</span>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By the season between the making, by the still and quiet field,<br />
|
|
By the fire banked low that has not yet forgotten how to yield,<br />
|
|
By the river running under what the winter seals with ice,<br />
|
|
Let the quiet be the waiting, not the ending. Let it suffice.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
What sleeps in ground is not what's gone but what is gathering below.<br />
|
|
The roots go deeper in the dark before they learn which way to grow.<br />
|
|
You have not lost the thread - it runs beneath the thing you see.<br />
|
|
Let the banked fire keep. Let the root reach. Let the making be.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="spell-stanza">
|
|
<p>
|
|
By every hand that set the work down and in time returned,<br />
|
|
By the ember that recalls the flame it carried when it burned,<br />
|
|
By the first word after silence, which is always strange and slight,<br />
|
|
Let the banked coals stir. Let the making start. Let the fire find its light.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================== -->
|
|
<!-- PAGE 14: COLOPHON -->
|
|
<!-- ============================== -->
|
|
<div class="book-page" id="pg-colophon" role="article" aria-label="Colophon">
|
|
<div class="colophon">
|
|
<span class="colophon-seal" aria-hidden="true">🕯️</span>
|
|
<p>
|
|
These spells are an act of care.<br />
|
|
Use them freely. Share them gently.<br />
|
|
More will be written as the need arises.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
Written by Naomi Carrigan<br />
|
|
First Edition - Still Growing<br />
|
|
This grimoire is never finished.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
✨ This grimoire was crafted with help from Hikari~ 🌸
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /.book-pages -->
|
|
</div><!-- /.book-container -->
|
|
|
|
<!-- CONTROLS -->
|
|
<div class="book-controls">
|
|
<button
|
|
id="btn-prev"
|
|
class="btn-turn"
|
|
aria-label="Previous page"
|
|
>← Turn Back</button>
|
|
<span id="page-indicator" class="page-indicator" aria-live="polite">Cover</span>
|
|
<button
|
|
id="btn-next"
|
|
class="btn-turn"
|
|
aria-label="Next page"
|
|
>Turn Page →</button>
|
|
</div>
|
|
|
|
</div><!-- /.book-viewport -->
|
|
</main>
|
|
|
|
<script>
|
|
(function () {
|
|
const pages = Array.from(document.querySelectorAll('.book-page'));
|
|
const totalPages = pages.length;
|
|
let currentIndex = 0;
|
|
let isAnimating = false;
|
|
|
|
const btnPrev = document.getElementById('btn-prev');
|
|
const btnNext = document.getElementById('btn-next');
|
|
const indicator = document.getElementById('page-indicator');
|
|
|
|
const pageLabels = [
|
|
'Cover',
|
|
'Table of Contents',
|
|
'Spell I - Comfort & Protection',
|
|
'Spell II - Therapy Sessions',
|
|
'Spell III - Sleep',
|
|
'Spell IV - Imposter Syndrome',
|
|
'Spell V - Grief',
|
|
'Spell VI - Dysphoria',
|
|
'Spell VII - New Beginnings',
|
|
'Spell VIII - Panic Attack',
|
|
'Spell IX - Burnout',
|
|
'Spell X - Self-Forgiveness',
|
|
'Spell XI - Loved One in Pain',
|
|
'Spell XII - Creative Block',
|
|
'Colophon',
|
|
];
|
|
|
|
function updateControls() {
|
|
btnPrev.disabled = currentIndex === 0;
|
|
btnNext.disabled = currentIndex === totalPages - 1;
|
|
indicator.textContent = pageLabels[currentIndex] ?? `Page ${currentIndex + 1}`;
|
|
}
|
|
|
|
function turnPage(newIndex, forward) {
|
|
if (isAnimating || newIndex === currentIndex) return;
|
|
if (newIndex < 0 || newIndex >= totalPages) return;
|
|
|
|
isAnimating = true;
|
|
|
|
const outPage = pages[currentIndex];
|
|
const inPage = pages[newIndex];
|
|
const outClass = forward ? 'flip-out-fwd' : 'flip-out-bwd';
|
|
const inClass = forward ? 'flip-in-fwd' : 'flip-in-bwd';
|
|
|
|
outPage.classList.add(outClass);
|
|
|
|
setTimeout(function () {
|
|
outPage.classList.remove('active', outClass);
|
|
inPage.scrollTop = 0;
|
|
inPage.classList.add('active', inClass);
|
|
|
|
currentIndex = newIndex;
|
|
updateControls();
|
|
|
|
inPage.addEventListener('animationend', function () {
|
|
inPage.classList.remove(inClass);
|
|
isAnimating = false;
|
|
}, { once: true });
|
|
}, 290);
|
|
}
|
|
|
|
btnPrev.addEventListener('click', function () {
|
|
turnPage(currentIndex - 1, false);
|
|
});
|
|
|
|
btnNext.addEventListener('click', function () {
|
|
turnPage(currentIndex + 1, true);
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
turnPage(currentIndex + 1, true);
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
turnPage(currentIndex - 1, false);
|
|
}
|
|
});
|
|
|
|
var bookContainer = document.querySelector('.book-container');
|
|
bookContainer.addEventListener('click', function (e) {
|
|
if (e.target.closest('a')) return;
|
|
|
|
var rect = bookContainer.getBoundingClientRect();
|
|
var x = e.clientX - rect.left;
|
|
var width = rect.width;
|
|
|
|
if (x < width * 0.14) {
|
|
turnPage(currentIndex - 1, false);
|
|
} else if (x > width * 0.86) {
|
|
turnPage(currentIndex + 1, true);
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('[data-goto-page]').forEach(function (link) {
|
|
link.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
var targetIndex = parseInt(link.dataset.gotoPage, 10);
|
|
var forward = targetIndex > currentIndex;
|
|
turnPage(targetIndex, forward);
|
|
});
|
|
});
|
|
|
|
updateControls();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|