/* ============================================================= * Public /watch/ — Instagram-Reels-style standalone page. * * Sections (top → bottom): * 1. Reset — neutralise browser & WP defaults * 2. Tokens — design system variables * 3. App shell — sidebar + main split * 4. Sidebar — fixed left nav (desktop) * 5. Mobile topbar / drawer * 6. Feed + slides — vertical snap-scroll feed * 7. Stage + video * 8. Caption overlay + Donate CTA * 9. Action rail — Like / Share / Mute / App * 10. Up/down nav buttons * 11. Share sheet * 12. Heart-burst animation * 13. Responsive overrides * * The page is rendered standalone (no theme), but other plugins + * core can still inject CSS via wp_head(). Section 1's button * reset is defensive against that. * ============================================================= */ /* ============================================================= * 1. Reset * ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; overflow: hidden; } /* `color: #fff` lives on the app shell, not html/body. The Quick Donate * Modal lifts itself to on first click — with white text set at the * body level, SkyDonate's amount buttons, frequency tabs, and submit text * (none of which set an explicit colour) inherit white and disappear * against the modal's near-white interior. Scoping here keeps the Watch * surface white-on-black while letting the lifted modal fall through to * SkyDonate's own `.quick-modal { color: #242424 }`. */ .ghh-watch-app { color: #fff; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } /* Hard reset for buttons + links used as buttons. WP themes love * to inject `button { background: …; border: …; }` rules — we want * those defeated wholesale on this page. * * Scoped to `.ghh-watch-app` (the app shell), NOT `.ghh-watch-page` * (the body class). The Quick Donate Modal lifts itself to on * first click and would otherwise inherit this reset, killing the * styling on every donation amount button, frequency tab, and submit * button inside the SkyDonate form. */ .ghh-watch-app button, .ghh-watch-app a { font: inherit; line-height: 1; } .ghh-watch-app button { -webkit-appearance: none; appearance: none; background: transparent; border: 0; margin: 0; padding: 0; color: inherit; cursor: pointer; text-align: inherit; } .ghh-watch-app button:focus-visible, .ghh-watch-app a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; } /* ============================================================= * 2. Tokens * ============================================================= */ :root { --ghhw-bg: #000; --ghhw-side: #0a0a0a; --ghhw-side-w: 240px; --ghhw-side-w-tab: 72px; --ghhw-fg: #fff; --ghhw-mute: rgba(255,255,255,0.78); --ghhw-faint: rgba(255,255,255,0.55); --ghhw-line: rgba(255,255,255,0.08); --ghhw-hover: rgba(255,255,255,0.06); --ghhw-active: rgba(255,255,255,0.12); --ghhw-accent: #d12027; --ghhw-accent-hover: #b1191f; /* Stage caps: 500px wide × 889px tall (500 × 16 / 9 ≈ 889). * Height is the primary axis — width auto-derives from * aspect-ratio so the video stays a true 9:16 portrait on any * viewport, including short 13"-laptop screens where the old * width-driven sizing collapsed to a square. */ --ghhw-stage-max-w: 500px; --ghhw-stage-max-h: 889px; --ghhw-radius: 18px; /* Action rail — Instagram-spec circles. */ --ghhw-rail-btn: 46px; /* button diameter */ --ghhw-rail-icon: 26px; /* icon size */ --ghhw-rail-gap: 16px; /* vertical gap between actions */ --ghhw-rail-bg: rgba(255,255,255,0.10); --ghhw-rail-bg-h: rgba(255,255,255,0.18); } /* ============================================================= * 3. App shell * ============================================================= */ .ghh-watch-skip { position: absolute; left: -9999px; } .ghh-watch-skip:focus { left: 16px; top: 16px; z-index: 10000; background: #fff; color: #000; padding: 8px 14px; border-radius: 6px; } .ghh-watch-app { position: relative; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; } /* ============================================================= * 4. Sidebar (desktop) * ============================================================= */ .ghh-watch-side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ghhw-side-w); background: var(--ghhw-side); border-right: 1px solid var(--ghhw-line); display: flex; flex-direction: column; padding: 22px 12px 16px; overflow-y: auto; overflow-x: hidden; z-index: 20; } .ghh-watch-brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 18px; color: #fff; margin-bottom: 8px; border-bottom: 1px solid var(--ghhw-line); } .ghh-watch-brand-logo, .ghh-watch-brand-mark { width: 40px; height: 40px; border-radius: 10px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .ghh-watch-brand-mark i { font-size: 24px; color: var(--ghhw-accent); } .ghh-watch-brand-logo img { width: 100%; height: 100%; object-fit: contain; } .ghh-watch-brand-text { display: flex; flex-direction: column; min-width: 0; } .ghh-watch-brand-name { font-size: 14px; font-weight: 700; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ghh-watch-brand-tag { font-size: 11px; color: var(--ghhw-faint); margin-top: 2px; font-weight: 500; } .ghh-watch-nav-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; flex: 1; } .ghh-watch-nav-item { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px; color: var(--ghhw-mute); font-size: 14px; font-weight: 500; transition: background 0.12s ease, color 0.12s ease; } .ghh-watch-nav-item:hover { background: var(--ghhw-hover); color: #fff; } .ghh-watch-nav-item.is-active { background: var(--ghhw-active); color: #fff; font-weight: 700; } .ghh-watch-nav-item i { font-size: 22px; width: 22px; line-height: 1; flex-shrink: 0; } .ghh-watch-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ghhw-line); display: flex; flex-direction: column; gap: 8px; } .ghh-watch-app-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; background: var(--ghhw-accent); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; transition: background 0.12s ease, transform 0.1s ease; } .ghh-watch-app-cta:hover { background: var(--ghhw-accent-hover); transform: translateY(-1px); } .ghh-watch-app-cta i { font-size: 18px; } /* ============================================================= * 5. Mobile topbar + drawer * ============================================================= */ .ghh-watch-topbar { display: none; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; align-items: center; justify-content: space-between; background: var(--ghhw-side); border-bottom: 1px solid var(--ghhw-line); position: sticky; top: 0; z-index: 50; flex-shrink: 0; } .ghh-watch-burger, .ghh-watch-x { color: #fff; font-size: 24px; padding: 6px 8px; } .ghh-watch-topbar-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; } .ghh-watch-topbar-brand img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #1a1a1a; } .ghh-watch-topbar-brand i { color: var(--ghhw-accent); font-size: 24px; } .ghh-watch-topbar-account { color: #fff; font-size: 22px; padding: 6px 8px; } .ghh-watch-drawer { position: fixed; inset: 0; z-index: 9998; display: flex; } .ghh-watch-drawer[hidden] { display: none; } .ghh-watch-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); animation: ghhw-fade 0.16s ease-out; } .ghh-watch-drawer-panel { position: relative; width: min(300px, 86vw); background: var(--ghhw-side); height: 100%; padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; animation: ghhw-slide-right 0.22s ease-out; } .ghh-watch-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--ghhw-line); } /* ============================================================= * 6. Feed + slides * ============================================================= */ .ghh-watch { background: var(--ghhw-bg); color: var(--ghhw-fg); margin-left: var(--ghhw-side-w); height: 100vh; height: 100dvh; position: relative; overflow: hidden; } .ghh-watch-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; /* Mobile-smooth-scroll primitives. Without these the native * snap controller competes with the page-level rubber-band on * iOS, repaints the video on the CPU on every frame, and pays * for an unnecessary touch-event default-action negotiation * round-trip per gesture. * - touch-action: pan-y → declare the gesture intent * up front; iOS skips the 300 ms double-tap-to-zoom probe. * - overscroll-behavior: contain → kills page-level * rubber-banding when you hit the top/bottom of the feed. * - -webkit-overflow-scrolling: touch → momentum scrolling on * older iOS WebKit (still respected on iOS 17–18 in some * embeds). * - will-change/transform → forces a GPU compositor layer so * the snap animation runs on the compositor thread, not in * the main JS thread. */ touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; will-change: scroll-position; transform: translateZ(0); } .ghh-watch-feed::-webkit-scrollbar { display: none; } .ghh-watch-slide { height: 100%; scroll-snap-align: start; /* `always` was the IG-blocker — it forced every slide to be a * hard stop, so fast swipes get yanked back. `normal` lets a * proper flick coast through one or two slides like IG, then * snaps to whichever ends up closest. */ scroll-snap-stop: normal; display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; margin: 0; padding: 16px; } .ghh-watch-stage { /* GPU-layer hint: keeps the video compositing on its own layer * so the scroll-snap animation doesn't trigger a full repaint * of the playing video frame on every animation tick. */ will-change: transform; transform: translateZ(0); } /* ============================================================= * 7. Stage + video * ============================================================= */ .ghh-watch-stage { position: relative; /* Height-driven sizing: take the smaller of the design cap * (889px) and the available viewport (allowing for the slide's * 16px padding top/bottom). Width auto-derives via * aspect-ratio so the box is always a true 9:16 — no more * landscape-square collapse on short laptops. */ height: min( var(--ghhw-stage-max-h), calc(100vh - 32px), calc(100dvh - 32px) ); aspect-ratio: 9 / 16; width: auto; max-width: var(--ghhw-stage-max-w); background: #111; border-radius: var(--ghhw-radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.55); flex-shrink: 0; } .ghh-watch-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .ghh-watch-play { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255,255,255,0.95); font-size: 72px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s ease; } .ghh-watch-play i { background: rgba(0,0,0,0.55); border-radius: 50%; width: 90px; height: 90px; display: inline-flex; align-items: center; justify-content: center; } .ghh-watch-stage.is-paused .ghh-watch-play { opacity: 1; } /* ============================================================= * 8. Caption overlay + Donate * ============================================================= */ .ghh-watch-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-end; padding: 20px; background: linear-gradient( to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0) 65% ); } .ghh-watch-text { flex: 1; min-width: 0; pointer-events: auto; max-width: 100%; } .ghh-watch-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .ghh-watch-caption { margin: 0 0 12px; font-size: 13px; color: var(--ghhw-mute); line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,0.4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ghh-watch-donate { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; background: var(--ghhw-accent); color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; transition: transform 0.1s ease, background 0.15s ease; box-shadow: 0 4px 14px rgba(209,32,39,0.4); font-size: 14px !important; } .ghh-watch-donate:hover { background: var(--ghhw-accent-hover); transform: translateY(-1px); color: #fff; } .ghh-watch-donate i { font-size: 15px; } /* ============================================================= * 9. Action rail — IG-style circular buttons + sibling labels * ============================================================= */ .ghh-watch-rail { display: flex; flex-direction: column; gap: var(--ghhw-rail-gap); align-items: center; color: #fff; flex-shrink: 0; align-self: flex-end; padding-bottom: 24px; } /* Wrapper holding one circular button + its label. The label sits * tight under the icon so the count reads as part of the action. */ .ghh-watch-action { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; } .ghh-watch-action-btn { width: var(--ghhw-rail-btn); height: var(--ghhw-rail-btn); border-radius: 50%; background: var(--ghhw-rail-bg); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ghh-watch-action-btn:hover { background: var(--ghhw-rail-bg-h); transform: scale(1.05); } .ghh-watch-action-btn:active { transform: scale(0.95); } .ghh-watch-action-btn i { font-size: var(--ghhw-rail-icon); line-height: 1; color: #fff; transition: color 0.15s ease, transform 0.15s ease; } /* Inline-SVG glyphs (e.g. the share send icon copied from the app) * inherit colour via fill: currentColor and match the icon-font * sizing so they look identical to the Remix glyphs in the rail. */ .ghh-watch-action-btn .ghh-watch-svg { width: var(--ghhw-rail-icon); height: var(--ghhw-rail-icon); fill: #fff; display: block; } /* The views action is read-only — kill the hover lift + cursor so * it looks like a counter, not a button. */ .ghh-watch-action-btn.js-views, .ghh-watch-action-btn[disabled] { cursor: default; } .ghh-watch-action-btn.js-views:hover, .ghh-watch-action-btn[disabled]:hover { background: var(--ghhw-rail-bg); transform: none; } /* Liked state: heart fills + turns accent. The ::before swap * matches Remix Icon's filled-vs-line glyph. */ .ghh-watch-action-btn[aria-pressed="true"] i { color: var(--ghhw-accent); } .ghh-watch-action-btn[aria-pressed="true"] i.ri-heart-line::before { content: "\F0F39"; } .ghh-watch-action-label { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; } /* "Open in app" only makes sense on a device where the app can be * installed — hide it on desktop, leave it on phones / tablets. */ @media (min-width: 901px) and (pointer: fine) { .ghh-watch-action--mobile-only { display: none; } } /* ============================================================= * 10. Up/down nav (desktop only — mobile uses snap-scroll) * ============================================================= */ .ghh-watch-nav { position: absolute; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.10); color: #fff; font-size: 24px; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.15s ease, transform 0.15s ease; z-index: 10; } .ghh-watch-nav:hover { background: rgba(255,255,255,0.20); transform: scale(1.05); } .ghh-watch-nav:not(.ghh-watch-nav-next) { top: 50%; transform: translateY(calc(-50% - 36px)); } .ghh-watch-nav-next { top: 50%; transform: translateY(calc(-50% + 36px)); } .ghh-watch-nav:not(.ghh-watch-nav-next):hover { transform: translateY(calc(-50% - 36px)) scale(1.05); } .ghh-watch-nav-next:hover { transform: translateY(calc(-50% + 36px)) scale(1.05); } @media (min-width: 1100px) { .ghh-watch-nav { display: inline-flex; } } /* ============================================================= * 11. Share sheet * ============================================================= */ .ghh-share { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; } .ghh-share[hidden] { display: none; } .ghh-share-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); animation: ghhw-fade 0.16s ease-out; } .ghh-share-sheet { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #1c1c1e; color: #fff; border-radius: 18px 18px 0 0; padding: 16px 0 22px; box-shadow: 0 -12px 40px rgba(0,0,0,0.45); animation: ghhw-slide-up 0.22s ease-out; } .ghh-share-head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); } .ghh-share-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; flex: 1; text-align: center; } .ghh-share-x { color: #fff; font-size: 24px; padding: 4px 0 4px 12px; } .ghh-share-list { list-style: none; margin: 0; padding: 6px 0; } .ghh-share-row { width: 100%; color: #fff; display: flex; align-items: center; gap: 18px; padding: 14px 26px; font-size: 15px; transition: background 0.12s ease; } .ghh-share-row:hover, .ghh-share-row:focus-visible { background: rgba(255,255,255,0.06); outline: none; } .ghh-share-row i { font-size: 26px; width: 26px; line-height: 1; flex-shrink: 0; } @media (min-width: 720px) { .ghh-share { align-items: center; } .ghh-share-sheet { border-radius: 18px; } } @media (min-width: 900px) and (pointer: fine) { .ghh-share-row[data-mobile-only="1"] { display: none; } } /* ============================================================= * 12. Animations * ============================================================= */ @keyframes ghhw-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ghhw-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes ghhw-slide-right { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes ghhw-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.6); } 35% { opacity: 1; transform: translate(-50%,-50%) scale(1.4); } 100% { opacity: 0; transform: translate(-50%,-180%) scale(1.2); } } .ghh-watch-burst { position: absolute; left: 50%; top: 50%; color: var(--ghhw-accent); font-size: 110px; pointer-events: none; animation: ghhw-burst 0.7s ease-out forwards; text-shadow: 0 6px 30px rgba(209,32,39,0.5); } /* ============================================================= * 13. Responsive * ============================================================= */ /* Tablet (901–1100): icon-only sidebar. */ @media (min-width: 901px) and (max-width: 1100px) { .ghh-watch-side { width: var(--ghhw-side-w-tab); padding: 22px 8px 16px; } .ghh-watch { margin-left: var(--ghhw-side-w-tab); } .ghh-watch-brand-text, .ghh-watch-nav-item span, .ghh-watch-app-cta span { display: none; } .ghh-watch-brand { justify-content: center; padding: 6px 0 18px; } .ghh-watch-nav-item, .ghh-watch-app-cta { justify-content: center; padding: 11px 0; } } /* Phone (≤900): no sidebar, topbar instead, action rail tucked * inside the stage (same as the in-app screen). Safe-area insets are * threaded through so iPhone-with-notch devices don't get the topbar * stacked under the status bar, the rail under the home indicator, * or the Donate-Now button under the gesture area. */ @media (max-width: 900px) { .ghh-watch-side { display: none; } .ghh-watch-topbar { display: flex; } .ghh-watch { margin-left: 0; height: calc(100vh - 56px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); } .ghh-watch-slide { flex-direction: column; gap: 0; padding: 0; } .ghh-watch-stage { width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; border-radius: 0; } .ghh-watch-rail { position: absolute; right: 12px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); z-index: 5; gap: 14px; padding-bottom: 0; } .ghh-watch-action { width: auto; } .ghh-watch-action-btn { width: 48px; height: 48px; background: rgba(0,0,0,0.32); } .ghh-watch-action-btn i { font-size: 26px; } .ghh-watch-action-label { font-size: 11px; } .ghh-watch-overlay { padding: 16px 80px calc(24px + env(safe-area-inset-bottom, 0px)) 16px; } }