73 lines
1.7 KiB
CSS
73 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--color-bg: #faf7f2;
|
|
--color-surface: #ffffff;
|
|
--color-surface-muted: #f3ede6;
|
|
--color-text: #1c1917;
|
|
--color-muted: #57534e;
|
|
--color-border: #e7e0d6;
|
|
--color-primary: #7c1d2b;
|
|
--color-primary-hover: #5c1520;
|
|
--color-on-primary: #fffaf7;
|
|
--color-accent: #b8860b;
|
|
--color-accent-soft: #f5e6c8;
|
|
--color-success: #0d9488;
|
|
--font-display: var(--font-cormorant), "Georgia", serif;
|
|
--font-ui: var(--font-dm-sans), system-ui, sans-serif;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--color-bg);
|
|
--color-foreground: var(--color-text);
|
|
--font-sans: var(--font-ui);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-ui);
|
|
}
|
|
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.grain::before {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
opacity: 0.035;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
z-index: 50;
|
|
}
|
|
|
|
.card-lift {
|
|
transition:
|
|
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
|
|
box-shadow 0.35s ease;
|
|
}
|
|
.card-lift:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(28, 25, 23, 0.08);
|
|
}
|
|
|
|
@keyframes mock3d-rotate {
|
|
from {
|
|
transform: rotateY(-12deg) rotateX(4deg);
|
|
}
|
|
to {
|
|
transform: rotateY(12deg) rotateX(4deg);
|
|
}
|
|
}
|
|
|
|
.mock3d-plane {
|
|
animation: mock3d-rotate 8s ease-in-out infinite alternate;
|
|
transform-style: preserve-3d;
|
|
}
|