66 lines
2.3 KiB
CSS
66 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@theme {
|
|
--color-primary: #e68672;
|
|
--color-primary-dark: #d4705e;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
padding-top: 70px;
|
|
}
|
|
|
|
html, body { overflow-x: hidden; }
|
|
img, video, iframe { max-width: 100%; }
|
|
|
|
/* Slideshow fade */
|
|
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
|
|
.slide.active { opacity: 1; z-index: 2; }
|
|
|
|
/* Logo hover */
|
|
#logo { border-radius: 50%; transition: transform 0.5s ease; }
|
|
#logo:hover { transform: scale(1.1); }
|
|
|
|
/* Hamburger open animation (nth-child cannot be expressed inline) */
|
|
.nav-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
|
.nav-hamburger--open span:nth-child(2) { opacity: 0; }
|
|
.nav-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
|
|
|
/* Floating chat dot */
|
|
@keyframes bounce-dot { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
|
|
.fc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #aaa; animation: bounce-dot 1s infinite; }
|
|
|
|
/* Custom select dropdown arrow */
|
|
.custom-select {
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
}
|
|
|
|
/* Pet status badges — class computed at runtime by getStatusClass() */
|
|
.status-available { background: #e6f9ee; color: #1a7a3c; }
|
|
.status-adopted { background: #ffe8e8; color: #c0392b; }
|
|
.status-pending { background: #fff4e0; color: #b36b00; }
|
|
.status-other { background: #f0f0f0; color: #555; }
|
|
|
|
/* Appointment card status badges — class computed by JS template literal */
|
|
.appt-card-status--booked { background: #e3f2fd; color: #1565c0; }
|
|
.appt-card-status--completed { background: #e8f5e9; color: #2e7d32; }
|
|
.appt-card-status--cancelled { background: #fce4ec; color: #c62828; }
|
|
.appt-card-status--pending { background: #fff8e1; color: #f57f17; }
|