/** * Page transition - "Rèm đôi & logo". * * Two cream panels close over the page from top and bottom, the Discovery mark * lights up where they meet, then they part again on the page that follows. * * The arriving half has to cover the screen before the browser paints anything, * which is earlier than any script at the end of can run. A pseudo * element on does that: the inline snippet in only adds a class, * and this file paints the closed state. page-transition.js then takes over * with the real overlay and animates it open. */ :root { --dg-pt-panel: linear-gradient(180deg, #fffdf7 0%, #f4eede 100%); --dg-pt-panel-flip: linear-gradient(0deg, #fffdf7 0%, #f4eede 100%); --dg-pt-ease: cubic-bezier(.33, 1, .68, 1); } /* Pre-paint cover: identical to the overlay's closed state, so the handoff to the scripted overlay is invisible. */ html.dg-pt-arriving::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: url("/assets/discovery-symbol.png") center center / auto clamp(88px, 15vw, 152px) no-repeat, var(--dg-pt-panel); pointer-events: none; } html.dg-pt-ready::before { display: none; } /* The overlay itself ------------------------------------------------------ */ .dg-pt { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; visibility: hidden; } .dg-pt.is-live { visibility: visible; } .dg-pt-panel { position: absolute; left: 0; right: 0; height: 50.6%; background: var(--dg-pt-panel); box-shadow: 0 0 40px rgba(120, 96, 48, .12); } .dg-pt-top { top: 0; transform: translateY(-101%); } .dg-pt-bottom { bottom: 0; background: var(--dg-pt-panel-flip); transform: translateY(101%); } .dg-pt-mark { position: absolute; left: 50%; top: 50%; width: auto; height: clamp(88px, 15vw, 152px); opacity: 0; transform: translate(-50%, -50%) scale(.92); } /* Closed: what the overlay looks like the instant a new page takes over. */ .dg-pt.is-closed .dg-pt-top, .dg-pt.is-closed .dg-pt-bottom { transform: translateY(0); } .dg-pt.is-closed .dg-pt-mark { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* A reader who asked for less motion gets none of this. */ @media (prefers-reduced-motion: reduce) { html.dg-pt-arriving::before { display: none; } .dg-pt { display: none; } }