does the movement. */ body.is-leaving { opacity: 0; transition: opacity 0.26s var(--ease-in-out); } html.is-arriving main { /* `backwards`, not `both`: the start value applies before the animation runs and nothing is left in effect once it has. */ animation: arrive 0.55s var(--ease) backwards; } @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 19. Sticky case-study headings -------------------------------------------------------------------------- */ .case-sec { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .case-sec:first-of-type { margin-top: 0; } .case-sec__h { position: sticky; top: 72px; z-index: 2; display: flex; align-items: baseline; gap: 0.85rem; margin: 0 0 0.6rem; /* The solid part has to be taller than the text, or the paragraph scrolling underneath shows through the heading. */ padding: 1rem 0 1.35rem; font-size: var(--t-xl); letter-spacing: -0.035em; background: linear-gradient( to bottom, var(--bg) 0%, var(--bg) 84%, transparent 100% ); } .case-sec__no { flex: none; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; color: var(--accent); transform: translateY(-0.35em); } /* The sticky heading must not swallow the paragraph that follows it. */ .case-sec > p:first-of-type { margin-top: 0; } @media (max-width: 700px) { .case-sec__h { top: 60px; font-size: var(--t-lg); } } /* -------------------------------------------------------------------------- 20. Link peek — hover a live link, see where it goes -------------------------------------------------------------------------- */ .peek { position: fixed; top: 0; left: 0; z-index: 950; width: 260px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55); overflow: hidden; opacity: 0; transform: translate3d(0, 0, 0) scale(0.94); transform-origin: top left; pointer-events: none; transition: opacity 0.28s var(--ease), transform 0.38s var(--ease); } .peek.is-on { opacity: 1; } .peek__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--text-3); } .peek__bar i { width: 5px; height: 5px; border-radius: 50%; background: #35d07f; flex: none; } .peek__crop { height: 168px; overflow: hidden; } .peek__crop img { width: 100%; display: block; } /* -------------------------------------------------------------------------- 21. Cursor -------------------------------------------------------------------------- */ /* A ring that trails the pointer and a dot that does not. Desktop only, and only when the visitor has not asked for reduced motion. To switch it off entirely: delete the `cursorRing()` call in assets/js/app.js. */ html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button { cursor: none; } /* Text entry and the draggable frame keep their real cursors — you need them. */ html.has-cursor input, html.has-cursor select, html.has-cursor textarea { cursor: auto; } html.has-cursor .browser__view { cursor: grab; } html.has-cursor .browser__view.is-grabbing { cursor: grabbing; } .cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; border-radius: 50%; will-change: transform; } .cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid var(--line-strong); transition: width 0.32s var(--ease), height 0.32s var(--ease), margin 0.32s var(--ease), border-color 0.32s, background-color 0.32s; } .cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--accent); transition: opacity 0.25s; } .cursor-ring.is-hot { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: var(--accent); background: var(--accent-soft); } .cursor-ring.is-hot ~ .cursor-dot { opacity: 0; } .cursor-ring.is-down { transform-origin: center; } @media (prefers-reduced-motion: reduce) { body.is-leaving { opacity: 1; transition: none; } html.js-ready.is-arriving body { animation: none; } .case-sec__h { position: static; background: none; } .peek { display: none; } .cursor-ring, .cursor-dot { display: none; } }