/* ========================================================== VERLORENE AUFTRÄGE — 4 alternative Konzepte (B, C, D, E) Aktive Variante wird via [data-cmt-variant] auf gewählt. ========================================================== */ /* ---- Variant switcher ---- */ .cmt-section, .vb-section, .vc-section, .vd-section, .ve-section { display: none; } body[data-cmt-variant="A"] .cmt-section, body:not([data-cmt-variant]) .cmt-section { display: block; } body[data-cmt-variant="B"] .vb-section { display: block; } body[data-cmt-variant="C"] .vc-section { display: block; } body[data-cmt-variant="D"] .vd-section { display: block; } body[data-cmt-variant="E"] .ve-section { display: block; } /* ========================================================================= VARIANT B — Feed der verlorenen Stunden 200vh sticky pin. Phase 1: Liste verlorener Anfragen baut sich auf, Zähler tickt hoch. Phase 2: jede Zeile transformiert in einen Termin. ========================================================================= */ .vb-section { position: relative; height: 240vh; background: oklch(0.13 0.04 250); padding: 0; } .vb-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: stretch; justify-content: center; } .vb-bg { position: absolute; inset: 0; pointer-events: none; } .vb-bg-cool { background: radial-gradient(ellipse at 50% 0%, oklch(0.22 0.05 260) 0%, oklch(0.10 0.04 245) 70%), linear-gradient(180deg, oklch(0.10 0.03 245) 0%, oklch(0.14 0.04 250) 100%); } .vb-bg-warm { background: radial-gradient(ellipse at 50% 30%, oklch(0.55 0.16 70) 0%, oklch(0.28 0.10 50) 50%, oklch(0.14 0.05 245) 100%); opacity: 0; transition: opacity 0.8s linear; } .vb-section[data-phase="warm"] .vb-bg-warm { opacity: 0.85; } .vb-content { position: relative; z-index: 2; width: min(1100px, 92%); padding: clamp(40px, 6vh, 80px) 0 clamp(20px, 4vh, 40px); display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: clamp(20px, 3vh, 40px); text-align: center; } .vb-heading { display: grid; grid-template-areas: "stack"; place-items: center; } .vb-h { grid-area: stack; transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1); } .vb-eyebrow { display: inline-block; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; margin-bottom: 14px; } .vb-h h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.025em; line-height: 1.04; margin: 0; text-wrap: balance; max-width: 18ch; margin-inline: auto; } .vb-h h2 em { font-style: italic; font-weight: 400; } .vb-h-cold { color: oklch(0.86 0.02 240); opacity: 1; } .vb-h-cold h2 em { color: oklch(0.65 0.18 25); } .vb-h-warm { color: oklch(0.98 0.05 80); opacity: 0; transform: translateY(20px); } .vb-h-warm h2 em { color: oklch(0.94 0.13 75); } .vb-section[data-phase="warm"] .vb-h-cold { opacity: 0; transform: translateY(-20px); } .vb-section[data-phase="warm"] .vb-h-warm { opacity: 1; transform: translateY(0); } /* Stage: counter row + feed list */ .vb-stage { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: clamp(14px, 2vh, 24px); align-items: stretch; justify-items: center; } /* Counter pill */ .vb-counter { display: inline-grid; grid-template-areas: "stack"; place-items: center; padding: 10px 22px; border-radius: 999px; border: 1px solid color-mix(in oklab, oklch(0.65 0.18 25) 45%, transparent); background: oklch(0.12 0.04 245 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.85 0.05 240); transition: border-color 0.6s, background 0.6s, color 0.6s; } .vb-counter > * { grid-area: stack; transition: opacity 0.6s; } .vb-counter-cold { opacity: 1; } .vb-counter-warm { opacity: 0; color: oklch(0.93 0.13 130); } .vb-section[data-phase="warm"] .vb-counter { border-color: color-mix(in oklab, oklch(0.66 0.16 145) 55%, transparent); } .vb-section[data-phase="warm"] .vb-counter-cold { opacity: 0; } .vb-section[data-phase="warm"] .vb-counter-warm { opacity: 1; } .vb-counter-val { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -0.01em; text-transform: none; margin-left: 10px; color: oklch(0.92 0.06 70); font-variant-numeric: tabular-nums; } .vb-counter-warm .vb-counter-val { color: oklch(0.93 0.16 130); } /* Feed */ .vb-feed { position: relative; width: min(620px, 100%); height: 100%; max-height: clamp(360px, 56vh, 540px); overflow: hidden; mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 88%, transparent 100%); } .vb-feed-track { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); } .vb-row { position: relative; display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; background: oklch(0.18 0.03 245 / 0.65); border: 1px solid oklch(0.30 0.04 245 / 0.55); text-align: left; font-family: var(--font-sans); color: oklch(0.85 0.03 240); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity 0.6s, background 0.6s, border-color 0.6s, transform 0.6s; } .vb-row-time { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: oklch(0.75 0.04 240); } .vb-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vb-row-name { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: -0.01em; color: oklch(0.94 0.02 240); } .vb-row-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.70 0.04 240); } .vb-row-eur { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: oklch(0.78 0.13 30); letter-spacing: 0.02em; white-space: nowrap; } /* Tag — sits at left of row */ .vb-row::before { content: "VERLOREN"; position: absolute; top: -8px; left: 14px; padding: 2px 7px; border-radius: 3px; background: oklch(0.45 0.16 25); color: oklch(0.98 0.02 60); font-family: var(--font-mono); font-weight: 600; font-size: 8px; letter-spacing: 0.18em; line-height: 1; transition: background 0.5s, content 0s, color 0.5s; } /* "verloren" state — row has been hit by playhead */ .vb-row.is-past { opacity: 0.42; } .vb-row.is-past .vb-row-name { text-decoration: line-through; text-decoration-color: oklch(0.70 0.04 240 / 0.8); text-decoration-thickness: 1.1px; } .vb-row.is-past .vb-row-eur { text-decoration: line-through; text-decoration-thickness: 1.1px; } /* warm transition — row becomes a termin */ .vb-section[data-phase="warm"] .vb-row { background: oklch(0.96 0.03 80 / 0.92); border-color: oklch(0.66 0.16 145 / 0.55); color: oklch(0.20 0.02 240); opacity: 1; } .vb-section[data-phase="warm"] .vb-row.is-past { opacity: 0.85; } .vb-section[data-phase="warm"] .vb-row::before { content: "TERMIN"; background: oklch(0.66 0.16 145); color: oklch(0.98 0.04 130); } .vb-section[data-phase="warm"] .vb-row-time { color: oklch(0.40 0.02 240); } .vb-section[data-phase="warm"] .vb-row-name { color: oklch(0.20 0.02 240); text-decoration: none; } .vb-section[data-phase="warm"] .vb-row-meta { color: oklch(0.50 0.04 50); } .vb-section[data-phase="warm"] .vb-row-eur { color: oklch(0.48 0.14 145); text-decoration: none; } /* Playhead — fixed horizontal "JETZT" line behind feed */ .vb-playhead { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px dashed oklch(0.70 0.10 70 / 0.55); pointer-events: none; z-index: 3; } .vb-playhead::before { content: "JETZT"; position: absolute; left: -64px; top: -7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.20em; color: oklch(0.75 0.10 70); background: oklch(0.10 0.03 245); padding: 2px 6px; border-radius: 3px; } @media (max-width: 760px) { .vb-section { height: 220vh; } .vb-row { grid-template-columns: 60px 1fr auto; gap: 10px; padding: 11px 12px; } .vb-row-time { font-size: 11px; } .vb-row-name { font-size: 15px; } .vb-row-meta { font-size: 10px; } .vb-row-eur { font-size: 12.5px; } .vb-playhead::before { display: none; } } /* ========================================================================= VARIANT C — Friedhof verfeinert Wiederverwendet das Bühnenbild von A, aber: 8 Karten in einer Welle, größer und besser lesbar, sauberere Kippanimation. ========================================================================= */ .vc-section { position: relative; height: 220vh; background: oklch(0.13 0.04 250); padding: 0; } .vc-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .vc-bg { position: absolute; inset: 0; pointer-events: none; } .vc-bg-cool { background: radial-gradient(ellipse at 50% 110%, oklch(0.20 0.04 260) 0%, oklch(0.09 0.03 245) 70%), linear-gradient(180deg, oklch(0.08 0.03 245) 0%, oklch(0.14 0.04 250) 100%); } .vc-bg-warm { background: radial-gradient(ellipse at 50% 75%, oklch(0.92 0.14 80) 0%, oklch(0.62 0.20 55) 28%, oklch(0.32 0.16 35) 65%, oklch(0.14 0.06 30) 100%); opacity: 0; } .vc-sun { position: absolute; left: 50%; bottom: 6%; width: clamp(320px, 38vw, 540px); height: clamp(320px, 38vw, 540px); transform: translate(-50%, calc((1 - var(--sun-p, 0)) * 75% + 22%)); opacity: var(--sun-p, 0); pointer-events: none; z-index: 1; transition: transform 0.3s linear, opacity 0.4s linear; } .vc-sun svg { width: 100%; height: 100%; filter: drop-shadow(0 0 56px oklch(0.80 0.18 70 / 0.65)); } .vc-sun-rays { transform-origin: 100px 100px; animation: vc-sun-spin 48s linear infinite; } @keyframes vc-sun-spin { to { transform: rotate(360deg); } } .vc-fog { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(180deg, transparent 0%, oklch(0.07 0.04 245 / 0.7) 55%, oklch(0.05 0.04 245) 100%); z-index: 2; pointer-events: none; } /* Field — 8 cells laid out in a wave */ .vc-field { position: absolute; top: 30%; bottom: 14%; left: 6%; right: 6%; z-index: 3; } .vc-cell { position: absolute; left: var(--x); top: var(--y); width: clamp(110px, 12vw, 168px); height: clamp(160px, 17vw, 220px); transform: translate(-50%, -50%) scale(var(--scale)) rotate(var(--rot)); z-index: var(--z, 1); } .vc-stone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px 10px; text-align: center; background: linear-gradient(180deg, oklch(0.90 0.03 82) 0%, oklch(0.80 0.025 78) 100%); border: 1px solid oklch(0.62 0.04 75 / 0.55); border-radius: 5px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), inset 0 -3px 6px oklch(0.30 0.02 80 / 0.18), 0 18px 36px -14px oklch(0.04 0 0 / 0.8); transform-origin: bottom center; transition: transform 1.05s cubic-bezier(.55,.04,.6,1), opacity 0.95s, filter 0.6s; font-family: var(--font-mono); color: oklch(0.42 0.02 80); font-size: 11px; letter-spacing: 0.04em; } .vc-stone-tag { font-family: var(--font-mono); font-weight: 600; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: oklch(0.50 0.18 25); border: 1px solid oklch(0.50 0.18 25 / 0.55); padding: 2px 7px; border-radius: 2px; line-height: 1; } .vc-stone-time { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 400; color: oklch(0.32 0.02 80); letter-spacing: -0.01em; line-height: 1; } .vc-stone-name { font-size: 11px; color: oklch(0.40 0.02 80); } .vc-stone-cause { font-size: 9.5px; color: oklch(0.50 0.18 25); font-weight: 500; letter-spacing: 0.05em; max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vc-stone-eur { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: oklch(0.48 0.16 25); text-decoration: line-through; text-decoration-color: oklch(0.48 0.16 25 / 0.85); text-decoration-thickness: 1.4px; margin-top: 2px; } /* Fall: forward tip + slight horizontal drift driven by --fall-drift */ .vc-cell.is-fallen .vc-stone { transform: rotate(72deg) translate(var(--fall-drift, 0px), 30px) scale(0.92); opacity: 0; filter: blur(0.6px); } /* Slot replacing stone */ .vc-slot { position: absolute; top: 50%; left: 50%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px; background: var(--bg-elev); border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); border-radius: 14px; box-shadow: 0 14px 32px -12px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 0 5px color-mix(in oklab, var(--accent) 10%, transparent); opacity: 0; transform: translate(-50%, -50%) translateY(20px) scale(0.55); transition: opacity 0.7s, transform 0.85s cubic-bezier(.2,.8,.2,1); } .vc-cell.is-on .vc-slot { opacity: 1; transform: translate(-50%, -50%) scale(1); } .vc-slot-day { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .vc-slot-time { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--fg); letter-spacing: -0.015em; line-height: 1; } .vc-slot-check { width: 22px; height: 22px; border-radius: 50%; background: oklch(0.66 0.16 145); color: var(--bg-elev); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .vc-slot-check svg { width: 12px; height: 12px; } /* Heading — same pattern as A but more room */ .vc-heading { position: absolute; top: clamp(56px, 8vh, 110px); left: 50%; transform: translateX(-50%); width: min(820px, 92%); text-align: center; z-index: 4; pointer-events: none; display: grid; grid-template-areas: "stack"; place-items: center; } .vc-h { grid-area: stack; transition: opacity 0.95s cubic-bezier(.2,.8,.2,1), transform 0.95s cubic-bezier(.2,.8,.2,1); } .vc-eyebrow { display: inline-block; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; margin-bottom: 18px; } .vc-h h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6vw, 78px); letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 14px; text-wrap: balance; max-width: 18ch; margin-inline: auto; } .vc-h h2 em { font-style: italic; font-weight: 400; } .vc-h p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(16px, 1.6vw, 21px); margin: 0; opacity: 0.88; letter-spacing: -0.005em; line-height: 1.4; } .vc-h-cold { color: oklch(0.86 0.02 240); opacity: 1; } .vc-h-cold h2 em { color: oklch(0.65 0.18 25); } .vc-h-warm { color: oklch(0.98 0.05 80); opacity: 0; transform: translateY(24px); } .vc-h-warm h2 em { color: oklch(0.94 0.13 75); } .vc-section[data-phase="warm"] .vc-h-cold { opacity: 0; transform: translateY(-24px); } .vc-section[data-phase="warm"] .vc-h-warm { opacity: 1; transform: translateY(0); } @media (max-width: 760px) { .vc-section { height: 190vh; } .vc-field { top: 32%; bottom: 14%; } .vc-cell { width: 96px; height: 132px; } .vc-stone { padding: 10px 6px; font-size: 9px; gap: 3px; } .vc-stone-tag { font-size: 7px; padding: 1.5px 5px; } .vc-stone-time { font-size: 13px; } .vc-stone-name { font-size: 9.5px; } .vc-stone-cause { font-size: 8.5px; } .vc-stone-eur { font-size: 10.5px; } .vc-slot { padding: 10px 8px; gap: 4px; border-radius: 10px; } .vc-slot-time { font-size: 16px; } .vc-slot-day { font-size: 9px; } } /* ========================================================================= VARIANT D — Split-Screen Stoppuhr Eine Bildschirmhöhe. Links: live tickender Verlust. Rechts: gleiche Zeit als gewonnene Termine. Keine Scroll-Choreographie — sofort lesbar. ========================================================================= */ .vd-section { position: relative; min-height: 100vh; background: oklch(0.10 0.03 245); padding: 0; overflow: hidden; } .vd-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .vd-half { position: relative; padding: clamp(56px, 9vh, 110px) clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vh, 36px); overflow: hidden; } .vd-half--cold { background: radial-gradient(ellipse at 50% 30%, oklch(0.20 0.05 260) 0%, oklch(0.08 0.03 245) 80%), linear-gradient(180deg, oklch(0.08 0.03 245) 0%, oklch(0.12 0.04 250) 100%); color: oklch(0.86 0.02 240); } .vd-half--warm { background: radial-gradient(ellipse at 50% 30%, oklch(0.78 0.16 70) 0%, oklch(0.45 0.18 55) 50%, oklch(0.20 0.10 35) 100%); color: oklch(0.98 0.04 80); } .vd-divider { position: absolute; top: 8%; bottom: 8%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, oklch(1 0 0 / 0.22) 50%, transparent); z-index: 2; } .vd-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; opacity: 0.85; } .vd-eyebrow .vd-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.62 0.20 25); box-shadow: 0 0 0 3px oklch(0.62 0.20 25 / 0.25); animation: vd-pulse 1.3s ease-in-out infinite; } .vd-half--warm .vd-eyebrow .vd-dot { background: oklch(0.72 0.18 145); box-shadow: 0 0 0 3px oklch(0.72 0.18 145 / 0.30); } @keyframes vd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } } .vd-headline { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; max-width: 18ch; } .vd-headline em { font-style: italic; font-weight: 400; } .vd-half--cold .vd-headline em { color: oklch(0.78 0.16 30); } .vd-half--warm .vd-headline em { color: oklch(0.96 0.12 90); } .vd-clock { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(72px, 10vw, 132px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .vd-clock-sep { display: inline-block; width: 0.55ch; text-align: center; animation: vd-blink 1s steps(2, end) infinite; } @keyframes vd-blink { 50% { opacity: 0.25; } } .vd-clock-sub { font-family: var(--font-mono); font-style: normal; font-size: clamp(11px, 0.9vw, 13px); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; } .vd-amount { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .vd-half--cold .vd-amount { color: oklch(0.85 0.13 30); } .vd-half--warm .vd-amount { color: oklch(0.96 0.14 130); } .vd-amount-row { display: flex; flex-direction: column; gap: 4px; } .vd-amount-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; } /* Mini event log on cold side */ .vd-log { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; color: oklch(0.72 0.04 240); max-height: 96px; overflow: hidden; position: relative; } .vd-log-item { display: flex; gap: 12px; opacity: 0; transform: translateY(8px); animation: vd-log-in 0.5s cubic-bezier(.2,.8,.2,1) forwards; } .vd-log-item time { color: oklch(0.55 0.04 240); flex-shrink: 0; } @keyframes vd-log-in { to { opacity: 1; transform: translateY(0); } } .vd-log::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: linear-gradient(180deg, oklch(0.10 0.03 245) 0%, transparent 100%); pointer-events: none; z-index: 1; } /* Mini slot grid on warm side */ .vd-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 320px; } .vd-slot { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px; border-radius: 8px; background: oklch(0.98 0.04 80 / 0.18); border: 1px solid oklch(0.98 0.06 80 / 0.30); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; opacity: 0; transform: translateY(6px) scale(0.96); animation: vd-slot-in 0.6s cubic-bezier(.2,.8,.2,1) forwards; } .vd-slot strong { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 16px; letter-spacing: -0.01em; text-transform: none; } @keyframes vd-slot-in { to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 860px) { .vd-stage { grid-template-columns: 1fr; } .vd-divider { left: 8%; right: 8%; width: auto; top: 50%; bottom: auto; height: 1px; background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.22) 50%, transparent); } .vd-half { padding: clamp(40px, 8vw, 64px) clamp(20px, 5vw, 36px); } .vd-clock { font-size: clamp(56px, 14vw, 88px); } .vd-amount { font-size: clamp(34px, 9vw, 52px); } } /* ========================================================================= VARIANT E — Hybrid (Feed → Sonnenaufgang → Kalender) 200vh sticky pin. 3 Phasen. ========================================================================= */ .ve-section { position: relative; height: 340vh; background: oklch(0.13 0.04 250); padding: 0; } .ve-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .ve-bg { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.8s linear; } .ve-bg-cool { background: radial-gradient(ellipse at 50% 0%, oklch(0.22 0.05 260) 0%, oklch(0.09 0.03 245) 70%), linear-gradient(180deg, oklch(0.08 0.03 245) 0%, oklch(0.14 0.04 250) 100%); } .ve-bg-warm { background: radial-gradient(ellipse at 50% 45%, oklch(0.86 0.15 75) 0%, oklch(0.55 0.18 55) 35%, oklch(0.26 0.12 30) 75%, oklch(0.14 0.06 30) 100%); opacity: 0; } .ve-sun { position: absolute; left: 50%; top: 50%; width: clamp(280px, 32vw, 460px); height: clamp(280px, 32vw, 460px); transform: translate(-50%, calc(-50% + (1 - var(--sun-p, 0)) * 60vh)); opacity: var(--sun-p, 0); z-index: 1; pointer-events: none; transition: transform 0.3s linear, opacity 0.3s linear; } .ve-sun svg { width: 100%; height: 100%; filter: drop-shadow(0 0 40px oklch(0.78 0.17 70 / 0.55)); } .ve-sun-rays { transform-origin: 100px 100px; animation: ve-sun-spin 42s linear infinite; } @keyframes ve-sun-spin { to { transform: rotate(360deg); } } /* heading */ .ve-heading { position: absolute; top: clamp(48px, 7vh, 96px); left: 50%; transform: translateX(-50%); width: min(820px, 92%); text-align: center; z-index: 4; pointer-events: none; display: grid; grid-template-areas: "stack"; place-items: center; } .ve-h { grid-area: stack; transition: opacity 0.85s cubic-bezier(.2,.8,.2,1), transform 0.85s cubic-bezier(.2,.8,.2,1); } .ve-eyebrow { display: inline-block; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; margin-bottom: 16px; } .ve-h h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 5.4vw, 70px); letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 12px; text-wrap: balance; max-width: 18ch; margin-inline: auto; } .ve-h h2 em { font-style: italic; font-weight: 400; } .ve-h p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(15px, 1.4vw, 19px); margin: 0; opacity: 0.88; letter-spacing: -0.005em; } .ve-h-cold { color: oklch(0.86 0.02 240); } .ve-h-cold h2 em { color: oklch(0.65 0.18 25); } .ve-h-warm { color: oklch(0.98 0.05 80); opacity: 0; transform: translateY(20px); } .ve-h-warm h2 em { color: oklch(0.94 0.13 75); } .ve-section[data-phase="warm"] .ve-h-cold { opacity: 0; transform: translateY(-20px); } .ve-section[data-phase="warm"] .ve-h-warm { opacity: 1; transform: translateY(0); } /* feed stage — phase 1 */ .ve-feed-stage { position: absolute; left: 50%; transform: translateX(-50%); top: clamp(220px, 30vh, 340px); width: min(620px, 92%); height: clamp(280px, 42vh, 420px); overflow: hidden; mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%); z-index: 3; transition: opacity 0.7s, transform 0.7s cubic-bezier(.2,.8,.2,1); } .ve-section[data-phase="sun"] .ve-feed-stage, .ve-section[data-phase="warm"] .ve-feed-stage { opacity: 0; transform: translateX(-50%) translateY(-30px); pointer-events: none; } .ve-feed-track { display: flex; flex-direction: column; gap: 9px; padding: 8px 0; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); } .ve-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 9px; background: oklch(0.18 0.03 245 / 0.55); border: 1px solid oklch(0.30 0.04 245 / 0.50); font-family: var(--font-sans); color: oklch(0.85 0.03 240); transition: opacity 0.5s; } .ve-row.is-past { opacity: 0.40; } .ve-row.is-past .ve-row-name { text-decoration: line-through; } .ve-row-time { font-family: var(--font-mono); font-size: 12px; color: oklch(0.74 0.04 240); letter-spacing: 0.04em; } .ve-row-name { font-family: var(--font-display); font-style: italic; font-size: 16px; color: oklch(0.94 0.02 240); } .ve-row-eur { font-family: var(--font-mono); font-size: 13px; color: oklch(0.78 0.13 30); white-space: nowrap; } /* counter */ .ve-counter { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(80px, 10vh, 120px); z-index: 4; display: inline-flex; align-items: baseline; gap: 12px; padding: 10px 22px; border-radius: 999px; border: 1px solid oklch(0.55 0.16 25 / 0.45); background: oklch(0.10 0.04 245 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 0.5s, transform 0.6s cubic-bezier(.2,.8,.2,1); } .ve-section[data-phase="warm"] .ve-counter { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; } .ve-counter-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.82 0.04 240); } .ve-counter-val { font-family: var(--font-display); font-style: italic; font-size: 22px; color: oklch(0.92 0.12 30); font-variant-numeric: tabular-nums; } /* Calendar — phase 3 */ .ve-cal-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(40px) scale(0.92); width: min(900px, 94%); z-index: 4; opacity: 0; transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .ve-section[data-phase="warm"] .ve-cal-stage { opacity: 1; transform: translate(-50%, -50%) translateY(36px) scale(1); } .ve-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 16px; background: oklch(0.98 0.03 80 / 0.95); border: 1px solid oklch(0.66 0.16 145 / 0.35); border-radius: 16px; box-shadow: 0 24px 60px -20px oklch(0.04 0 0 / 0.6); } .ve-cal-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ve-cal-day { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.50 0.04 50); text-align: center; padding: 4px 0; border-bottom: 1px solid oklch(0.66 0.16 145 / 0.20); } .ve-cal-pill { display: flex; flex-direction: column; gap: 2px; padding: 6px 7px; border-radius: 6px; background: oklch(0.66 0.16 145 / 0.16); border-left: 2px solid oklch(0.62 0.16 145); font-family: var(--font-sans); color: oklch(0.30 0.10 145); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; } .ve-section[data-phase="warm"] .ve-cal-pill { opacity: 1; transform: translateY(0); } .ve-cal-pill-time { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; } .ve-cal-pill-name { font-size: 10.5px; color: oklch(0.40 0.04 145); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ve-cal-empty { height: 22px; border-radius: 5px; background: oklch(0.92 0.02 80 / 0.6); } @media (max-width: 760px) { .ve-section { height: 320vh; } .ve-feed-stage { width: 94%; } .ve-row { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 10px 12px; } .ve-cal { grid-template-columns: repeat(3, 1fr); } .ve-cal-pill-name { display: none; } } /* ========================================================================= Tweaks-Panel mount — keep above everything ========================================================================= */ #cmt-tweaks-root { position: relative; z-index: 9999; } /* Reduced-motion */ @media (prefers-reduced-motion: reduce) { .vb-section, .vc-section, .ve-section { height: auto; min-height: 100vh; } .vb-pin, .vc-pin, .ve-pin { position: relative; height: auto; min-height: 100vh; } }