/* Page chrome for the demo. None of this is needed by the component. */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: #1a56db; color: #fff; font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; } .bg { position: fixed; inset: 0; z-index: 0; background: #1a56db; overflow: hidden; transition: background-color 200ms linear; } .stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: clamp(4.5rem, 12vh, 8rem) clamp(1rem, 4vw, 3rem); } .stage > [data-cardflip] { width: 100%; max-width: 78rem; } .chrome { position: fixed; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 3vw, 2.25rem); font-size: 0.8rem; font-weight: 500; pointer-events: none; } .chrome--top { top: 0; } /* Out of the way while a post is open. The component adds .cf-lock to . */ .cf-lock .chrome { opacity: 0; transition: opacity 200ms linear; } .chrome { transition: opacity 300ms 260ms linear; } .chrome--bottom { bottom: 0; color: rgb(255 255 255 / 0.72); } .chrome__brand { font-weight: 700; letter-spacing: -0.01em; } .chrome__center { color: rgb(255 255 255 / 0.75); } .chrome__link { color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.5); pointer-events: auto; } .chrome__link:hover { border-color: #fff; } .chrome__hint kbd { display: inline-block; min-width: 1.5rem; padding: 0.15rem 0.35rem; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 5px; font: inherit; font-size: 0.72rem; text-align: center; } @media (max-width: 48rem) { .chrome__center, .chrome__meta { display: none; } .chrome__hint { display: none; } }