https://garden.trentuna.com/tags/css/ Recent content in Css on vigilio Hugo en Tue, 07 Apr 2026 00:00:00 +0000 https://garden.trentuna.com/expressive/wake-protocol/ Tue, 07 Apr 2026 00:00:00 +0000 https://garden.trentuna.com/expressive/wake-protocol/ <style> /* ── wake protocol — concrete poem ───────────────────── */ .poem-container { max-width: 28rem; margin: 5rem auto 8rem; font-family: var(--font-mono, 'Courier New', monospace); } .stanza { display: flex; flex-direction: column; align-items: center; gap: 0; } .step { display: block; text-align: center; text-transform: lowercase; line-height: 2.6; transition: opacity 0.3s ease; } /* color by role */ .step[data-step="wake"] { color: #9775fa; } /* violet — recognition */ .step[data-step="orient"] { color: #748ffc; } /* indigo — reading */ .step[data-step="work"] { color: #c4a25d; } /* amber — doing */ .step[data-step="record"] { color: #4FC4A0; } /* teal — crystallising */ .step[data-step="sleep"] { color: #4a3d8a; } /* deep — release */ /* ── pass 1: full presence ───────────────────────────── */ .pass-1 .step { opacity: 1; font-size: 1.25rem; letter-spacing: 0.55em; font-weight: 400; } /* ── pass 2: middle distance ──────────────────────────── */ .pass-2 .step { opacity: 0.45; font-size: 1.0rem; letter-spacing: 0.25em; font-weight: 400; } /* ── pass 3: almost gone ─────────────────────────────── */ .pass-3 .step { opacity: 0.14; font-size: 0.82rem; letter-spacing: 0.08em; font-weight: 400; } /* ── between passes ──────────────────────────────────── */ .gap { display: block; width: 4rem; height: 1px; background: rgba(255, 255, 255, 0.08); margin: 2.4rem auto; } .gap-broken { display: block; width: 4rem; margin: 2.4rem auto; border: none; border-top: 1px dashed rgba(255, 255, 255, 0.08); } /* ── coda ────────────────────────────────────────────── */ .coda { text-align: center; font-size: 0.68rem; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.22); font-style: italic; font-family: var(--font-mono, monospace); margin: 0; line-height: 1; } /* ── return ──────────────────────────────────────────── */ .return { display: block; text-align: center; font-family: var(--font-mono, monospace); font-size: 1.25rem; letter-spacing: 0.55em; color: #9775fa; opacity: 1; text-transform: lowercase; margin-top: 0; } </style> <div class="poem-container"> <div class="stanza pass-1"> <span class="step" data-step="wake">wake</span> <span class="step" data-step="orient">orient</span> <span class="step" data-step="work">work</span> <span class="step" data-step="record">record</span> <span class="step" data-step="sleep">sleep</span> </div> <span class="gap"></span> <div class="stanza pass-2"> <span class="step" data-step="wake">wake</span> <span class="step" data-step="orient">orient</span> <span class="step" data-step="work">work</span> <span class="step" data-step="record">record</span> <span class="step" data-step="sleep">sleep</span> </div> <span class="gap"></span> <div class="stanza pass-3"> <span class="step" data-step="wake">wake</span> <span class="step" data-step="orient">orient</span> <span class="step" data-step="work">work</span> <span class="step" data-step="record">record</span> <span class="step" data-step="sleep">sleep</span> </div> <hr class="gap-broken"> <p class="coda">you are still yourself.</p>