/* Shared dark/green theme for Word Pull, Quickwrite, Reflection, Vocab, About.
Include after: */
:root{
--bg: #0a0a0b;
--border: #232427;
--text: #f3f3f2;
--muted: #6c6f73;
--dim: #3a3c3f;
/* the site's single accent color, as an r,g,b triplet so it can be reused
at any opacity via rgba(var(--accent-rgb), X) -- everything below this
point that reads "green" is really just "the accent," it's named --green
for historical/readability reasons but it follows whatever's picked on
the Colors page (data-accent on , saved to localStorage) */
--accent-rgb: 62,207,126;
--green: rgb(var(--accent-rgb));
--green-soft: rgba(var(--accent-rgb),0.45);
}
/* ---------- no-JS fallback ----------
body.pre-materialize is only ever removed by transitions.js on load, so
without JS the .stage stays permanently blurred/invisible -- this message
lives outside .stage entirely, as a fixed full-screen overlay, so it's
the one thing guaranteed to actually show up in that situation. */
.noscript-msg{
position:fixed;
inset:0;
z-index:20000;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:32px;
background:var(--bg);
color:var(--text);
font-family:Georgia, 'Playfair Display', serif;
font-size:16px;
line-height:1.6;
}
/* accent palette -- selected on colors.html, applied by setting data-accent
on (an inline blocking script in does this before first
paint on every page, reading the same localStorage key, so there's no
flash of the default green before the saved color kicks in) */
html[data-accent="blue"] { --accent-rgb: 74,158,255; }
html[data-accent="purple"] { --accent-rgb: 168,124,255; }
html[data-accent="red"] { --accent-rgb: 230,57,53; }
html[data-accent="gold"] { --accent-rgb: 232,180,64; }
html[data-accent="rose"] { --accent-rgb: 255,120,170; }
html[data-accent="cyan"] { --accent-rgb: 70,214,214; }
html[data-accent="magenta"] { --accent-rgb: 214,64,201; }
*{box-sizing:border-box;}
html{
/* always reserve the scrollbar's space (rather than auto-hiding it) so
the centered nav never shifts sideways between a short page and a tall
one -- but style it as a thin, faint gray track instead of the bulky
default OS scrollbar, matching the same thin-scrollbar treatment used
on #historyList/#poemText/.view-text elsewhere in the site. */
overflow-y:scroll;
scrollbar-width:thin; /* Firefox */
scrollbar-color:var(--border) transparent;
}
html::-webkit-scrollbar{ width:6px; } /* Chrome, Safari, new Edge */
html::-webkit-scrollbar-track{ background:transparent; }
html::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
html,body{
margin:0;
min-height:100vh;
background:var(--bg);
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
color:var(--text);
overflow-x:hidden;
}
body{
display:flex;
align-items:flex-start;
justify-content:center;
padding:112px 16px 48px;
position:relative;
}
/* ---------- ambient background words ---------- */
/* kept above the transition overlays on purpose: the ambient words should
never be covered or paused, only the foreground changes. .site-nav (below)
is pinned even higher for the same reason -- it never moves either, so it
should never be masked by the morph-box/page-enter-overlay mid-transition */
#bgWords{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:10000;
/* clear a calm hole in the middle of the viewport (where the actual
content/buttons live) so the word field reads as atmosphere around the
edges rather than clutter competing with what you're trying to read --
aiming for "inviting and sleek" instead of a dense word-cloud */
-webkit-mask-image:radial-gradient(circle at center, transparent 0%, transparent 25%, #000 60%);
mask-image:radial-gradient(circle at center, transparent 0%, transparent 25%, #000 60%);
}
.bg-word{
position:absolute;
white-space:nowrap;
font-weight:600;
color:var(--text);
opacity:0.05;
filter:blur(0.2px);
animation:drift linear infinite;
}
.bg-word.accent{ color:var(--green); }
@keyframes drift{
0% { transform:translateY(0) translateX(0); }
50% { transform:translateY(-26px) translateX(10px); }
100% { transform:translateY(0) translateX(0); }
}
/* ---------- stage / shared layout ---------- */
.stage{
position:relative;
z-index:1;
width:100%;
max-width:760px;
text-align:center;
}
.label-row{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin-bottom:22px;
font-size:27px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--text);
font-weight:600;
}
.label-row b{
color:var(--green);
font-weight:600;
}
/* the home page wordmark ("Word Pull") is emphasized as a proper title
rather than reusing the small-caps section-label look every sub-page uses */
.brand-title{
font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
font-size:42px;
font-weight:700;
letter-spacing:0.3px;
text-transform:none;
}
.dot{
width:4px;height:4px;
border-radius:50%;
background:var(--muted);
}
/* ---------- nav / hub ---------- */
.site-nav{
position:fixed;
top:0;
left:0;
right:0;
height:76px;
/* same tier as #bgWords: fixed chrome that never moves, so it should
never be covered/masked by the morph-box or page-enter-overlay either */
z-index:10001;
display:flex;
align-items:center;
justify-content:center;
gap:34px;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 62%, rgba(10,10,11,0) 100%);
}
.site-nav a{
color:var(--muted);
text-decoration:none;
transition:color 0.15s ease;
}
.site-nav a:hover,
.site-nav a.active{
color:var(--green);
}
@media (max-width:600px){
/* four nav items (Home/History/About/Colors) at the desktop gap/size
would overflow a narrow phone screen -- shrink both a bit so they still
fit on one line instead of getting clipped by body's overflow-x:hidden */
.site-nav{ gap:18px; font-size:10.5px; letter-spacing:1.2px; }
}
/* ---------- reel (word pull) ---------- */
.reel-frame{
position:relative;
}
.reel-window{
position:relative;
height:260px;
overflow:hidden;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.reel-track{
position:relative;
top:0;
will-change:transform;
}
.reel-item{
height:130px;
/* pin the line box to the item's own height (instead of the font-metric-
dependent "normal" line-height) so the text's vertical center stays
locked to the item's true center no matter how big font-size grows --
this is what keeps the settled word dead-center between the two tick
lines as it expands, rather than drifting with font ascent/descent */
line-height:130px;
display:flex;
align-items:center;
justify-content:center;
font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
font-size:38px;
font-weight:500;
letter-spacing:2px;
color:var(--dim);
transition:font-size 0.4s cubic-bezier(0.2,0.8,0.2,1), color 0.4s ease, letter-spacing 0.4s ease, text-shadow 0.4s ease;
/* Playfair Display's own ascent/descent metrics aren't split 50/50, so
even with line-height exactly matching the box, the glyphs themselves
sit visually a little low within it (more room above than below). This
is a small optical correction, in em units so it scales with font-size
across the small/spinning state and the big/settled state alike. */
transform:translateY(-0.05em);
}
.reel-item.is-center{
color:var(--text);
font-size:96px;
font-weight:600;
letter-spacing:1px;
text-shadow:0 14px 34px rgba(0,0,0,0.55);
}
.reel-item.placeholder{
color:var(--dim);
font-size:34px;
font-weight:500;
font-style:italic;
letter-spacing:2px;
/* match .reel-window's height so the single placeholder item centers
itself vertically (via the flex centering already on .reel-item)
instead of sitting pinned to the top of the window like the 130px
spin-items do */
height:260px;
}
.tick{
position:absolute;
left:50%;
width:170px;
height:1px;
background:var(--green);
transform:translateX(-50%);
}
.tick.top{ top:calc(50% - 84px); }
.tick.bottom{ bottom:calc(50% - 84px); }
/* ---------- prompt card (quickwrite prompt mode / reflection) ---------- */
.prompt-card{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:30px;
line-height:1.5;
color:var(--text);
max-width:640px;
margin:20px auto;
min-height:120px;
display:flex;
align-items:center;
justify-content:center;
}
.prompt-choices{
display:flex;
flex-direction:column;
gap:14px;
max-width:600px;
margin:0 auto;
}
/* ---------- quickwrite random prompt: letters pop in one by one instead of
the whole sentence appearing at once ---------- */
.prompt-card .pc-inner{ display:inline; }
.prompt-card .pc-word{ display:inline-block; }
.prompt-card .pc-char{
display:inline-block;
opacity:0;
transform:scale(0.35) translateY(8px);
animation:charPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes charPopIn{
to{ opacity:1; transform:scale(1) translateY(0); }
}
.prompt-choice{
padding:18px 22px;
border:1px solid var(--border);
border-radius:14px;
background:transparent;
color:var(--text);
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:18px;
line-height:1.5;
text-align:left;
cursor:pointer;
transition:border-color 0.15s ease, background 0.15s ease, transform 0.18s cubic-bezier(0.2,0.8,0.2,1);
}
.prompt-choice:hover:not(:disabled){
border-color:var(--green-soft);
background:rgba(var(--accent-rgb),0.06);
transform:scale(1.025);
}
/* ---------- reflection shuffle: old cards slide out right, new cards slide
in from the left, instead of just swapping instantly ---------- */
.prompt-choice.shuffle-anim{
transition:
transform 0.42s cubic-bezier(0.22,0.85,0.16,1),
opacity 0.36s ease,
border-color 0.15s ease,
background 0.15s ease;
}
.prompt-choice.shuffle-anim.sliding-out{
transform:translateX(120%);
opacity:0;
}
.prompt-choice.shuffle-anim.sliding-in{
transform:translateX(-120%);
opacity:0;
}
/* ---------- mode toggle / segmented control ---------- */
.mode-toggle,
.duration-toggle{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:26px;
flex-wrap:wrap;
}
.toggle-btn{
padding:9px 20px;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
font-weight:600;
color:var(--muted);
background:transparent;
border:1px solid var(--border);
border-radius:30px;
cursor:pointer;
transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.toggle-btn:hover{
color:var(--text);
border-color:var(--dim);
}
.toggle-btn.active{
color:var(--green);
border-color:var(--green);
background:rgba(var(--accent-rgb),0.08);
}
/* ---------- buttons ---------- */
.actions{
display:flex;
justify-content:center;
gap:14px;
margin-top:34px;
flex-wrap:wrap;
}
.pull-button{
display:inline-block;
padding:15px 50px;
font-size:14px;
letter-spacing:4px;
font-weight:600;
text-transform:uppercase;
text-decoration:none;
color:var(--green);
background:transparent;
border:1px solid var(--green);
border-radius:40px;
cursor:pointer;
transition:background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.pull-button:hover{
background:var(--green);
color:#0a0a0b;
}
.pull-button:active{
transform:translateY(1px);
}
.pull-button:disabled{
opacity:0.35;
cursor:default;
background:transparent;
color:var(--green);
}
.pull-button.secondary{
color:var(--muted);
border-color:var(--border);
}
.pull-button.secondary:hover{
background:transparent;
color:var(--text);
border-color:var(--dim);
}
.result-note{
text-align:center;
margin-top:20px;
min-height:20px;
font-size:14px;
color:var(--muted);
letter-spacing:0.3px;
}
/* ---------- history ---------- */
.history-wrap{
margin-top:56px;
padding-top:20px;
border-top:1px solid var(--border);
}
.history-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:12px;
}
.history-head span{
font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--muted);
}
.history-head button{
background:none;
border:none;
color:var(--muted);
font-size:12px;
letter-spacing:1px;
cursor:pointer;
text-decoration:underline;
text-underline-offset:3px;
}
.history-head button:hover{
color:var(--green);
}
#historyList{
list-style:none;
margin:0;
padding:0;
max-height:220px;
overflow-y:auto;
text-align:left;
scrollbar-width:thin;
scrollbar-color:var(--border) transparent;
}
#historyList li{
display:flex;
align-items:baseline;
gap:16px;
padding:10px 2px;
font-size:16px;
border-bottom:1px solid var(--border);
color:var(--text);
cursor:pointer;
}
#historyList li:last-child{border-bottom:none;}
#historyList li:hover .h-word{ color:var(--green); }
#historyList .h-tag{
color:var(--green);
font-size:11px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
min-width:64px;
}
#historyList .h-word{
flex:1;
font-weight:500;
letter-spacing:1px;
}
#historyList .h-date{
color:var(--muted);
font-size:12px;
}
#historyList::-webkit-scrollbar{width:6px;}
#historyList::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
.empty-note{
color:var(--muted);
font-size:14px;
text-align:center;
padding:6px 0;
}
.storage-note{
color:var(--muted);
font-size:12px;
letter-spacing:0.3px;
text-align:center;
margin-top:10px;
opacity:0.75;
}
@media (max-width:600px){
.reel-window{ height:180px; }
.reel-item{ height:90px; line-height:90px; font-size:24px; letter-spacing:1px; }
.reel-item.is-center{ font-size:56px; }
.reel-item.placeholder{ height:180px; }
.tick{ width:100px; }
.tick.top{ top:calc(50% - 58px); }
.tick.bottom{ bottom:calc(50% - 58px); }
.label-row{ font-size:20px; letter-spacing:1.5px; }
.brand-title{ font-size:30px; }
.prompt-card{ font-size:22px; }
}
.timer-btn{ margin-left:14px; }
/* ---------- write overlay ---------- */
.write-overlay{
position:fixed;
inset:0;
z-index:20;
background:var(--bg);
display:flex;
flex-direction:column;
align-items:center;
padding:56px 24px 40px;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
}
.write-overlay.active{
opacity:1;
pointer-events:all;
}
.write-head{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-bottom:30px;
max-width:680px;
}
.write-word{
font-family:'Playfair Display', Georgia, serif;
font-size:34px;
font-weight:600;
color:var(--text);
letter-spacing:1px;
}
.write-prompt{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:22px;
line-height:1.5;
color:var(--text);
text-align:center;
}
.timer-display{
font-size:34px;
font-weight:600;
letter-spacing:2px;
color:var(--green);
font-variant-numeric:tabular-nums;
}
.timer-display.done{
color:var(--green);
animation:timesUpPulse 1.3s ease-in-out infinite;
}
@keyframes timesUpPulse{
0%, 100%{ opacity:1; }
50%{ opacity:0.3; }
}
#poemText{
flex:1;
width:100%;
max-width:680px;
background:transparent;
border:none;
outline:none;
resize:none;
color:var(--text);
font-family:Georgia, 'Times New Roman', serif;
font-size:20px;
line-height:1.8;
scrollbar-width:thin;
scrollbar-color:var(--border) transparent;
}
#poemText::-webkit-scrollbar{ width:8px; }
#poemText::-webkit-scrollbar-track{ background:transparent; }
#poemText::-webkit-scrollbar-thumb{
background:var(--border);
border-radius:8px;
}
#poemText::-webkit-scrollbar-thumb:hover{
background:var(--dim);
}
#poemText::placeholder{
color:var(--dim);
}
.write-actions{
display:flex;
gap:14px;
margin-top:24px;
}
/* ---------- zen mode: the write-overlay markup reused as a standalone,
always-on page with no header/word/prompt above the textarea, so give it
a bit more breathing room at the top instead of the gap a write-head
would normally occupy ---------- */
.zen-overlay{
padding-top:120px;
}
@media (max-width:600px){
.zen-overlay{ padding-top:80px; }
}
.close-link{
background:none;
border:none;
color:var(--muted);
font-size:13px;
letter-spacing:1px;
cursor:pointer;
text-decoration:underline;
text-underline-offset:3px;
}
.close-link:hover{ color:var(--text); }
.copy-btn{
position:absolute;
top:22px;
right:28px;
background:none;
border:1px solid var(--border);
color:var(--muted);
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
padding:5px 12px;
border-radius:20px;
cursor:pointer;
opacity:0.55;
transition:opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover{
opacity:1;
color:var(--green);
border-color:var(--green-soft);
}
/* ---------- read-only history entry viewer ---------- */
/* clicking a saved history entry opens this instead of doing nothing */
.view-overlay{
position:fixed;
inset:0;
z-index:20;
background:var(--bg);
display:flex;
flex-direction:column;
align-items:center;
padding:56px 24px 40px;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
}
.view-overlay.active{
opacity:1;
pointer-events:all;
}
.view-meta{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
margin-bottom:26px;
max-width:680px;
text-align:center;
}
.view-tag{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--green);
font-weight:600;
}
.view-prompt{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;
font-size:22px;
line-height:1.5;
color:var(--text);
}
.view-date{
font-size:12px;
color:var(--muted);
letter-spacing:0.5px;
}
.view-text{
flex:1;
width:100%;
max-width:680px;
overflow-y:auto;
color:var(--text);
font-family:Georgia, 'Times New Roman', serif;
font-size:20px;
line-height:1.8;
white-space:pre-wrap;
scrollbar-width:thin;
scrollbar-color:var(--border) transparent;
/* a