99 lines
1.7 KiB
CSS
99 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--bg: #ffffff;
|
|
--bg-dark: #0f172a;
|
|
/* Slate 900 - Deep Navy */
|
|
--surface: #f1f5f9;
|
|
/* Slate 100 */
|
|
--surface-dark: #1e293b;
|
|
/* Slate 800 */
|
|
--ink: #0f172a;
|
|
/* Slate 900 */
|
|
--ink-light: #f8fafc;
|
|
/* Slate 50 */
|
|
--muted: #64748b;
|
|
/* Slate 500 */
|
|
--brand: #b91c1c;
|
|
/* Red 700 - Darker Red */
|
|
--brand-strong: #991b1b;
|
|
/* Red 800 */
|
|
--line: #e2e8f0;
|
|
/* Slate 200 */
|
|
--line-dark: #334155;
|
|
/* Slate 700 */
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--bg);
|
|
--color-foreground: var(--ink);
|
|
--font-sans: var(--font-body);
|
|
--font-display: var(--font-display);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--font-body), system-ui, sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(185, 28, 28, 0.4);
|
|
color: #ffffff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
::selection {
|
|
background: rgba(239, 68, 68, 0.6);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
/* Infinite Scrolling Animation */
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.animate-scroll {
|
|
animation: scroll 50s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-scroll:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* Ken Burns Effect - Fancy zoom for hero carousel */
|
|
@keyframes ken-burns {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.animate-ken-burns {
|
|
animation: ken-burns 5s ease-out forwards;
|
|
}
|
|
|
|
/* Respect user's motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-scroll {
|
|
animation: none;
|
|
transform: none;
|
|
}
|
|
.animate-ken-burns {
|
|
animation: none;
|
|
}
|
|
} |