/** * Shared layout + header styles for all BarefootJS integrations. * * Consumes CSS variables declared in tokens.css. Pairs with the header HTML * that each adapter renders directly in its layout (see renderer.tsx / * main.go / app.pl). The integrations are pinned to dark mode via * , so only the `.dark` overrides in tokens.css apply. */ html { color-scheme: dark; } body { margin: 0; min-height: 100vh; padding-top: var(--header-height); font-family: var(--font-sans); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Center the main content in non-todo layouts. The todo demos manage their * own full-width layout via .todoapp, so skip the centering there. */ body:not(:has(.todoapp)) > :not(.bf-header):not(script) { max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } body:not(:has(.todoapp)) > h1:first-of-type { margin-top: 2rem; } a { color: var(--foreground); } /* ── Header ─────────────────────────────────────────────── */ .bf-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-height); background: color-mix(in oklch, var(--background) 95%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); } .bf-header-inner { height: var(--header-height); padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); } @media (min-width: 640px) { .bf-header-inner { padding: 0 var(--space-6); gap: var(--space-6); } } .bf-header-logo { display: inline-flex; align-items: center; text-decoration: none; transition: opacity var(--duration-fast); } .bf-header-logo:hover { opacity: 0.85; } /* * Render the "Barefoot.js" wordmark as a CSS mask so the logo tracks the * current foreground color automatically — the host page controls the * fill instead of the SVG, and the external SVG file stays framework-free. */ .bf-header-logo-img { display: block; width: 115px; height: 26px; background: var(--foreground); -webkit-mask: url('./logo.svg') no-repeat center / contain; mask: url('./logo.svg') no-repeat center / contain; } .bf-header-sep { width: 1px; height: 20px; background: var(--border); } .bf-header-link { padding: 6px var(--space-3); font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; border-radius: var(--radius-md); transition: color var(--duration-fast), background-color var(--duration-fast); } .bf-header-link:hover { color: var(--foreground); background: color-mix(in oklch, var(--accent) 50%, transparent); }