88c7262a08
All checks were successful
Deploy to Production / deploy (push) Successful in 1m13s
- Hero h1 was a fixed text-[44px] — overflowed narrow phones. Now text-[30px] sm:text-[40px] md:text-[56px]. - Hero grid children get min-w-0 so the code blocks' overflow-x-auto actually constrains instead of widening the page. - Marketing nav: the inline links were hidden below md with no fallback. Added a hamburger MobileMenu; "Sign in" collapses into it on the smallest screens. - Section vertical padding is now responsive (py-14 sm:py-20). - globals.css: overflow-x: clip on <html> as a safety net. - docs: the 240px sidebar is hidden below lg, article gets min-w-0. - dashboard header: nav labels collapse to icons on small screens. Verified: next build passes (40/40 pages). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
150 lines
3.6 KiB
CSS
150 lines
3.6 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
--color-bg: #0a0a0b;
|
|
--color-bg-elevated: #111114;
|
|
--color-bg-subtle: #16161a;
|
|
--color-fg: #fafafa;
|
|
--color-fg-muted: #a1a1aa;
|
|
--color-fg-subtle: #71717a;
|
|
--color-border: #1f1f22;
|
|
--color-border-strong: #2a2a2e;
|
|
--color-accent: #6366f1;
|
|
--color-accent-fg: #ffffff;
|
|
--color-success: #22c55e;
|
|
--color-warn: #f59e0b;
|
|
--color-danger: #ef4444;
|
|
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
border-color: var(--color-border);
|
|
}
|
|
html {
|
|
color-scheme: dark;
|
|
background: var(--color-bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
/* Safety net against a stray wide element causing horizontal scroll on
|
|
mobile. `clip` (not `hidden`) does not create a scroll container, so it
|
|
leaves position: sticky intact. */
|
|
overflow-x: clip;
|
|
}
|
|
body {
|
|
background: var(--color-bg);
|
|
color: var(--color-fg);
|
|
font-family: var(--font-sans);
|
|
font-feature-settings: 'cv11', 'ss01';
|
|
}
|
|
::selection {
|
|
background: rgba(99, 102, 241, 0.3);
|
|
color: var(--color-fg);
|
|
}
|
|
/* Focus rings */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
/* Force dark native UI for form controls — Chrome popdown otherwise reverts to OS light theme */
|
|
select,
|
|
input,
|
|
textarea,
|
|
button {
|
|
color-scheme: dark;
|
|
}
|
|
/* Style native select arrow + ensure the dropdown popdown uses our dark token */
|
|
select {
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-position: right 8px center;
|
|
background-size: 12px;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding-right: 26px !important;
|
|
}
|
|
select option {
|
|
background: var(--color-bg-elevated);
|
|
color: var(--color-fg);
|
|
}
|
|
/* Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border-strong);
|
|
border-radius: 5px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-fg-subtle);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.panel {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.panel-subtle {
|
|
background: var(--color-bg-subtle);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1000px 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|