/* ============================================ Watch Together — Shared page shell ============================================ Owns: reset, body typography, theme variables and the full-viewport sky container. Loaded by: index.html (landing), auth.html, reset-password.html, verify-email.html NOT loaded by: dashboard.html — that page SCROLLS and declares its own (richer) variable set on . Load order on every sky page: page.css → sky.css → .css ============================================ */ /* ---- 1. Reset & Base ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Full-viewport, non-scrolling pages (the sky fills the screen). */ html, body { width: 100%; height: 100%; overflow: hidden; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: none; } button, input, textarea, select { font-family: inherit; } /* ---- 2. Theme Variables ---------------------------------------- Attribute-only selectors on purpose: sky.js stamps data-theme on whatever element you hand it as `root` / `themeTarget` (.landing, .sky-page, , …) — these keep working either way. --sky-fb : flat fallback colour behind sky.png (used by sky.css) --bg : pre-load gradient for the page shell --text-* : on-sky typography (landing title, auth brand bar) --btn-* : landing CTA buttons ----------------------------------------------------------------- */ [data-theme="morning"] { --sky-fb: #b5b6ee; --bg: linear-gradient(180deg, #fbcfe8 0%, #ffe4e6 50%, #bfdbfe 100%); --text-color: #881337; --text-shadow: 0 2px 20px rgba(136, 19, 55, 0.12); --btn-pri-bg: #f43f5e; --btn-pri-bg-hover: #e11d48; --btn-pri-text: #ffffff; --btn-pri-shadow: rgba(244, 63, 94, 0.35); --btn-sec-bg: rgba(255, 228, 230, 0.8); --btn-sec-bg-hover: rgba(254, 205, 211, 0.9); --btn-sec-text: #881337; --btn-sec-border: transparent; --btn-sec-border-w: 0px; color-scheme: light; } [data-theme="afternoon"] { --sky-fb: #229df2; --bg: #7dd3fc; --text-color: #0c4a6e; --text-shadow: 0 2px 20px rgba(12, 74, 110, 0.1); --btn-pri-bg: #facc15; --btn-pri-bg-hover: #eab308; --btn-pri-text: #0c4a6e; --btn-pri-shadow: rgba(250, 204, 21, 0.35); --btn-sec-bg: rgba(255, 255, 255, 0.7); --btn-sec-bg-hover: rgba(255, 255, 255, 0.9); --btn-sec-text: #0369a1; --btn-sec-border: #93c5fd; --btn-sec-border-w: 1px; color-scheme: light; } [data-theme="evening"] { --sky-fb: #8d6daa; --bg: linear-gradient(180deg, #c084fc 0%, #f9a8d4 50%, #fdba74 100%); --text-color: #ec4899; --text-shadow: 0 2px 20px rgba(236, 72, 153, 0.15); --btn-pri-bg: #9333ea; --btn-pri-bg-hover: #7e22ce; --btn-pri-text: #ffffff; --btn-pri-shadow: rgba(147, 51, 234, 0.35); --btn-sec-bg: rgba(243, 232, 255, 0.8); --btn-sec-bg-hover: rgba(233, 213, 255, 0.9); --btn-sec-text: #581c87; --btn-sec-border: transparent; --btn-sec-border-w: 0px; color-scheme: dark; } [data-theme="night"] { --sky-fb: #171f43; --bg: linear-gradient(180deg, #312e81 0%, #1e3a8a 100%); --text-color: #ffffff; --text-shadow: 0 2px 24px rgba(99, 102, 241, 0.3); --btn-pri-bg: #6366f1; --btn-pri-bg-hover: #4f46e5; --btn-pri-text: #ffffff; --btn-pri-shadow: rgba(99, 102, 241, 0.4); --btn-sec-bg: rgba(255, 255, 255, 0.1); --btn-sec-bg-hover: rgba(255, 255, 255, 0.2); --btn-sec-text: #ffffff; --btn-sec-border: rgba(255, 255, 255, 0.3); --btn-sec-border-w: 2px; color-scheme: dark; } /* ---- 3. Sky Page Shell ---------------------------------------- The sky.js root for full-viewport pages. `.landing` is kept as an alias so the landing page markup doesn't have to change. Layer stack inside it (see sky.css): 0 sky image 1 element layer (stars + celestial body) 2 far clouds 3 near clouds 4+ page content (.content on landing, .page-content on auth) ----------------------------------------------------------------- */ .sky-page, .landing { position: relative; width: 100%; height: 100%; background: var(--bg); overflow: hidden; }