/* ============================================================================
* chazon · energies · v2.css
* Loaded AFTER energies.css. Pure additive layer.
*
* 1 · Mobile Phase Pill (bottom-left, replaces rail under 920px)
* 2 · Breathing transitions between sections (rose-gold aura)
* 3 · Progress-Rail visited-state enrichment
* 4 · Voice-Call countdown ring (tutor.php budget cap)
* 5 · Cost-awareness modal (first-time user nag)
* 6 · Video dual-track + LQ preload hints
* 7 · Reduced-motion fallback
*
* Pattern source: chazon.eu/elements/elements-v27.css (adapted from amber-gold
* to rose-gold for the energies aesthetic).
* ============================================================================ */
/* ============================================================================
* 1 · MOBILE PHASE PILL
*
* Only appears on screens ≤ 920px (where the rail is hidden). One small
* surface bottom-left: Roman numeral + section name + search icon hint.
* Tap → opens CommandPalette. Reuses the pastel hue of the active phase
* so it color-shifts as the user moves through.
* ============================================================================ */
.phase-pill {
--pill-hue: var(--accent-rosegold);
position: fixed;
left: 14px;
bottom: 14px;
z-index: 88;
display: none;
align-items: center;
gap: 8px;
padding: 8px 14px;
max-width: calc(100vw - 28px);
background: color-mix(in oklab, var(--base-deep) 80%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
border: 1px solid color-mix(in oklab, var(--pill-hue) 35%, transparent);
border-radius: 22px;
font-family: 'Manrope', system-ui, sans-serif;
color: var(--text-bright);
cursor: pointer;
opacity: 0;
transform: translateY(8px);
transition:
opacity 320ms ease,
transform 320ms ease,
border-color 360ms ease,
box-shadow 360ms ease;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.35),
0 0 18px color-mix(in oklab, var(--pill-hue) 12%, transparent);
-webkit-tap-highlight-color: transparent;
}
.phase-pill.phase-pill-visible {
opacity: 1;
transform: translateY(0);
}
.phase-pill:active { transform: translateY(0) scale(0.98); }
.phase-pill-num {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.05rem;
color: var(--pill-hue);
letter-spacing: 0.04em;
flex-shrink: 0;
text-shadow: 0 0 12px color-mix(in oklab, var(--pill-hue) 45%, transparent);
}
.phase-pill-name {
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50vw;
color: var(--text-bright);
}
.phase-pill-icon {
margin-left: 4px;
font-size: 0.95rem;
color: var(--text-faded);
flex-shrink: 0;
}
@media (max-width: 920px) {
.phase-pill { display: inline-flex; }
}
@media (max-width: 400px) {
.phase-pill-name { max-width: 38vw; font-size: 0.8rem; }
}
/* ============================================================================
* 2 · BREATHING TRANSITIONS
*
* Each section's top edge carries a soft rose-gold aura, slightly stronger
* when the section first becomes active (SectionLife marks `.s-active`).
* The animation runs once per activation — never on idle.
*
* Episodic-memory threshold cue. Pattern source: elements-v27.css
* (amber-gold → rose-gold for energies palette).
* ============================================================================ */
body.breathing-on section[id] { position: relative; }
body.breathing-on section[id]::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 64px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--accent-rosegold) 8%, transparent) 0%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
body.breathing-on section[id].s-active::before {
animation: energiesBreathInhale 1100ms ease-out 1;
}
@keyframes energiesBreathInhale {
0% { background: linear-gradient(180deg,
color-mix(in oklab, var(--accent-rosegold) 28%, transparent) 0%,
color-mix(in oklab, var(--accent-rosegold) 6%, transparent) 100%); }
100% { background: linear-gradient(180deg,
color-mix(in oklab, var(--accent-rosegold) 8%, transparent) 0%,
transparent 100%); }
}
/* Skip the aura for video-heavy sections (their hero video provides the
* visual entry already, the aura would fight the video) */
body.breathing-on section#hero::before,
body.breathing-on section#phase-xx::before,
body.breathing-on section#sphere-b-intro::before,
body.breathing-on section#sphere-c-intro::before,
body.breathing-on section#sphere-d-intro::before {
display: none;
}
/* ============================================================================
* 3 · PROGRESS-RAIL VISITED STATE
*
* The existing rail already has hover-tooltip, active glow, hue per dot.
* Adds ONE state — visited — for "you've been here". Subtle. Persists in
* localStorage. Pattern source: elements-v27.css.
* ============================================================================ */
.section-rail .rail-dot.visited::before {
background: var(--hue, var(--accent-rosegold));
opacity: .75;
box-shadow:
0 0 0 1px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 50%, transparent),
0 0 6px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 35%, transparent);
}
/* Active still trumps visited — already handled by [data-active="true"] */
/* ============================================================================
* 4 · VOICE-CALL COUNTDOWN RING
*
* 60s budget cap for tutor.php interactions. Anchored to the tutor-trigger.
* Warns at 15s left with pulse + color shift.
* ============================================================================ */
.vc-countdown {
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
pointer-events: none;
opacity: 0;
transform: scale(0.7);
transition: opacity 280ms ease, transform 280ms ease;
z-index: 6;
}
.vc-countdown.vc-countdown-visible { opacity: 1; transform: scale(1); }
.vc-countdown-ring { width: 100%; height: 100%; display: block; }
.vc-countdown-arc { transition: stroke-dashoffset 240ms ease-out; }
.vc-countdown-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
color: var(--accent-rosegold);
letter-spacing: -0.02em;
text-shadow: 0 0 8px color-mix(in oklab, var(--accent-rosegold) 45%, transparent);
}
.vc-countdown-warn .vc-countdown-text {
color: #ff8a3d;
text-shadow: 0 0 10px rgba(255, 138, 61, 0.6);
animation: vcEnergiesPulse 0.6s ease-in-out infinite;
}
.vc-countdown-warn .vc-countdown-arc { stroke: #ff8a3d; }
@keyframes vcEnergiesPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.08); }
}
/* ============================================================================
* 5 · COST-AWARENESS MODAL
*
* First time the user opens the tutor or voice features, show a transparent
* cost explanation. Stored as accepted=true in localStorage afterwards.
* Pattern source: elements-v27.css (amber-gold → rose-gold tones).
* ============================================================================ */
.vc-cost-modal {
position: fixed;
inset: 0;
z-index: 9500; /* v18.51 · z-stack-disambig: war 10000 (Top der Welt), jetzt sauber unter system-tier (cursor/splash@9999, memory@9990, seer-voice@9985) — bleibt aber über allen normal-Modals */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease;
}
.vc-cost-modal.vc-cost-show { opacity: 1; pointer-events: auto; }
.vc-cost-backdrop {
position: absolute;
inset: 0;
background: rgba(7, 7, 15, 0.78);
backdrop-filter: blur(8px) saturate(1.1);
-webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.vc-cost-card {
position: relative;
max-width: 420px;
width: 92vw;
padding: 2.2rem 1.8rem 1.4rem;
background: linear-gradient(180deg,
color-mix(in oklab, var(--base-elevated) 96%, transparent) 0%,
color-mix(in oklab, var(--base-deep) 96%, transparent) 100%);
border: 1px solid color-mix(in oklab, var(--accent-rosegold) 25%, transparent);
border-radius: 18px;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.5),
0 0 32px color-mix(in oklab, var(--accent-rosegold) 10%, transparent) inset,
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
text-align: center;
transform: translateY(12px) scale(0.96);
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Manrope', system-ui, sans-serif;
}
.vc-cost-modal.vc-cost-show .vc-cost-card { transform: translateY(0) scale(1); }
.vc-cost-sigil {
font-family: 'Cormorant Garamond', serif;
font-size: 2.6rem;
color: var(--accent-rosegold);
margin-bottom: 0.4rem;
text-shadow: 0 0 24px color-mix(in oklab, var(--accent-rosegold) 45%, transparent);
}
.vc-cost-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.5rem;
color: var(--text-bright);
margin-bottom: 0.9rem;
letter-spacing: 0.005em;
}
.vc-cost-body {
font-size: 0.96rem;
color: var(--text-warm);
line-height: 1.55;
margin-bottom: 1.6rem;
}
.vc-cost-actions {
display: flex;
gap: 0.6rem;
justify-content: center;
margin-bottom: 1.2rem;
}
.vc-cost-btn {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.62rem 1.1rem;
border-radius: 10px;
border: 1px solid;
cursor: pointer;
transition: transform 180ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
-webkit-tap-highlight-color: transparent;
}
.vc-cost-btn:hover { transform: translateY(-1px); }
.vc-cost-btn:active { transform: translateY(0); }
.vc-cost-primary {
background: linear-gradient(180deg, var(--accent-rosegold), color-mix(in oklab, var(--accent-rosegold) 80%, #000));
border-color: var(--accent-rosegold);
color: var(--base-deep);
}
.vc-cost-primary:hover {
filter: brightness(1.1);
}
.vc-cost-secondary {
background: transparent;
border-color: color-mix(in oklab, var(--text-faded) 30%, transparent);
color: var(--text-warm);
}
.vc-cost-secondary:hover {
border-color: var(--text-warm);
color: var(--text-bright);
}
.vc-cost-fineprint {
font-size: 0.78rem;
color: color-mix(in oklab, var(--text-faded) 70%, transparent);
line-height: 1.5;
padding-top: 0.9rem;
border-top: 1px solid color-mix(in oklab, var(--text-faded) 12%, transparent);
}
/* ============================================================================
* 6 · SECTIONLIFE STATES
*
* Sleeping sections pause their animations and videos. We deliberately do
* NOT use content-visibility:auto here — it causes IntersectionObserver
* to miss its callbacks during scroll (the layout shifts as sections
* inflate/deflate confuses the observer). Plain animation-play-state
* pausing is enough — the perf win for 26 autoplay videos comes from
* VideoTuner pausing them via .pause(), which is more reliable than CSS.
* ============================================================================ */
section[id].s-sleeping .reveal,
section[id].s-sleeping [data-mod] {
animation-play-state: paused !important;
}
section[id].s-active { /* full activity, the default */ }
/* ============================================================================
* 7 · REDUCED-MOTION FALLBACK
* ============================================================================ */
@media (prefers-reduced-motion: reduce) {
.vc-countdown-warn .vc-countdown-text { animation: none !important; }
body.breathing-on section[id]::before { animation: none !important; }
.vc-cost-modal,
.vc-cost-card { transition-duration: 100ms !important; }
}
/* ============================================================================
* 9 · VOICE-PILL · prominent Seherin + ring progress + subtitle stream
* Redesigned to be the dominant audio UI: 96px portrait sprite with an
* SVG progress ring around it, a subtitle bar that scrolls sentence-by-
* sentence with the audio (modern take on text-adventure pacing).
* ============================================================================ */
.voice-pill {
--vp-hue: var(--accent-rosegold);
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%) translateY(12px);
z-index: 92;
display: flex;
align-items: center;
gap: 1.1rem;
padding: .85rem 1.15rem .85rem .85rem;
/* FIXED size — no resize when subtitle text varies in length */
width: 600px;
max-width: calc(100vw - 32px);
height: 124px;
box-sizing: border-box;
background: color-mix(in oklab, var(--base-deep) 86%, transparent);
backdrop-filter: blur(22px) saturate(1.25);
-webkit-backdrop-filter: blur(22px) saturate(1.25);
border: 1px solid color-mix(in oklab, var(--vp-hue) 30%, var(--base-line));
border-radius: 64px;
box-shadow:
0 18px 48px rgba(0, 0, 0, .65),
0 0 38px color-mix(in oklab, var(--vp-hue) 22%, transparent);
opacity: 0;
pointer-events: none;
transition:
opacity 280ms ease,
transform 320ms cubic-bezier(.16, 1, .3, 1),
border-color 360ms,
box-shadow 360ms;
font-family: 'Manrope', system-ui, sans-serif;
color: var(--text-bright);
overflow: hidden;
}
.voice-pill.voice-pill-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Avatar — now 96×96 with circular progress ring around it */
.vp-avatar {
position: relative;
width: 96px; height: 96px;
border: 0; padding: 0;
background: transparent;
cursor: pointer;
flex-shrink: 0;
border-radius: 50%;
-webkit-tap-highlight-color: transparent;
}
/* SVG progress ring · circumference 2π·44 = 276.46
* - bg ring: faint, always visible
* - fg ring: stroke-dashoffset animated from 276.46 (empty) → 0 (full)
* - rotated -90° so progress starts at 12 o'clock */
.vp-ring-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
transform: rotate(-90deg);
pointer-events: none;
overflow: visible;
}
.vp-ring-bg, .vp-ring-fg {
fill: none;
stroke-width: 3;
stroke-linecap: round;
}
.vp-ring-bg {
stroke: color-mix(in oklab, var(--vp-hue) 16%, transparent);
}
.vp-ring-fg {
stroke: var(--vp-hue);
stroke-dasharray: 276.46;
stroke-dashoffset: 276.46;
transition: stroke-dashoffset 220ms linear;
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--vp-hue) 60%, transparent));
}
/* Sprite — sits inside the ring (inset 7px so it doesn't overlap stroke) */
.vp-sprite {
position: absolute;
inset: 7px;
width: 82px; height: 82px;
border-radius: 50%;
background-image: url('avatar/seer-sprite-sheet.webp');
background-size: 246px 246px; /* 3 × 82 */
background-repeat: no-repeat;
background-position: 0 0;
background-color: var(--base-deep);
}
.vp-sprite[data-frame="neutral"] { background-position: 0 0; }
.vp-sprite[data-frame="listening"] { background-position: -82px 0; }
.vp-sprite[data-frame="eyes-closed"] { background-position:-164px 0; }
.vp-sprite[data-frame="small-closed"] { background-position: 0 -82px; }
.vp-sprite[data-frame="speaking-o"] { background-position: -82px -82px; }
.vp-sprite[data-frame="speaking-aa"] { background-position:-164px -82px; }
.vp-sprite[data-frame="side-glance"] { background-position: 0 -164px; }
.vp-sprite[data-frame="smile"] { background-position: -82px -164px; }
.vp-sprite[data-frame="down-cast"] { background-position:-164px -164px; }
/* Play overlay — sits over sprite, visible in idle state, pulses */
.vp-play-overlay {
position: absolute;
inset: 7px;
display: none;
align-items: center;
justify-content: center;
background: radial-gradient(circle, color-mix(in oklab, var(--vp-hue) 50%, transparent) 0%, transparent 70%);
color: var(--text-bright);
border-radius: 50%;
pointer-events: none;
animation: vp-play-pulse 1.6s ease-in-out infinite;
}
.voice-pill[data-state="idle"] .vp-play-overlay { display: flex; }
.voice-pill[data-state="paused"] .vp-play-overlay { display: flex; animation: none; opacity: .85; }
.voice-pill[data-state="idle"] .vp-sprite { filter: brightness(0.78) saturate(0.85); }
@keyframes vp-play-pulse {
0%, 100% { transform: scale(0.92); opacity: 0.75; }
50% { transform: scale(1.08); opacity: 1; }
}
/* Avatar flash — fires on section change */
.vp-avatar.vp-flash { animation: vp-avatar-flash 720ms cubic-bezier(.2, .8, .2, 1); }
@keyframes vp-avatar-flash {
0% { transform: scale(1); filter: brightness(1); }
18% { transform: scale(1.10); filter: brightness(1.35)
drop-shadow(0 0 22px color-mix(in oklab, var(--vp-hue) 75%, transparent)); }
100% { transform: scale(1); filter: brightness(1); }
}
/* Body — title on top (now higher), subtitle below with 2 fixed lines */
.vp-body {
display: flex; flex-direction: column;
gap: .45rem;
min-width: 0;
flex: 1 1 auto;
align-self: stretch;
padding: .15rem 0 .25rem;
justify-content: flex-start; /* lifts the title to the top */
}
.vp-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .85rem;
min-width: 0;
flex-shrink: 0;
}
.vp-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.18rem;
line-height: 1.05;
color: var(--text-bright);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: .005em;
flex: 1 1 auto;
min-width: 0;
}
.vp-time {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .62rem;
letter-spacing: .12em;
color: var(--text-warm);
line-height: 1;
flex-shrink: 0;
white-space: nowrap;
}
.voice-pill[data-state="playing"] .vp-time { color: var(--vp-hue); }
.voice-pill[data-state="loading"] .vp-time { color: var(--accent-rosegold); opacity: .7; }
/* Subtitle — fixed 2 lines, no layout shift on text-length variation */
.vp-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: .92rem;
line-height: 1.32;
color: color-mix(in oklab, var(--text-bright) 92%, var(--vp-hue));
display: flex;
align-items: flex-end;
gap: .35rem;
height: 2.64em; /* exactly 2 lines · clamp prevents grow */
overflow: hidden;
flex: 1 1 auto;
}
.vp-sub-text {
flex: 1 1 auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: opacity 200ms ease;
text-shadow: 0 1px 8px color-mix(in oklab, var(--vp-hue) 25%, transparent);
}
.vp-caret {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
color: var(--vp-hue);
opacity: .85;
animation: vp-caret-blink 1.1s steps(2, end) infinite;
flex-shrink: 0;
line-height: 1.32;
align-self: flex-end;
transform: translateY(-2px); /* baseline tweak to sit on text line */
}
.voice-pill[data-state="idle"] .vp-caret { animation-duration: 1.4s; opacity: .55; }
.voice-pill[data-state="playing"] .vp-caret { animation-duration: 0.9s; opacity: 1; }
.voice-pill[data-state="paused"] .vp-caret { animation: none; opacity: .5; }
@keyframes vp-caret-blink {
0%, 50% { opacity: var(--vp-caret-base, 1); }
51%, 100%{ opacity: 0.15; }
}
/* Close button */
.vp-close {
width: 30px; height: 30px;
border: 0; padding: 0;
background: transparent;
color: var(--text-faded);
cursor: pointer;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .2s, color .2s;
-webkit-tap-highlight-color: transparent;
}
.vp-close:hover {
background: color-mix(in oklab, var(--text-bright) 10%, transparent);
color: var(--text-bright);
}
/* Mobile — keep prominent but shrink */
@media (max-width: 920px) {
.voice-pill {
bottom: 84px;
width: calc(100vw - 24px);
height: 112px;
padding: .7rem .85rem .7rem .7rem;
gap: .85rem;
}
}
@media (max-width: 460px) {
.voice-pill {
bottom: 90px;
height: 98px;
padding: .55rem .65rem .55rem .55rem;
gap: .65rem;
border-radius: 28px;
}
.vp-avatar { width: 76px; height: 76px; }
.vp-sprite {
inset: 6px;
width: 64px; height: 64px;
background-size: 192px 192px;
}
.vp-sprite[data-frame="neutral"] { background-position: 0 0; }
.vp-sprite[data-frame="listening"] { background-position: -64px 0; }
.vp-sprite[data-frame="eyes-closed"] { background-position:-128px 0; }
.vp-sprite[data-frame="small-closed"] { background-position: 0 -64px; }
.vp-sprite[data-frame="speaking-o"] { background-position: -64px -64px; }
.vp-sprite[data-frame="speaking-aa"] { background-position:-128px -64px; }
.vp-sprite[data-frame="side-glance"] { background-position: 0 -128px; }
.vp-sprite[data-frame="smile"] { background-position: -64px -128px; }
.vp-sprite[data-frame="down-cast"] { background-position:-128px -128px; }
.vp-play-overlay { inset: 6px; }
.vp-title { font-size: 1.02rem; }
.vp-time { font-size: .56rem; }
.vp-subtitle { font-size: .82rem; height: 2.5em; }
.vp-close { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.voice-pill,
.vp-ring-fg,
.vp-sub-text,
.vp-play-overlay,
.vp-caret,
.vp-avatar.vp-flash { transition: none !important; animation: none !important; }
}
/* ============================================================================
* 10 · RAINBOW RAIL — every dot shows its native hue from the start
*
* Elements pattern: rail is a chromatic ribbon, not a uniform gray strip.
* Before this rule, only `.visited` dots were colored. Now every dot shows
* its phase's hue at low opacity, and visited/active increase opacity.
* ============================================================================ */
.section-rail .rail-dot::before {
/* Promote the dot's native --hue. If no hue is set on the dot, fall back
* to the existing faded look. */
background: var(--hue, var(--text-faded));
opacity: .55;
box-shadow: 0 0 4px color-mix(in oklab, var(--hue, var(--text-faded)) 25%, transparent);
}
/* Hover: bump opacity briefly */
.section-rail .rail-dot:hover::before {
opacity: .85;
box-shadow: 0 0 8px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 55%, transparent);
}
/* Visited: stronger color + ring (overrides earlier .visited rule with the new hue logic) */
.section-rail .rail-dot.visited::before {
background: var(--hue, var(--accent-rosegold));
opacity: .9;
box-shadow:
0 0 0 1px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 45%, transparent),
0 0 8px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 60%, transparent);
}
/* Active: even brighter + bigger glow */
.section-rail .rail-dot[data-active="true"]::before {
background: var(--hue, var(--accent-rosegold));
opacity: 1;
width: 8px; height: 8px;
box-shadow:
0 0 0 1.5px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 60%, transparent),
0 0 14px var(--hue, var(--accent-rosegold)),
0 0 28px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 35%, transparent);
}
/* ============================================================================
* 12 · MERKABA · Three.js canvas overlay for Phase XX
*
* The closing scene: 20 phase particles on a Fibonacci sphere + two
* counter-rotating tetrahedra (the Merkaba), suspended above the existing
* mandala video. The canvas is positioned absolutely so it fills the
* .mandala-stage while the video remains as a soft backdrop.
* ============================================================================ */
.mandala-stage {
position: relative; /* anchor for absolute canvas */
}
.merkaba-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: auto;
display: block;
/* Smooth fade-in once Three.js mounts and renders the first frame */
opacity: 0;
animation: merkaba-reveal 1600ms 200ms ease-out forwards;
}
@keyframes merkaba-reveal {
from { opacity: 0; }
to { opacity: 1; }
}
/* The existing video becomes a soft ambient backdrop behind the 3D scene */
.mandala-stage.mandala-video > video {
opacity: 0.22;
filter: blur(1px);
transition: opacity 1200ms ease;
}
@media (prefers-reduced-motion: reduce) {
.merkaba-canvas { animation: none; opacity: 1; }
}
/* ============================================================================
* Voice-Pill upgrades · always-on standby + flash + play-overlay
* (Elements pattern, adapted for energies)
* ============================================================================ */
/* PLAY OVERLAY — shows on idle state, pulses to invite a tap.
* Hidden during playing/loading/paused so it doesn't conflict with sprite. */
.vp-play-overlay {
position: absolute;
inset: 0;
display: none; /* shown only in idle */
align-items: center;
justify-content: center;
background: radial-gradient(circle, color-mix(in oklab, var(--vp-hue) 40%, transparent) 0%, transparent 70%);
color: var(--text-bright);
border-radius: 50%;
pointer-events: none;
animation: vp-play-pulse 1.6s ease-in-out infinite;
}
.voice-pill[data-state="idle"] .vp-play-overlay { display: flex; }
.voice-pill[data-state="loading"] .vp-play-overlay,
.voice-pill[data-state="playing"] .vp-play-overlay,
.voice-pill[data-state="paused"] .vp-play-overlay,
.voice-pill[data-state="error"] .vp-play-overlay { display: none; }
/* On paused, show a smaller static play marker (without pulse) */
.voice-pill[data-state="paused"] .vp-play-overlay {
display: flex;
animation: none;
opacity: .85;
}
@keyframes vp-play-pulse {
0%, 100% { transform: scale(0.95); opacity: 0.7; }
50% { transform: scale(1.08); opacity: 1; }
}
/* When idle, dim the sprite slightly so the play overlay reads as primary */
.voice-pill[data-state="idle"] .vp-sprite {
filter: brightness(0.78) saturate(0.85);
}
/* Avatar flash — fires when pill swaps to a new section (Elements pattern). */
.vp-avatar.vp-flash {
animation: vp-avatar-flash 720ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes vp-avatar-flash {
0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent); }
18% { transform: scale(1.12); filter: brightness(1.4)
drop-shadow(0 0 18px color-mix(in oklab, var(--vp-hue) 70%, transparent)); }
100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
/* When pill is in standby (idle) the ring is more subtle */
.voice-pill[data-state="idle"] .vp-avatar-ring {
border-color: color-mix(in oklab, var(--vp-hue) 45%, transparent);
animation: vp-ring-breathe 3.4s ease-in-out infinite;
}
@keyframes vp-ring-breathe {
0%, 100% { box-shadow: 0 0 8px color-mix(in oklab, var(--vp-hue) 25%, transparent); }
50% { box-shadow: 0 0 18px color-mix(in oklab, var(--vp-hue) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.vp-play-overlay,
.vp-avatar.vp-flash,
.voice-pill[data-state="idle"] .vp-avatar-ring {
animation: none !important;
}
}
/* ============================================================================
* 13 · COMMANDPALETTE · ⌘K · Drei-Schichten-Suche
*
* Modal overlay mit fuzzy search über alle 20 Phasen + Glossar.
* Einzigartig durch die Drei-Schichten-Filter (📐 Geometrie / 🌀 Erleben
* / 🌌 Mythos) — passt zur chazon-Logik der dreifachen Erkenntniswege.
* ============================================================================ */
.cmdp-backdrop {
position: fixed; inset: 0;
z-index: 200;
display: flex; align-items: flex-start; justify-content: center;
padding-top: 12vh;
background: rgba(8, 4, 14, .6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.cmdp-backdrop.cmdp-open {
opacity: 1;
pointer-events: auto;
}
.cmdp {
width: min(94vw, 680px);
background: linear-gradient(180deg,
color-mix(in oklab, var(--base-deep) 94%, transparent) 0%,
color-mix(in oklab, var(--base-night) 96%, transparent) 100%);
border: 1px solid color-mix(in oklab, var(--accent-rosegold) 22%, var(--base-line));
border-radius: 18px;
box-shadow:
0 32px 80px rgba(0, 0, 0, .65),
0 0 48px color-mix(in oklab, var(--accent-rosegold) 12%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .04);
overflow: hidden;
font-family: 'Manrope', system-ui, sans-serif;
color: var(--text-bright);
transform: scale(0.96) translateY(8px);
transition: transform 280ms cubic-bezier(.16, 1, .3, 1);
}
.cmdp-backdrop.cmdp-open .cmdp {
transform: scale(1) translateY(0);
}
/* Head — search input row */
.cmdp-head {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1.1rem .65rem;
border-bottom: 1px solid var(--base-line);
}
.cmdp-icon {
color: var(--text-faded);
flex-shrink: 0;
}
.cmdp-input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
color: var(--text-bright);
font-size: 1.05rem;
font-family: inherit;
padding: .25rem 0;
}
.cmdp-input::placeholder {
color: var(--text-faded);
}
.cmdp-esc {
font-family: 'JetBrains Mono', monospace;
font-size: .65rem;
letter-spacing: .12em;
padding: .25rem .5rem;
background: var(--base-deep);
border: 1px solid var(--base-line);
border-radius: 6px;
color: var(--text-faded);
}
/* Filter tabs · Drei-Schichten */
.cmdp-filters {
display: flex;
gap: .5rem;
padding: .65rem 1.1rem;
border-bottom: 1px solid var(--base-line);
overflow-x: auto;
scrollbar-width: none;
}
.cmdp-filters::-webkit-scrollbar { display: none; }
.cmdp-filter {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--base-line);
border-radius: 999px;
padding: .35rem .8rem;
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
font-size: .68rem;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s;
}
.cmdp-filter:hover {
background: color-mix(in oklab, var(--accent-rosegold) 6%, transparent);
color: var(--text-bright);
}
.cmdp-filter[aria-selected="true"] {
background: color-mix(in oklab, var(--accent-rosegold) 18%, transparent);
border-color: var(--accent-rosegold);
color: var(--accent-rosegold);
}
/* Results list */
.cmdp-results {
max-height: min(56vh, 460px);
overflow-y: auto;
padding: .35rem 0;
scrollbar-width: thin;
scrollbar-color: var(--base-line) transparent;
}
.cmdp-results::-webkit-scrollbar { width: 6px; }
.cmdp-results::-webkit-scrollbar-thumb {
background: var(--base-line);
border-radius: 3px;
}
.cmdp-row {
display: flex;
align-items: center;
gap: .85rem;
padding: .65rem 1.1rem;
cursor: pointer;
border-left: 2px solid transparent;
transition: background .12s, border-color .12s;
}
.cmdp-row:hover,
.cmdp-row.cmdp-sel {
background: color-mix(in oklab, var(--accent-rosegold) 7%, transparent);
border-left-color: var(--accent-rosegold);
}
.cmdp-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 6px currentColor;
}
.cmdp-dot-glossary {
width: 6px; height: 6px;
opacity: .7;
}
.cmdp-rowbody {
flex: 1 1 auto;
min-width: 0;
}
.cmdp-rowtop {
display: flex;
align-items: baseline;
gap: .55rem;
margin-bottom: .15rem;
}
.cmdp-num {
font-family: 'JetBrains Mono', monospace;
font-size: .7rem;
letter-spacing: .12em;
color: var(--text-muted);
flex-shrink: 0;
}
.cmdp-glossary-tag {
color: var(--accent-rosegold);
font-weight: 600;
}
.cmdp-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.04rem;
color: var(--text-bright);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
}
.cmdp-sphere {
font-family: 'JetBrains Mono', monospace;
font-size: .62rem;
letter-spacing: .1em;
color: var(--text-faded);
text-transform: uppercase;
margin-left: auto;
flex-shrink: 0;
}
.cmdp-lede {
font-size: .82rem;
color: var(--text-muted);
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cmdp-schichten {
display: flex;
gap: .35rem;
flex-shrink: 0;
}
.cmdp-schicht {
font-size: 1rem;
line-height: 1;
filter: saturate(0.85);
opacity: .85;
cursor: help;
}
.cmdp-row:hover .cmdp-schicht,
.cmdp-row.cmdp-sel .cmdp-schicht {
filter: saturate(1.1);
opacity: 1;
}
.cmdp-empty {
padding: 2.5rem 1.5rem;
text-align: center;
color: var(--text-muted);
font-size: .9rem;
line-height: 1.7;
}
.cmdp-empty span {
display: block;
margin-top: .35rem;
color: var(--text-faded);
font-size: .78rem;
font-style: italic;
}
/* Footer */
.cmdp-foot {
display: flex;
align-items: center;
gap: 1.1rem;
padding: .55rem 1.1rem;
border-top: 1px solid var(--base-line);
font-family: 'JetBrains Mono', monospace;
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-faded);
background: color-mix(in oklab, var(--base-night) 50%, transparent);
}
.cmdp-foot kbd {
font-family: 'JetBrains Mono', monospace;
font-size: .65rem;
padding: .12rem .4rem;
margin-right: .25rem;
background: var(--base-deep);
border: 1px solid var(--base-line);
border-radius: 4px;
color: var(--text-muted);
}
.cmdp-tag {
margin-left: auto;
font-style: italic;
letter-spacing: .15em;
color: var(--accent-rosegold);
text-transform: lowercase;
font-family: 'Cormorant Garamond', serif;
font-size: .82rem;
}
/* Mobile adjustments */
@media (max-width: 640px) {
.cmdp-backdrop { padding-top: 6vh; }
.cmdp { width: 96vw; border-radius: 14px; }
.cmdp-head { padding: .7rem .8rem .5rem; }
.cmdp-input { font-size: 1rem; }
.cmdp-filters { padding: .55rem .8rem; }
.cmdp-row { padding: .6rem .8rem; gap: .65rem; }
.cmdp-name { font-size: .96rem; }
.cmdp-lede { font-size: .76rem; -webkit-line-clamp: 1; }
.cmdp-sphere { display: none; }
.cmdp-foot {
padding: .45rem .8rem;
flex-wrap: wrap;
gap: .55rem .8rem;
font-size: .56rem;
}
.cmdp-tag { margin-left: 0; flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.cmdp-backdrop,
.cmdp { transition: none !important; }
}
/* ============================================================================
* 14 · EMBODIMENT-MAP · Phase III · Nummenmaa-Heatmap-Werkstatt
*
* Gender-neutral body silhouette + 13 toggleable emotion heatmaps.
* Pillen lila/coral mit Hue-tint, SVG-Body in pastel rosegold,
* Heatmap-Layer in warm-rotem oder cold-blauem radial gradient.
* ============================================================================ */
.embodiment {
margin-top: 3.5rem;
padding: 2.2rem 2rem;
border-radius: 22px;
background: linear-gradient(160deg,
color-mix(in oklab, var(--base-deep) 88%, transparent) 0%,
color-mix(in oklab, var(--base-night) 96%, transparent) 100%);
border: 1px solid color-mix(in oklab, var(--sd-red) 18%, var(--base-line));
box-shadow: 0 18px 60px rgba(0,0,0,.4),
0 0 32px color-mix(in oklab, var(--sd-red) 8%, transparent);
}
.embodiment-head {
max-width: 720px;
margin-bottom: 2rem;
}
.embodiment-head h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--text-bright);
margin: .35rem 0 .8rem;
line-height: 1.15;
}
.embodiment-head h3 em {
color: var(--sd-red);
font-style: italic;
}
.embodiment-head p {
color: var(--text-muted);
line-height: 1.55;
font-size: 1rem;
}
.embodiment-head p em {
color: var(--text-bright);
font-style: italic;
}
.embodiment-stage {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: 2.5rem;
align-items: center;
}
/* Body silhouette canvas */
.emb-body-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.emb-body {
width: 100%;
max-width: 280px;
height: auto;
filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
.emb-silhouette {
fill: color-mix(in oklab, var(--accent-rosegold) 24%, var(--base-deep));
stroke: color-mix(in oklab, var(--accent-rosegold) 55%, transparent);
stroke-width: 1.2;
}
.emb-heat {
transition: opacity 280ms ease;
pointer-events: none;
mix-blend-mode: screen;
}
.emb-spot {
/* Soft, glowing presence */
filter: blur(0.4px);
}
.emb-legend {
display: flex;
gap: 1.6rem;
font-family: 'JetBrains Mono', monospace;
font-size: .62rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-faded);
}
.emb-legend span {
display: inline-flex;
align-items: center;
gap: .45rem;
}
.emb-dot {
width: 12px; height: 12px;
border-radius: 50%;
display: inline-block;
}
.emb-dot-warm {
background: radial-gradient(circle, #ffd0a0 0%, #ff7a4a 70%);
box-shadow: 0 0 8px rgba(255,122,74,.55);
}
.emb-dot-cold {
background: radial-gradient(circle, #a8d6ff 0%, #4a7aff 70%);
box-shadow: 0 0 8px rgba(74,122,255,.45);
}
/* Picker */
.emb-picker-label {
font-family: 'JetBrains Mono', monospace;
font-size: .65rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-faded);
margin-bottom: .8rem;
}
.emb-pills {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: .55rem;
margin-bottom: 1.5rem;
}
.emb-pill {
background: color-mix(in oklab, var(--base-deep) 70%, transparent);
border: 1px solid var(--base-line);
border-radius: 999px;
padding: .55rem .9rem;
color: var(--text-muted);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: .98rem;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.emb-pill:hover {
background: color-mix(in oklab, var(--sd-red) 12%, transparent);
color: var(--text-bright);
border-color: color-mix(in oklab, var(--sd-red) 40%, var(--base-line));
}
.emb-pill[aria-pressed="true"] {
background: color-mix(in oklab, var(--sd-red) 28%, transparent);
border-color: var(--sd-red);
color: var(--text-bright);
box-shadow: 0 0 16px color-mix(in oklab, var(--sd-red) 25%, transparent);
transform: translateY(-1px);
}
.emb-finding {
margin-top: .9rem;
padding: .7rem .9rem;
border-left: 2px solid color-mix(in oklab, var(--accent-heartcoh) 60%, transparent);
background: color-mix(in oklab, var(--accent-heartcoh) 5%, transparent);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: .94rem;
line-height: 1.55;
color: var(--text-warm);
min-height: 1.55em;
}
.emb-finding:empty { display: none; }
.emb-citation {
font-family: 'JetBrains Mono', monospace;
font-size: .65rem;
line-height: 1.55;
color: var(--text-faded);
letter-spacing: .04em;
border-top: 1px solid var(--base-line);
padding-top: .9rem;
margin-top: 1rem;
}
.emb-citation em {
color: var(--accent-rosegold);
font-style: italic;
}
@media (max-width: 760px) {
.embodiment { padding: 1.6rem 1.2rem; margin-top: 2.4rem; }
.embodiment-stage {
grid-template-columns: 1fr;
gap: 1.8rem;
}
.emb-body-wrap { max-width: 260px; margin: 0 auto; }
.emb-pills { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.emb-heat, .emb-pill { transition: none !important; }
}
/* ============================================================================
* 15 · BRAND-GLYPHS · painted assets integrated into UI
* Element glyphs in Phase III feeling-grid + phase glyphs in section-heads
* + body silhouette PNG in Embodiment-Map.
* ============================================================================ */
/* Element-Glyphen — ersetzt die Emoji 🜂🜄🜁🜃✧ in Phase III */
.feeling-glyph {
display: block;
width: 88px;
height: auto;
margin: 0 auto .6rem;
filter: drop-shadow(0 4px 14px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 25%, transparent));
transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.feeling:hover .feeling-glyph {
transform: translateY(-3px) scale(1.05);
}
/* Hide the old emoji-glyph if it's still in DOM for any reason */
.feeling .glyph { display: none; }
/* Phase-Glyphen in section-heads — auto-injected by PhaseGlyphInjector */
.phase-glyph-img {
display: block;
width: 110px;
height: auto;
margin: 0 auto 1.2rem;
filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--hue, var(--accent-rosegold)) 30%, transparent));
opacity: 0;
transform: translateY(8px);
transition: opacity 600ms cubic-bezier(.2, .8, .2, 1),
transform 600ms cubic-bezier(.2, .8, .2, 1);
}
/* Reveal when its parent section becomes active or has scrolled into view.
* SectionLife adds .s-active to sections; the reveal helper adds .reveal-on. */
section.s-active .phase-glyph-img,
section .section-head.reveal-on .phase-glyph-img,
section .phase-glyph-img.in-view {
opacity: 1;
transform: translateY(0);
}
/* Fallback: always show after 1.2s of being on the page */
@keyframes phase-glyph-fallback-show {
to { opacity: 1; transform: translateY(0); }
}
.phase-glyph-img {
animation: phase-glyph-fallback-show 800ms ease-out 1.2s forwards;
}
/* Embodiment body PNG + heatmap stack */
.emb-body-stack {
position: relative;
width: 100%;
max-width: 280px;
margin: 0 auto;
aspect-ratio: 200 / 480; /* match SVG heatmap aspect for clean overlay */
}
.emb-body-art {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
/* SVG sits on top of the body image, same dimensions, heatmap renders here */
.emb-body-stack .emb-body {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Section-head spacing — phase glyph sits above the section-num label */
.section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (max-width: 760px) {
.phase-glyph-img { width: 80px; margin-bottom: .9rem; }
.feeling-glyph { width: 72px; }
}
/* Brand sigil in CommandPalette filter tabs · replaces 📐 🌀 🌌 emojis */
.cmdp-sigil {
width: 22px;
height: 22px;
vertical-align: middle;
margin-right: .35rem;
display: inline-block;
filter: drop-shadow(0 0 6px color-mix(in oklab, currentColor 40%, transparent));
}
.cmdp-filter[data-filter="geometrie"] { --cmdp-sigil-hue: var(--accent-cyan); }
.cmdp-filter[data-filter="phenomenology"] { --cmdp-sigil-hue: var(--accent-magenta); }
.cmdp-filter[data-filter="tradition"] { --cmdp-sigil-hue: var(--sd-lavender); }
.cmdp-filter[data-filter] .cmdp-sigil {
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--cmdp-sigil-hue, var(--accent-rosegold)) 50%, transparent));
}
/* Small variant for inline use in result rows */
.cmdp-sigil-sm {
width: 16px;
height: 16px;
margin-right: 0;
vertical-align: middle;
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--cmdp-sigil-hue, var(--accent-rosegold)) 35%, transparent));
}
.cmdp-schicht {
display: inline-flex;
align-items: center;
margin-right: .3rem;
}
/* Override emoji content with brand sigille — for .layer-tag::before across all phases */
.layer[data-kind="measure"] .layer-tag::before,
.layer[data-kind="tradition"] .layer-tag::before,
.layer[data-kind="synthesis"] .layer-tag::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.layer[data-kind="measure"] .layer-tag::before {
background-image: url('branding/schichten/geometrie.png');
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-cyan) 50%, transparent));
}
.layer[data-kind="tradition"] .layer-tag::before {
/* "tradition" = phänomenologie/erleben in our layered framing */
background-image: url('branding/schichten/phenomenologie.png');
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-magenta) 50%, transparent));
}
.layer[data-kind="synthesis"] .layer-tag::before {
background-image: url('branding/schichten/mythos.png');
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sd-lavender) 50%, transparent));
}
/* Plutchik-Mandala hero in Phase XII */
.plutchik-mandala-art {
display: block;
width: 100%;
max-width: 480px;
height: auto;
margin: 0 auto;
filter: drop-shadow(0 12px 36px color-mix(in oklab, var(--accent-magenta) 30%, transparent));
}
/* Plutchik emotion-detail · clickable phase cross-references */
.emo-phase-link {
color: var(--accent-magenta);
text-decoration: none;
border-bottom: 1px dotted color-mix(in oklab, var(--accent-magenta) 55%, transparent);
transition: color 0.18s, border-bottom-color 0.18s;
}
.emo-phase-link:hover,
.emo-phase-link:focus-visible {
color: var(--accent-rosegold);
border-bottom-color: var(--accent-rosegold);
outline: none;
}
/* Sphere sigille are bigger than phase glyphs since sphere-intros are larger
conceptual gateways */
.phase-glyph-img.sphere-sigil-img {
width: 160px;
margin-bottom: 1.6rem;
}
@media (max-width: 760px) {
.phase-glyph-img.sphere-sigil-img { width: 120px; }
}
/* ============================================================================
* 16 · DYADATLAS · Konzept #4 · Atlas der Mischungen
* 8 primäre Plutchik-Dyaden als interaktive Cards mit drei-schichten Detail-Panel
* ============================================================================ */
.dyad-atlas {
margin: 3.5rem 0;
container-type: inline-size;
}
.dyad-atlas-head {
text-align: center;
margin-bottom: 2rem;
}
.dyad-atlas-head h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
color: var(--text-bright);
margin: 0 0 .6rem;
}
.dyad-atlas-lede {
font-size: .98rem;
line-height: 1.55;
color: var(--text-warm);
max-width: 560px;
margin: 0 auto;
}
.dyad-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
@container (min-width: 560px) {
.dyad-grid { grid-template-columns: repeat(4, 1fr); }
}
.dyad-card {
/* button reset */
appearance: none;
background: var(--base-night);
border: 1px solid var(--base-line);
border-radius: var(--radius-sm);
padding: 1rem .8rem 1.1rem;
cursor: pointer;
color: inherit;
font: inherit;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
transition: transform .35s var(--ease-organic),
border-color .35s var(--ease-organic),
box-shadow .35s var(--ease-organic),
background .35s var(--ease-organic);
position: relative;
}
.dyad-card:hover {
transform: translateY(-4px);
border-color: var(--dyad-hue, var(--accent-rosegold));
box-shadow: 0 14px 36px -18px color-mix(in oklab, var(--dyad-hue, var(--accent-rosegold)) 70%, transparent);
}
.dyad-card:focus-visible {
outline: 2px solid var(--dyad-hue, var(--accent-rosegold));
outline-offset: 3px;
}
.dyad-card.is-active {
border-color: var(--dyad-hue);
background: color-mix(in oklab, var(--dyad-hue) 8%, var(--base-night));
box-shadow: 0 0 0 1px var(--dyad-hue),
0 20px 50px -20px color-mix(in oklab, var(--dyad-hue) 60%, transparent);
}
.dyad-card-art {
display: block;
width: 100%;
max-width: 140px;
height: auto;
filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--dyad-hue, var(--accent-rosegold)) 35%, transparent));
transition: transform .35s var(--ease-organic);
}
.dyad-card:hover .dyad-card-art,
.dyad-card.is-active .dyad-card-art {
transform: scale(1.05);
}
.dyad-card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
}
.dyad-card-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.3rem;
color: var(--text-bright);
line-height: 1;
}
.dyad-card-formula {
font: 500 .68rem/1.2 'JetBrains Mono', monospace;
color: var(--text-faded);
letter-spacing: .1em;
text-transform: uppercase;
}
.dyad-card-formula span {
color: var(--dyad-hue, var(--accent-rosegold));
font-weight: 600;
margin: 0 .15em;
}
/* Detail panel — slides into view when a card is opened */
.dyad-detail {
margin-top: 1.5rem;
border-radius: var(--radius-sm);
background: color-mix(in oklab, var(--dyad-hue, var(--accent-rosegold)) 6%, var(--base-night));
border: 1px solid color-mix(in oklab, var(--dyad-hue, var(--accent-rosegold)) 32%, var(--base-line));
overflow: hidden;
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .45s var(--ease-organic),
opacity .35s var(--ease-organic),
margin-top .35s var(--ease-organic),
padding .35s var(--ease-organic),
border-color .35s var(--ease-organic);
padding: 0 1.6rem;
}
.dyad-detail[data-state="open"] {
grid-template-rows: 1fr;
opacity: 1;
padding: 1.6rem;
}
.dyad-detail[data-state="empty"] {
margin-top: 0;
border-color: transparent;
}
.dyad-detail > * {
overflow: hidden;
}
.dyad-detail-head {
display: grid;
grid-template-columns: 96px 1fr auto;
align-items: center;
gap: 1.2rem;
margin-bottom: 1.2rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid color-mix(in oklab, var(--dyad-hue) 18%, transparent);
}
.dyad-detail-art {
width: 96px;
height: auto;
filter: drop-shadow(0 6px 14px color-mix(in oklab, var(--dyad-hue) 40%, transparent));
}
.dyad-detail-title { min-width: 0; }
.dyad-detail-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 3vw, 2.3rem);
color: var(--dyad-hue);
line-height: 1.05;
margin-bottom: .25rem;
}
.dyad-detail-formula {
font: 500 .76rem/1 'JetBrains Mono', monospace;
color: var(--text-warm);
letter-spacing: .14em;
text-transform: uppercase;
}
.dyad-detail-formula span {
color: var(--dyad-hue);
font-weight: 600;
margin: 0 .2em;
}
.dyad-detail-close {
background: transparent;
border: 1px solid var(--base-line);
color: var(--text-warm);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: all .25s var(--ease-organic);
display: flex;
align-items: center;
justify-content: center;
}
.dyad-detail-close:hover {
border-color: var(--dyad-hue);
color: var(--dyad-hue);
transform: rotate(90deg);
}
.dyad-detail-layers {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@container (min-width: 720px) {
.dyad-detail-layers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.dyad-detail-head {
grid-template-columns: 72px 1fr auto;
gap: .8rem;
}
.dyad-detail-art { width: 72px; }
}
/* ============================================================================
* WU-XING-ATLAS · 5-Elemente-Charakter-Atlas (Parallel-System)
* Mirror of .dyad-atlas styling with Wu-Xing-specific extensions:
* - chinesische Glyphe als Akzent
* - Sheng/Ke-Zyklen als Cross-Reference-Buttons im Detail
* ============================================================================ */
.wuxing-atlas {
margin: 3.5rem 0;
container-type: inline-size;
}
.wuxing-atlas-head {
text-align: center;
margin-bottom: 2rem;
}
.wuxing-atlas-head h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
color: var(--text-bright);
margin: 0 0 .6rem;
}
.wuxing-atlas-lede {
font-size: .98rem;
line-height: 1.55;
color: var(--text-warm);
max-width: 620px;
margin: 0 auto;
}
/* Grid: 2-col mobile (5. Karte spannt die Reihe & zentriert), 5-col desktop. */
.wuxing-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.wuxing-grid > .wuxing-card:nth-child(5):last-child {
grid-column: span 2;
max-width: calc(50% - .5rem);
justify-self: center;
}
@container (min-width: 720px) {
.wuxing-grid { grid-template-columns: repeat(5, 1fr); }
.wuxing-grid > .wuxing-card:nth-child(5):last-child {
grid-column: auto;
max-width: none;
justify-self: auto;
}
}
.wuxing-card {
appearance: none;
background: var(--base-night);
border: 1px solid var(--base-line);
border-radius: var(--radius-sm);
padding: 1.1rem .8rem 1.1rem;
cursor: pointer;
color: inherit;
font: inherit;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: .55rem;
transition: transform .35s var(--ease-organic),
border-color .35s var(--ease-organic),
box-shadow .35s var(--ease-organic),
background .35s var(--ease-organic);
position: relative;
overflow: hidden;
}
/* Subtile Glyphe als Hintergrund-Wasserzeichen — wird hover/active stärker */
.wuxing-card-glyph {
position: absolute;
top: -.3rem;
right: -.4rem;
font-family: 'Cormorant Garamond', serif;
font-size: 4.2rem;
font-weight: 500;
line-height: 1;
color: var(--wx-hue);
opacity: .12;
pointer-events: none;
transition: opacity .35s var(--ease-organic), transform .35s var(--ease-organic);
}
.wuxing-card:hover {
transform: translateY(-4px);
border-color: var(--wx-hue);
box-shadow: 0 14px 36px -18px color-mix(in oklab, var(--wx-hue) 70%, transparent);
}
.wuxing-card:hover .wuxing-card-glyph {
opacity: .22;
transform: translate(-2px, 2px);
}
.wuxing-card:focus-visible {
outline: 2px solid var(--wx-hue);
outline-offset: 3px;
}
.wuxing-card.is-active {
border-color: var(--wx-hue);
background: color-mix(in oklab, var(--wx-hue) 9%, var(--base-night));
box-shadow: 0 0 0 1px var(--wx-hue),
0 20px 50px -20px color-mix(in oklab, var(--wx-hue) 60%, transparent);
}
.wuxing-card.is-active .wuxing-card-glyph {
opacity: .28;
}
.wuxing-card-art {
display: block;
width: 100%;
max-width: 110px;
height: auto;
filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--wx-hue) 40%, transparent));
transition: transform .35s var(--ease-organic);
position: relative; /* sit above the watermark glyph */
}
.wuxing-card:hover .wuxing-card-art,
.wuxing-card.is-active .wuxing-card-art {
transform: scale(1.05);
}
.wuxing-card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
position: relative;
}
.wuxing-card-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.3rem;
color: var(--text-bright);
line-height: 1;
}
.wuxing-card-season {
font: 500 .66rem/1.2 'JetBrains Mono', monospace;
color: var(--text-faded);
letter-spacing: .1em;
text-transform: uppercase;
}
/* Detail panel — same animation grammar as dyad-detail */
.wuxing-detail {
margin-top: 1.5rem;
border-radius: var(--radius-sm);
background: color-mix(in oklab, var(--wx-hue, var(--accent-rosegold)) 6%, var(--base-night));
border: 1px solid color-mix(in oklab, var(--wx-hue, var(--accent-rosegold)) 32%, var(--base-line));
overflow: hidden;
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .45s var(--ease-organic),
opacity .35s var(--ease-organic),
margin-top .35s var(--ease-organic),
padding .35s var(--ease-organic),
border-color .35s var(--ease-organic);
padding: 0 1.6rem;
}
.wuxing-detail[data-state="open"] {
grid-template-rows: 1fr;
opacity: 1;
padding: 1.6rem;
}
.wuxing-detail[data-state="empty"] {
margin-top: 0;
border-color: transparent;
}
.wuxing-detail > * { overflow: hidden; }
.wuxing-detail-head {
display: grid;
grid-template-columns: 110px 1fr auto;
align-items: center;
gap: 1.2rem;
margin-bottom: 1rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid color-mix(in oklab, var(--wx-hue) 18%, transparent);
}
.wuxing-detail-art {
width: 110px;
height: auto;
filter: drop-shadow(0 6px 14px color-mix(in oklab, var(--wx-hue) 45%, transparent));
}
.wuxing-detail-title { min-width: 0; }
.wuxing-detail-glyph {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
color: var(--wx-hue);
opacity: .7;
line-height: 1;
margin-bottom: .35rem;
}
.wuxing-detail-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 3vw, 2.3rem);
color: var(--wx-hue);
line-height: 1.05;
margin-bottom: .35rem;
}
.wuxing-detail-meta {
font: 500 .72rem/1.4 'JetBrains Mono', monospace;
color: var(--text-warm);
letter-spacing: .12em;
text-transform: uppercase;
}
.wuxing-detail-close {
background: transparent;
border: 1px solid var(--base-line);
color: var(--text-warm);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: all .25s var(--ease-organic);
display: flex;
align-items: center;
justify-content: center;
}
.wuxing-detail-close:hover {
border-color: var(--wx-hue);
color: var(--wx-hue);
transform: rotate(90deg);
}
.wuxing-detail-quality {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.05rem;
color: var(--text-bright);
text-align: center;
margin: 0 0 1.1rem;
letter-spacing: .02em;
}
/* Sheng/Ke cycle buttons — clickable cross-references */
.wuxing-detail-cycles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem;
margin-bottom: 1.4rem;
}
.wuxing-detail-cycles .cycle {
appearance: none;
background: color-mix(in oklab, var(--wx-hue-target) 4%, var(--base-night));
border: 1px solid color-mix(in oklab, var(--wx-hue-target) 28%, var(--base-line));
border-radius: var(--radius-sm);
color: inherit;
font: inherit;
cursor: pointer;
padding: .7rem .9rem;
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: .65rem;
text-align: left;
transition: all .3s var(--ease-organic);
}
.wuxing-detail-cycles .cycle:hover {
background: color-mix(in oklab, var(--wx-hue-target) 10%, var(--base-night));
border-color: var(--wx-hue-target);
transform: translateY(-2px);
box-shadow: 0 8px 22px -12px color-mix(in oklab, var(--wx-hue-target) 60%, transparent);
}
.wuxing-detail-cycles .cycle:focus-visible {
outline: 2px solid var(--wx-hue-target);
outline-offset: 3px;
}
.wuxing-detail-cycles .cycle-glyph {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
color: var(--wx-hue-target);
line-height: 1;
}
.wuxing-detail-cycles .cycle-label {
font: 500 .65rem/1 'JetBrains Mono', monospace;
color: var(--text-faded);
letter-spacing: .14em;
text-transform: uppercase;
}
.wuxing-detail-cycles .cycle-target {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
color: var(--wx-hue-target);
line-height: 1;
}
.wuxing-detail-cycles .cycle-sheng .cycle-label::before { content: ''; }
.wuxing-detail-cycles .cycle-ke .cycle-label::before { content: ''; }
/* Three-layer grid */
.wuxing-detail-layers {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@container (min-width: 720px) {
.wuxing-detail-layers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.wuxing-detail-head {
grid-template-columns: 80px 1fr auto;
gap: .8rem;
}
.wuxing-detail-art { width: 80px; }
.wuxing-detail-cycles {
grid-template-columns: 1fr;
}
}
/* ============================================================================
* GRANULARITY COACH · Feldman-Barrett-Style Wort-Schmiede (inline chat)
* Stil orientiert sich an .seer-panel (floating) aber als ruhige Inline-
* Werkstatt in Phase XII gestaltet. Aubergine-Hintergrund, Magenta-Akzent
* (passend zur Phasen-Hue), Bubbles mit klarer Rolle-Unterscheidung.
* ============================================================================ */
.granularity-coach {
/* v18.18 · KI-Modul-Familie: gleiche illuminated-panel-Konstruktion wie
emotion-cartography + element-resonator. Radial-gradient + double-border
(outer 1px gold-tinted + inner 0.5px inset at 6px), aber mit magenta
statt gold als phase-hue. So lesen alle 3 KI-Module als eine Familie. */
position: relative;
margin: 2.6rem 0 1.6rem;
padding: 2rem 1.8rem 1.6rem;
background:
radial-gradient(ellipse at top left, color-mix(in oklab, var(--accent-magenta) 10%, transparent) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, color-mix(in oklab, var(--accent-gold) 6%, transparent) 0%, transparent 55%),
color-mix(in oklab, var(--base-deep) 92%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-magenta) 22%, var(--base-line));
border-radius: var(--radius);
container-type: inline-size;
}
.granularity-coach::before {
content: '';
position: absolute;
inset: 6px;
border: 0.5px solid color-mix(in oklab, var(--accent-magenta) 14%, transparent);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
}
.granularity-coach[data-state="thinking"]::after,
.granularity-coach[data-state="speaking"]::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-magenta, #d194d4) 50%,
transparent 100%);
background-size: 200% 100%;
animation: gc-shimmer 1.6s linear infinite;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
@keyframes gc-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.gc-head {
display: flex;
align-items: flex-start;
gap: .8rem;
margin-bottom: 1.1rem;
}
.gc-head-icon {
font-size: 1.6rem;
line-height: 1;
filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--accent-magenta, #d194d4) 50%, transparent));
}
.gc-head-text {
flex: 1;
}
.gc-head-tag {
font: 500 .68rem/1 'JetBrains Mono', monospace;
color: var(--text-faded);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: .35rem;
}
.gc-head h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 2vw, 1.7rem);
color: var(--text-bright);
margin: 0 0 .4rem;
line-height: 1.2;
}
.gc-head-lede {
font-size: .92rem;
line-height: 1.55;
color: var(--text-warm);
margin: 0;
}
.gc-citation {
font: 500 .7rem/1.5 'JetBrains Mono', monospace;
color: var(--text-faded);
margin-top: .5rem;
letter-spacing: .03em;
}
/* ---- Starter phrases ---- */
.gc-starters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 1.2rem 0;
}
.gc-starter {
appearance: none;
font: inherit;
background: var(--base-night);
border: 1px solid var(--base-line);
border-radius: 999px;
padding: .45rem 1rem;
color: var(--text-warm);
font-size: .88rem;
cursor: pointer;
transition: all .25s var(--ease-organic);
}
.gc-starter:hover {
border-color: var(--accent-magenta, #d194d4);
color: var(--text-bright);
background: color-mix(in oklab, var(--accent-magenta, #d194d4) 8%, var(--base-night));
transform: translateY(-1px);
}
.gc-starter:focus-visible {
outline: 2px solid var(--accent-magenta, #d194d4);
outline-offset: 3px;
}
/* ---- Chat body ---- */
.gc-body {
display: flex;
flex-direction: column;
gap: .7rem;
min-height: 0;
max-height: 480px;
overflow-y: auto;
scroll-behavior: smooth;
padding: .2rem .1rem;
}
.gc-body:empty {
display: none;
}
.gc-msg {
max-width: 88%;
padding: .7rem .95rem;
border-radius: var(--radius-sm);
font-size: .96rem;
line-height: 1.55;
animation: gc-msg-in .35s var(--ease-organic);
}
@keyframes gc-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.gc-msg-user {
align-self: flex-end;
background: color-mix(in oklab, var(--accent-magenta, #d194d4) 14%, var(--base-night));
border: 1px solid color-mix(in oklab, var(--accent-magenta, #d194d4) 30%, transparent);
color: var(--text-bright);
border-bottom-right-radius: 4px;
}
.gc-msg-seer {
align-self: flex-start;
background: var(--base-night);
border: 1px solid var(--base-line);
color: var(--text-warm);
border-bottom-left-radius: 4px;
}
.gc-msg-seer em {
color: var(--text-bright);
font-style: italic;
}
.gc-msg-seer mark {
background: color-mix(in oklab, var(--accent-magenta, #d194d4) 22%, transparent);
color: var(--text-bright);
padding: .05em .35em;
border-radius: 4px;
font-style: italic;
font-family: 'Cormorant Garamond', serif;
font-size: 1.05em;
}
.gc-msg-seer strong {
color: var(--text-bright);
font-weight: 600;
}
.gc-msg.streaming::after {
content: '▊';
color: var(--accent-magenta, #d194d4);
animation: gc-cursor 1s steps(1, end) infinite;
margin-left: 2px;
}
@keyframes gc-cursor {
50% { opacity: 0; }
}
/* ---- Input row ---- */
.gc-input-form {
display: grid;
grid-template-columns: 1fr auto auto;
gap: .5rem;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--base-line);
}
.gc-input-field {
appearance: none;
background: var(--base-night);
border: 1px solid var(--base-line);
border-radius: var(--radius-sm);
padding: .65rem .9rem;
color: var(--text-bright);
font: inherit;
font-size: .96rem;
transition: border-color .25s var(--ease-organic), box-shadow .25s var(--ease-organic);
}
.gc-input-field::placeholder { color: var(--text-faded); }
.gc-input-field:focus {
outline: none;
border-color: var(--accent-magenta, #d194d4);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-magenta, #d194d4) 22%, transparent);
}
.gc-input-field:disabled {
opacity: .5;
cursor: not-allowed;
}
.gc-send, .gc-reset {
appearance: none;
font: inherit;
background: transparent;
border: 1px solid var(--base-line);
color: var(--text-warm);
border-radius: var(--radius-sm);
padding: .55rem .8rem;
cursor: pointer;
font-size: .86rem;
transition: all .25s var(--ease-organic);
white-space: nowrap;
}
.gc-send {
border-color: color-mix(in oklab, var(--accent-magenta, #d194d4) 35%, var(--base-line));
color: var(--text-bright);
}
.gc-send:hover:not(:disabled) {
background: color-mix(in oklab, var(--accent-magenta, #d194d4) 10%, transparent);
border-color: var(--accent-magenta, #d194d4);
}
.gc-send:disabled {
opacity: .4;
cursor: not-allowed;
}
.gc-reset:hover {
border-color: var(--text-warm);
color: var(--text-bright);
}
/* "done" state — completed conversation */
.granularity-coach[data-state="done"] .gc-input-form {
opacity: .55;
}
.granularity-coach[data-state="done"] .gc-reset {
border-color: color-mix(in oklab, var(--accent-magenta, #d194d4) 40%, var(--base-line));
color: var(--text-bright);
animation: gc-reset-pulse 2s var(--ease-organic) infinite;
}
@keyframes gc-reset-pulse {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-magenta, #d194d4) 18%, transparent); }
}
@media (max-width: 600px) {
.granularity-coach {
padding: 1.2rem 1.1rem 1rem;
}
.gc-input-form {
grid-template-columns: 1fr;
}
.gc-input-form > * {
width: 100%;
}
.gc-msg {
max-width: 95%;
}
}
/* ============================================================================
* CODEX LUMENS · brand mark (v17.5)
*
* Hybrid: Codex-illuminierte Initiale + Vellum-Typografie + Astrolabium-Rubrik.
*
* Komposition:
* – Cartouche (80px SVG) mit Goldleaf-C, Hebrew ן, Vine-Flourishes,
* Jewel-Beeren (Rubin · Smaragd · Saphir)
* – Drei Register Wortzug: Capitulum-incipit · Instrument Serif title
* · Astrolabium-Rubrik mit ☉ und MMXXVI
*
* Override-Strategie: Base-Topbar-Layout bleibt (.topbar fixed + backdrop),
* die Brand-Mark wird ersetzt. Alte .glyph + small werden neutralisiert.
* ============================================================================ */
:root {
/* v18.33 · Single source of truth — alle gold-tokens aliasen jetzt
* auf shared --chx-elem-gold. Eliminates hex-duplikate. Hue-shifts
* propagieren automatisch über alle drei Sites + Spiegel. */
--vl-gold-deep: #7e5a17;
--vl-gold: var(--chx-elem-gold);
--vl-gold-light: var(--chx-elem-gold-light);
--vl-gold-soft: var(--chx-elem-gold-soft);
--accent-gold: var(--chx-elem-gold);
--accent-gold-light: var(--chx-elem-gold-light);
--accent-gold-soft: var(--chx-elem-gold-soft);
}
.topbar-brand-codex {
display: flex !important;
align-items: stretch;
gap: 1.1rem;
color: var(--text-bright);
text-decoration: none;
font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
font-style: normal !important;
font-size: initial !important;
position: relative;
}
.topbar-brand-codex .glyph,
.topbar-brand-codex small {
display: none;
}
/* ---------- Illuminated sigil ---------- */
.codex-sigil {
width: var(--chx-sigil-size, 72px); /* shared token: pari pari mit elements */
height: var(--chx-sigil-size, 72px);
flex-shrink: 0;
align-self: flex-start;
transform: translateY(-2px);
}
.codex-sigil svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.codex-gold {
animation: codex-gold-shimmer 9s ease-in-out infinite;
}
@keyframes codex-gold-shimmer {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.15) saturate(1.2); }
}
.codex-vine {
stroke-dasharray: 200;
stroke-dashoffset: 0;
animation: codex-vine-grow 14s ease-out infinite;
}
@keyframes codex-vine-grow {
0% { stroke-dashoffset: 200; opacity: 0; }
15% { opacity: 1; }
25%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
.codex-jewel {
transform-origin: center;
transform-box: fill-box;
animation: codex-jewel-pulse 5s ease-in-out infinite;
}
@keyframes codex-jewel-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* ---------- Three-register wordmark ---------- */
.codex-wordmark {
display: flex;
flex-direction: column;
justify-content: center;
gap: .25rem;
padding: .15rem 0 .1rem;
}
.codex-incipit {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: .56rem;
letter-spacing: .32em;
color: rgba(201, 164, 74, .68);
text-transform: uppercase;
line-height: 1;
}
.codex-title {
/* v18.18 · Pol-coding via type: energies/Capitulum nutzt Cormorant
Garamond ("manuscript"-tone, humanist warm, passt zum illuminierten
Manuskript). Elements/Tabula nutzt Instrument Serif ("engraving"
-tone, schärfer/display). Beide italic 1.45rem — gleiche Tonart,
anderer Pol. */
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-weight: 400;
font-style: italic;
font-size: 1.45rem;
line-height: 1;
letter-spacing: -.005em;
color: var(--text-bright);
}
.codex-title em {
font-style: italic;
color: var(--vl-gold);
font-weight: 400;
transition: color .35s var(--ease-organic);
}
.codex-rubric {
display: flex;
align-items: center;
gap: .55rem;
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: .58rem;
letter-spacing: .24em;
color: var(--text-warm);
text-transform: uppercase;
line-height: 1;
}
.codex-rule {
display: inline-block;
width: 24px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--vl-gold) 28%,
var(--vl-gold) 72%,
transparent 100%);
position: relative;
overflow: hidden;
}
.codex-rule::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation: vl-rule-pass 5s linear infinite;
}
.codex-sun {
color: var(--vl-gold);
font-family: 'Cormorant Garamond', serif;
font-size: .9rem;
letter-spacing: 0;
font-variant-emoji: text;
text-rendering: optimizeLegibility;
line-height: 1;
transform: translateY(-1px);
}
.codex-rubric-faded {
opacity: .58;
}
/* hover state: title em + sigil corner stars brighten */
.topbar-brand-codex:hover .codex-title em {
color: var(--vl-gold-light);
}
.topbar-brand-codex:hover .codex-jewel {
animation-duration: 2s;
}
/* Shared keyframe for all gold-rule light-passes (used by codex-rule,
.gold-rule, .mirror-path, etc.) */
@keyframes vl-rule-pass {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ---------- Topbar action buttons: gold-edge restraint ---------- */
.btn-ghost:hover {
border-color: var(--vl-gold);
color: var(--text-bright);
background: rgba(201, 164, 74, .06);
}
.btn-cmdk:hover {
border-color: var(--vl-gold);
color: var(--text-bright);
}
.btn-ghost[data-active="true"] {
border-color: var(--vl-gold-soft);
color: var(--text-bright);
background: rgba(201, 164, 74, .08);
}
/* ---------- Mobile: protect brand integrity, sacrifice from the right ---------- */
.topbar-brand-codex .codex-title {
white-space: nowrap;
}
.topbar { flex-wrap: nowrap !important; }
/* Dropdown menus need to escape topbar bounds vertically; topbar itself
shouldn't clip them. Mobile wrap-breakage is handled by flex-wrap: nowrap
+ responsive font-size + display:none on lower-priority items. */
@media (max-width: 820px) {
.topbar-brand-codex { gap: .85rem; }
.codex-incipit { display: none; }
.codex-title { font-size: 1.2rem; }
.codex-rubric { font-size: .54rem; gap: .45rem; letter-spacing: .2em; }
.codex-rubric-faded { display: none; }
.codex-sun { font-size: .8rem; }
}
@media (max-width: 620px) {
.topbar-actions a.btn-ghost:not([data-active]) { display: none; }
}
@media (max-width: 480px) {
.topbar-brand-codex { gap: .7rem; }
.codex-title { font-size: 1.05rem; }
.codex-rubric { display: none; }
.codex-wordmark { gap: .1rem; }
}
@media (max-width: 380px) {
.btn-ghost[data-active="true"] { display: none; }
}
/* v18.18 · codex-sigil size now driven by --chx-sigil-size in shared.css —
identische Sigil-Höhe auf elements + energies, single source of truth. */
/* ============================================================================
* VELLUM MOTION VOCABULARY · site-wide utility classes (v17.5)
*
* Diese Utilities propagieren die Vellum-Sprache überall:
* .gold-rule — wiederkehrender Trenner mit Lichtstrahl-Sweep
* .vellum-chapter — Kapitel-Numerus + Titel, refined editorial
* .vellum-accent — einzelner Gold-Akzent (Underline, Border-link, etc.)
* .vellum-pull — refined pull-paragraph (Instrument Serif italic)
*
* Plus globale Refinements für bestehende Elemente:
* .section-lede.dropped::first-letter → Instrument Serif + Gold-Strip
* .mirror-path → Vellum-Style (Gold-Linie statt Box)
* section[data-num]::before → Roman numeral in Gold
* ============================================================================ */
/* The recurring divider — use anywhere a horizontal break is needed */
.gold-rule {
display: block;
height: 1px;
width: 80px;
margin: 2.5rem auto;
background: linear-gradient(90deg,
transparent 0%,
var(--vl-gold) 28%,
var(--vl-gold) 72%,
transparent 100%);
position: relative;
overflow: hidden;
}
.gold-rule::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
animation: vl-rule-pass 7s linear infinite;
animation-delay: var(--rule-delay, 0s);
}
.gold-rule.wide { width: 160px; }
.gold-rule.narrow { width: 40px; }
/* Refined chapter marker — for phase opens or section subheads */
.vellum-chapter {
display: flex;
align-items: baseline;
gap: .8rem;
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: .68rem;
letter-spacing: .28em;
color: var(--text-faded);
text-transform: uppercase;
margin-bottom: 1.4rem;
}
.vellum-chapter .num {
color: var(--vl-gold);
font-style: normal;
}
.vellum-chapter .rule-tiny {
display: inline-block;
width: 24px;
height: 1px;
background: var(--vl-gold-soft);
}
/* Single gold accent — for inline highlights, links, key terms */
.vellum-accent {
color: var(--vl-gold);
font-style: italic;
font-weight: 500;
border-bottom: 1px solid var(--vl-gold-soft);
text-decoration: none;
transition: border-color .3s var(--ease-organic);
}
.vellum-accent:hover {
border-bottom-color: var(--vl-gold);
}
/* Pull paragraph — refined editorial moment */
.vellum-pull {
font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
line-height: 1.35;
color: var(--text-bright);
text-align: center;
max-width: 36ch;
margin: 3rem auto;
letter-spacing: -.005em;
}
.vellum-pull::before,
.vellum-pull::after {
content: '';
display: block;
height: 1px;
width: 40px;
margin: 1.2rem auto;
background: linear-gradient(90deg, transparent, var(--vl-gold), transparent);
}
/* ---------- Refinement: existing drop-caps adopt Vellum register ---------- */
.section-lede.dropped::first-letter {
font-family: 'Instrument Serif', 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 4.6em !important;
line-height: .8 !important;
color: var(--text-bright) !important;
/* gold light-strip on the left edge — re-uses the brand-mark visual signature */
background: linear-gradient(90deg,
var(--vl-gold) 0,
var(--vl-gold) 2px,
transparent 2px,
transparent 100%);
background-clip: padding-box;
padding-left: .15em;
margin-right: .08em;
}
/* ---------- Refinement: mirror-path becomes a Vellum gold rule + caption ---------- */
.mirror-path {
/* override base box-style with a Vellum gold-rule + small caption */
background: transparent !important;
border: none !important;
border-top: 1px solid transparent !important;
position: relative;
text-align: center;
padding: 2rem 1rem 1rem !important;
color: var(--text-faded);
font: 500 .72rem/1.6 'JetBrains Mono', monospace !important;
letter-spacing: .14em;
text-transform: uppercase;
margin-top: 3rem !important;
}
.mirror-path::before {
/* the gold rule replaces the box border */
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--vl-gold) 28%,
var(--vl-gold) 72%,
transparent 100%);
overflow: hidden;
}
.mirror-path::after {
/* light-pass through the rule */
content: '';
position: absolute;
top: 0; left: calc(50% - 60px);
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
animation: vl-rule-pass 8s linear infinite;
pointer-events: none;
}
.mirror-path a {
color: var(--text-warm);
border-bottom: 1px solid var(--vl-gold-soft);
text-decoration: none;
padding-bottom: .1em;
transition: border-color .3s var(--ease-organic), color .3s var(--ease-organic);
}
.mirror-path a:hover {
color: var(--vl-gold);
border-bottom-color: var(--vl-gold);
}
/* ---------- Refinement: phase section-num gets gold chapter accent ---------- */
.section-num {
position: relative;
padding-left: 1.2rem;
}
.section-num::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 1px;
background: var(--vl-gold);
opacity: .7;
}
/* ============================================================================
* BANNER · two-row topbar (v17.6)
*
* Row 1: Brand-Mark links · Werkzeuge-Dropdown + Aktions-Pills rechts
* Row 2: Horizontaler 20-Phasen-Rail als zentrale Hauptüberschrift +
* aktiver Phasen-Titel rechts
*
* Die alte vertikale .section-rail (rechter Bildschirm-Rand) wird auf
* Desktop versteckt — IntersectionObserver läuft weiter im Hintergrund,
* nur die visuelle Darstellung wandert in den Banner.
* ============================================================================ */
.topbar-banner {
flex-direction: column !important;
align-items: stretch !important;
padding: .7rem var(--gutter) .5rem !important;
gap: .5rem;
}
.topbar-row {
display: flex;
align-items: center;
width: 100%;
}
.topbar-row-1 {
justify-content: space-between;
gap: 1.2rem;
}
.topbar-row-2 {
gap: 1.2rem;
padding-top: .55rem;
border-top: 1px solid color-mix(in oklab, var(--vl-gold) 14%, transparent);
position: relative;
}
.topbar-row-2::before {
/* very subtle gold-leaf light pass on the row separator */
content: '';
position: absolute;
top: -1px; left: 0;
width: 100%; height: 1px;
background: linear-gradient(90deg,
transparent 0%, var(--vl-gold) 50%, transparent 100%);
opacity: .5;
mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
pointer-events: none;
}
/* Hide the legacy fixed-position vertical rail — its IntersectionObserver
still runs but the visual moves into the topbar. */
.section-rail {
display: none !important;
}
/* ---------- Horizontal rail dots ---------- */
.tb-rail {
display: flex;
align-items: center;
gap: 5px;
flex: 1;
flex-wrap: nowrap;
min-width: 0;
}
.tb-rail-dot {
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
width: 14px;
height: 14px;
border-radius: 50%;
cursor: pointer;
display: grid;
place-items: center;
flex: 0 0 14px;
position: relative;
transition: transform .25s var(--ease-organic);
}
.tb-rail-dot::before {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-faded);
opacity: .4;
transition: all .3s var(--ease-organic);
}
.tb-rail-dot:hover::before {
opacity: .85;
width: 7px;
height: 7px;
background: var(--vl-gold);
}
.tb-rail-dot.is-visited::before {
opacity: .7;
background: var(--vl-gold-soft);
}
.tb-rail-dot.is-active {
transform: scale(1.05);
}
.tb-rail-dot.is-active::before {
opacity: 1;
width: 9px;
height: 9px;
background: var(--vl-gold);
box-shadow: 0 0 10px var(--vl-gold-soft);
}
/* Sphere separator — thin vertical line between sphere groups */
.tb-rail-sep {
flex: 0 0 1px;
width: 1px;
height: 10px;
background: linear-gradient(180deg,
transparent 0%,
color-mix(in oklab, var(--vl-gold) 38%, transparent) 50%,
transparent 100%);
margin: 0 4px;
position: relative;
}
.tb-rail-sep[data-sphere]::after {
content: attr(data-sphere);
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font: 500 .54rem/1 'JetBrains Mono', monospace;
letter-spacing: .2em;
color: var(--vl-gold);
opacity: .6;
text-transform: uppercase;
}
/* Tooltip on dot hover */
.tb-rail-dot[data-label]::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
white-space: nowrap;
padding: .35rem .65rem;
background: var(--base-elevated);
border: 1px solid color-mix(in oklab, var(--vl-gold) 25%, var(--base-line));
border-radius: var(--radius-sm);
font: 500 .68rem/1 'JetBrains Mono', monospace;
letter-spacing: .06em;
color: var(--text-bright);
opacity: 0;
pointer-events: none;
transition: opacity .2s, transform .2s;
z-index: 100;
}
.tb-rail-dot:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---------- Active phase title block — the "Hauptüberschrift" ---------- */
.tb-phase-title {
display: flex;
align-items: baseline;
gap: .55rem;
flex-shrink: 0;
min-width: max-content;
padding-left: 1rem;
border-left: 1px solid color-mix(in oklab, var(--vl-gold) 20%, transparent);
}
.tb-phase-num {
font: 500 .64rem/1 'JetBrains Mono', monospace;
letter-spacing: .22em;
color: var(--vl-gold);
text-transform: uppercase;
}
.tb-phase-name {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: 1.05rem;
line-height: 1;
color: var(--text-bright);
letter-spacing: -.005em;
}
.tb-phase-sphere {
font: 500 .58rem/1 'JetBrains Mono', monospace;
letter-spacing: .22em;
color: var(--text-faded);
text-transform: uppercase;
}
/* ---------- Werkzeuge dropdown ---------- */
.werkzeuge {
position: relative;
}
.btn-werkzeuge {
appearance: none;
background: transparent;
border: 1px solid var(--base-line);
border-radius: 999px;
padding: .5rem .85rem;
color: var(--text-warm);
font: 500 .8rem/1 'JetBrains Mono', monospace;
letter-spacing: .04em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .4rem;
transition: all .25s var(--ease-organic);
}
.btn-werkzeuge:hover,
.werkzeuge[data-open="true"] .btn-werkzeuge {
border-color: var(--vl-gold);
color: var(--text-bright);
background: rgba(201, 164, 74, .06);
}
.btn-werkzeuge .wz-glyph {
font-family: 'Cormorant Garamond', serif;
font-size: .95rem;
color: var(--vl-gold);
line-height: 1;
font-variant-emoji: text;
}
.werkzeuge-menu {
position: absolute;
top: calc(100% + .55rem);
right: 0;
min-width: 280px;
background: color-mix(in oklab, var(--base-elevated) 70%, var(--base-deep));
border: 1px solid color-mix(in oklab, var(--vl-gold) 22%, var(--base-line));
border-radius: var(--radius-sm);
padding: .55rem;
display: grid;
gap: 2px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 14px 36px -16px rgba(0, 0, 0, .55),
0 0 0 1px color-mix(in oklab, var(--vl-gold) 10%, transparent) inset;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .2s var(--ease-organic), transform .25s var(--ease-organic);
z-index: 100;
}
.werkzeuge[data-open="true"] .werkzeuge-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.wz-item {
display: grid;
grid-template-columns: 28px 1fr;
gap: .8rem;
align-items: center;
padding: .7rem .85rem;
border-radius: 6px;
color: var(--text-warm);
text-decoration: none;
transition: background .2s var(--ease-organic), color .2s var(--ease-organic);
}
.wz-item:hover {
background: rgba(201, 164, 74, .08);
color: var(--text-bright);
}
.wz-item-glyph {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: rgba(201, 164, 74, .08);
border: 1px solid color-mix(in oklab, var(--vl-gold) 25%, transparent);
border-radius: 50%;
font-family: 'Cormorant Garamond', serif;
font-size: .9rem;
color: var(--vl-gold);
line-height: 1;
font-variant-emoji: text;
}
.wz-item-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wz-item-name {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: 1.05rem;
color: var(--text-bright);
line-height: 1;
}
.wz-item-desc {
font: 500 .62rem/1 'JetBrains Mono', monospace;
letter-spacing: .14em;
color: var(--text-faded);
text-transform: uppercase;
}
/* ---------- Mobile breakpoints (override earlier ones for the new banner) ---------- */
@media (max-width: 900px) {
.tb-phase-title { padding-left: .7rem; }
.tb-phase-sphere { display: none; }
.tb-phase-name { font-size: .95rem; }
.tb-rail { gap: 4px; }
}
@media (max-width: 720px) {
.topbar-row-2 { display: none; }
.tb-rail, .tb-phase-title { display: none; }
/* mobile keeps the existing .phasepill for current-phase indication */
.werkzeuge .wz-label { display: none; }
.btn-werkzeuge { padding: .5rem .65rem; }
.werkzeuge-menu { right: -2rem; min-width: 260px; }
}
@media (max-width: 480px) {
.werkzeuge-menu { right: -1rem; min-width: 240px; }
}
/* ============================================================================
* THREE-LAYER WHEEL · Konzept #1 · Drei-Schichten-Disziplin (v17.8)
*
* Eigene Section zwischen Bridge und Phase I. Aufbau:
* – Section-Head mit Vellum-Chapter-Rubrik + Instrument-Serif-Title
* – TLW-Stage (Canvas) zentral, ~520px hoch auf Desktop
* – Tab-Buttons (Alle drei · Geometrie · Phänomenologie · Mythos)
* – Panel-Stack mit Layer-Beschreibung
*
* Three.js rendert die drei jewel-tone Ringe + Goldachse + Glyphen.
* ============================================================================ */
.tlw-section {
padding: 6rem 0 7rem;
position: relative;
isolation: isolate;
}
.tlw-section::before {
/* very subtle aurora wash behind the wheel */
content: '';
position: absolute;
top: 15%; left: 50%;
transform: translateX(-50%);
width: 70%;
max-width: 900px;
aspect-ratio: 1;
background:
radial-gradient(circle at center, rgba(196,168,218,.08) 0%, transparent 55%);
filter: blur(20px);
pointer-events: none;
z-index: -1;
}
.tlw-section .section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 3rem;
}
.tlw-section .vellum-chapter {
justify-content: center;
}
.tlw-section .section-title {
font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
line-height: 1.05;
letter-spacing: -.01em;
color: var(--text-bright);
margin: 0 0 1.2rem;
}
.tlw-section .section-title em {
color: var(--vl-gold);
font-style: italic;
}
.tlw-section .section-lede {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.22rem);
line-height: 1.6;
color: var(--text-warm);
max-width: 620px;
margin: 0 auto;
}
/* ============================================================================
* v18.8 · TLW Codex-Frame · Illuminated-Manuscript-Plate als Bühnenrahmen
*
* Wrapper around .tlw-stage. Adds gilt-double-border, four corner-ornaments
* (corner.png × 4 mit Rotation), plate-marker top-center, hint-strip bottom.
* ============================================================================ */
.tlw-codex {
position: relative;
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 2.4rem 2rem 0.6rem;
background:
radial-gradient(ellipse at top, color-mix(in oklab, var(--vl-gold) 7%, transparent) 0%, transparent 55%),
color-mix(in oklab, var(--base-deep) 92%, transparent);
border: 1px solid color-mix(in oklab, var(--vl-gold) 22%, var(--base-line));
border-radius: var(--radius-md);
isolation: isolate;
}
/* Inner gilt-rule hairline · v18.9 toned down von 25% auf 10% */
.tlw-codex::before {
content: '';
position: absolute;
inset: 7px;
border: 0.5px solid color-mix(in oklab, var(--vl-gold) 10%, transparent);
border-radius: calc(var(--radius-md) - 6px);
pointer-events: none;
z-index: 0;
}
.tlw-codex > * { position: relative; z-index: 1; }
/* Four corner-ornaments — reduced in v18.9 to 0.22 opacity + into-frame positioning */
.tlw-corner {
position: absolute;
width: clamp(48px, 5.5vw, 76px);
height: auto;
pointer-events: none;
opacity: 0.22;
mix-blend-mode: screen;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--vl-gold) 30%, transparent));
z-index: 2;
}
.tlw-corner-tl { top: 3px; left: 3px; transform: rotate(0deg); }
.tlw-corner-tr { top: 3px; right: 3px; transform: rotate(90deg); }
.tlw-corner-bl { bottom: 3px; left: 3px; transform: rotate(-90deg); }
.tlw-corner-br { bottom: 3px; right: 3px; transform: rotate(180deg); }
/* Plate-marker top-center · "Tab. I · methodi tres" */
.tlw-plate-marker {
position: absolute;
top: 0.8rem;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
padding: 0.25rem 0.85rem;
background: color-mix(in oklab, var(--base-night) 70%, transparent);
border: 0.5px solid color-mix(in oklab, var(--vl-gold) 35%, transparent);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
z-index: 3;
}
.tlw-plate-marker-num {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.85rem;
text-transform: none;
letter-spacing: 0.02em;
color: var(--vl-gold);
}
.tlw-plate-marker-dot { color: color-mix(in oklab, var(--vl-gold) 60%, transparent); }
.tlw-plate-marker-label { color: var(--text-faded); }
/* Hint-strip bottom · subtle initial discoverability hint */
.tlw-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin: 0.6rem auto 0;
padding: 0.4rem 0.8rem 0.6rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.85rem;
color: color-mix(in oklab, var(--vl-gold) 65%, var(--text-faded));
opacity: 0;
animation: tlw-hint-in 0.6s var(--ease-organic) 1.2s forwards,
tlw-hint-pulse 4s var(--ease-organic) 1.8s infinite;
}
.tlw-hint-glyph {
font-size: 0.7rem;
color: var(--vl-gold);
opacity: 0.7;
}
@keyframes tlw-hint-in {
to { opacity: 1; }
}
@keyframes tlw-hint-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
.tlw-hint { animation: none; opacity: 0.75; }
}
.tlw-stage {
position: relative;
width: 100%;
max-width: 880px;
margin: 0 auto;
aspect-ratio: 16 / 10;
min-height: 380px;
border-radius: var(--radius-md);
overflow: hidden;
touch-action: none;
}
.tlw-stage .tlw-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.tlw-stage-fallback {
/* If WebGL fails, the stage collapses and the descriptive panels carry the message */
display: none;
}
/* ---------- Layer-selection buttons ---------- */
.tlw-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .55rem;
margin: 2rem auto 2.4rem;
max-width: 720px;
}
.tlw-layer-btn {
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.05rem 0.55rem;
background: color-mix(in oklab, var(--base-deep) 50%, transparent);
border: 1px solid var(--base-line);
border-radius: 0.5rem;
color: var(--text-warm);
font-family: 'Manrope', sans-serif;
cursor: pointer;
transition: all .3s var(--ease-organic);
position: relative;
}
.tlw-layer-btn::after {
/* hairline gilt underline reveals on hover/active */
content: '';
position: absolute;
left: 1rem;
right: 1rem;
bottom: 3px;
height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in oklab, var(--vl-gold) 0%, transparent),
transparent);
transition: background .35s var(--ease-organic);
}
.tlw-layer-btn:hover {
border-color: var(--vl-gold-soft);
color: var(--text-bright);
background: color-mix(in oklab, var(--vl-gold) 5%, var(--base-deep));
transform: translateY(-1px);
}
.tlw-layer-btn:hover::after {
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--vl-gold) 55%, transparent), transparent);
}
.tlw-layer-btn[aria-selected="true"] {
border-color: var(--vl-gold);
color: var(--text-bright);
background: color-mix(in oklab, var(--vl-gold) 10%, var(--base-deep));
box-shadow: 0 0 0 1px rgba(201, 164, 74, .12) inset;
}
.tlw-layer-btn[aria-selected="true"]::after {
background: linear-gradient(90deg, transparent, var(--vl-gold), transparent);
}
.tlw-btn-glyph {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.45rem;
font-variant-emoji: text;
text-rendering: optimizeLegibility;
line-height: 1;
color: var(--vl-gold);
flex-shrink: 0;
}
.tlw-btn-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
gap: 2px;
}
.tlw-btn-label {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 0.86rem;
letter-spacing: 0.005em;
line-height: 1;
}
.tlw-btn-sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: color-mix(in oklab, var(--vl-gold) 60%, var(--text-faded));
line-height: 1;
}
/* ---------- Layer-info panels ---------- */
.tlw-panels {
max-width: 680px;
margin: 0 auto;
position: relative;
min-height: 180px;
}
.tlw-panel {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity .5s var(--ease-organic), transform .5s var(--ease-organic);
text-align: center;
}
.tlw-panel.is-active {
position: relative;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.tlw-panel-title {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.4rem, 2.4vw, 1.7rem);
line-height: 1.15;
letter-spacing: -.005em;
color: var(--text-bright);
margin: 0 0 .8rem;
}
.tlw-panel p,
.tlw-panel .tlw-panel-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 1.5vw, 1.12rem);
line-height: 1.65;
color: var(--text-warm);
margin: 0;
}
/* Illuminated paragraph marks · drop-cap-style glyph above title */
.tlw-panel-mark {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 2.4rem;
line-height: 1;
margin-bottom: 0.4rem;
color: var(--vl-gold);
filter: drop-shadow(0 0 10px color-mix(in oklab, currentColor 35%, transparent));
}
/* Italic curly-quotes flanking the quote text */
.tlw-panel-quote::before {
content: '“';
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.6em;
line-height: 0;
vertical-align: -0.25em;
margin-right: 0.05em;
color: color-mix(in oklab, var(--vl-gold) 55%, var(--text-warm));
}
.tlw-panel-quote::after {
content: '”';
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.6em;
line-height: 0;
vertical-align: -0.25em;
margin-left: 0.05em;
color: color-mix(in oklab, var(--vl-gold) 55%, var(--text-warm));
}
/* Signature line below the quote */
.tlw-panel-sig {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-top: 1.2rem;
}
.tlw-panel-sig-rule {
flex: 0 0 auto;
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--vl-gold), transparent);
opacity: 0.7;
}
.tlw-panel-sig-text {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--vl-gold) 70%, var(--text-faded));
font-style: normal;
}
/* ---------- Mobile ---------- */
@media (max-width: 720px) {
.tlw-section { padding: 4rem 0 5rem; }
.tlw-codex { padding: 2rem 1rem 0.5rem; }
.tlw-stage { min-height: 320px; aspect-ratio: 4 / 3; }
.tlw-controls { gap: .4rem; }
.tlw-layer-btn { padding: 0.5rem 0.8rem; gap: 0.45rem; }
.tlw-btn-label { font-size: 0.78rem; }
.tlw-btn-sub { font-size: 0.66rem; }
.tlw-corner { width: 50px; }
.tlw-plate-marker { font-size: 0.6rem; padding: 0.2rem 0.7rem; }
.tlw-plate-marker-num { font-size: 0.78rem; }
.tlw-hint { font-size: 0.78rem; }
.tlw-panel-mark { font-size: 2rem; }
}
@media (max-width: 480px) {
.tlw-codex { padding: 1.7rem 0.6rem 0.4rem; }
.tlw-stage { aspect-ratio: 1; min-height: 280px; }
.tlw-corner { width: 42px; opacity: 0.32; }
.tlw-layer-btn .tlw-btn-sub { display: none; }
.tlw-layer-btn { padding: 0.5rem 0.7rem; }
.tlw-btn-glyph { font-size: 1.15rem; }
.tlw-btn-label { font-size: 0.78rem; }
.tlw-hint { font-size: 0.74rem; gap: 0.4rem; }
.tlw-plate-marker { top: 0.5rem; font-size: 0.55rem; padding: 0.15rem 0.55rem; }
.tlw-plate-marker-num { font-size: 0.7rem; }
.tlw-panel-mark { font-size: 1.7rem; }
.tlw-panel-sig-text { font-size: 0.6rem; letter-spacing: 0.12em; }
}
/* respect prefers-reduced-motion — disable hover-scaling on rings */
@media (prefers-reduced-motion: reduce) {
.tlw-layer-btn { transition: none; }
}
/* ============================================================================
* TLW · Glyph-Pill (v17.9) · klickbar mit folgender Erklärung
*
* DOM-Overlay innerhalb von .tlw-stage. Position wird pro Frame vom Three.js
* Modul gesetzt (transform: translate). Die Pill bewegt sich also mit dem
* Glyph mit, auch während der Ring rotiert.
*
* Aesthetic: kleiner, gold-edge Cartouche, Cormorant italic für name,
* JetBrains Mono caps für desc-suffix.
* ============================================================================ */
.tlw-stage { position: relative; }
.tlw-pill {
position: absolute;
top: 0; left: 0;
width: 268px;
margin-left: 14px;
margin-top: -42px;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity .35s var(--ease-organic);
--accent: var(--vl-gold);
}
.tlw-pill[data-visible="true"] {
opacity: 1;
pointer-events: auto;
}
.tlw-pill-arm {
position: absolute;
left: -14px;
top: 48px;
width: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent));
opacity: .85;
}
.tlw-pill-body {
background: color-mix(in oklab, var(--base-elevated) 80%, var(--base-deep));
border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--base-line));
border-radius: var(--radius-sm);
padding: .7rem .9rem .8rem;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 10px 30px -12px rgba(0, 0, 0, .55),
0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent) inset;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.tlw-pill-head {
display: flex;
align-items: baseline;
gap: .55rem;
margin-bottom: .35rem;
line-height: 1;
}
.tlw-pill-glyph {
font-family: 'Cormorant Garamond', 'JetBrains Mono', serif;
font-size: 1.55rem;
font-weight: 500;
line-height: 1;
color: var(--accent);
font-variant-emoji: text;
text-rendering: optimizeLegibility;
}
.tlw-pill-name {
font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 1.1rem;
line-height: 1;
color: var(--text-bright);
letter-spacing: -.005em;
}
.tlw-pill-desc {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: .92rem;
line-height: 1.4;
color: var(--text-warm);
}
@media (max-width: 720px) {
.tlw-pill { width: 200px; }
.tlw-pill-body { padding: .6rem .75rem; }
.tlw-pill-glyph { font-size: 1.35rem; }
.tlw-pill-name { font-size: 1rem; }
.tlw-pill-desc { font-size: .82rem; }
}
@media (max-width: 480px) {
.tlw-pill { width: 170px; }
}
/* ============================================================================
* ASSET ENRICHER · v18.0 · komplette Branding-Asset-Integration
*
* Diese Sektion stylet:
* – TLW-Schichten-Background-Plates
* – phase-cover Bilder pro Phasen-Section
* – sphere-banner Mini-Sections zwischen Sphären
* – section-divider Ornamente zwischen Sections
* – UI-Icons in seer-input + cmdk-btn
* ============================================================================ */
/* ---------- TLW Schichten-Plates ---------- */
.tlw-plates {
position: absolute;
inset: 0;
pointer-events: none;
display: grid;
place-items: center;
z-index: 0;
}
.tlw-plate {
position: absolute;
width: 65%;
max-width: 560px;
height: auto;
opacity: 0;
filter: blur(2px) saturate(105%);
mix-blend-mode: screen;
transform: scale(.94);
transition:
opacity .8s var(--ease-organic),
transform .8s var(--ease-organic),
filter .8s var(--ease-organic);
}
.tlw-plate.is-active {
opacity: .28;
filter: blur(.5px) saturate(115%);
transform: scale(1);
}
/* ---------- Phase Cover (per Section) — subtle decorative mark ---------- */
.phase-cover {
position: absolute;
top: 3rem;
right: 3rem;
width: clamp(72px, 7vw, 110px);
aspect-ratio: 1;
pointer-events: none;
z-index: 1;
opacity: 0;
animation: phase-cover-in 1.4s var(--ease-organic) 0.3s forwards;
}
.phase-cover img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)) saturate(102%);
border-radius: var(--radius-sm);
mix-blend-mode: screen;
}
@keyframes phase-cover-in {
to { opacity: 0.55; transform: translateY(0); }
from { opacity: 0; transform: translateY(12px); }
}
@media (max-width: 900px) {
.phase-cover { top: 1.5rem; right: 1.2rem; width: 56px; opacity: 0.4; }
}
@media (max-width: 480px) {
.phase-cover { display: none; }
}
section.section { position: relative; } /* allow absolute phase-cover positioning */
/* ---------- Sphere Banner (between sphere transitions) ---------- */
.sphere-banner {
padding: 5rem 0 5.5rem;
position: relative;
isolation: isolate;
overflow: hidden;
}
.sphere-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 50%, var(--sphere-glow, rgba(196,168,218,.10)) 0%, transparent 60%),
radial-gradient(ellipse at 70% 50%, var(--sphere-glow-2, rgba(245,208,197,.06)) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.sphere-banner-a { --sphere-glow: rgba(212,197,160,.16); --sphere-glow-2: rgba(245,208,197,.08); }
.sphere-banner-b { --sphere-glow: rgba(255,155,184,.16); --sphere-glow-2: rgba(245,205,154,.08); }
.sphere-banner-c { --sphere-glow: rgba(168,224,224,.16); --sphere-glow-2: rgba(232,155,239,.08); }
.sphere-banner-d { --sphere-glow: rgba(196,168,218,.16); --sphere-glow-2: rgba(184,226,188,.08); }
.sphere-banner-grid {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: 3rem;
align-items: center;
}
.sphere-banner-art {
position: relative;
aspect-ratio: 1;
display: grid;
place-items: center;
}
.sphere-banner-art img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 40px rgba(0,0,0,.45)) saturate(105%);
border-radius: var(--radius-md);
animation: sphere-art-float 18s var(--ease-organic) infinite;
}
@keyframes sphere-art-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-8px) scale(1.015); }
}
.sphere-banner-text {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.sphere-banner-eyebrow {
display: flex;
align-items: center;
gap: .85rem;
font: 500 .7rem/1 'JetBrains Mono', monospace;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--text-faded);
}
.sphere-banner-letter {
font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.6rem;
color: var(--vl-gold);
line-height: 1;
letter-spacing: 0;
text-transform: none;
}
.sphere-banner-rule {
flex: 0 0 32px;
height: 1px;
background: linear-gradient(90deg, var(--vl-gold), transparent);
opacity: .7;
}
.sphere-banner-tag {
color: var(--vl-gold);
}
.sphere-banner-title {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.04;
letter-spacing: -.01em;
color: var(--text-bright);
margin: 0;
}
.sphere-banner-phrase {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.6;
color: var(--text-warm);
margin: 0;
}
@media (max-width: 820px) {
.sphere-banner-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.sphere-banner-eyebrow { justify-content: center; }
.sphere-banner-art { max-width: 260px; margin: 0 auto; }
}
/* ---------- Section Dividers (ornaments between phases · v18.3) ----------
* Horizontaler ornament-streifen zwischen zwei aufeinanderfolgenden phases
* innerhalb derselben sphäre. Sphäre-übergänge haben ihren eigenen großen
* sphere-banner und brauchen hier keinen extra divider.
*
* Klein, mittig, screen-blended, gedämpft — wie ein printer's flourish
* zwischen absätzen in einem alten codex. Niemals dominanter als der
* section-cover-glyph weiter unten in der section. */
.section-divider {
display: block;
margin: 0 auto;
padding: 1.6rem 0 0.4rem;
text-align: center;
pointer-events: none;
opacity: 0.6;
}
.section-divider img {
display: inline-block;
max-width: min(280px, 38vw);
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
mix-blend-mode: screen;
filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent-rosegold) 22%, transparent));
opacity: 0.85;
}
/* Per-sphäre Hue-Tönung — leichtes drop-shadow nach Sphäre */
.section-divider-a img { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-cyan) 30%, transparent)); }
.section-divider-b img { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-rosegold) 32%, transparent)); }
.section-divider-c img { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-magenta) 28%, transparent)); }
.section-divider-d img { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-gold) 35%, transparent)); }
@media (max-width: 640px) {
.section-divider { padding: 1rem 0 0.2rem; }
.section-divider img { max-width: 60vw; max-height: 44px; }
}
/* ---------- UI Icons in seer-input + cmdk-btn ---------- */
.ui-icon {
width: 18px;
height: 18px;
object-fit: contain;
vertical-align: middle;
flex-shrink: 0;
}
.ui-icon-search { width: 16px; height: 16px; opacity: 0.85; }
.ui-icon-mic,
.ui-icon-arrow {
width: 22px;
height: 22px;
display: block;
margin: 0 auto;
opacity: 0.9;
}
.ui-icon-close { width: 16px; height: 16px; opacity: 0.85; }
/* Play-Overlay-Icon im VoicePill-Avatar — Brand-PNG statt SVG-Triangle */
.ui-icon-play {
width: 34px;
height: 34px;
object-fit: contain;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--vp-hue, var(--accent-rosegold)) 60%, transparent));
}
/* Voice-Call-Toggle in seer-panel-head — Brand-PNG statt Phone-SVG */
.ui-icon-voice-call {
width: 22px;
height: 22px;
object-fit: contain;
opacity: 0.92;
transition: filter .25s var(--ease-organic);
}
.voice-call-toggle[aria-pressed="true"] .ui-icon-voice-call {
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-rosegold) 80%, transparent));
}
/* Cmdp-Icon — SVG zu PNG geswapped, brauchen jetzt explizite Size */
.cmdp-icon {
width: 20px;
height: 20px;
object-fit: contain;
opacity: 0.85;
}
#seer-mic, #seer-send, #seer-close {
display: grid;
place-items: center;
}
/* ============================================================================
* SEER AVATAR · animierte Portrait-Frames (v18.1)
* SeerAvatar-Modul switched src — wir machen den Wechsel weich via image-rendering
* + opacity-Transition während des Frame-Swaps.
* ============================================================================ */
.seer-panel-head img {
transition: opacity .14s ease-in-out, filter .25s ease-out;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.seer-panel[data-state="thinking"] .seer-panel-head img { filter: saturate(.92) brightness(.96); }
.seer-panel[data-state="speaking"] .seer-panel-head img { filter: saturate(1.06) brightness(1.03); }
/* Subtle pulsing glow on the seer portrait reflecting state */
.seer-panel-head img {
box-shadow: 0 0 0 0 transparent;
border-radius: 50%;
}
.seer-panel[data-state="thinking"] .seer-panel-head img {
animation: seer-pulse-thinking 1.4s ease-in-out infinite;
}
.seer-panel[data-state="speaking"] .seer-panel-head img {
animation: seer-pulse-speaking 0.6s ease-in-out infinite;
}
@keyframes seer-pulse-thinking {
0%, 100% { box-shadow: 0 0 8px 1px rgba(196, 168, 218, .25); }
50% { box-shadow: 0 0 16px 3px rgba(196, 168, 218, .55); }
}
@keyframes seer-pulse-speaking {
0%, 100% { box-shadow: 0 0 12px 2px rgba(255, 155, 184, .35); }
50% { box-shadow: 0 0 20px 4px rgba(255, 155, 184, .65); }
}
/* Bridge-Section Element-Icons (5 elements) */
.bridge-elements {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid color-mix(in oklab, var(--vl-gold) 18%, transparent);
}
.bridge-el {
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
flex: 1;
min-width: 60px;
}
.bridge-el img {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)) saturate(108%);
transition: transform .4s var(--ease-organic);
}
.bridge-el:hover img {
transform: scale(1.15) translateY(-2px);
}
.bridge-el span:last-child {
font: 500 .68rem/1 'JetBrains Mono', monospace;
letter-spacing: .15em;
color: var(--text-faded);
text-transform: uppercase;
}
@media (max-width: 720px) {
.bridge-elements { gap: .6rem; }
.bridge-el img { width: 36px; height: 36px; }
}
/* ============================================================================
* VOICE-CALL · Toggle in seer-panel-head (v18.2)
*
* Toggled `data-voice-call="true"` auf #seer-panel.
* Wenn aktiv: pulsierender Glow um den ganzen Panel-Header, mic-button bekommt
* eine Active-Aura, Subtitle wechselt zu "Voice-Call läuft".
* ============================================================================ */
.voice-call-toggle {
appearance: none;
background: transparent;
border: 1px solid var(--base-line);
border-radius: 50%;
width: 36px;
height: 36px;
display: grid;
place-items: center;
color: var(--text-warm);
cursor: pointer;
margin-right: .5rem;
transition: all .25s var(--ease-organic);
flex-shrink: 0;
}
.voice-call-toggle:hover {
border-color: var(--accent-rosegold);
color: var(--accent-rosegold);
transform: scale(1.05);
}
.voice-call-toggle[aria-pressed="true"] {
background: linear-gradient(135deg,
color-mix(in oklab, var(--accent-rosegold) 30%, transparent),
color-mix(in oklab, var(--accent-cyan) 20%, transparent));
border-color: var(--accent-rosegold);
color: var(--text-bright);
box-shadow: 0 0 18px color-mix(in oklab, var(--accent-rosegold) 50%, transparent);
animation: voicecall-pulse 1.6s ease-in-out infinite;
}
@keyframes voicecall-pulse {
0%, 100% { box-shadow: 0 0 14px color-mix(in oklab, var(--accent-rosegold) 35%, transparent); }
50% { box-shadow: 0 0 22px color-mix(in oklab, var(--accent-rosegold) 70%, transparent); }
}
/* Voice-call active state on the whole panel */
.seer-panel[data-voice-call="true"] .seer-panel-head {
position: relative;
}
.seer-panel[data-voice-call="true"] .seer-panel-head::after {
content: 'voice-call läuft';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
font: 500 .6rem/1 'JetBrains Mono', monospace;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent-rosegold);
padding: .25rem .65rem;
background: var(--base-deep);
border: 1px solid color-mix(in oklab, var(--accent-rosegold) 40%, transparent);
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
}
.seer-panel[data-voice-call="true"] #seer-mic {
background: color-mix(in oklab, var(--accent-rosegold) 20%, transparent) !important;
border-color: var(--accent-rosegold);
box-shadow: 0 0 12px color-mix(in oklab, var(--accent-rosegold) 40%, transparent);
}
.seer-panel[data-voice-call="true"] #seer-mic[data-listening="true"] {
animation: mic-active-pulse 1s ease-in-out infinite;
}
@keyframes mic-active-pulse {
0%, 100% { box-shadow: 0 0 12px color-mix(in oklab, var(--accent-rosegold) 40%, transparent); }
50% { box-shadow: 0 0 24px color-mix(in oklab, var(--accent-rosegold) 80%, transparent); }
}
/* ============================================================================
* v18.4 · MOBILE-FIXES
*
* Konsolidierte Overrides für die ~10 sichtbarsten Layout-Breaks auf
* 320-480px Viewports. Alles als !important da viele Issues in der
* read-only base-CSS-Schicht (energies.css) wurzeln und nur via Overlay
* gefixt werden können.
* ============================================================================ */
/* --- Fix 1 · Topbar darf auf <480px umbrechen (alte nowrap blockt das) --- */
@media (max-width: 480px) {
.topbar { flex-wrap: wrap !important; row-gap: 0.5rem !important; }
.topbar-actions {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.4rem;
}
}
/* --- Fix 2 · Werkzeuge-Dropdown zentriert auf mobile --- */
@media (max-width: 480px) {
.werkzeuge-menu {
right: auto !important;
left: 50% !important;
transform: translateX(-50%);
min-width: min(280px, calc(100vw - 2rem)) !important;
max-width: calc(100vw - 2rem);
}
}
/* --- Fix 3 · Sphere-Banner stacked schon bei 720px --- */
@media (max-width: 720px) {
.sphere-banner-grid {
grid-template-columns: 1fr !important;
text-align: center;
}
.sphere-banner-art {
margin: 0 auto;
max-width: 240px;
}
.sphere-banner-eyebrow {
justify-content: center;
}
}
/* --- Fix 4–7 · Hero kompakter auf mobile --- */
@media (max-width: 600px) {
.hero { padding-block: 3.5rem 2rem !important; }
.hero-eyebrow::before,
.hero-eyebrow::after { width: 18px !important; }
.hero-meta {
gap: 0.7rem 1.1rem !important;
grid-template-columns: 1fr 1fr;
}
.hero-title { max-width: 22ch; }
}
@media (max-width: 380px) {
.hero-meta { grid-template-columns: 1fr !important; }
}
/* --- Fix 5 · Drop-Cap kleiner auf mobile (4.6em → 2.8em) --- */
@media (max-width: 480px) {
.section-lede.dropped::first-letter {
font-size: 2.8em !important;
margin-right: 0.25em !important;
line-height: 0.9 !important;
}
}
/* --- Fix 8 · EmbodimentMap-Pills volle Breite auf 320px --- */
@media (max-width: 480px) {
.emb-pills { grid-template-columns: 1fr !important; }
}
/* --- Fix 9 · VoicePill Header darf wrappen --- */
@media (max-width: 500px) {
.voice-pill .vp-header {
flex-wrap: wrap;
row-gap: 2px;
}
.voice-pill .vp-time {
font-size: 0.78rem;
opacity: 0.7;
}
}
/* --- Fix 10 · Bridge-CTA mobile-friendly --- */
@media (max-width: 480px) {
.bridge-cta {
padding: 0.7rem 1rem !important;
white-space: normal !important;
text-align: center;
display: inline-block;
}
}
/* ============================================================================
* v18.4b · Mobile-Hotfixes nach erstem User-Feedback
*
* Issues:
* a) Phase I Wertesystem-Spirale-Modul: padding zu üppig, vmeme-Grid quetscht,
* Text in .spiral-detail .meta ragt aus dem Feld.
* b) Topbar überlappt Section-Heads nach Anchor-Click — scroll-margin-top
* 90px war für ~80px desktop-topbar gedacht. Auf mobile wrapt die Topbar
* mit v18.4-Fix in 2 Zeilen → ~110-130px hoch.
* ============================================================================ */
/* --- Hotfix a · Spiral-Mod kompakter auf mobile --- */
@media (max-width: 600px) {
.spiral-mod {
padding: 1.2rem !important;
margin-top: 2rem !important;
gap: 1.2rem !important;
}
.spiral-vmemes {
grid-template-columns: 1fr !important;
gap: 0.5rem !important;
}
.vmeme {
padding: 0.7rem 0.85rem !important;
}
.vmeme-head {
flex-wrap: wrap !important;
row-gap: 2px;
font-size: 0.88rem;
}
.vmeme-head .vk {
font-size: 0.68rem;
}
.spiral-detail {
padding: 1rem 1.1rem !important;
min-height: 0 !important;
}
.spiral-detail h4 {
font-size: 1.2rem !important;
}
.spiral-detail .meta {
gap: 0.4rem 0.8rem !important;
flex-direction: column;
align-items: flex-start;
padding-top: 0.7rem !important;
margin-top: 0.7rem !important;
font-size: 0.7rem !important;
}
}
/* --- Hotfix b · Anchor-scroll lässt Section-Head nicht mehr unter Topbar liegen --- */
@media (max-width: 600px) {
.section,
.sphere-banner,
.tlw-section {
scroll-margin-top: 140px !important;
}
html { scroll-padding-top: 140px; }
}
@media (max-width: 400px) {
.section,
.sphere-banner,
.tlw-section {
scroll-margin-top: 160px !important;
}
html { scroll-padding-top: 160px; }
}
/* ============================================================================
* v18.5 · ASSET-WAVE-5
* 3 UI-Icons (breath/cmd/pause) · 3 Ornament-Singles (corner/mandala/stars)
* Wave-Cards in Phase XI · EmbodimentMap-Layer-Switch (neutral/chakra/organs)
* ============================================================================ */
/* --- UI · breath in GranularityCoach-Head --- */
.ui-icon-breath {
width: 32px;
height: 32px;
object-fit: contain;
display: block;
margin: 0 auto;
opacity: 0.95;
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent-rosegold) 30%, transparent));
}
.gc-head-icon {
display: grid;
place-items: center;
}
/* --- UI · cmd icon im ⌘K-Button --- */
.cmdk-kbd {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
padding: 0.18rem 0.5rem;
border: 1px solid var(--base-line);
border-radius: 0.32rem;
background: color-mix(in oklab, var(--base-deep) 60%, transparent);
color: var(--text-warm);
}
.ui-icon-cmd {
width: 12px;
height: 12px;
object-fit: contain;
opacity: 0.9;
}
/* --- UI · pause icon im VoicePill paused-state ---
Both play.png + pause.png liegen jetzt im vp-play-overlay.
Default: nur play sichtbar. Im paused-state: nur pause. */
.ui-icon-pause {
width: 34px;
height: 34px;
object-fit: contain;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--vp-hue, var(--accent-rosegold)) 60%, transparent));
display: none;
}
.voice-pill[data-state="paused"] .ui-icon-play { display: none; }
.voice-pill[data-state="paused"] .ui-icon-pause { display: block; }
/* --- Ornament · Hero corner-flourishes (nur bottom-right · reduziert v18.9) --- */
.hero-corner {
position: absolute;
width: clamp(80px, 12vw, 150px);
height: auto;
pointer-events: none;
opacity: 0.22;
mix-blend-mode: screen;
filter: drop-shadow(0 0 14px color-mix(in oklab, var(--accent-gold) 28%, transparent));
z-index: 1;
}
.hero-corner-tl {
display: none; /* v18.9 · entfernt — corner-asset wurde zu redundant mit TLW-Frame */
}
.hero-corner-br {
bottom: 0;
right: 0;
transform: rotate(180deg);
}
@media (max-width: 600px) {
.hero-corner { opacity: 0.18; width: 90px; }
}
/* --- Ornament · Phase XX Watermark · gemaltes Mandala hinter dem Content --- */
.phase-xx-watermark {
position: absolute;
top: 50%;
left: 50%;
width: clamp(360px, 60vw, 720px);
height: auto;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0.22; /* v18.9 · 0.10 war unsichtbar — jetzt subtle aber sichtbar */
mix-blend-mode: screen;
z-index: 0;
filter: drop-shadow(0 0 16px color-mix(in oklab, var(--accent-rosegold) 38%, transparent));
}
#phase-xx > .wrap { position: relative; z-index: 1; }
#phase-xx { overflow: hidden; }
/* --- Ornament · Sphere-D-Banner stars-Akzent --- */
.sphere-banner-stars {
position: absolute;
top: 1rem;
right: 1.4rem;
width: clamp(80px, 12vw, 130px);
height: auto;
pointer-events: none;
opacity: 0.55;
mix-blend-mode: screen;
filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent-gold) 55%, transparent));
z-index: 2;
}
.sphere-banner-d { position: relative; }
@media (max-width: 600px) {
.sphere-banner-stars { width: 70px; top: 0.7rem; right: 0.8rem; opacity: 0.45; }
}
/* ============================================================================
* v18.7 · Brainwaves jetzt unter .plate-set vereinheitlicht.
* Alte .brainwave / .brainwaves Klassen sind history — markup wurde refactored.
* ============================================================================ */
/* ============================================================================
* EmbodimentMap · 3-Modus-Layer-Switch (neutral · chakra · organs)
* ============================================================================ */
.emb-layer-switch {
display: flex;
justify-content: center;
gap: 0.4rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.emb-layer-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.42rem 0.85rem;
border: 1px solid var(--base-line);
border-radius: 999px;
background: var(--base-deep);
color: var(--text-warm);
font-family: 'Manrope', sans-serif;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
transition: all .25s var(--ease-organic);
}
.emb-layer-btn:hover {
border-color: color-mix(in oklab, var(--accent-rosegold) 60%, var(--base-line));
color: var(--text-bright);
transform: translateY(-1px);
}
.emb-layer-btn[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent-rosegold) 24%, var(--base-deep));
border-color: var(--accent-rosegold);
color: var(--text-bright);
box-shadow: 0 0 14px color-mix(in oklab, var(--accent-rosegold) 30%, transparent);
}
.emb-layer-glyph {
font-size: 0.96rem;
line-height: 1;
color: var(--accent-rosegold);
}
/* Smooth cross-fade beim PNG-Swap */
.emb-body-art {
transition: opacity .25s var(--ease-organic), filter .35s ease-out;
}
.emb-body-art-fading {
opacity: 0.15;
filter: blur(2px);
}
/* ============================================================================
* v18.6 · SPACE-BACKPLATES · 9 gemalte Praxis-Raum-Atmosphären
*
* Auto-injected via AssetEnricher.injectSpaceBackplates() in 7 Phasen + Bridge.
* Sehr subtile Backplate hinter dem Content — gibt narrative Tiefe ohne den
* Phase-Cover-Glyph oder Section-Hero zu konkurrieren. Per-Sphäre-Hue-Filter
* lässt das Gemälde die Phasen-Stimmung mittragen.
* ============================================================================ */
.has-space-backplate { position: relative; overflow: hidden; }
.has-space-backplate > .wrap,
.has-space-backplate > header,
.has-space-backplate > .bridge-grid { position: relative; z-index: 1; }
.space-backplate {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
opacity: 0.18; /* v18.9 · von 0.09 — backplates waren fast invisible */
mix-blend-mode: screen;
filter: blur(0.8px) saturate(0.92);
z-index: 0;
}
/* Hue-Tönung passend zur Phase */
section.section[data-num="XI"] .space-backplate { filter: blur(0.8px) saturate(0.75) hue-rotate(-12deg); opacity: 0.20; }
section.section[data-num="XV"] .space-backplate { opacity: 0.22; }
section.section[data-num="XVI"] .space-backplate { opacity: 0.14; filter: blur(1.4px) saturate(0.6); }
section.section[data-num="XVII"] .space-backplate { opacity: 0.24; }
section.section[data-num="XVIII"] .space-backplate { opacity: 0.18; }
section.section[data-num="XIX"] .space-backplate { opacity: 0.22; }
section.section[data-num="XX"] .space-backplate { opacity: 0.28; mix-blend-mode: lighten; }
.space-backplate-bridge { opacity: 0.10; }
@media (max-width: 600px) {
.space-backplate { opacity: 0.12; }
section.section[data-num="XVII"] .space-backplate,
section.section[data-num="XX"] .space-backplate { opacity: 0.16; }
}
/* Mirror-Gallery + Quantum-Gallery sind in v18.7 zu .plate-set refactored.
Alte Klassen entfernt — Markup nutzt jetzt das unified plate vocabulary. */
/* ============================================================================
* v18.9 · POLYVAGAL TRACKER · Phase X · KI-Klassifizierung
*
* 3 Zustands-Cards (ventral/sympathisch/dorsal) + Input-Form + Result-Panel.
* Aktive Card leuchtet auf, andere dimmen sich.
* ============================================================================ */
.polyvagal-tracker {
position: relative;
margin: 2.6rem 0 2rem;
padding: 2rem 1.8rem 1.6rem;
background:
radial-gradient(ellipse at top right, color-mix(in oklab, var(--sd-blue) 8%, transparent) 0%, transparent 60%),
color-mix(in oklab, var(--base-deep) 92%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, var(--base-line));
border-radius: var(--radius);
}
.polyvagal-tracker::before {
content: '';
position: absolute;
inset: 6px;
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 10%, transparent);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
}
.pv-head { margin-bottom: 1.4rem; }
.pv-head-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: lowercase;
color: color-mix(in oklab, var(--accent-gold) 60%, var(--text-faded));
margin-bottom: 0.7rem;
}
.pv-head-sigil {
color: var(--accent-gold);
font-size: 1rem;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-gold) 50%, transparent));
}
.pv-head-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
line-height: 1.2;
color: var(--text-bright);
margin: 0 0 0.7rem;
}
.pv-head-title em {
font-style: italic;
color: color-mix(in oklab, var(--accent-gold) 40%, var(--text-bright));
}
.pv-head-lede {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
line-height: 1.55;
color: var(--text-warm);
margin: 0;
max-width: 64ch;
}
/* Three state cards · grid */
.pv-states {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.9rem;
margin: 1.4rem 0 1.6rem;
}
.pv-state {
--pv-hue: var(--text-warm);
display: flex;
flex-direction: column;
padding: 1.1rem 1rem;
background: color-mix(in oklab, var(--base-night) 96%, transparent);
border: 1px solid color-mix(in oklab, var(--pv-hue) 18%, var(--base-line));
border-radius: var(--radius-sm);
transition: all .45s var(--ease-organic);
position: relative;
}
.pv-state-ventral { --pv-hue: #b8e2bc; }
.pv-state-sympathetic { --pv-hue: #ff9bb8; }
.pv-state-dorsal { --pv-hue: #a8c4f0; }
.pv-state.is-dimmed {
opacity: 0.32;
filter: saturate(0.5);
}
.pv-state.is-active {
border-color: var(--pv-hue);
box-shadow:
0 0 0 1px color-mix(in oklab, var(--pv-hue) 22%, transparent) inset,
0 14px 32px color-mix(in oklab, var(--pv-hue) 18%, transparent),
0 0 28px color-mix(in oklab, var(--pv-hue) 30%, transparent);
background:
radial-gradient(at top right, color-mix(in oklab, var(--pv-hue) 12%, transparent), transparent 70%),
var(--base-night);
transform: translateY(-2px);
}
.pv-state-glyph {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 2rem;
line-height: 1;
color: var(--pv-hue);
margin-bottom: 0.5rem;
filter: drop-shadow(0 0 10px color-mix(in oklab, var(--pv-hue) 50%, transparent));
}
.pv-state-name {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.25rem;
line-height: 1.15;
color: var(--text-bright);
margin: 0 0 0.2rem;
}
.pv-state-name em { font-style: italic; }
.pv-state-sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: color-mix(in oklab, var(--pv-hue) 60%, var(--text-faded));
margin-bottom: 0.6rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed color-mix(in oklab, var(--pv-hue) 22%, transparent);
}
.pv-state-text {
font-size: 0.84rem;
line-height: 1.46;
color: var(--text-warm);
margin: 0 0 0.7rem;
flex: 1;
}
.pv-state-text em {
font-style: italic;
color: color-mix(in oklab, var(--pv-hue) 50%, var(--text-bright));
}
.pv-state-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.06em;
color: var(--text-faded);
padding-top: 0.4rem;
border-top: 0.5px solid color-mix(in oklab, var(--pv-hue) 14%, transparent);
}
/* Input form */
.pv-input-form {
margin-top: 1.2rem;
}
.pv-input-label {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: color-mix(in oklab, var(--accent-gold) 55%, var(--text-warm));
margin-bottom: 0.55rem;
}
.pv-input-row {
display: flex;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.pv-input-field {
flex: 1;
padding: 0.7rem 0.9rem;
background: color-mix(in oklab, var(--base-deep) 75%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, var(--base-line));
border-radius: var(--radius-sm);
color: var(--text-bright);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
transition: border-color .25s var(--ease-organic);
}
.pv-input-field:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-gold) 20%, transparent);
}
.pv-input-field::placeholder {
color: color-mix(in oklab, var(--text-faded) 80%, transparent);
}
.pv-send {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.1rem;
background: color-mix(in oklab, var(--accent-gold) 20%, var(--base-deep));
border: 1px solid var(--accent-gold);
border-radius: var(--radius-sm);
color: var(--text-bright);
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s var(--ease-organic);
}
.pv-send:hover:not(:disabled) {
background: color-mix(in oklab, var(--accent-gold) 35%, var(--base-deep));
transform: translateY(-1px);
}
.pv-send:disabled { opacity: 0.4; cursor: wait; }
.pv-send-arrow {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
}
.pv-input-starters {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.pv-starter {
padding: 0.32rem 0.7rem;
background: transparent;
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 20%, var(--base-line));
border-radius: 999px;
color: var(--text-faded);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.82rem;
cursor: pointer;
transition: all .22s var(--ease-organic);
}
.pv-starter:hover {
border-color: var(--accent-gold);
color: var(--text-warm);
background: color-mix(in oklab, var(--accent-gold) 8%, transparent);
}
/* Result panel */
.pv-result {
--pv-result-hue: var(--accent-gold);
margin-top: 1.4rem;
padding: 1.1rem 1.1rem 0.9rem;
background:
radial-gradient(at top, color-mix(in oklab, var(--pv-result-hue) 12%, transparent), transparent 70%),
color-mix(in oklab, var(--base-night) 95%, transparent);
border: 1px solid color-mix(in oklab, var(--pv-result-hue) 35%, var(--base-line));
border-radius: var(--radius-sm);
opacity: 0;
transform: translateY(8px);
transition: opacity .5s var(--ease-organic), transform .5s var(--ease-organic);
pointer-events: none;
}
.pv-result[data-visible="true"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.pv-result-head {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.7rem;
}
.pv-result-glyph {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 2.2rem;
line-height: 1;
filter: drop-shadow(0 0 12px color-mix(in oklab, var(--pv-result-hue) 60%, transparent));
}
.pv-result-text { flex: 1; }
.pv-result-label {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
line-height: 1.3;
color: var(--text-bright);
margin-bottom: 0.15rem;
}
.pv-result-label strong { font-weight: 500; font-style: normal; color: var(--text-bright); }
.pv-result-label em { font-style: italic; color: color-mix(in oklab, var(--text-warm) 90%, transparent); }
.pv-result-confidence {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.08em;
color: var(--text-faded);
}
.pv-result-suggestion {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
line-height: 1.5;
color: var(--text-warm);
margin: 0 0 0.8rem;
padding-top: 0.5rem;
border-top: 0.5px solid color-mix(in oklab, var(--pv-result-hue) 20%, transparent);
}
.pv-result-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.8rem;
}
.pv-result-cite {
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.05em;
color: var(--text-faded);
}
.pv-reset {
padding: 0.32rem 0.7rem;
background: transparent;
border: 0.5px solid color-mix(in oklab, var(--text-faded) 30%, transparent);
border-radius: 999px;
color: var(--text-faded);
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.08em;
cursor: pointer;
transition: all .22s var(--ease-organic);
}
.pv-reset:hover {
border-color: var(--accent-gold);
color: var(--text-warm);
}
/* Thinking-state · subtle pulse on all cards */
.polyvagal-tracker[data-state="thinking"] .pv-state {
animation: pv-thinking-pulse 1.4s ease-in-out infinite;
}
@keyframes pv-thinking-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.7; }
}
@media (max-width: 760px) {
.pv-states { grid-template-columns: 1fr; gap: 0.7rem; }
.pv-state { padding: 0.9rem 0.85rem; }
.pv-input-row { flex-direction: column; }
.pv-send { width: 100%; justify-content: center; }
.pv-result-foot { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}
@media (max-width: 480px) {
.polyvagal-tracker { padding: 1.3rem 1rem; }
.pv-head-title { font-size: 1.35rem; }
.pv-state-glyph { font-size: 1.7rem; }
.pv-state-name { font-size: 1.1rem; }
.pv-state-text { font-size: 0.8rem; }
}
/* ============================================================================
* v18.9 · EMOTION CARTOGRAPHY · Cowen-Keltner 27-Cluster · Phase XII
*
* 2D Valenz × Erregung Karte, 27 Pills, KI-Klassifizierung via Live-Highlight.
* ============================================================================ */
.emotion-cartography {
position: relative;
margin: 2.6rem 0 1.6rem;
padding: 2rem 1.8rem 1.6rem;
background:
radial-gradient(ellipse at top left, color-mix(in oklab, var(--accent-magenta) 8%, transparent) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, color-mix(in oklab, var(--accent-cyan) 6%, transparent) 0%, transparent 55%),
color-mix(in oklab, var(--base-deep) 92%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, var(--base-line));
border-radius: var(--radius);
}
.emotion-cartography::before {
content: '';
position: absolute;
inset: 6px;
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 10%, transparent);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
}
.ec-head { margin-bottom: 1.4rem; }
.ec-head-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: lowercase;
color: color-mix(in oklab, var(--accent-gold) 60%, var(--text-faded));
margin-bottom: 0.7rem;
}
.ec-head-sigil {
color: var(--accent-gold);
font-size: 1rem;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-gold) 50%, transparent));
}
.ec-head-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
line-height: 1.15;
color: var(--text-bright);
margin: 0 0 0.7rem;
}
.ec-head-title em {
font-style: italic;
color: color-mix(in oklab, var(--accent-gold) 40%, var(--text-bright));
}
.ec-head-lede {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
line-height: 1.55;
color: var(--text-warm);
margin: 0;
max-width: 64ch;
}
.ec-head-lede em { font-style: italic; color: color-mix(in oklab, var(--accent-gold) 45%, var(--text-bright)); }
/* The map stage · 16:10 aspect with axis labels on edges */
.ec-stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
margin: 1.2rem 0;
padding: 2.2rem 2.5rem 2.2rem 3.2rem;
background:
/* faint grid lines */
linear-gradient(90deg, transparent 49.7%, color-mix(in oklab, var(--accent-gold) 15%, transparent) 49.85%, color-mix(in oklab, var(--accent-gold) 15%, transparent) 50.15%, transparent 50.3%),
linear-gradient(0deg, transparent 49.7%, color-mix(in oklab, var(--accent-gold) 15%, transparent) 49.85%, color-mix(in oklab, var(--accent-gold) 15%, transparent) 50.15%, transparent 50.3%);
}
/* Axis labels */
.ec-axis {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in oklab, var(--accent-gold) 55%, var(--text-faded));
pointer-events: none;
}
.ec-axis-x {
bottom: 0;
left: 3.2rem;
right: 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.ec-axis-y {
top: 2.2rem;
bottom: 2.2rem;
left: 0.4rem;
width: 2.4rem;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
align-items: center;
text-align: center;
}
.ec-axis-label {
font-style: italic;
font-family: 'Cormorant Garamond', serif;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: none;
color: color-mix(in oklab, var(--accent-gold) 70%, var(--text-warm));
}
.ec-axis-y .ec-axis-label {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
/* Grid container — emotion pills positioned absolutely via inline left/top */
.ec-grid {
position: absolute;
inset: 2.2rem 2.5rem 2.2rem 3.2rem;
}
/* ===== STARS · v18.11 cartographia refactor ============================
* Pills → Sterne. Jeder Stern = leuchtender Dot am exakten V/A-Punkt +
* Label-Pill mit cluster-aware offset (data-side: tl t tr r br b bl l).
* Labels überlappen nicht mehr — der Dot bleibt mathematisch korrekt.
* ======================================================================== */
.ec-star {
position: absolute;
transform: translate(-50%, -50%);
display: block;
width: 22px; /* hit-area; dot is centered inside, label hangs off */
height: 22px;
padding: 0;
margin: 0;
background: transparent;
border: 0;
cursor: pointer;
z-index: 1;
}
.ec-star-dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent-gold);
box-shadow:
0 0 6px color-mix(in oklab, var(--accent-gold) 70%, transparent),
0 0 0 1px color-mix(in oklab, var(--accent-gold) 40%, transparent);
transition: all .35s var(--ease-organic);
pointer-events: none;
}
.ec-star-label {
position: absolute;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 0.22rem 0.5rem 0.24rem;
background: color-mix(in oklab, var(--base-night) 92%, transparent);
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 22%, var(--base-line));
border-radius: 999px;
color: var(--text-warm);
white-space: nowrap;
transition: all .35s var(--ease-organic);
pointer-events: none;
}
.ec-star-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.78rem;
line-height: 1;
}
.ec-star-en {
font-family: 'JetBrains Mono', monospace;
font-size: 0.46rem;
letter-spacing: 0.06em;
color: var(--text-faded);
line-height: 1;
}
/* Label-Offset per data-side (8 compass directions) — distance from dot ~10px */
.ec-star[data-side="t"] .ec-star-label { left: 50%; bottom: 9px; transform: translateX(-50%); }
.ec-star[data-side="b"] .ec-star-label { left: 50%; top: 9px; transform: translateX(-50%); }
.ec-star[data-side="l"] .ec-star-label { top: 50%; right: 9px; transform: translateY(-50%); }
.ec-star[data-side="r"] .ec-star-label { top: 50%; left: 9px; transform: translateY(-50%); }
.ec-star[data-side="tl"] .ec-star-label { right: 7px; bottom: 7px; }
.ec-star[data-side="tr"] .ec-star-label { left: 7px; bottom: 7px; }
.ec-star[data-side="bl"] .ec-star-label { right: 7px; top: 7px; }
.ec-star[data-side="br"] .ec-star-label { left: 7px; top: 7px; }
/* Tiny connector line from dot to label (optical anchor) */
.ec-star::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 7px;
height: 1px;
background: color-mix(in oklab, var(--accent-gold) 35%, transparent);
transform-origin: 0 50%;
opacity: 0.55;
pointer-events: none;
}
.ec-star[data-side="t"]::before { transform: rotate(-90deg); }
.ec-star[data-side="b"]::before { transform: rotate(90deg); }
.ec-star[data-side="l"]::before { transform: rotate(180deg); }
.ec-star[data-side="r"]::before { transform: rotate(0deg); }
.ec-star[data-side="tl"]::before { transform: rotate(-135deg); }
.ec-star[data-side="tr"]::before { transform: rotate(-45deg); }
.ec-star[data-side="bl"]::before { transform: rotate(135deg); }
.ec-star[data-side="br"]::before { transform: rotate(45deg); }
.ec-star:hover {
z-index: 3;
}
.ec-star:hover .ec-star-dot {
width: 8px;
height: 8px;
background: var(--accent-gold);
box-shadow:
0 0 16px color-mix(in oklab, var(--accent-gold) 80%, transparent),
0 0 0 2px color-mix(in oklab, var(--accent-gold) 55%, transparent);
}
.ec-star:hover .ec-star-label {
background: color-mix(in oklab, var(--accent-gold) 12%, var(--base-night));
border-color: color-mix(in oklab, var(--accent-gold) 60%, var(--base-line));
color: var(--text-bright);
}
.ec-star:hover::before {
opacity: 0.95;
background: var(--accent-gold);
}
.ec-star.is-dimmed .ec-star-dot,
.ec-star.is-dimmed .ec-star-label { opacity: 0.22; filter: saturate(0.4); }
.ec-star.is-dimmed::before { opacity: 0.1; }
.ec-star.is-active { z-index: 6; }
.ec-star.is-active .ec-star-dot {
width: 12px;
height: 12px;
background: color-mix(in oklab, var(--accent-gold) 92%, var(--text-bright));
box-shadow:
0 0 32px color-mix(in oklab, var(--accent-gold) 75%, transparent),
0 0 0 3px color-mix(in oklab, var(--accent-gold) 45%, transparent),
0 0 0 8px color-mix(in oklab, var(--accent-gold) 18%, transparent);
animation: ec-active-pulse 2.6s ease-in-out infinite;
}
.ec-star.is-active .ec-star-label {
background: color-mix(in oklab, var(--accent-gold) 30%, var(--base-night));
border-color: var(--accent-gold);
color: var(--text-bright);
box-shadow: 0 0 22px color-mix(in oklab, var(--accent-gold) 40%, transparent);
}
.ec-star.is-active::before {
opacity: 1;
background: var(--accent-gold);
box-shadow: 0 0 4px var(--accent-gold);
}
@keyframes ec-active-pulse {
0%, 100% { box-shadow:
0 0 32px color-mix(in oklab, var(--accent-gold) 75%, transparent),
0 0 0 3px color-mix(in oklab, var(--accent-gold) 45%, transparent),
0 0 0 8px color-mix(in oklab, var(--accent-gold) 18%, transparent); }
50% { box-shadow:
0 0 44px color-mix(in oklab, var(--accent-gold) 85%, transparent),
0 0 0 4px color-mix(in oklab, var(--accent-gold) 55%, transparent),
0 0 0 12px color-mix(in oklab, var(--accent-gold) 22%, transparent); }
}
.ec-star.is-secondary { z-index: 5; }
.ec-star.is-secondary .ec-star-dot {
width: 9px;
height: 9px;
background: var(--accent-rosegold);
box-shadow:
0 0 18px color-mix(in oklab, var(--accent-rosegold) 65%, transparent),
0 0 0 2px color-mix(in oklab, var(--accent-rosegold) 50%, transparent);
}
.ec-star.is-secondary .ec-star-label {
background: color-mix(in oklab, var(--accent-rosegold) 20%, var(--base-night));
border-color: color-mix(in oklab, var(--accent-rosegold) 80%, transparent);
color: var(--text-bright);
}
.ec-star.is-secondary::before {
background: var(--accent-rosegold);
opacity: 0.85;
}
/* Input + form */
.ec-input-form { margin-top: 0.8rem; }
.ec-input-label {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: color-mix(in oklab, var(--accent-gold) 55%, var(--text-warm));
margin-bottom: 0.5rem;
}
.ec-input-row {
display: flex;
gap: 0.5rem;
}
.ec-input-field {
flex: 1;
padding: 0.7rem 0.9rem;
background: color-mix(in oklab, var(--base-deep) 75%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, var(--base-line));
border-radius: var(--radius-sm);
color: var(--text-bright);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
transition: border-color .25s var(--ease-organic);
}
.ec-input-field:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-gold) 20%, transparent);
}
.ec-input-field::placeholder { color: color-mix(in oklab, var(--text-faded) 80%, transparent); }
.ec-send {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.1rem;
background: color-mix(in oklab, var(--accent-gold) 20%, var(--base-deep));
border: 1px solid var(--accent-gold);
border-radius: var(--radius-sm);
color: var(--text-bright);
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s var(--ease-organic);
}
.ec-send:hover:not(:disabled) {
background: color-mix(in oklab, var(--accent-gold) 35%, var(--base-deep));
transform: translateY(-1px);
}
.ec-send:disabled { opacity: 0.4; cursor: wait; }
.ec-send-arrow { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; }
/* Result panel */
.ec-result {
margin-top: 1rem;
padding: 1rem 1.1rem 0.9rem;
background:
radial-gradient(at top, color-mix(in oklab, var(--accent-gold) 8%, transparent), transparent 70%),
color-mix(in oklab, var(--base-night) 95%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 32%, var(--base-line));
border-radius: var(--radius-sm);
opacity: 0;
transform: translateY(6px);
transition: opacity .45s var(--ease-organic), transform .45s var(--ease-organic);
pointer-events: none;
}
.ec-result[data-visible="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ec-result-primary {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
line-height: 1.4;
color: var(--text-bright);
margin-bottom: 0.5rem;
}
.ec-result-primary em { font-style: italic; color: var(--accent-gold); font-weight: 500; }
.ec-result-with { font-style: italic; color: var(--text-faded); }
.ec-result-coords {
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--text-faded);
margin-left: 0.4rem;
}
.ec-result-observation {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.98rem;
line-height: 1.5;
color: var(--text-warm);
margin: 0 0 0.7rem;
padding-top: 0.5rem;
border-top: 0.5px solid color-mix(in oklab, var(--accent-gold) 18%, transparent);
}
.ec-result-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
}
.ec-result-cite {
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.05em;
color: var(--text-faded);
}
.ec-reset {
padding: 0.32rem 0.7rem;
background: transparent;
border: 0.5px solid color-mix(in oklab, var(--text-faded) 30%, transparent);
border-radius: 999px;
color: var(--text-faded);
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.08em;
cursor: pointer;
transition: all .22s var(--ease-organic);
}
.ec-reset:hover { border-color: var(--accent-gold); color: var(--text-warm); }
/* Thinking state — pulse all star-dots */
.emotion-cartography[data-state="thinking"] .ec-star-dot {
animation: ec-thinking-pulse 1.4s ease-in-out infinite;
}
.emotion-cartography[data-state="thinking"] .ec-star-label {
opacity: 0.5;
}
@keyframes ec-thinking-pulse {
0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.5); }
}
@media (max-width: 760px) {
.ec-stage { aspect-ratio: 1 / 1; padding: 2rem 1.6rem 2rem 2.6rem; }
.ec-grid { inset: 2rem 1.6rem 2rem 2.6rem; }
.ec-star-label { padding: 0.18rem 0.4rem; }
.ec-star-name { font-size: 0.66rem; }
.ec-star-en { display: none; }
.ec-input-row { flex-direction: column; }
.ec-send { width: 100%; justify-content: center; }
.ec-result-foot { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}
@media (max-width: 480px) {
.emotion-cartography { padding: 1.3rem 1rem; }
.ec-head-title { font-size: 1.4rem; }
.ec-stage { aspect-ratio: 4 / 5; padding: 1.6rem 1.2rem 1.6rem 2.2rem; }
.ec-grid { inset: 1.6rem 1.2rem 1.6rem 2.2rem; }
.ec-star-label { padding: 0.16rem 0.32rem; }
.ec-star-name { font-size: 0.58rem; }
}
/* ============================================================================
* v18.7 · CODEX-LUMENS · plate-set vocabulary
*
* Universelle Component für "Tabula"-Sets im Stil 18. Jh. wissenschaftlicher
* Monographien (Hooke's Micrographia, Kircher's Mundus Subterraneus). Drei
* Anwendungen aktuell:
* .brainwave-plates · 5 EEG-Bänder · Phase XI
* .armarium-plates · 7 Resonance-Werkzeuge · Phase XIX
* .quantum-plates · 4 Wave-Phänomene · Phase XVIII
*
* Aesthetic moves:
* 1. Pergament-noise via SVG-data-URL (atmosphäre + warmth)
* 2. Roman-Plate-Numerals top-left (codex-konvention)
* 3. Greek-Letter-Glyphs als Drop-Cap-style watermark (nur brainwave-plates)
* 4. Cormorant-italic titles + Latin sub-captions (subtitle)
* 5. Ornamental rule mit center-knot zwischen lede und grid
* 6. Gilt-edge hover · gold-tinted border + Glow
* 7. Asymmetrischer hairline-bottom border auf jeder plate (manuscript-Hand)
* ============================================================================ */
/* Wrapper for any plate-set */
.plate-set {
position: relative;
margin: 3rem 0 2rem;
padding: 2.2rem 2rem 1.8rem;
background:
/* very subtle pergament-warm radial */
radial-gradient(ellipse at top, color-mix(in oklab, var(--accent-gold) 5%, transparent) 0%, transparent 60%),
color-mix(in oklab, var(--base-deep) 92%, var(--hue-soft, transparent));
border: 1px solid color-mix(in oklab, var(--accent-gold) 14%, var(--base-line));
border-radius: var(--radius);
}
/* Pergament-noise overlay — SVG turbulence, very subtle */
.plate-set::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
opacity: 0.5;
mix-blend-mode: overlay;
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
/* Inner gilt-rule border, hairline */
.plate-set::after {
content: '';
position: absolute;
inset: 6px;
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 22%, transparent);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
z-index: 0;
}
.plate-set > * { position: relative; z-index: 1; }
/* Header block */
.plate-set-head { margin-bottom: 1.8rem; }
.plate-set-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: lowercase;
color: color-mix(in oklab, var(--accent-gold) 60%, var(--text-faded));
margin-bottom: 0.7rem;
}
.plate-set-sigil {
font-size: 1rem;
color: var(--accent-gold);
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-gold) 50%, transparent));
}
.plate-set-title {
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.15;
color: var(--text-bright);
margin: 0 0 0.7rem;
letter-spacing: -0.005em;
}
.plate-set-title em {
font-style: italic;
color: color-mix(in oklab, var(--accent-gold) 35%, var(--text-bright));
}
.plate-set-lede {
font-family: 'Cormorant Garamond', serif;
font-size: 1.12rem;
line-height: 1.55;
color: var(--text-warm);
margin: 0 0 1.2rem;
max-width: 64ch;
}
.plate-set-lede em { color: color-mix(in oklab, var(--accent-gold) 50%, var(--text-bright)); font-style: italic; }
/* Ornamental rule with center knot */
.plate-set-rule {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 1rem 0 0.4rem;
max-width: 360px;
}
.plate-set-rule .rule-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--accent-gold) 60%, transparent) 50%,
transparent 100%);
}
.plate-set-rule .rule-knot {
font-size: 0.9rem;
color: var(--accent-gold);
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent-gold) 55%, transparent));
}
/* Foot block */
.plate-set-foot {
margin-top: 1.6rem;
display: flex;
align-items: center;
gap: 1rem;
}
.plate-set-foot-rule {
flex: 0 0 auto;
width: 38px;
height: 1px;
background: color-mix(in oklab, var(--accent-gold) 50%, transparent);
}
.plate-set-foot-cite {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--text-faded);
}
.plate-set-foot-cite em { font-style: italic; color: var(--text-warm); }
/* The plate grid itself */
.plate-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.4rem;
}
.plate-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.plate-grid-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plate-grid-7 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Individual plate */
.plate {
position: relative;
display: flex;
flex-direction: column;
padding: 1.15rem 1.1rem 1.1rem;
background:
radial-gradient(at top right, color-mix(in oklab, var(--accent-gold) 4%, transparent), transparent 60%),
color-mix(in oklab, var(--base-night) 96%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 11%, var(--base-line));
border-radius: var(--radius-sm);
transition: transform .35s var(--ease-organic),
border-color .35s,
box-shadow .35s;
}
/* Hairline gilt inner-frame, hand-imperfect (slightly offset) */
.plate::before {
content: '';
position: absolute;
inset: 5px 5px 6px 6px;
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 18%, transparent);
border-radius: calc(var(--radius-sm) - 5px);
pointer-events: none;
transition: border-color .35s, inset .4s var(--ease-organic);
}
.plate:hover {
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--accent-gold) 38%, var(--base-line));
box-shadow:
0 12px 32px color-mix(in oklab, var(--base-night) 80%, transparent),
0 0 26px color-mix(in oklab, var(--accent-gold) 14%, transparent);
}
.plate:hover::before {
border-color: color-mix(in oklab, var(--accent-gold) 55%, transparent);
inset: 4px 4px 5px 5px;
}
/* Roman plate numeral top-left */
.plate-numeral {
position: absolute;
top: 0.5rem;
left: 0.6rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: color-mix(in oklab, var(--accent-gold) 75%, transparent);
z-index: 2;
}
/* Greek glyph drop-cap watermark, only on brainwave plates */
.plate-glyph {
position: absolute;
top: 0.05em;
right: 0.05em;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
font-size: 7rem;
line-height: 0.9;
color: color-mix(in oklab, var(--accent-gold) 16%, transparent);
pointer-events: none;
z-index: 1;
text-shadow:
0 0 12px color-mix(in oklab, var(--accent-gold) 18%, transparent);
}
/* Figure (the painted illustration) */
.plate-figure {
margin: 0.6rem 0 0.9rem;
padding: 0;
position: relative;
z-index: 1;
}
.plate-figure img {
width: 100%;
aspect-ratio: 4 / 2.6;
object-fit: contain;
background: linear-gradient(180deg,
color-mix(in oklab, var(--base-deep) 65%, transparent) 0%,
color-mix(in oklab, var(--base-deep) 85%, transparent) 100%);
border-radius: 3px;
filter: drop-shadow(0 0 18px color-mix(in oklab, var(--hue-glow, var(--accent-gold)) 26%, transparent));
transition: filter .4s var(--ease-organic);
}
.plate:hover .plate-figure img {
filter: drop-shadow(0 0 24px color-mix(in oklab, var(--hue-glow, var(--accent-gold)) 42%, transparent));
}
.plate-figure-square img { aspect-ratio: 1 / 1; }
/* Plate body — title + subtitle + text + foot */
.plate-body {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
z-index: 1;
}
.plate-title {
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-weight: 400;
font-size: 1.45rem;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--text-bright);
margin: 0 0 0.2rem;
}
.plate-title em {
font-style: italic;
font-weight: 400;
}
.plate-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.82rem;
line-height: 1.3;
letter-spacing: 0.04em;
color: color-mix(in oklab, var(--accent-gold) 55%, var(--text-faded));
margin: 0 0 0.7rem;
padding-bottom: 0.55rem;
border-bottom: 1px dashed color-mix(in oklab, var(--accent-gold) 22%, transparent);
}
.plate-text {
font-size: 0.88rem;
line-height: 1.5;
color: var(--text-warm);
margin: 0;
flex: 1;
}
.plate-text em {
font-style: italic;
color: color-mix(in oklab, var(--accent-gold) 40%, var(--text-bright));
}
.plate-foot {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 0.9rem;
padding-top: 0.55rem;
border-top: 0.5px solid color-mix(in oklab, var(--accent-gold) 16%, transparent);
font-family: 'JetBrains Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.plate-foot-band { color: color-mix(in oklab, var(--accent-gold) 70%, var(--text-warm)); }
.plate-foot-cite { color: var(--text-faded); font-style: italic; }
/* ===== Plate-Set Variants ===== */
/* Brainwaves · Phase XI — cyan-shimmer hue overlay */
.brainwave-plates {
--hue-glow: var(--sd-turquoise);
}
.brainwave-plates .plate-numeral { color: color-mix(in oklab, var(--accent-gold) 80%, transparent); }
.brainwave-plates .plate:hover .plate-glyph {
color: color-mix(in oklab, var(--accent-gold) 28%, transparent);
transition: color .5s var(--ease-organic);
}
/* Armarium · Phase XIX — asymmetric 4+3 stagger on desktop */
@media (min-width: 900px) {
.armarium-grid {
grid-template-columns: repeat(4, 1fr);
}
.armarium-grid > li:nth-child(5),
.armarium-grid > li:nth-child(6),
.armarium-grid > li:nth-child(7) {
grid-column: span 1;
}
/* shift the last row to align centered (4 + 3 stagger) */
.armarium-grid > li:nth-child(5) { grid-column: 1 / span 1; transform: translateX(50%); }
.armarium-grid > li:nth-child(6) { grid-column: 2 / span 1; transform: translateX(50%); }
.armarium-grid > li:nth-child(7) { grid-column: 3 / span 1; transform: translateX(50%); }
}
.armarium-plates .plate-figure img { aspect-ratio: 4 / 3; }
/* Quantum · Phase XVIII — turquoise-glow + sigil border */
.quantum-plates {
--hue-glow: var(--sd-turquoise);
}
.quantum-plates .plate {
background:
radial-gradient(at center top, color-mix(in oklab, var(--sd-turquoise) 8%, transparent), transparent 70%),
color-mix(in oklab, var(--base-night) 95%, transparent);
}
.quantum-plates .plate-figure img {
background: radial-gradient(circle, color-mix(in oklab, var(--sd-turquoise) 10%, transparent) 0%, transparent 65%);
}
.quantum-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* ===== Mobile refinements for all plate-sets ===== */
@media (max-width: 760px) {
.plate-set { padding: 1.6rem 1.2rem 1.3rem; margin: 2rem 0 1.5rem; }
.plate-grid-5,
.plate-grid-7 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.plate-grid-4 { grid-template-columns: 1fr 1fr; gap: 1rem; }
.plate { padding: 1rem 0.9rem; }
.plate-glyph { font-size: 5.5rem; }
.armarium-grid > li { transform: none !important; grid-column: auto !important; }
}
@media (max-width: 480px) {
.plate-set { padding: 1.2rem 0.9rem; }
.plate-grid-4,
.plate-grid-5,
.plate-grid-7 { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.plate { padding: 0.8rem 0.7rem; }
.plate-title { font-size: 1.2rem; }
.plate-subtitle { font-size: 0.74rem; }
.plate-text { font-size: 0.82rem; }
.plate-glyph { font-size: 4.5rem; opacity: 0.7; }
.plate-set-title { font-size: 1.55rem; }
.plate-set-lede { font-size: 0.98rem; }
}
@media (max-width: 380px) {
.plate-grid-4,
.plate-grid-5,
.plate-grid-7 { grid-template-columns: 1fr; }
}
/* ============================================================================
* v18.16 · ELEMENT-RESONATOR · Phase III KI-Modul
*
* 5-Element Modus-Klassifizierung. Analog zur emotion-cartography (Phase XII),
* aber granularer: nur Feuer/Wasser/Luft/Erde/Quelle. User schreibt 1-2
* Sätze, KI klassifiziert primary + secondary, Orbs leuchten auf.
* ============================================================================ */
.element-resonator {
position: relative;
margin: 2.6rem 0 1.6rem;
padding: 2rem 1.8rem 1.6rem;
background:
radial-gradient(ellipse at top, color-mix(in oklab, var(--accent-gold) 6%, transparent) 0%, transparent 55%),
radial-gradient(ellipse at bottom, color-mix(in oklab, var(--accent-rosegold) 5%, transparent) 0%, transparent 55%),
color-mix(in oklab, var(--base-deep) 92%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, var(--base-line));
border-radius: var(--radius);
}
.element-resonator::before {
content: '';
position: absolute;
inset: 6px;
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 10%, transparent);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
}
.er-head { margin-bottom: 1.4rem; }
.er-head-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: lowercase;
color: color-mix(in oklab, var(--accent-gold) 60%, var(--text-faded));
margin-bottom: 0.7rem;
}
.er-head-sigil {
color: var(--accent-gold);
font-size: 1rem;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-gold) 50%, transparent));
}
.er-head-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.15;
color: var(--text-bright);
margin: 0 0 0.7rem;
}
.er-head-title em {
font-style: italic;
color: color-mix(in oklab, var(--accent-gold) 40%, var(--text-bright));
}
.er-head-lede {
font-family: 'Cormorant Garamond', serif;
font-size: 1.02rem;
line-height: 1.55;
color: var(--text-warm);
margin: 0;
max-width: 64ch;
}
.er-head-lede em { font-style: italic; color: color-mix(in oklab, var(--accent-gold) 45%, var(--text-bright)); }
/* ---------- 5-Element Ring ---------- */
.er-ring {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.7rem;
margin: 1.6rem 0 1.4rem;
}
.er-elem {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 1.2rem 0.5rem 0.9rem;
background: color-mix(in oklab, var(--base-night) 92%, transparent);
border: 0.5px solid color-mix(in oklab, var(--accent-gold) 16%, var(--base-line));
border-radius: 14px;
cursor: pointer;
color: var(--text-warm);
transition: all .4s var(--ease-organic);
overflow: hidden;
}
.er-elem-orb {
position: relative;
width: 56px;
height: 56px;
border-radius: 50%;
background: no-repeat center / cover, var(--base-night);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-gold) 25%, transparent);
transition: all .5s var(--ease-organic);
z-index: 1;
}
.er-elem-orb::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: radial-gradient(circle, var(--er-elem-glow, var(--accent-gold)) 0%, transparent 70%);
opacity: 0;
z-index: -1;
transition: opacity .45s var(--ease-organic);
filter: blur(8px);
}
.er-elem[data-key="fire"] .er-elem-orb { background-image: url(/shared/assets/cross-pole/transitions/transition-fire.webp); --er-elem-glow: #ff8a6a; }
.er-elem[data-key="water"] .er-elem-orb { background-image: url(/shared/assets/cross-pole/transitions/transition-water.webp); --er-elem-glow: #9ec9ff; }
.er-elem[data-key="air"] .er-elem-orb { background-image: url(/shared/assets/cross-pole/transitions/transition-air.webp); --er-elem-glow: #d8b8ff; }
.er-elem[data-key="earth"] .er-elem-orb { background-image: url(/shared/assets/cross-pole/transitions/transition-earth.webp); --er-elem-glow: #b8df88; }
.er-elem[data-key="source"] .er-elem-orb { background-image: url(/shared/assets/cross-pole/transitions/transition-source.webp); --er-elem-glow: #f5d0c5; }
.er-elem[data-key="fire"] { --er-elem-glow: #ff8a6a; }
.er-elem[data-key="water"] { --er-elem-glow: #9ec9ff; }
.er-elem[data-key="air"] { --er-elem-glow: #d8b8ff; }
.er-elem[data-key="earth"] { --er-elem-glow: #b8df88; }
.er-elem[data-key="source"] { --er-elem-glow: #f5d0c5; }
.er-elem-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.02rem;
color: var(--text-bright);
line-height: 1;
}
.er-elem-en {
font-family: 'JetBrains Mono', monospace;
font-size: 0.56rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faded);
line-height: 1;
}
.er-elem-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 0.54rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in oklab, var(--text-faded) 90%, var(--accent-gold));
opacity: 0.78;
line-height: 1.3;
text-align: center;
}
.er-elem--source {
background:
radial-gradient(circle at top, color-mix(in oklab, var(--accent-rosegold) 8%, transparent), transparent 60%),
color-mix(in oklab, var(--base-night) 90%, transparent);
border-color: color-mix(in oklab, var(--accent-rosegold) 30%, var(--base-line));
}
.er-elem:hover {
border-color: color-mix(in oklab, var(--er-elem-glow, var(--accent-gold)) 65%, var(--base-line));
background: color-mix(in oklab, var(--er-elem-glow, var(--accent-gold)) 5%, var(--base-night));
transform: translateY(-2px);
}
.er-elem:hover .er-elem-orb {
transform: scale(1.06);
box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--er-elem-glow) 60%, transparent);
}
.er-elem:hover .er-elem-orb::after { opacity: 0.6; }
.er-elem.is-dimmed { opacity: 0.32; filter: saturate(0.45); }
.er-elem.is-active {
border-color: var(--er-elem-glow);
background:
radial-gradient(circle at top, color-mix(in oklab, var(--er-elem-glow) 18%, transparent), transparent 70%),
color-mix(in oklab, var(--er-elem-glow) 8%, var(--base-night));
box-shadow:
0 0 28px color-mix(in oklab, var(--er-elem-glow) 35%, transparent),
0 0 0 1px color-mix(in oklab, var(--er-elem-glow) 30%, transparent) inset;
transform: translateY(-3px) scale(1.03);
z-index: 2;
}
.er-elem.is-active .er-elem-orb {
transform: scale(1.18);
box-shadow:
inset 0 0 0 2px var(--er-elem-glow),
0 0 18px color-mix(in oklab, var(--er-elem-glow) 55%, transparent);
}
.er-elem.is-active .er-elem-orb::after { opacity: 0.9; }
.er-elem.is-active .er-elem-name { color: var(--text-bright); }
.er-elem.is-active .er-elem-tag { color: var(--er-elem-glow); opacity: 1; }
.er-elem.is-secondary {
border-color: color-mix(in oklab, var(--er-elem-glow) 65%, var(--base-line));
background: color-mix(in oklab, var(--er-elem-glow) 4%, var(--base-night));
box-shadow: 0 0 12px color-mix(in oklab, var(--er-elem-glow) 22%, transparent);
transform: translateY(-1px);
}
.er-elem.is-secondary .er-elem-orb {
transform: scale(1.08);
box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--er-elem-glow) 70%, transparent);
}
.er-elem.is-secondary .er-elem-orb::after { opacity: 0.55; }
/* ---------- Input form (reuse cartography pattern) ---------- */
.er-input-form { margin-top: 0.6rem; }
.er-input-label {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.98rem;
color: color-mix(in oklab, var(--accent-gold) 55%, var(--text-warm));
margin-bottom: 0.5rem;
}
.er-input-row { display: flex; gap: 0.5rem; }
.er-input-field {
flex: 1;
padding: 0.7rem 0.9rem;
background: color-mix(in oklab, var(--base-deep) 75%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, var(--base-line));
border-radius: var(--radius-sm);
color: var(--text-bright);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
transition: border-color .25s var(--ease-organic);
}
.er-input-field:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-gold) 20%, transparent);
}
.er-input-field::placeholder { color: color-mix(in oklab, var(--text-faded) 80%, transparent); }
.er-send {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.1rem;
background: color-mix(in oklab, var(--accent-gold) 20%, var(--base-deep));
border: 1px solid var(--accent-gold);
border-radius: var(--radius-sm);
color: var(--text-bright);
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s var(--ease-organic);
}
.er-send:hover:not(:disabled) {
background: color-mix(in oklab, var(--accent-gold) 35%, var(--base-deep));
transform: translateY(-1px);
}
.er-send:disabled { opacity: 0.4; cursor: wait; }
.er-send-arrow { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; }
.er-result {
margin-top: 1rem;
padding: 1rem 1.1rem 0.9rem;
background:
radial-gradient(at top, color-mix(in oklab, var(--accent-gold) 8%, transparent), transparent 70%),
color-mix(in oklab, var(--base-night) 95%, transparent);
border: 1px solid color-mix(in oklab, var(--accent-gold) 32%, var(--base-line));
border-radius: var(--radius-sm);
opacity: 0;
transform: translateY(6px);
transition: opacity .45s var(--ease-organic), transform .45s var(--ease-organic);
pointer-events: none;
}
.er-result[data-visible="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.er-result-primary {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
line-height: 1.4;
color: var(--text-bright);
margin-bottom: 0.5rem;
}
.er-result-primary em { font-style: italic; color: var(--accent-gold); font-weight: 500; }
.er-result-with { font-style: italic; color: var(--text-faded); }
.er-result-coords {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--text-faded);
margin-left: 0.4rem;
}
.er-result-observation {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.98rem;
line-height: 1.5;
color: var(--text-warm);
margin: 0 0 0.7rem;
padding-top: 0.5rem;
border-top: 0.5px solid color-mix(in oklab, var(--accent-gold) 18%, transparent);
}
.er-result-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
}
.er-result-cite {
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.05em;
color: var(--text-faded);
}
.er-reset {
padding: 0.32rem 0.7rem;
background: transparent;
border: 0.5px solid color-mix(in oklab, var(--text-faded) 30%, transparent);
border-radius: 999px;
color: var(--text-faded);
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.08em;
cursor: pointer;
transition: all .22s var(--ease-organic);
}
.er-reset:hover { border-color: var(--accent-gold); color: var(--text-warm); }
.element-resonator[data-state="thinking"] .er-elem {
animation: er-thinking-pulse 1.6s ease-in-out infinite;
}
@keyframes er-thinking-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.75; }
}
@media (max-width: 760px) {
.er-ring { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.er-elem { padding: 0.9rem 0.3rem 0.7rem; }
.er-elem-orb { width: 40px; height: 40px; }
.er-elem-name { font-size: 0.86rem; }
.er-elem-tag { font-size: 0.48rem; }
.er-input-row { flex-direction: column; }
.er-send { width: 100%; justify-content: center; }
.er-result-foot { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}
@media (max-width: 480px) {
.element-resonator { padding: 1.3rem 1rem; }
.er-head-title { font-size: 1.35rem; }
.er-ring { grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
.er-elem { padding: 0.7rem 0.2rem 0.5rem; }
.er-elem-orb { width: 32px; height: 32px; }
.er-elem-en { display: none; }
}
/* ============================================================================
* v18.20 · TOPBAR-COLLAPSE on scroll
*
* Body bekommt .topbar-collapsed Klasse via v2.js scroll-handler (Schwelle
* 280px). CSS reagiert: Row 2 (Phase-Rail) versteckt, Sigil shrinkt,
* codex-incipit + -rubric verstecken sich, padding reduziert. Damit
* verschwindet das XXL-Banner sobald der user in den Content scrollt.
* Animation: 0.45s organic-ease über alle dimensionen.
* ============================================================================ */
.topbar.topbar-banner {
transition:
padding 0.45s var(--ease-organic),
transform 0.45s var(--ease-organic),
opacity 0.35s var(--ease-organic);
will-change: transform;
}
.topbar-row-2 {
max-height: 200px;
overflow: hidden;
opacity: 1;
transform: translateY(0);
transition:
max-height 0.45s var(--ease-organic),
opacity 0.35s var(--ease-organic),
padding 0.45s var(--ease-organic),
margin 0.45s var(--ease-organic),
transform 0.45s var(--ease-organic);
}
.codex-sigil,
.codex-incipit,
.codex-rubric,
.codex-title {
transition:
width 0.45s var(--ease-organic),
height 0.45s var(--ease-organic),
opacity 0.35s var(--ease-organic),
font-size 0.4s var(--ease-organic),
max-height 0.45s var(--ease-organic);
}
/* Collapsed state ---------------------------------------------------------- */
/* v18.47 · UNIFIED-TOPBAR FIX · single bar at a time
* v18.49 · upgrade auf display:none weil translateY+opacity in einigen
* Browser-Renderings (Bug-Report Screenshot 2026-05-19 22:35,
* /elements) trotz !important nicht zuverlässig griff.
*
* Pattern: ONE BAR AT A TIME. Am top der page sieht der User den großen
* Banner mit Logo + Aktionen + lang-toggle. Bei scrollY>280 wird der
* topbar-banner komplett aus dem Flow genommen, die slim chx-module-nav
* (mit eigener lang-toggle) übernimmt. Keine Mischphase.
*/
body.topbar-collapsed .topbar.topbar-banner {
display: none !important;
}
body.topbar-collapsed .topbar-row-2 {
max-height: 0;
opacity: 0;
padding-top: 0;
margin-top: 0;
border-top-color: transparent;
transform: translateY(-6px);
pointer-events: none;
}
body.topbar-collapsed .codex-sigil {
width: 44px !important;
height: 44px !important;
}
body.topbar-collapsed .codex-incipit {
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
}
body.topbar-collapsed .codex-rubric {
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
}
body.topbar-collapsed .codex-wordmark {
gap: 0;
}
body.topbar-collapsed .codex-title {
font-size: 1.1rem;
}
/* Mobile: even more compact */
@media (max-width: 760px) {
body.topbar-collapsed .codex-sigil {
width: 36px !important;
height: 36px !important;
}
body.topbar-collapsed .codex-title {
font-size: 0.98rem;
}
}
/* Reduced motion — instant snap instead of animated transitions */
@media (prefers-reduced-motion: reduce) {
.topbar.topbar-banner,
.topbar-row-2,
.codex-sigil,
.codex-incipit,
.codex-rubric,
.codex-title { transition: none !important; }
}
/* v18.31 · Seherin-FAB visual ist jetzt komplett von shared chx-ai-fab driven.
Base-css .seer-fab styles (energies.css:917+) bleiben, werden aber durch
chx-ai-fab in chazon-shared.css überschrieben. Diese Section macht nur
noch sicher dass die alten energies.css-rules (position, dimensions)
nicht das chx-ai-fab pattern stören. */
.seer-fab.chx-ai-fab {
/* Force chx-ai-fab to win over base .seer-fab dimensions */
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
}
.seer-fab.chx-ai-fab > img.chx-ai-fab__avatar {
/* Override the base .seer-fab img rule (40px square, magenta border) */
width: 38px; height: 38px;
border: 1.5px solid color-mix(in oklab, var(--accent-gold) 55%, transparent);
}
body.topbar-collapsed .seer-fab.chx-ai-fab > img.chx-ai-fab__avatar {
width: 34px; height: 34px;
}
/* ============================================================================
* v18.28 · Topbar entlastet · Elements-Niveau
*
* Werkzeuge wird icon-only (Glyph allein, kein "Werkzeuge"-Label).
* Sister-Elements wird compact (nur "Elements"-Name, kein sub).
* Sister-Spiegel + cmdk-btn sind aus dem Markup raus — Spiegel jetzt
* im Werkzeuge-Dropdown, cmdk weiterhin via Cmd+K shortcut.
* ============================================================================ */
/* Werkzeuge button: icon-only auf desktop */
.btn-werkzeuge.btn-werkzeuge--slim {
padding: 0.55rem 0.7rem;
gap: 0;
}
.btn-werkzeuge.btn-werkzeuge--slim .wz-glyph {
font-size: 1.15rem;
line-height: 1;
}
.btn-werkzeuge.btn-werkzeuge--slim .wz-label {
/* hidden as decorative; SR-only via aria-label on button */
display: none;
}
/* Compact sister-link variant (single-line, no sub) */
.chx-sister-link.chx-sister-link--compact {
padding: 0.42rem 0.85rem;
gap: 0.45rem;
}
.chx-sister-link.chx-sister-link--compact .chx-sister-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
line-height: 1;
}
/* Spiegel item in Werkzeuge dropdown */
.wz-divider {
display: block;
height: 0.5px;
margin: 0.5rem 0;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--accent-gold) 35%, transparent) 50%,
transparent 100%);
}
.wz-item.wz-item--spiegel .wz-item-glyph {
color: var(--accent-gold);
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-gold) 60%, transparent));
}
/* Topbar gap reduction — fewer items = less crowded gap needed */
.topbar-row-1 .topbar-actions {
gap: 0.65rem;
}
/* In collapsed-state: even icon-only werkzeuge gets a bit smaller */
body.topbar-collapsed .btn-werkzeuge.btn-werkzeuge--slim {
padding: 0.4rem 0.55rem;
}
body.topbar-collapsed .btn-werkzeuge.btn-werkzeuge--slim .wz-glyph {
font-size: 1rem;
}
body.topbar-collapsed .chx-sister-link.chx-sister-link--compact {
padding: 0.32rem 0.7rem;
}
body.topbar-collapsed .chx-sister-link.chx-sister-link--compact .chx-sister-name {
font-size: 0.82rem;
}
/* Mobile: extra slim */
@media (max-width: 760px) {
.chx-sister-link.chx-sister-link--compact .chx-sister-arrow {
font-size: 0.85rem;
}
.chx-sister-link.chx-sister-link--compact .chx-sister-name {
font-size: 0.82rem;
}
}
@media (max-width: 480px) {
/* On phones, hide the compact sister-link name too — only arrow stays */
.chx-sister-link.chx-sister-link--compact .chx-sister-name {
display: none;
}
.chx-sister-link.chx-sister-link--compact {
padding: 0.4rem 0.55rem;
}
}
/* v18.29 · Hide horizontal phase rail in topbar — the new vertical
chx-rail on the right takes over phase-navigation. Topbar shrinks
to single row → less overloaded. tb-rail JS still runs but invisible. */
.topbar-row-2 { display: none !important; }
.topbar.topbar-banner { padding-bottom: 0.5rem !important; }
/* ============================================================
* v18.45 · GLOBAL CONTENT-SAFETY · neutralize ALL opacity:0-Gating
*
* Problem: legacy `.reveal` Class in base energies.css setzt opacity:0
* und braucht JS (mountSectionLife) das data-visible="true" toggled.
* Wenn JS scheitert oder selector nicht erfasst -> Content unsichtbar.
*
* Fix: opacity bleibt IMMER 1. Slide-in-Effekt nur über transform
* (translateY 24px -> 0 via animation 1.5s nach load). Wenn JS data-
* visible setzt, snap-via-transition zu translateY(0).
*
* Damit kann Content NIE mehr unsichtbar bleiben — egal welcher Bug.
* ============================================================ */
@keyframes chx-legacy-reveal-fallback {
to { transform: translateY(0); }
}
.reveal {
opacity: 1 !important;
transform: translateY(24px);
transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: chx-legacy-reveal-fallback 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s forwards;
}
.reveal[data-visible="true"] {
opacity: 1 !important;
transform: translateY(0);
animation: none;
}
/* defensive: kill opacity-only legacy rules for content-bearing zones */
.section-head, .phenom, .layer, .filter-card, .feeling, .video-hero,
.feeling-grid, .filter-mod, .module, .toolbox, .tools, .filter-card-grid {
opacity: 1 !important;
}
/* v18.45 · DOUBLED-SYMBOLS FIX · User-Feedback 2026-05-19:
* "es werden noch symbole doppelt angezeigt, in sektion 1 ist es schon gefixed".
*
* Phase-Sections zeigten beide: kleine .phase-glyph-img (PhaseGlyphInjector,
* branding/phases/{slug}.png) UND große .chx-phase-watermark__img (v4 watercolor
* roman watermark). User will single source: v4-watercolor-watermark gewinnt.
*
* Sphere-Sigil-Bilder (sphere-a/b/c/d-intro) bleiben sichtbar — die haben kein
* watermark. */
section[id^="phase-"] .phase-glyph-img:not(.sphere-sigil-img) {
display: none !important;
}
/* v18.45.3 · PHASE-I HERO-VIDEO Z-INDEX FIX · User: "kein inhalt bei werte
* spirale, nur das bild"
*
* Phase I hat ein .hero-video position:absolute inset:0 opacity:0.35 das den
* Section-Hintergrund füllt. Die Wrap-Container darin hatten keinen z-index,
* also wurde Content vom Video überlagert. Fix: section > .wrap mit relative
* + z-index:1, plus .hero-video explicit z-index:0. */
section.section .wrap {
position: relative;
z-index: 1;
}
.hero-video {
z-index: 0 !important;
}
/* ============================================================
* v18.45.4 · MODULE-VISIBILITY AUDIT · alle 20 Phasen + Bridges
* ----------------------------------------------------------------
* User-Report 2026-05-19: "auch die anderen module... die große
* spirale bei 8... guck nochmal alle module durch".
*
* Phase I-Fix (section.section .wrap{z-index:1}) deckte schon
* Phase-Sections ab, aber NICHT:
* · sphere-bridges mit .wrap-narrow statt .wrap
* · .tlw-section (kein .section-Class) mit eigenem .wrap
* · .hero (Landing-section) — Base setzt .hero > .wrap z-index:1
* bereits, aber inline-style stripped
* · .chx-transition--hero-backdrop in Phase III, IV, X, XV, XVIII
* (shared.css handled but defensive belt-and-suspenders here)
* · .spiral-stage::after mit z-index:-1 könnte aus stacking-context
* ausbrechen — wir clampen es auf isolation
* · Module-Inner-Stages (.spiral-stage, .dmn-stage, .heart-stage,
* .virtue-stage, .plutchik-stage, .big-spiral, .ec-stage,
* .tlw-stage, .embodiment-stage) — isolation:isolate stoppt
* unbeabsichtigte z-index-bleeds aus parent-Kontext
* · KI-Module ::before decorative-borders (polyvagal, ec,
* element-resonator, granularity-coach) — already pointer-events:
* none, aber wir geben content explicit z-index als belt-suspenders.
*
* Strategie: jede stage-Component bekommt isolation:isolate, jeder
* Content-Container bekommt position:relative + z-index. Conservative:
* KEIN refactor, nur defensive layering-locks.
* ============================================================ */
/* ---- 1 · Alle wrap-Varianten (auch .wrap-narrow + tlw) ---- */
section.section > .wrap,
section.section > .wrap-narrow,
section.tlw-section > .wrap,
section.tlw-section > .wrap-narrow,
section.hero > .wrap,
section.hero > .wrap-narrow,
section[id^="sphere-"] > .wrap,
section[id^="sphere-"] > .wrap-narrow,
section[id="atlas-wuxing"] > .wrap,
section[id="three-layers"] > .wrap {
position: relative;
z-index: 1;
}
/* ---- 2 · Hero-section media muss BEHIND content bleiben ---- */
.hero-video,
.section .hero-video,
.bridge-video,
.section-hero,
.video-hero {
/* position:relative für video-hero/bridge-video/section-hero damit
ihre eigenen ::after-overlays nicht das wrap-content überdecken */
position: relative;
}
.hero-video {
z-index: 0 !important;
}
/* ---- 3 · chx-transition Backdrops · defensive z-index ----- */
/* Shared.css setzt das schon (z-index:0), aber wenn shared nicht
geladen ist oder durch ein anderes selector überschrieben, fallback */
.section > .chx-transition,
.section > .chx-transition--hero-backdrop {
z-index: 0;
pointer-events: none;
}
/* ---- 4 · Module-Stages · isolation:isolate ----------------- */
/* Jede inner-stage bekommt eigenen stacking-context, sodass interne
::after/::before mit z-index:-1 nicht aus dem Container ausbrechen
und Content darüber abdecken. Phase I .spiral-stage::after war
harmlos weil .wrap z-index:1 hat, aber defensive sicher ist sicher. */
.spiral-stage,
.dmn-stage,
.heart-stage,
.virtue-stage,
.plutchik-stage,
.big-spiral,
.ec-stage,
.tlw-stage,
.embodiment-stage,
.emb-body-wrap,
.section-hero,
.video-hero,
.bridge-video,
.mandala-video {
isolation: isolate;
}
/* ---- 5 · Module-Container · stacking-context lock ---------- */
/* Die module-wrapper bekommen ebenfalls eigenen context, damit ihre
::before-decorative-borders (z.B. .polyvagal-tracker::before mit
inset:6px) nicht oberhalb von Content-Children stehen. */
.spiral-mod,
.dmn-mod,
.heart-trainer,
.virtue-hex,
.plutchik,
.dyad-atlas,
.wuxing-atlas,
.wot-mod,
.polyvagal-tracker,
.emotion-cartography,
.element-resonator,
.granularity-coach,
.shadow-worker,
.resonance,
.embodiment {
position: relative;
isolation: isolate;
}
/* ---- 6 · Content-Children der KI-Module > Border-Overlay --- */
/* Die ::before-Borders sind decorative gold-tinted 0.5px hairlines.
Damit sie NIE über Text laufen, geben wir den text-containers
explicit z-index:1 (höher als ::before default 0). */
.polyvagal-tracker > *,
.emotion-cartography > *,
.element-resonator > *,
.granularity-coach > *,
.shadow-worker > * {
position: relative;
z-index: 1;
}
/* Aber die ::before/::after pseudo-borders dürfen sichtbar bleiben —
sie haben pointer-events:none und sind super-faint, also kein issue */
/* ---- 7 · spiral-mandala explicit visibility lock ---------- */
/* Phase I (und potentiell andere mandala-uses): die mandala-img sitzt
in .spiral-stage. Mit isolation:isolate oben ist alles abgekapselt.
Plus: kein opacity-stuck — wir clampen explicit visibility */
.spiral-mandala {
opacity: 1;
}
/* ---- 8 · Big-Spirale (Phase VIII) · SVG fill-lock --------- */
/* .big-spiral hat aspect-ratio + overflow:hidden, SVG füllt 100%.
User-Report: "die große spirale bei 8". Defensive: position:relative
+ isolation (oben), plus sicherstellen daß SVG sichtbar ist. */
.big-spiral {
position: relative;
background: var(--base-night);
}
.big-spiral svg {
position: relative;
z-index: 1;
display: block;
}
/* ---- 9 · Phase XX Mandala-Video · ditto ------------------- */
.mandala-video {
position: relative;
}
.mandala-video video {
position: relative;
z-index: 0;
}
/* ---- 10 · TLW-Section · ohne .section-Class --------------- */
/* tlw-section hat ihre eigene .wrap + tlw-codex frame. Wir
stellen sicher daß alles innerhalb sichtbar bleibt */
.tlw-section {
position: relative;
}
.tlw-codex {
position: relative;
isolation: isolate;
}
/* ---- 11 · Phase-Watermark · stack-context lock ------------ */
/* shared.css setzt .chx-phase-watermark z-index:0 mit opacity:0
default. Wenn JS .is-revealed nicht setzt, bleibt es invisible —
das ist OK, aber wir clampen z-index:0 hart damit es nie über
Content driftet. */
.chx-phase-watermark {
z-index: 0 !important;
pointer-events: none;
}
/* ---- 12 · Reveal-content garantiert sichtbar -------------- */
/* v18.45 hatte schon .reveal{opacity:1 !important}. Hier ergänzen:
data-mod-Container könnten durch SectionLife "sleeping" gepaust
werden. Pause-Animation ist OK, aber Visibility soll bleiben. */
section[id].s-sleeping [data-mod] {
opacity: 1 !important;
visibility: visible !important;
}
/* ---- 13 · MOBILE · sphere-bridges narrow-wrap z-index ----- */
@media (max-width: 760px) {
section[id^="sphere-"] > .wrap-narrow,
section.section > .wrap,
section.section > .wrap-narrow {
position: relative;
z-index: 1;
}
}
/* ============================================================
* END · v18.45.4 MODULE-VISIBILITY AUDIT
* ============================================================ */
/* ============================================================
* v18.45 · TYPOGRAPHY POLISH · Vellum-Manuskript-Schriftsatz
* ----------------------------------------------------------------
* User-Report 2026-05-19: zu oft linksbündig wo zentriert/justified
* sein sollte. Diese Schicht zieht die Mischung wieder in Richtung
* illuminated-manuscript-Tradition:
*
* · display-titles (h2.section-title, eyebrow, lede) ZENTRIERT
* · long-form body-prose JUSTIFIED mit auto-hyphens
* · UI-cards (filter, layer) zentrierte Titles, justified body
* · phenom-zitat-box bleibt asymmetrisch (border-left als Achse),
* bekommt aber Hyphenation + sauberen Leseflow
* · Mobile (<760px): kein Justify (sieht auf schmaler Spalte
* löchrig aus) — nur centered + hyphenation
*
* Frank Ruhl Libre wird als body-prose hervorgehoben — perfekter
* Vellum-Body-Font. Cormorant Garamond bleibt italic-display.
* ============================================================ */
/* ---- 1 · Section-Header (display) zentriert ---------------- */
/* Override v2.css line 1333: flex-direction:column; align-items:flex-start */
.section .section-head,
.tlw-section .section-head,
section[id^="phase-"] .section-head,
section[id="sphere-b-intro"] .section-head,
section[id="sphere-c-intro"] .section-head,
section[id="sphere-d-intro"] .section-head,
section[id="atlas-wuxing"] .section-head {
align-items: center !important;
text-align: center;
}
/* section-num pill — auto margin so the inline-flex line itself centers */
.section .section-head .section-num,
.tlw-section .section-head .section-num,
section[id^="phase-"] .section-head .section-num {
margin-left: auto;
margin-right: auto;
}
/* section-title — break the 16ch max-width restriction for centering,
keep a sensible reading width via clamp, center via mx auto */
.section .section-head .section-title,
.tlw-section .section-head .section-title,
section[id^="phase-"] .section-head .section-title,
section[id="sphere-b-intro"] .section-head .section-title,
section[id="sphere-c-intro"] .section-head .section-title,
section[id="sphere-d-intro"] .section-head .section-title,
section[id="atlas-wuxing"] .section-head .section-title {
max-width: 22ch;
margin-left: auto;
margin-right: auto;
text-align: center;
text-wrap: balance; /* better line-breaks for display headings */
}
/* section-lede — italic Cormorant subtitle.
Center horizontally, comfortable reading width, balanced wrap */
.section .section-head .section-lede,
.tlw-section .section-head .section-lede,
section[id^="phase-"] .section-head .section-lede,
section[id="sphere-b-intro"] .section-head .section-lede,
section[id="sphere-c-intro"] .section-head .section-lede,
section[id="sphere-d-intro"] .section-head .section-lede,
section[id="atlas-wuxing"] .section-head .section-lede {
max-width: 52ch;
margin-left: auto;
margin-right: auto;
text-align: center;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
}
/* section-eyebrow — small italic display line above title */
.section .section-head .section-eyebrow,
.tlw-section .section-head .section-eyebrow,
section[id^="phase-"] .section-head .section-eyebrow {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Drop-cap on .section-lede.dropped — preserve, but ensure paragraph
itself remains centered (the first-letter float doesn't break it) */
.section .section-head .section-lede.dropped {
text-align: center;
}
.section .section-head .section-lede.dropped::first-letter {
/* keep the existing drop-cap styling from base, just guard alignment */
float: none;
}
/* ---- 2 · Phenom-Zitat-Box · body-prose justified ---------- */
/* phenom keeps its border-left asymmetry (designed as marginal zitat),
but the paragraph itself gets Vellum-style justified+hyphens */
.phenom p,
.phenom > p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
hyphenate-limit-chars: 6 3 3;
line-height: 1.55;
}
/* ---- 3 · Filter-Cards · zentrierter Titel, justified Body ---- */
/* base CSS lets the whole card flow left-aligned. Manuscript-feel: card
title centered (display), body justified with hyphens, ref centered. */
.filter-card {
text-align: center;
}
.filter-card h4 {
text-align: center;
text-wrap: balance;
max-width: 26ch;
margin-left: auto;
margin-right: auto;
}
.filter-card p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
.filter-card .ref {
text-align: center;
}
/* ---- 4 · Layer-Cards (Drei-Schichten · 📐 🌀 🌌) ---------- */
/* layer-tag bleibt links-eyebrow (mit emoji), aber Body justified */
.layer p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
/* ---- 5 · Feeling-Cards (Phase III · 5 Elemente) ------------ */
/* Base ist bereits text-align:center für .feeling — body-p braucht
noch Hyphenation für schmale Spalten (5-spaltig auf desktop) */
.feeling p {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
text-wrap: pretty;
}
/* ---- 6 · Recap-Strip (Sphäre-Bridges) ---------------------- */
/* "Was du bisher mitnimmst" + pill-kette · zentrieren */
.recap {
justify-content: center;
}
.recap-label {
text-align: center;
}
/* ---- 7 · Bridge (kurz nach Hero) · ditto -------------------- */
.bridge {
text-align: center;
}
.bridge p {
max-width: 56ch;
margin-left: auto;
margin-right: auto;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
}
/* ---- 8 · Pull-Quote · bereits zentriert, hyphens off (display) */
.pull-quote q {
text-wrap: balance;
hyphens: manual; /* display-quote · keine auto-hyphens */
}
/* ---- 9 · TLW (Drei-Schichten-Disziplin) Section-Head ------- */
/* tlw-section.section-head ist eigene Variante — sicherstellen */
.tlw-section .section-head .section-title,
.tlw-section .section-head .section-lede {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* tlw-panels sind bereits centered (line 3281) — body-line-length pflegen */
.tlw-panel p,
.tlw-panel .tlw-panel-quote {
max-width: 56ch;
margin-left: auto;
margin-right: auto;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
}
/* ---- 10 · Frank Ruhl Libre · Body-Prose-Aufwertung --------- */
/* User-Wunsch: FRL mehr zur Geltung bringen. Wir setzen es auf
die "normalen" body-paragraphen (filter-card p, layer p, phenom p
continuation, feeling p) — Cormorant bleibt für italic-display.
FRL hat klassische Vellum-Manuskript-Anatomie (Frank Ruhl 1908).
Hier nur überschreiben wo base 'Manrope' oder 'serif' steht, NICHT
wo Cormorant explizit gewählt ist (.section-lede, .phenom p etc.) */
.filter-card p,
.layer p,
.feeling p {
font-family: 'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
letter-spacing: 0.005em;
}
/* ---- 11 · chx-onboard · steps body-prose ------------------- */
/* onboarding-cards: title centered (base), body kriegt sauberen
justify+hyphens für 3-Spalten-Grid (eng) */
.chx-onboard__step h3 {
text-align: center;
text-wrap: balance;
}
.chx-onboard__step p {
text-align: center;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
/* ---- 12 · Cross-Pole-Finale · already centered ------------- */
.chx-cross-pole-finale-title {
text-wrap: balance;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.chx-cross-pole-finale-sub {
max-width: 48ch;
margin-left: auto;
margin-right: auto;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
}
/* ---- 13 · Pendant-Panel (chx-mirror) ----------------------- */
/* Mirror-link-target paragraph — kurz, keine Hyphenation nötig,
aber pretty wrap für italic em-Phrase */
.chx-mirror-target {
text-wrap: pretty;
}
/* ---- 14 · Mobile · kein Justify (löchrig auf schmaler Spalte) */
@media (max-width: 760px) {
.phenom p,
.phenom > p,
.filter-card p,
.layer p {
text-align: left; /* zurück zu links, hyphens bleiben an */
hyphens: auto;
-webkit-hyphens: auto;
}
.section .section-head .section-title,
.section .section-head .section-lede,
.tlw-section .section-head .section-title,
.tlw-section .section-head .section-lede {
max-width: 92vw;
}
/* eyebrow / num bleiben zentriert auch mobile */
}
/* ---- 15 · Reduced-Motion · text-wrap fallback -------------- */
/* text-wrap: balance kann perf-kosten · respektiere reduced-motion */
@media (prefers-reduced-motion: reduce) {
.section-title,
.chx-cross-pole-finale-title,
.filter-card h4 {
text-wrap: pretty; /* günstiger als balance */
}
}
/* ============================================================
* END · v18.45 TYPOGRAPHY POLISH
* ============================================================ */
/* ============================================================================
* v18.50 · Phase-2 Acc-Polish
*
* P1 #8 aus Accessibility-Audit 2026-05-19: --text-faded (#8a7d83) auf
* tiefer Aubergine ergibt mit color-mix-70% nur ~3.8:1 — knapp unter
* WCAG-AA 4.5:1 für body-text. Hier wird der Token aufgehellt auf #a89aa0
* (ergibt ~6.6:1 auf #0d0613) und die color-mix-Anwendungen werden
* von 70% auf 85-90% angehoben damit der Kontrast bleibt.
*
* codex-rubric-faded bekommt zusätzlich einen text-shadow für Lesbarkeit
* auf gold-touched Hintergrund.
* ============================================================================ */
:root {
--text-faded: #a89aa0; /* AA-konform · vorher #8a7d83 (~3.8:1 mit 70%-mix) */
}
.codex-rubric-faded {
text-shadow: 0 0 1px rgba(0, 0, 0, .55);
}
/* ============================================================================
* v18.48 · Wordmark-Logo aus Assets-v4 ersetzt SVG-sigil + codex-wordmark
*
* Aus energies-v1.webp (Mandala-Lotus rose-purple watercolor + "energies"
* Schreibschrift + ".chazon.eu / energies" untertitel) wird ein einziges
* ![]()
im .topbar-brand-codex anchor. Höhe vom Token --chx-sigil-size
* getrieben, klemmt auf collapse mit. monogram-v2.webp ersetzt den slim
* SVG-sigil in .chx-module-nav (22px square gold-star).
* ============================================================================ */
.topbar-brand-codex.topbar-brand--img {
display: inline-flex !important;
align-items: center;
gap: 0;
padding: 0;
background: transparent;
}
.brand-logo.brand-logo--energies {
display: block;
height: clamp(54px, 5.6vw, 78px);
width: auto;
max-width: 100%;
filter: drop-shadow(0 0 14px rgba(196, 168, 218, .22));
transition:
height 0.45s var(--ease-organic),
filter 0.6s var(--ease-organic),
transform 0.5s var(--ease-organic);
will-change: transform;
}
.topbar-brand-codex.topbar-brand--img:hover .brand-logo {
filter: drop-shadow(0 0 24px rgba(245, 222, 179, .38));
transform: translateY(-1px);
}
/* Auf scroll-collapse schrumpft das logo synchron mit der Bar — aber da
* die Bar selbst translateY(-100%) ausfährt (v18.47 fix), ist dieser
* Klemm-Effekt fast immer nur kurz beim transition-start sichtbar. */
body.topbar-collapsed .brand-logo.brand-logo--energies {
height: clamp(40px, 4vw, 50px);
}
@media (max-width: 760px) {
.brand-logo.brand-logo--energies {
height: clamp(42px, 11vw, 54px);
}
}
@media (max-width: 480px) {
.brand-logo.brand-logo--energies { height: 40px; }
}
/* ---- chx-module-nav-sigil img · monogram star ---- */
.chx-module-nav-sigil img,
.module-nav-sigil img {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
filter: drop-shadow(0 0 4px rgba(201, 164, 74, .45));
transition: filter 0.5s var(--ease-organic), transform 0.4s var(--ease-organic);
}
.chx-module-nav:hover .chx-module-nav-sigil img,
.module-nav:hover .module-nav-sigil img {
filter: drop-shadow(0 0 8px rgba(245, 222, 179, .7));
transform: rotate(-3deg) scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.brand-logo,
.chx-module-nav-sigil img,
.module-nav-sigil img { transition: none !important; }
}
/* ============================================================================
* v18.51 · STABILITY PATCH · 2026-05-19
*
* Responsive-Audit-Findings (Energies):
* [P0] er-ring 5-col forciert auf 360px → Orbs ~24px tap-area → 2-col Fallback
* [P1] Topbar XXL Banner initial display nicht passend für <480px → früher
* collapsen (vor scrollY>280)
* [P1] gc-send Button min-height 44px für Tap-Compliance
* [P1] werkzeuge-menu z-index hochsetzen damit es über module-nav (110) liegt
* [P1] memory-trigger + passport-badge min-height 44px (Footer-Tap-Targets)
*
* Plus z-stack-disambig (siehe vc-cost-modal oben).
* ============================================================================ */
/* P0 · Element-Resonator (Phase III): 5-orb-grid auf 360px aufbrechen */
@media (max-width: 480px) {
.er-ring {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.55rem !important;
}
/* Quelle (source/aether/5.) spannt volle Zeile als source-element */
.er-elem[data-elem="source"],
.er-elem[data-kind="source"],
.er-elem:nth-child(5) {
grid-column: 1 / -1;
}
.er-elem-orb { width: 56px !important; height: 56px !important; }
.er-elem { padding: 0.85rem 0.5rem 0.65rem !important; min-height: 44px; }
.er-elem-en { display: none; } /* schon vorhanden, defensive */
}
/* P1 · Topbar XXL-Banner früher collapsen auf Mobile (initial bereits compact) */
@media (max-width: 480px) {
/* Statt erst nach scrollY>280: bereits initial im collapsed-Look auf small mobile */
.topbar.topbar-banner {
padding-top: 0.4rem !important;
padding-bottom: 0.3rem !important;
}
.topbar-row-2 { display: none !important; }
.codex-incipit,
.codex-rubric { display: none !important; }
.codex-sigil,
.brand-logo--energies {
/* Slim-Banner auch ohne scroll */
max-height: clamp(40px, 11vw, 54px);
}
}
/* P1 · gc-send + gc-reset Tap-Compliance */
@media (max-width: 600px) {
.gc-send,
.gc-reset {
min-height: 44px;
padding-block: 0.7rem;
}
.gc-input-form {
flex-direction: column !important;
gap: 0.55rem !important;
}
.gc-input-field { min-height: 44px; }
}
/* P1 · werkzeuge-menu z-index über module-nav */
.werkzeuge-menu { z-index: 120 !important; }
/* P1 · Footer-Pills Tap-Targets */
.chx-passport-badge,
.chx-memory-trigger {
min-height: 44px;
}
.chx-memory-trigger {
padding-block: 0.55rem !important;
}
/* ============================================================================
* v18.54 · Big-Spiral v2 (Phase VIII) · HTML-Buttons Rewrite
*
* Vorher (v18.52): SVG-Arcs als Click-Targets → Hit-Test-Probleme auf
* einigen Browsern, Beads + Labels haben Klicks abgefangen, Touch-Events
* inkonsistent. User-Report: "funktioniert nicht".
*
* v18.54: kompletter Rewrite — Container ist data-mod="bigspiral-v2" (base
* ignoriert), energies-v3.js mountet eine SVG-Spirale rein dekorativ (kein
* pointer-events) + acht echte HTML-