/* ============================================================ LAIBEL · elevate layer Site-wide motion language: page-transition curtain, custom cursor, magnetic CTAs, link micro-interactions. Additive only — loaded after every page's own styles. Palette: charcoal #0B0A09 · cream #F2EFE9 · gold #B48748 ============================================================ */ :root { --lb-charcoal: #0B0A09; --lb-cream: #F2EFE9; --lb-gold: #B48748; --lb-ease: cubic-bezier(.76, 0, .24, 1); } /* ---------------------------------------------------------------- 1 · PAGE TRANSITION CURTAIN A charcoal panel covers the viewport on arrival, then wipes downward to reveal the page. On internal navigation it wipes back up to cover, then the next page loads already covered — so transitions feel seamless across full page loads. ---------------------------------------------------------------- */ .lb-curtain { position: fixed; inset: 0; z-index: 99999; pointer-events: none; background: var(--lb-charcoal); transform: translateY(0); transition: transform .6s var(--lb-ease); display: flex; align-items: center; justify-content: center; will-change: transform; } /* thin gold rule that leads the wipe */ .lb-curtain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lb-gold); } .lb-curtain__mark { font-family: var(--font-display, "Libre Baskerville", Georgia, serif); color: var(--lb-cream); font-size: clamp(1.5rem, 4vw, 2.75rem); letter-spacing: .42em; text-indent: .42em; font-weight: 400; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--lb-ease); } /* covering (set synchronously before paint via .lb-curtain-on on ) */ .lb-curtain-on .lb-curtain { transform: translateY(0); } .lb-curtain-on .lb-curtain__mark { opacity: .96; transform: translateY(0); } /* reveal: wipe upward, out of view */ .lb-curtain-on.lb-revealed .lb-curtain { transform: translateY(-101%); } .lb-curtain-on.lb-revealed .lb-curtain__mark { opacity: 0; transform: translateY(-8px); transition-duration: .3s; } /* ---------------------------------------------------------------- 2 · CUSTOM CURSOR (pointer-fine devices only) ---------------------------------------------------------------- */ .lb-cursor-dot, .lb-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99998; border-radius: 50%; mix-blend-mode: difference; opacity: 0; transition: opacity .3s ease; } .lb-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--lb-cream); } .lb-cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--lb-cream); transition: opacity .3s ease, width .3s var(--lb-ease), height .3s var(--lb-ease), margin .3s var(--lb-ease), background-color .3s ease; } .lb-cursor-ready .lb-cursor-dot, .lb-cursor-ready .lb-cursor-ring { opacity: 1; } /* grow + soft fill when over interactive targets */ .lb-cursor-ready.lb-cursor-hover .lb-cursor-ring { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(180, 135, 72, .14); border-color: var(--lb-gold); } .lb-cursor-ready.lb-cursor-hover .lb-cursor-dot { opacity: 0; } /* hide native cursor only when our cursor is live */ .lb-cursor-ready, .lb-cursor-ready a, .lb-cursor-ready button, .lb-cursor-ready [data-magnetic], .lb-cursor-ready input, .lb-cursor-ready textarea { cursor: none; } /* keep real caret in fields for usability */ .lb-cursor-ready input, .lb-cursor-ready textarea { cursor: text; } /* neutralise any stock (unwired) cursor elements to avoid duplicates */ .cursor__dot, .cursor__ring { display: none !important; } /* ---------------------------------------------------------------- 3 · MAGNETIC CTA polish ---------------------------------------------------------------- */ [data-magnetic] { will-change: transform; } [data-magnetic] .btn__arrow, [data-magnetic] .laibel-footer__contact { display: inline-flex; } /* ---------------------------------------------------------------- 4 · LINK MICRO-INTERACTION Subtle underline wipe on primary nav + footer links. ---------------------------------------------------------------- */ .nav__links a, .f-links a, .laibel-footer__col a { position: relative; } .nav__links a::after, .f-links a::after, .laibel-footer__col a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--lb-ease); opacity: .6; } .nav__links a:hover::after, .f-links a:hover::after, .laibel-footer__col a:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------------------------------------------------------------- Reduced motion — disable all of the above gracefully. ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .lb-curtain { display: none !important; } .lb-cursor-dot, .lb-cursor-ring { display: none !important; } .lb-cursor-ready, .lb-cursor-ready a, .lb-cursor-ready button { cursor: auto; } .nav__links a::after, .f-links a::after, .laibel-footer__col a::after { transition: none; } }