/* * LayerCloud branded error pages (issue #83). Same design language as the * landing: the deep-space #04080d background, the emerald palette * (#34d399 / #10b981 / #059669), the self-hosted Plus Jakarta Sans / * JetBrains Mono / IranYekan faces, and the shell/card radius scale. Fully * self-contained - no inline styles or scripts (the pages run under the * strict panelCSP, style-src 'self'), no third-party requests - with * logical properties so the RTL (fa) shell mirrors for free. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plusjakartasans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plusjakartasans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plusjakartasans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plusjakartasans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrainsmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IranYekan"; src: url("/fonts/iranyekan-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IranYekan"; src: url("/fonts/iranyekan-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* * Theme tokens mirror the landing's dark emerald theme (index.css @theme + * the landing root's bg-[#04080d]). The error pages are always dark - the * landing's light mode is a JS-toggled .light class the CSP-safe error * documents cannot carry, so they pin the landing's default dark look. */ :root { color-scheme: dark; --lc-bg: #04080d; --lc-card: rgba(11, 18, 32, 0.62); --lc-accent: #3b82f6; --lc-accent-strong: #2563eb; --lc-mint: #60a5fa; --lc-text: #eff6ff; --lc-muted: rgba(147, 197, 253, 0.75); --lc-on-accent: #020617; --lc-glow: rgba(59, 130, 246, 0.16); --lc-border: rgba(96, 165, 250, 0.28); --lc-radius-control: 0.75rem; --lc-radius-card: 1rem; --lc-radius-shell: 1.5rem; } /* Theme sync (owner round): the shell pages follow the OS theme when the visitor's system is set to light - a .light class on (applied by the console's saved preference via /theme-sync.js) takes priority, and prefers-color-scheme covers the no-JS case. */ @media (prefers-color-scheme: light) { :root:not(.light) { color-scheme: light; --lc-bg: #f2f7f4; --lc-card: rgba(255, 255, 255, 0.78); --lc-accent: #2563eb; --lc-accent-strong: #1d4ed8; --lc-mint: #3b82f6; --lc-text: #0f172a; --lc-muted: rgba(51, 65, 85, 0.75); --lc-on-accent: #ffffff; --lc-glow: rgba(37, 99, 235, 0.10); --lc-border: rgba(37, 99, 235, 0.22); } } html.light { color-scheme: light; --lc-bg: #f2f7f4; --lc-card: rgba(255, 255, 255, 0.78); --lc-accent: #2563eb; --lc-accent-strong: #1d4ed8; --lc-mint: #3b82f6; --lc-text: #0f172a; --lc-muted: rgba(51, 65, 85, 0.75); --lc-on-accent: #ffffff; --lc-glow: rgba(37, 99, 235, 0.10); --lc-border: rgba(37, 99, 235, 0.22); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(60% 42% at 50% 0%, var(--lc-glow), transparent 70%), var(--lc-bg); color: var(--lc-text); font-family: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } html[lang="fa"] body { font-family: "IranYekan", "Plus Jakarta Sans", system-ui, sans-serif; } /* Main card: the error copy, styled like the landing's hero code card. */ .lc-err-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; } .lc-err-card { width: 100%; max-width: 34rem; padding: 2.5rem 2rem; text-align: center; background: var(--lc-card); border: 1px solid var(--lc-border); border-radius: var(--radius-shell); -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 70px rgba(0, 0, 0, 0.45); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lc-err-card { background: #0b1220; } html.light .lc-err-card, :root:not(.light) .lc-err-card { background: #ffffff; } } .lc-err-code { margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: clamp(3rem, 10vw, 4.25rem); font-weight: 500; line-height: 1; background: linear-gradient(135deg, #60a5fa, #3b82f6 45%, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; } .lc-err-title { margin: 1rem 0 0; font-size: clamp(1.35rem, 4.5vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; color: var(--lc-text); } .lc-err-body { margin: 0.75rem auto 0; max-width: 26rem; font-size: 0.9375rem; color: var(--lc-muted); } .lc-err-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem; margin-top: 1.75rem; } /* Ghost button: the landing's secondary variant (border-emerald-500/20, bg-emerald-950/20, text-emerald-100). */ .lc-err-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.2rem; border-radius: var(--radius-control); border: 1px solid var(--lc-border); font-size: 0.875rem; font-weight: 700; text-decoration: none; color: var(--lc-text); background: rgba(11, 18, 32, 0.35); transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; } .lc-err-btn:hover { border-color: var(--lc-mint); background: rgba(59, 130, 246, 0.12); } /* Solid button: the landing's primary variant (emerald-400 -> teal-400 gradient, slate-950 text). */ .lc-err-btn-solid { color: var(--lc-on-accent); background: linear-gradient(to right, #60a5fa, #38bdf8); border-color: transparent; font-weight: 800; } .lc-err-btn-solid:hover { background: linear-gradient(to right, #93c5fd, #7dd3fc); } .lc-err-hint { margin: 1.25rem auto 0; max-width: 26rem; font-size: 0.8125rem; color: var(--lc-muted); border-top: 1px dashed var(--lc-border); padding-top: 1rem; } /* Compact screens: keep the shell readable on phones. */ @media (max-width: 480px) { .lc-err-card { padding: 2rem 1.25rem; } } @media (prefers-reduced-motion: no-preference) { .lc-err-card { animation: lc-err-rise 0.45s ease-out both; } @keyframes lc-err-rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } } } /* #161 round 57 (issue #165): the #root boot-failure fallback is revealed by theme-sync.js clearing the `hidden` attribute, NOT by a CSS delay. A CSS-based reveal depended on this stylesheet arriving first, and while it was still downloading the unstyled fallback painted - the raw markup the owner reported. With the attribute approach the element cannot paint until a script reveals it, so this block only needs to make the revealed state definite. The rules below are therefore load-bearing, not decorative. */ /* CASCADE-CRITICAL: `.lc-err-main` above sets `display: flex` at AUTHOR origin, which overrides the UA stylesheet's `[hidden] { display: none }`. Without the rule below, loading this stylesheet would make the hidden fallback visible on every healthy load - the original bug, merely delayed. This selector is (0,2,0) so it beats `.lc-err-main` (0,1,0) and keeps the element out of layout until theme-sync.js clears the attribute. */ [data-lc-boot-fallback][hidden] { display: none; } [data-lc-boot-fallback]:not([hidden]) { opacity: 1; }