/* Figma: "Blank page pornchat x xnxx" (desktop 75:232, mobile 84:465) */ :root { --bg-start: #0a1b38; --bg-end: #174a64; --text: #fff; --text-muted: rgba(255, 255, 255, 0.75); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { min-height: 100vh; min-height: 100dvh; background-color: var(--bg-start); background-image: linear-gradient(237.71deg, var(--bg-start) 0%, var(--bg-end) 100%); background-attachment: fixed; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; } /* Logos + message, centred in the viewport */ .announcement { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px; padding: 40px 16px; text-align: center; } /* PornChat logo | × | XNXX.COM */ .brands { display: flex; align-items: center; gap: 23px; } /* Brand logo component (Figma 35:139) at 175 × 42 */ .pornchat-logo { display: flex; align-items: center; gap: 14px; width: 175px; height: 42px; flex-shrink: 0; } .pornchat-logo__icon { width: 42px; height: 42px; } .pornchat-logo__wordmark { width: 119px; height: 20.68px; } .brands__cross { width: 22px; height: 22px; flex-shrink: 0; } .brands__xnxx { display: block; width: 188px; height: 36px; flex-shrink: 0; } .brands__xnxx img { width: 188px; height: 36px; object-fit: cover; } .announcement__text { margin: 0; color: var(--text-muted); font-size: 18px; font-weight: 500; line-height: normal; white-space: nowrap; } /* Mobile (Figma 84:465, 390 wide) */ @media (max-width: 767px) { body { background-image: linear-gradient(259.23deg, var(--bg-start) 0%, var(--bg-end) 100%); } .brands { flex-direction: column; gap: 16px; } .announcement__text { max-width: 253px; line-height: 26px; white-space: normal; } } /* ---------- Load animation ---------- script.js adds .is-loaded to once the page has loaded, which plays: 1. Entrance: the logos fade in while sliding into place (desktop: PornChat from the left, XNXX from the right; mobile: from the top / bottom). The × and the title just fade in. 2. Shimmer: a single band of light sweeps across the PornChat logo, the XNXX logo and the title, one after another. The inline script in adds .js, so the elements are only hidden before the entrance when JavaScript runs. With reduced motion turned on, nothing animates. Either way, the page ends up exactly as designed. */ :root { --enter-duration: 0.9s; --enter-ease: cubic-bezier(0.22, 1, 0.36, 1); --enter-distance: 56px; --shimmer-duration: 1.1s; --shimmer-ease: cubic-bezier(0.45, 0, 0.35, 1); --shimmer-angle: 100deg; } .shimmer { position: relative; } .shimmer__light { display: none; } .pornchat-logo { --shimmer-delay: 0.8s; } .brands__xnxx { --shimmer-delay: 1.25s; } .announcement__text { --shimmer-delay: 1.7s; } @media (prefers-reduced-motion: no-preference) { /* 1. Entrance */ .js .pornchat-logo, .js .brands__cross, .js .brands__xnxx, .js .announcement__text { opacity: 0; } .is-loaded .pornchat-logo { animation: enter-from-left var(--enter-duration) var(--enter-ease) both; } .is-loaded .brands__xnxx { animation: enter-from-right var(--enter-duration) var(--enter-ease) both; } .is-loaded .brands__cross { animation: fade-in 0.6s ease-out 0.35s both; } .is-loaded .announcement__text { animation: fade-in 0.7s ease-out 0.6s both; } /* Safety net: if script.js never runs, show everything after 4s */ .js:not(.is-loaded) .pornchat-logo, .js:not(.is-loaded) .brands__cross, .js:not(.is-loaded) .brands__xnxx, .js:not(.is-loaded) .announcement__text { animation: fade-in 0.6s ease-out 4s both; } /* 2. Shimmer: .shimmer__light::before is the band, clipped to the logo's shape (or the title's glyphs); the drop-shadow on .shimmer__light adds a soft glow so it also shows on white. The gradient is 300% wide so the band starts and ends fully outside the element. */ .is-loaded .shimmer__light { display: block; position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); } .is-loaded .shimmer__light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--shimmer-angle), transparent 42%, rgba(255, 255, 255, 0.6) 50%, transparent 58%) 0 0 / 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: shimmer var(--shimmer-duration) var(--shimmer-ease) var(--shimmer-delay) both; } .is-loaded .pornchat-logo .shimmer__light::before { -webkit-mask-image: url("assets/pornchat-icon.svg"), url("assets/pornchat-wordmark.svg"); mask-image: url("assets/pornchat-icon.svg"), url("assets/pornchat-wordmark.svg"); -webkit-mask-size: 42px 42px, 119px 20.68px; mask-size: 42px 42px, 119px 20.68px; -webkit-mask-position: 0 0, 56px 50%; mask-position: 0 0, 56px 50%; } .is-loaded .brands__xnxx .shimmer__light::before { -webkit-mask-image: url("assets/xnxx-logo.png"); mask-image: url("assets/xnxx-logo.png"); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; } /* Title: the light layer draws a copy of the heading text (script.js fills data-text) and the band is clipped to those glyphs */ .is-loaded .announcement__text .shimmer__light::before { content: attr(data-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .is-loaded .announcement__text .shimmer__light { display: none; } } } /* Mobile: logos are stacked, so they come in from the top / bottom */ @media (prefers-reduced-motion: no-preference) and (max-width: 767px) { :root { --enter-distance: 36px; } .is-loaded .pornchat-logo { animation-name: enter-from-top; } .is-loaded .brands__xnxx { animation-name: enter-from-bottom; } } @keyframes enter-from-left { from { opacity: 0; transform: translateX(calc(-1 * var(--enter-distance))); } to { opacity: 1; transform: none; } } @keyframes enter-from-right { from { opacity: 0; transform: translateX(var(--enter-distance)); } to { opacity: 1; transform: none; } } @keyframes enter-from-top { from { opacity: 0; transform: translateY(calc(-1 * var(--enter-distance))); } to { opacity: 1; transform: none; } } @keyframes enter-from-bottom { from { opacity: 0; transform: translateY(var(--enter-distance)); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Left to right: from 100% (band off the left edge) to 0 (off the right edge) */ @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }