bcb4f1688e
Three taglines rotate every 3.5s with a subtle 700ms opacity crossfade: 1. Inspect any request. Mock any response. (default) 2. Your HTTP bin, on your machine. 3. Send. Capture. Mock. No signup. Implementation notes: - Client component, default tagline in initial SSR HTML for SEO/no-JS - ARIA: aria-live=polite on container, aria-hidden on inactive items, aria-atomic=true; prefers-reduced-motion suppresses both the timer and the fade (via motion-reduce:transition-none + early-return guard) - No CLS: container has fixed h-7 md:h-8 height; absolute children crossfade in place - Hierarchy: tagline below H1 (mb-6), above hero sub (mb-6 from tagline container, mb-10 from sub to CTAs) Tailwind v4 fixes that were needed to make this visible: - app/globals.css: switch to @import 'tailwindcss' with explicit @source globs (auto-detection misses components when Turbopack workspace root is ambiguous) - app/globals.css: drop redundant reset; Tailwind v4 Preflight handles it, and an unlayered selector beats @layer utilities so it was silently killing mb-*, mx-*, etc. - app/globals.css: wrap in @layer base so text-white / text-zinc-* utilities can override it - next.config.ts: pin turbopack.root to project dir so the build works regardless of shell cwd (was running into the paperclip workspace root during agent sessions)
79 lines
2.0 KiB
CSS
79 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Explicit source roots for Tailwind v4. Auto-detection misses files when
|
|
Turbopack's workspace root is ambiguous (e.g. shell cwd differs from the
|
|
web project root), so we pin the scan paths here. */
|
|
@source "../components/**/*.{ts,tsx}";
|
|
@source "../app/**/*.{ts,tsx}";
|
|
|
|
:root {
|
|
--surface-0: #09090b;
|
|
--surface-1: #111114;
|
|
--surface-2: #1a1a1f;
|
|
--surface-3: #232328;
|
|
--brand: #3b82f6;
|
|
--brand-dim: #2563eb;
|
|
--text-primary: #fafafa;
|
|
--text-secondary: #a1a1aa;
|
|
--text-tertiary: #71717a;
|
|
--text-code: #e879f9;
|
|
--code-bg: #18181b;
|
|
--code-border: #27272a;
|
|
}
|
|
|
|
/* Note: no `* { margin: 0; padding: 0; box-sizing: border-box; }` here.
|
|
Tailwind v4's Preflight (included by `@import "tailwindcss"`) already
|
|
resets margins on block elements and sets border-box globally. An
|
|
unlayered `*` selector would beat Tailwind's `@layer utilities` and
|
|
silently break every margin utility (mb-*, mt-*, mx-*, etc.). */
|
|
|
|
html {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
color: var(--text-primary);
|
|
background-color: var(--surface-0);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Default link color. Wrapped in @layer base so Tailwind utilities
|
|
(text-white, text-zinc-*, etc.) in @layer utilities still win. An
|
|
unlayered `a { color: ... }` would silently override utilities. */
|
|
@layer base {
|
|
a {
|
|
color: var(--brand);
|
|
text-decoration: none;
|
|
transition: color 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-mono), 'SFMono-Regular', Consolas, monospace;
|
|
font-size: 0.875em;
|
|
background-color: var(--code-bg);
|
|
border: 1px solid var(--code-border);
|
|
padding: 0.15em 0.4em;
|
|
border-radius: 6px;
|
|
color: var(--text-code);
|
|
}
|
|
|
|
/* Particle canvas */
|
|
#particle-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|