/* ════════════════════════════════════════════════════════════════════════ zCloud.css — the zCanvas (app-wide root, Layer 1) Declared via `zCanvas: zCloud` in zSpark.zApp.zolo; the server injects this before any zBrush. This is the ONE place for things true on every page. ACT III revival — introduced ONE concern at a time. Right now: just the background (+ the minimal body reset that lets it fill the viewport). Tokens, prose links, base typography, page wrapper, etc. come later, slowly. Source of truth being revived from: _archive/styles_2026-06-15/canvas.css. ════════════════════════════════════════════════════════════════════════ */ /* zCloud brand tokens — kept local to the canvas for now. */ :root { --primary-dark: #0A0E27; --text-light: #F9FAFB; --zc-container: 1200px; /* default centered content width */ --zc-gutter: 1.5rem; /* side breathing room on narrow viewports */ } * { box-sizing: border-box; } /* The background — global, every page. */ html, body { margin: 0; min-height: 100vh; background: var(--primary-dark); color: var(--text-light); } /* Centered content column — the standard site measure, like any website. Real runtime DOM: → (root) → (chrome, first child) + (page) + . So clamping clamps the navbar too — the navbar is a CHILD, not a sibling. We DON'T fight that here: the navbar stays full width via a canonical full-bleed rule in zbase.css (zNavBar { width:100vw; margin-inline:calc(50% - 50vw) }) so "navbar = full width" is a framework guarantee, not a per-app override. This rule just sets the readable content measure; chrome escapes it on its own. NOTE (canvas vs brush): this centers ALL page content globally. The archive did it per-section via a `.zc-container` brush so sections could go full-bleed with a centered inner column — if/when we need edge-to-edge content bands, this moves out of the canvas into a layout brush. Provisional for now. */ zVaF { display: block; max-width: var(--zc-container); margin-inline: auto; padding-inline: var(--zc-gutter); } /* ── Buttons — zCloud-owned, mirrors the canonical bifrost .zBtn look ──────── Turns an (zURL) into a pill CTA WITHOUT depending on bifrost's .zBtn. Same shape + same --color-* tokens (canonical hex fallbacks) as zbase.css .zBtn-*, so they read identically today — but OWNED here, so the site can diverge from canonical later without touching the client. A zc-btn-primary matches a zBtn-primary of the same color name. Apply via _zClass on a zURL: _zClass: zc-btn zc-btn-primary */ .zc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; box-sizing: border-box; padding: 0.7rem 1.5rem; border: 1px solid transparent; border-radius: 980px; font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px var(--shadow, rgba(0, 0, 0, 0.25)); transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } .zc-btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 22px var(--shadow, rgba(0, 0, 0, 0.3)); text-decoration: none; } .zc-btn:active { transform: translateY(0); box-shadow: 0 2px 6px var(--shadow, rgba(0, 0, 0, 0.25)); } .zc-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary, #A2D46E) 55%, transparent); outline-offset: 2px; } /* Color fills — dark legible ink on BOTH fills. zCloud diverges from canonical here on purpose: canonical .zBtn-secondary uses white ink, but the site reads better (and more consistent with the green CTA) with a deep ink on the purple. Same hue tokens as zbase.css. More variants land as the site needs them. */ .zc-btn-primary { background: var(--color-primary, #A2D46E); color: #14210a; } .zc-btn-secondary { background: var(--color-secondary, #9370DB); color: #15102b; } .zc-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.22); color: var(--text-light, #F9FAFB); } .zc-btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.38); } /* ── Layout grammar — canonical column grid + card surface (zc-*) ──────────── The reusable card ROW used across the whole site — home's Account/FAQ/Pricing trio now, pricing tiers and feature rows later. Revived + trimmed from the archived section.css zc-grid/zc-card system; tokens below feed it. (2×2 / -4 / auto-fit land when a page needs them.) */ :root { --text-gray: #B4BBC8; --zc-gap: 1.5rem; --zc-container-narrow: 1040px; /* tighter measure for 2-up rows */ --zc-radius: 22px; --zc-surface: linear-gradient(160deg, rgba(30, 35, 60, 0.5) 0%, rgba(16, 20, 38, 0.65) 100%); --zc-hairline: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); --zc-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); --zc-shadow-hover: 0 24px 56px rgba(0, 0, 0, 0.40); /* page grammar (Layer 2, styles/page.css) — kept here so tokens stay SSOT */ --zc-section-y: 4.5rem; /* vertical section rhythm */ --zc-section-x: 2rem; /* horizontal section padding */ --zc-text-grad: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%); } /* grid — THE canonical column system (gap + centered measure) */ .zc-grid { display: grid; gap: var(--zc-gap); max-width: var(--zc-container-narrow); margin: 0 auto; } .zc-grid-2 { grid-template-columns: repeat(2, 1fr); } .zc-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1180px; } /* card — glass surface primitive (top hairline, lift on hover) */ .zc-card { display: flex; flex-direction: column; background: var(--zc-surface); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--zc-radius); padding: 2.75rem 2rem; box-shadow: var(--zc-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .zc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--zc-hairline); } .zc-card:hover { transform: translateY(-4px); box-shadow: var(--zc-shadow-hover); border-color: rgba(255, 255, 255, 0.16); } /* card interior — heading scale, body rhythm, pinned actions */ .zc-card h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.75rem; } .zc-card .zMD { color: var(--text-gray); font-size: 0.95rem; line-height: 1.65; margin: 0; } .zc-card-actions { margin-top: auto; padding-top: 1.75rem; } /* responsive — collapse the row to one column on narrow viewports */ @media (max-width: 768px) { .zc-grid-2, .zc-grid-3 { grid-template-columns: 1fr; } .zc-card { padding: 2.5rem 2rem; } } /* ── Site footer ───────────────────────────────────────────────────────────── Full-bleed dark strip; invoked via %siteFooter: pattern on any page. */ .zc-footer { width: 100vw; margin-inline: calc(50% - 50vw); background: rgba(6, 9, 24, 0.98); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 4rem 0 0; margin-top: 5rem; } .zc-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: 1180px; margin: 0 auto; padding-inline: var(--zc-gutter); } .zc-footer-name { font-size: 1.15rem; font-weight: 700; color: var(--text-light, #F9FAFB); margin: 0 0 0.6rem; display: block; } .zc-footer-tagline { font-size: 0.875rem; color: var(--text-gray, #B4BBC8); line-height: 1.65; max-width: 26ch; display: block; } .zc-footer-col-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-gray, #B4BBC8); margin-bottom: 1rem; display: block; } .zc-footer-col a { display: block; color: var(--text-gray, #B4BBC8); text-decoration: none; font-size: 0.9rem; padding: 0.3rem 0; transition: color 0.15s ease; } .zc-footer-col a:hover { color: var(--text-light, #F9FAFB); } .zc-footer-bottom { max-width: 1180px; margin: 3rem auto 0; padding: 1.25rem var(--zc-gutter); border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.82rem; color: var(--text-gray, #B4BBC8); } @media (max-width: 768px) { .zc-footer-cols { grid-template-columns: 1fr 1fr; } .zc-footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .zc-footer-cols { grid-template-columns: 1fr; } } /* ── Error hero — full-height centered stack for zViews/error/* ────────────── The %errorHero zPattern (zLoom/patterns/zUI.error.zolo) tags its Hero with _zClass: zc-error, so ONE rule centers + spaces EVERY error code (404/403/500/ 502/503). Direct children are the renderer's flattened leaves: h1 (code) · h2 (title) · p (body) · a (home). The zText-primary/secondary color classes are kept — this only handles LAYOUT + scale, not hue. */ .zc-error { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.15rem; min-height: 70vh; max-width: 34rem; margin-inline: auto; padding: 3rem 1.5rem 4rem; } .zc-error > h1 { margin: 0; font-size: clamp(4rem, 15vw, 7rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; } .zc-error > h2 { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2.25rem); font-weight: 700; line-height: 1.15; } .zc-error > p { margin: 0; max-width: 30rem; color: var(--text-gray); font-size: 1.05rem; line-height: 1.6; } .zc-error > a { margin-top: 0.6rem; font-weight: 600; text-decoration: none; } .zc-error > a:hover { text-decoration: underline; }