@view-transition { navigation: auto; } .dv-eco-switcher { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-raised, var(--c-card, rgba(127, 127, 127, 0.08))); border: 1px solid var(--border, var(--c-line, rgba(140, 150, 140, 0.24))); flex-shrink: 0; view-transition-name: dv-eco-switcher; } .dv-eco-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--font-sans, var(--sans, system-ui, sans-serif)); font-size: 11.5px; font-weight: 700; color: var(--ink-dim, var(--c-text-2, inherit)); text-decoration: none; white-space: nowrap; transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); -webkit-tap-highlight-color: transparent; } .dv-eco-pill:hover { color: var(--ink, var(--c-text, inherit)); } .dv-eco-pill:active { transform: scale(0.96); } .dv-eco-pill.active { color: var(--c-on-sage, #152019); } .dv-eco-pill.active::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c-sage, #c9d4c0); box-shadow: 0 1px 2px rgba(20, 24, 21, 0.08); view-transition-name: dv-eco-active; } .dv-eco-switcher[data-going] .dv-eco-pill.active { color: var(--ink-dim, var(--c-text-2, inherit)); } .dv-eco-switcher[data-going] .dv-eco-pill.active::before { opacity: 0.35; transition: opacity 0.2s ease; } .dv-eco-switcher[data-going] .dv-eco-pill[data-going-target] { color: var(--ink, var(--c-text, inherit)); } ::view-transition-group(root) { animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } ::view-transition-old(root) { animation: dv-eco-out 0.34s cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: dv-eco-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; } html[data-dv-eco-dir="back"]::view-transition-old(root) { animation-name: dv-eco-out-back; } html[data-dv-eco-dir="back"]::view-transition-new(root) { animation-name: dv-eco-in-back; } ::view-transition-group(dv-eco-active), ::view-transition-group(dv-eco-switcher) { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.34, 1.32, 0.64, 1); } ::view-transition-old(dv-eco-active), ::view-transition-new(dv-eco-active) { animation: none; mix-blend-mode: normal; height: 100%; } @keyframes dv-eco-out { to { opacity: 0; transform: translate3d(-28px, 0, 0) scale(0.985); filter: blur(6px); } } @keyframes dv-eco-in { from { opacity: 0; transform: translate3d(36px, 0, 0) scale(1.01); filter: blur(8px); } } @keyframes dv-eco-out-back { to { opacity: 0; transform: translate3d(28px, 0, 0) scale(0.985); filter: blur(6px); } } @keyframes dv-eco-in-back { from { opacity: 0; transform: translate3d(-36px, 0, 0) scale(1.01); filter: blur(8px); } } html.dv-eco-leaving body { animation: dv-eco-out 0.24s cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; } html.dv-eco-leaving[data-dv-eco-dir="back"] body { animation-name: dv-eco-out-back; } html.dv-eco-arrive.dv-eco-fallback body { animation: dv-eco-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } html.dv-eco-arrive.dv-eco-fallback[data-dv-eco-dir="back"] body { animation-name: dv-eco-in-back; } html.dv-eco-arrive .splash { display: none !important; } @media (max-width: 760px) { .dv-eco-switcher { display: none; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.01s !important; } html.dv-eco-leaving body, html.dv-eco-arrive.dv-eco-fallback body { animation: none !important; } }