/* ZincArt — Critical CSS for first paint * * Loaded synchronously in , BEFORE Tailwind v4 browser CDN runs. * Uses attribute selectors to mirror the most-used Tailwind utility * names so backgrounds paint correctly on the very first frame. * * IMPORTANT: do NOT apply blanket text colors to whole sections by * position — heroes vary (some dark, some light). Only apply text * colors to sections that have an EXPLICIT dark-bg class. */ /* ── HTML / BODY: bg + text color (safety net duplicating palette.css) ── */ html { background-color: oklch(98% 0.003 286); --zinc-nav-h: 64px; /* actual navbar height (logo h-8 + py-3) */ --zinc-nav-offset: 7rem; /* nav-h + breathing room (≈ 112px) */ } body { background-color: oklch(98% 0.003 286); color: oklch(20% 0.008 286); } /* ── Push the FIRST section's content below the fixed navbar with * comfortable breathing room. The section's BACKGROUND still starts * at y=0 (under the navbar) — only its inner content gets pushed * down. Navbar always overlays the first element. ── */ main > *:first-child { padding-top: var(--zinc-nav-offset) !important; } /* ── Static chrome: outer header is fixed-positioned + fully transparent. * Inner
keeps its own bg (bg-background/95) + backdrop-blur. ── */ header.site-header, header[class*="fixed"][class*="top-0"] { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background-color: transparent; } /* Footer */ footer.site-footer { background-color: oklch(98% 0.003 286); border-top: 1px solid oklch(90% 0.005 286); } /* ── DARK section backgrounds (only set color WITH bg, never bg without color) ── */ section[class*="bg-zinc-950"], [class*="dark"][class*="bg-zinc-950"] { background-color: rgb(9, 9, 11); color: rgb(244, 244, 245); } section[class*="bg-zinc-900"] { background-color: rgb(24, 24, 27); color: rgb(244, 244, 245); } section[class*="bg-zinc-800"] { background-color: rgb(39, 39, 42); color: rgb(244, 244, 245); } section[class*="bg-black"] { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); } /* ── Light alternating section backgrounds (NO text color override — keep * natural body text color from palette.css) ── */ section[class*="bg-muted/40"], section[class*="bg-muted/30"], section[class*="bg-muted"]:not([class*="dark"]) { background-color: oklch(95% 0.004 286); } /* ── Background-image hero (dark fallback while image loads) — text is white * here because these heroes ALWAYS have an overlay that darkens the bg ── */ section[class*="bg-[url"] { background-color: rgb(24, 24, 27); background-size: cover; background-position: center; background-repeat: no-repeat; color: rgb(244, 244, 245); } /* ── Common dark gradient CTAs ── */ section[class*="from-zinc-900"], section[class*="from-zinc-950"] { background: linear-gradient(135deg, rgb(24, 24, 27), rgb(9, 9, 11)); color: rgb(244, 244, 245); } [class*="bg-gradient-to-br"][class*="from-zinc"] { background: linear-gradient(135deg, rgb(24, 24, 27), rgb(9, 9, 11)); color: rgb(244, 244, 245); } /* That's it. Light heroes use the natural body text color from palette.css. * No blanket "first section gets white text" rule. */