/* xstral.com — one stylesheet for every page. * * The layout never changes between pages; only the palette does. Each page * sets a class on and that swaps four variables. Adding a third app * later means adding a palette block, nothing else. */ :root { --bg-deep: #050507; --bg-slate: #0d0d11; /* Monochrome by default — this is the root page's palette. */ --accent: #e8e8ec; --accent-strong: #6b6b76; --accent-far: #3a3a42; --accent-glow: rgba(232, 232, 236, .18); --text: #f2f3f7; --text-soft: #cbccd4; --text-mute: #9294a0; --text-faint: #64656f; --card: rgba(255, 255, 255, 0.04); --line: rgba(255, 255, 255, 0.10); } /* XWatch keeps the blue it shipped with. */ body.xwatch { --bg-deep: #020617; --bg-slate: #0f172a; --accent: #38bdf8; --accent-strong: #2563eb; --accent-far: #f774d6; --accent-glow: rgba(56, 189, 248, .55); --text: #e8eefc; --text-soft: #cbd5e1; --text-mute: #94a3b8; --text-faint: #64748b; } /* XSweep takes the icon's gradient: red through orange into yellow. */ body.xsweep { --bg-deep: #120604; --bg-slate: #1a0a06; --accent: #ff8a3d; --accent-strong: #ef2f4c; --accent-far: #ffc60a; --accent-glow: rgba(255, 138, 61, .55); --text: #fdf0e8; --text-soft: #e4cfc3; --text-mute: #b09287; --text-faint: #7d635a; } * { margin: 0; padding: 0; box-sizing: border-box; } /* The counter block carries the `hidden` attribute until the API answers. * Without this, `.stats { display: flex }` wins over `hidden` and a failed * request leaves three em-dashes on the page. */ [hidden] { display: none !important; } body { min-height: 100vh; background: radial-gradient(circle at top, var(--accent-strong) 0%, transparent 38%), linear-gradient(135deg, var(--bg-deep), var(--bg-slate)); background-attachment: fixed; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.root { background: linear-gradient(160deg, #08080b, #101015 60%, #08080b); } .orb { position: fixed; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; z-index: 0; } .orb.one { width: 340px; height: 340px; background: var(--accent-strong); top: -120px; left: -120px; } .orb.two { width: 280px; height: 280px; background: var(--accent); bottom: -100px; right: -100px; } .orb.three { width: 220px; height: 220px; background: var(--accent-far); top: 40%; right: 12%; opacity: .12; } body.root .orb { opacity: .10; } body.root .orb.three { opacity: .06; } .wrap { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 24px; } /* ---------- header, shared by every page ---------- */ header { padding: 34px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .logo { letter-spacing: 15px; color: var(--text-mute); font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: color .15s ease; } .logo:hover { color: var(--text); } nav { display: flex; gap: 6px; align-items: center; } nav a { font-size: 13px; font-weight: 500; color: var(--text-mute); text-decoration: none; padding: 6px 12px; border-radius: 50px; border: 1px solid transparent; transition: color .15s ease, background .15s ease, border-color .15s ease; } nav a:hover { color: var(--text); background: rgba(255,255,255,.05); } nav a.here { color: var(--accent); border-color: var(--line); background: rgba(255,255,255,.04); } /* ---------- hero ---------- */ .hero { padding: 58px 0 52px; text-align: center; } .hero img { width: 132px; height: 132px; filter: drop-shadow(0 18px 40px var(--accent-glow)); } h1 { font-size: clamp(44px, 8vw, 74px); line-height: 1.05; margin: 26px 0 14px; letter-spacing: -1.5px; } h1 .lit { color: var(--accent); text-shadow: 0 0 28px var(--accent-glow); } .tagline { font-size: clamp(17px, 2.4vw, 21px); color: var(--text-soft); max-width: 560px; margin: 0 auto 34px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; } .chip { font-size: 12.5px; color: var(--text-mute); border: 1px solid var(--line); border-radius: 50px; padding: 5px 13px; background: rgba(0,0,0,.2); } .stats { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; } .stat { text-align: center; } .stat b { display: block; font-size: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .stat span { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .7px; } /* ---------- install command ---------- */ .install { max-width: 660px; margin: 0 auto; } .cmd { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, .55); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 16px 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); } body:not(.root) .cmd { border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .cmd code { flex: 1; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(11.5px, 2.1vw, 14px); color: var(--text); overflow-x: auto; white-space: nowrap; } .cmd code .tok { color: var(--accent); } .copy { flex-shrink: 0; cursor: pointer; background: var(--accent-strong); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: inherit; transition: filter .15s ease, transform .15s ease; } .copy:hover { filter: brightness(1.15); transform: translateY(-1px); } .copy.done { background: #16a34a; } .cmd-note { font-size: 13px; color: var(--text-faint); margin-top: 12px; } /* ---------- sections ---------- */ section { padding: 52px 0; } h2 { font-size: clamp(24px, 3.6vw, 32px); margin-bottom: 10px; letter-spacing: -.5px; } .lede { color: var(--text-mute); margin-bottom: 30px; max-width: 620px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .feature { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; } .feature h3 { font-size: 16px; margin-bottom: 7px; color: var(--text); } .feature p { font-size: 14.5px; color: var(--text-mute); } .note { background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 14px; padding: 26px; } .note p { color: var(--text-soft); font-size: 15px; } .note p + p { margin-top: 14px; } .note strong { color: var(--text); } .note code, .inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(255, 255, 255, .08); padding: 2px 6px; border-radius: 5px; color: var(--accent); } pre.block { background: rgba(0, 0, 0, .55); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-soft); margin-top: 14px; } .shot { margin: 8px auto 4px; max-width: 900px; } .shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .65); } .shot figcaption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--text-faint); } /* ---------- version history ---------- */ .timeline { position: relative; padding-left: 26px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--accent-far), transparent); opacity: .35; } .release { position: relative; padding-bottom: 26px; } .release::before { content: ""; position: absolute; left: -25px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-deep); border: 2px solid var(--text-faint); } .release.now::before { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .release h3 { font-size: 16px; margin-bottom: 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .release .tag { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 50px; color: var(--text-mute); background: rgba(255,255,255,.06); border: 1px solid var(--line); } .release.now .tag { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: rgba(255,255,255,.07); } .release p { font-size: 14.5px; color: var(--text-mute); } .update-note { margin-top: 22px; padding: 16px 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; font-size: 14.5px; color: var(--text-soft); } .update-note strong { color: var(--text); } /* ---------- app cards: the root grid, and the sibling card ---------- */ .apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .app-card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .app-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); } .app-card.watch:hover { border-color: rgba(56, 189, 248, .45); } .app-card.sweep:hover { border-color: rgba(255, 138, 61, .45); } .app-card .top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .app-card img { width: 54px; height: 54px; border-radius: 12px; /* Black and white until you look at it. */ filter: grayscale(1); opacity: .8; transition: filter .25s ease, opacity .25s ease; } .app-card:hover img { filter: grayscale(0); opacity: 1; } .app-card h3 { font-size: 19px; letter-spacing: -.3px; } .app-card .what { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); } .app-card p { font-size: 14.5px; color: var(--text-mute); margin-bottom: 16px; } .app-card .go { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-faint); background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; overflow-x: auto; white-space: nowrap; } .app-card:hover .go { color: var(--text-soft); } /* ---------- root: who I am ---------- */ .me { padding: 76px 0 8px; } .me h1 { font-size: clamp(38px, 7vw, 62px); text-align: left; margin: 0 0 18px; } .me p { font-size: clamp(16px, 2.2vw, 19px); color: var(--text-soft); max-width: 640px; } .me p + p { margin-top: 14px; } .me .elsewhere { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; } .me .elsewhere a { font-size: 13px; color: var(--text-mute); text-decoration: none; border: 1px solid var(--line); border-radius: 50px; padding: 7px 15px; transition: color .15s ease, border-color .15s ease, background .15s ease; } .me .elsewhere a:hover { color: var(--text); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); } footer { padding: 44px 0 56px; margin-top: 20px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } footer a { color: var(--text-mute); text-decoration: none; } footer a:hover { color: var(--accent); } @media (max-width: 560px) { .cmd { flex-direction: column; align-items: stretch; padding: 16px; } .copy { width: 100%; } .hero { padding: 44px 0 40px; } header { padding-top: 26px; } nav a { padding: 6px 10px; font-size: 12.5px; } }