AndymickandClaude Haiku 4.5
d134d3a93c
Add bg-paper class to global input/textarea/select styling. Previously text-ink was applied but inputs lacked background color, causing light text on light backgrounds. Now all form inputs globally have: - bg-paper for proper dark mode background - text-ink for readable text in both light and dark modes Fixes visibility issues on custom-request, contact, and all other form pages. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
97 lines
2.0 KiB
CSS
97 lines
2.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--color-paper: 255 253 248;
|
|
--color-ink: 26 26 26;
|
|
--color-line: 234 230 221;
|
|
--color-surface: 255 255 255;
|
|
--color-muted: 138 133 120;
|
|
}
|
|
.dark {
|
|
--color-paper: 34 30 26;
|
|
--color-ink: 240 235 224;
|
|
--color-line: 64 58 48;
|
|
--color-surface: 46 41 35;
|
|
--color-muted: 173 164 148;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
@apply bg-paper text-ink font-body antialiased transition-colors duration-200;
|
|
}
|
|
input,
|
|
textarea,
|
|
select {
|
|
@apply bg-paper text-ink;
|
|
}
|
|
::selection {
|
|
@apply bg-splash-pink text-paper;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid #e5227e;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.tag-label {
|
|
@apply font-mono text-[11px] uppercase tracking-tag text-muted;
|
|
}
|
|
.hairline {
|
|
@apply border-line;
|
|
}
|
|
.link-cta {
|
|
@apply inline-flex items-center gap-1 text-sm font-semibold text-clay transition-all hover:gap-2.5 hover:text-clay-dark;
|
|
}
|
|
.brand-gradient {
|
|
background-image: linear-gradient(90deg, #f5871f 0%, #e5227e 35%, #1ea7e0 70%, #5b2c86 100%);
|
|
}
|
|
.brand-gradient-text {
|
|
background-image: linear-gradient(90deg, #f5871f 0%, #e5227e 35%, #1ea7e0 70%, #5b2c86 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes drift {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(var(--drift-rotate, 0deg));
|
|
}
|
|
50% {
|
|
transform: translateY(-8px) rotate(calc(var(--drift-rotate, 0deg) + 8deg));
|
|
}
|
|
}
|
|
|
|
.animate-drift {
|
|
animation: drift 9s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|