/* Tockwell — full-screen clock page scaffolding. Clock visuals live in /assets/clock-face.css; this file is just the full-bleed stage: cinematic video backgrounds, dimming, and the screensaver-style overlay (return link, fullscreen button, app CTA). */ html, body { height: 100%; } body { font-family: 'DM Sans', system-ui, sans-serif; background: #060608; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #888; position: relative; } .bg-video-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #060608; } .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 24s ease-in-out; will-change: opacity; } .bg-video.is-active { opacity: 1; } .screen-dim { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 1; background-color: rgba(6, 6, 8, 0.8); background-image: linear-gradient( 180deg, rgba(6, 6, 8, 0) 0%, rgba(6, 6, 8, 0.1) 50%, rgba(6, 6, 8, 0.2) 100% ); } .scene { position: relative; z-index: 2; background: transparent; } /* ── Screensaver overlay ────────────────────────────────────────────── Chrome fades away when the pointer is idle, returns on movement. The toggle is driven by clock.js. */ .clock-ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; transition: opacity 600ms ease; } body.ui-hidden .clock-ui { opacity: 0; } body.ui-hidden { cursor: none; } .clock-ui__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: clamp(14px, 3vw, 28px); } .clock-ui__home, .clock-ui__btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; color: #e7e7ea; text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(12, 12, 16, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .clock-ui__home:hover, .clock-ui__btn:hover { background: rgba(24, 24, 30, 0.7); border-color: rgba(255, 255, 255, 0.32); color: #fff; } .clock-ui__btn svg, .clock-ui__home svg { width: 16px; height: 16px; display: block; } .clock-ui__caption { position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 56px); text-align: center; padding: 0 16px; } .clock-ui__caption-text { margin: 0 0 14px; font-size: 0.85rem; letter-spacing: 0.06em; color: rgba(220, 220, 226, 0.72); } .clock-ui__cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.95rem; color: #fff; text-decoration: none; padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, #fb923c, #c2410c); box-shadow: 0 8px 28px rgba(194, 65, 12, 0.45); transition: transform 140ms ease, box-shadow 140ms ease; } .clock-ui__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(194, 65, 12, 0.55); color: #fff; } .clock-ui__pill { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: #fff; } @media (prefers-reduced-motion: reduce) { .bg-video { transition: none; } .clock-ui { transition: none; } body.ui-hidden .clock-ui { opacity: 1; } /* never hide chrome if motion-averse */ body.ui-hidden { cursor: auto; } } @media (max-width: 600px) { .clock-ui__home .clock-ui__home-text { display: none; } /* icon-only back on phones */ }