/* custom.css — only what Tailwind can't do. Tailwind utilities come from the CDN; theme tokens are configured in includes/header.php. Color values use CSS variables so we can flip them all at once via the .dark class on . Design language: bold creative-agency (inspired by the "Lettery" theme) rendered in the Resulve brand — cream + near-black + Resulve amber, oversized Space Grotesk display type, and scroll-driven motion. No build step, no framework: Tailwind CDN + Alpine + vanilla JS. */ /* ───────── Fonts ───────── Matches the Lettery reference: Outfit (geometric display) + Inter for body. */ :root { --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --btn-radius: 9999px; } /* ───────── Theme variables (light) ───────── Resulve's own brand palette — warm stone + burnt amber (kept by request). Only the fonts, layout and motion follow the Lettery reference; the colors stay Resulve. */ :root { --color-bg: #fafaf9; --color-bg-warm: #f5f5f4; --color-ink: #1c1917; --color-ink-muted: #57534e; --color-ink-soft: #78716c; --color-hair: #e7e5e4; --color-accent: #b45309; --color-accent-hover: #92400e; --color-accent-bright: #f59e0b; /* brighter Resulve amber — for fills & dark surfaces */ --color-code-bg: #1c1917; /* code-block background, kept dark in both modes */ --color-code-fg: #fafaf9; --color-inline-code-bg: #f5f5f4; --color-card-bg: #ffffff; /* white surfaces (form inputs, preview pane) */ } /* ───────── Theme variables (dark) — toggled via .dark on ───────── */ :root.dark { --color-bg: #0c0a09; --color-bg-warm: #1c1917; --color-ink: #fafaf9; --color-ink-muted: #a8a29e; --color-ink-soft: #78716c; --color-hair: #292524; --color-accent: #f59e0b; --color-accent-hover: #fbbf24; --color-accent-bright: #fbbf24; --color-code-bg: #292524; --color-code-fg: #fafaf9; --color-inline-code-bg: #292524; --color-card-bg: #1c1917; } /* Smooth fade on theme switch. */ html { transition: background-color 0.15s ease, color 0.15s ease; } /* Hide Alpine-managed elements until Alpine boots, to prevent a flash. */ [x-cloak] { display: none !important; } /* ───────── Display typography ───────── Repointing Tailwind's `serif` family to Space Grotesk (see header.php config) turns every existing `font-serif` heading into the agency display face with zero markup churn. Here we give those headings weight + tight tracking so they read as a bold grotesk, not a light one. */ .font-serif { font-weight: 500; letter-spacing: -0.01em; } main h1, .h-display { letter-spacing: -0.03em; line-height: 1.0; font-weight: 700; } main h2 { letter-spacing: -0.02em; } /* Oversized hero / section display type. */ .h-display { font-family: var(--font-display); font-size: clamp(2.75rem, 8vw, 6.25rem); } .h-section { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(2rem, 4.5vw, 3.5rem); } /* Eyebrow label with a leading accent tick — the small agency section marker. */ .eyebrow-tick { display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow-tick::before { content: ""; width: 1.75rem; height: 2px; background: var(--color-accent); display: inline-block; } /* ───────── Buttons ───────── Pill-shaped, lifting CTAs. Scoped to the actual button pattern (inline-block link /