/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SOLARPUNK THEME — inyourbrains.com
Drop-in. Load AFTER style.css:
Activated by
Essay pages are deliberately NOT themed — they stay dot-matrix.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* transition the tokens themselves so the whole unit shifts together */
:root {
--grow-ease: 2200ms cubic-bezier(.4,0,.2,1);
}
body,
.px-body, .px-top-panel, .px-bottom, .px-btn, .px-foot,
.px-vent-line, .px-slot-area, .px-slot-groove,
.px-feed-wrapper, .px-paper, .px-brand, .px-brand span,
.px-bottom-label, .printer-header, .entry-title a,
.entry-meta, .entry-excerpt, .entry-readmore, .site-nav a {
transition:
background-color var(--grow-ease),
background-image var(--grow-ease),
border-color var(--grow-ease),
box-shadow var(--grow-ease),
color var(--grow-ease);
}
/* ── the override block ───────────────────────── */
html[data-theme="grown"] {
--px-beige: #8a9668;
--px-beige-light: #a4b07e;
--px-beige-mid: #78855a;
--px-beige-dark: #55603c;
--px-beige-shadow: #616c46;
--px-ink: #2f3a22;
--px-ink-mid: #566043;
--px-chassis: #16210f;
--px-interior: #1b2714;
/* paper stays bright — legibility is not negotiable */
--paper-white: #f1f4e6;
--paper-green: #d9e8c8;
--perforation: #bcc9a8;
--hole-color: #cdd8b8;
--ink: #1e2a16;
--ink-faded: #2f3d24;
--ink-light: #5d6b4c;
}
html[data-theme="grown"] body.index-page { background: #0e1a10; }
html[data-theme="grown"] body { background: #101c12; }
html[data-theme="grown"] .site-nav { color: #6f8a5e; }
html[data-theme="grown"] .site-nav a { color: #8fae76; }
html[data-theme="grown"] .site-nav a:hover { color: #d3e8bd; }
html[data-theme="grown"] .entry-title a:hover,
html[data-theme="grown"] .entry-readmore:hover { color: #4a7a30; border-color: #4a7a30; }
/* LEDs power down; fireflies take over */
html[data-theme="grown"] .px-led {
transition: background 1100ms ease, box-shadow 1100ms ease;
background: #3d4a2c;
box-shadow: 0 0 0 1px var(--px-chassis);
}
/* warm ambient bloom behind the unit */
html[data-theme="grown"] .px-printer::before {
opacity: 1;
}
.px-printer::before {
content: '';
position: absolute;
inset: -12% -18%;
background: radial-gradient(ellipse at 50% 55%, rgba(150,215,110,.13) 0%, transparent 68%);
opacity: 0;
transition: opacity var(--grow-ease);
pointer-events: none;
z-index: 0;
}
/* ── growth overlay ─────────────────────────────
Two layers: one behind the chassis, one in front. Branches flip
between them as they grow, so a vine can disappear behind the
unit and re-emerge — which is what makes it look attached to the
printer rather than drawn on top of a picture of one. */
.px-printer { position: relative; }
.gro-layer {
position: absolute; inset: 0; width: 100%; height: 100%;
overflow: visible; pointer-events: none;
shape-rendering: crispEdges; /* keeps stems on the pixel grid */
}
.gro-back { z-index: 0; }
.gro-front { z-index: 6; }
.gro-layer path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.gro-layer rect { shape-rendering: crispEdges; }
/* chassis sits between the two layers */
html[data-theme="grown"] .px-body,
html[data-theme="grown"] .px-feed-wrapper,
html[data-theme="grown"] .px-bottom { position: relative; z-index: 1; }
.gro-leaf { opacity: 0; }
.gro-flower { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
/* fireflies */
.gro-fly {
position: absolute;
width: 3px; height: 3px;
background: #dcff8f;
box-shadow: 0 0 7px 2px rgba(190,255,120,.5);
pointer-events: none;
z-index: 7;
opacity: 0;
}
@keyframes gro-drift {
0% { opacity: 0; transform: translate(0,0); }
15% { opacity: .9; }
50% { opacity: .3; transform: translate(var(--dx), var(--dy)); }
85% { opacity: .85; }
100% { opacity: 0; transform: translate(calc(var(--dx)*1.6), calc(var(--dy)*1.8)); }
}
/* motion-sensitive readers get the palette, not the animation */
@media (prefers-reduced-motion: reduce) {
.gro-layer path { stroke-dashoffset: 0 !important; transition: none !important; }
.gro-leaf, .gro-flower { opacity: 1 !important; transition: none !important; }
.gro-fly { animation: none !important; opacity: .5; }
}