← back to IWasCute
src/app/globals.css
80 lines
@import "tailwindcss";
:root {
--background: #FFF1E6;
--foreground: #3D405B;
/* Brand palette */
--color-peach: #FFB5A7;
--color-peach-dark: #F4846F;
--color-sage: #B5D5C5;
--color-sage-dark: #8BBCAA;
--color-cream: #FFF1E6;
--color-cream-dark: #FFE0CB;
--color-warm-gray: #6B705C;
--color-brown: #3D405B;
--color-brown-light: #5A5F80;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
/* Expose brand colors to Tailwind utilities */
--color-peach: var(--color-peach);
--color-peach-dark: var(--color-peach-dark);
--color-sage: var(--color-sage);
--color-sage-dark: var(--color-sage-dark);
--color-cream: var(--color-cream);
--color-cream-dark: var(--color-cream-dark);
--color-warm-gray: var(--color-warm-gray);
--color-brown: var(--color-brown);
--color-brown-light: var(--color-brown-light);
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
overflow-x: hidden;
}
/* Smooth scrolling + prevent horizontal overflow from decorative blobs */
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Custom checkbox styling */
input[type="checkbox"] {
accent-color: var(--color-peach);
}
/* File input hiding */
input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Drag-over highlight */
.drag-over {
border-color: var(--color-peach-dark) !important;
background-color: rgba(255, 181, 167, 0.1) !important;
}
/* Signature field font */
.signature-field {
font-family: "Georgia", "Times New Roman", serif;
font-style: italic;
letter-spacing: 0.05em;
}