sloanops.admin/3031023-xyz-public
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site): Replace products page with contact and refresh branding

Browse Source 
- Remove products.html page and all references from navigation menus
- Replace products navigation links with contact page across all pages
- Update color palette from cool blues to warm amber and teal theme
- Adjust typography font declarations for better font stack support
- Add hero section emoji animation with bounce keyframe
- Implement page hero styling for inner pages
- Add about section preview component styling
- Update service pricing background to use primary color
- Enhance CTA section gradient with new color scheme
- Add testimonial card paw print emoji and styling improvements
- Fix footer quick links formatting and alignment
- Standardize HTML indentation and spacing across pages
This commit is contained in:
ksloan
2026-08-17 11:56:57 -04:00
parent ed28f9e168
commit 41f3f9f672
6 changed files with 209 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+169 -32
View File
@@ -1,26 +1,26 @@
:root {
/* Brand Colors - PRIMARY */
--color-primary: #2563eb; /* Blue-600 */
--color-primary-dark: #1d4ed8; /* Blue-700 */
--color-primary-light: #3b82f6; /* Blue-500 */
/* Brand Colors - Warm Amber/Terracotta Pet Palette */
--color-primary: #b45309; /* Amber-700 */
--color-primary-dark: #92400e; /* Amber-800 */
--color-primary-light: #d97706; /* Amber-600 */
/* Accent Colors */
--color-accent: #10b981; /* Emerald-500 */
--color-accent-dark: #059669; /* Emerald-600 */
/* Accent Colors - Soft Teal for contrast */
--color-accent: #0d9488; /* Teal-600 */
--color-accent-dark: #0f766e; /* Teal-700 */
/* Neutral Colors */
--color-bg: #f8fafc; /* Slate-50 */
--color-surface: #ffffff; /* White */
--color-border: #e2e8f0; /* Slate-200 */
--color-text: #1e293b; /* Slate-800 */
--color-text-secondary:#64748b; /* Slate-500 */
--color-text-muted: #94a3b8; /* Slate-400 */
--color-footer-bg: #0f172a; /* Slate-900 */
--color-footer-text: #94a3b8; /* Slate-400 */
/* Neutral Colors - Warm tones */
--color-bg: #fefce8; /* Warm cream */
--color-surface: #fffbeb; /* Soft ivory */
--color-border: #fde68a; /* Amber-200 */
--color-text: #451a03; /* Deep brown */
--color-text-secondary:#78350f; /* Warm brown */
--color-text-muted: #92400e; /* Muted amber */
--color-footer-bg: #1c1917; /* Stone-900 */
--color-footer-text: #d6d3d1; /* Stone-300 */
/* Typography */
--font-family-heading: Playfair+Display;
--font-family-body: Nunito+Sans;
--font-family-heading: 'Playfair Display', Georgia, serif;
--font-family-body: 'Nunito Sans', system-ui, sans-serif;
/* Layout & Spacing */
--max-width: 1200px;
@@ -248,7 +248,7 @@ img {
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--color-bg) 0%, #f0f9ff 100%);
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
padding: var(--spacing-2xl) 0 var(--spacing-xl);
text-align: center;
}
@@ -256,7 +256,7 @@ img {
.hero h1 {
font-size: 2.75rem;
margin-bottom: var(--spacing-lg);
background: linear-gradient(to right, var(--color-primary), var(--color-accent));
background: linear-gradient(to right, var(--color-primary), #dc2626);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -269,6 +269,17 @@ img {
margin: 0 auto var(--spacing-xl);
}
.hero-emoji {
font-size: 3.5rem;
margin-bottom: var(--spacing-md);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.btn {
display: inline-flex;
align-items: center;
@@ -319,6 +330,29 @@ img {
color: white;
}
.btn-full-width {
width: 100%;
}
/* Page Hero (inner pages) */
.page-hero {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: var(--spacing-2xl) 0;
text-align: center;
}
.page-hero h1 {
color: var(--color-text);
margin-bottom: var(--spacing-md);
}
.page-subheadline {
font-size: 1.125rem;
color: var(--color-text-secondary);
max-width: 650px;
margin: 0 auto;
}
/* Features Section */
.features {
padding: var(--spacing-2xl) 0;
@@ -366,6 +400,24 @@ img {
}
/* About Section */
.about-preview {
padding: var(--spacing-2xl) 0;
background-color: var(--color-surface);
text-align: center;
}
.about-preview h2 {
margin-bottom: var(--spacing-md);
}
.about-preview-text {
max-width: 650px;
margin: 0 auto var(--spacing-xl);
color: var(--color-text-secondary);
font-size: 1.1rem;
line-height: 1.8;
}
.about-content {
padding: var(--spacing-2xl) 0;
background-color: var(--color-bg);
@@ -517,7 +569,7 @@ img {
.service-price {
margin: 0 var(--spacing-lg) var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-sm);
background-color: var(--color-accent);
background-color: var(--color-primary);
color: white;
font-weight: 600;
border-radius: var(--radius-sm);
@@ -587,7 +639,7 @@ img {
/* CTA Section */
.cta-section {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #0d9488 100%);
color: white;
text-align: center;
}
@@ -636,7 +688,18 @@ img {
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-accent);
border-left: 4px solid var(--color-primary);
position: relative;
overflow: hidden;
}
.testimonial-card::after {
content: '🐾';
position: absolute;
bottom: 8px;
right: 12px;
font-size: 1.5rem;
opacity: 0.15;
}
.testimonial-text {
@@ -942,6 +1005,73 @@ img {
border: 1px solid var(--color-border);
}
/* Team Section */
.team-section {
padding: var(--spacing-2xl) 0;
background-color: var(--color-bg);
}
.team-section h2 {
text-align: center;
margin-bottom: var(--spacing-2xl);
color: var(--color-primary);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-lg);
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.team-card {
text-align: center;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal);
}
.team-card:hover {
transform: translateY(-5px);
}
.team-photo {
width: 120px;
height: 120px;
margin: 0 auto var(--spacing-md);
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--color-primary-light);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-info h3 {
margin-bottom: var(--spacing-2xs);
color: var(--color-text);
}
.team-role {
color: var(--color-primary);
font-weight: 600;
margin-bottom: var(--spacing-sm);
font-size: 0.875rem;
}
.team-bio {
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
/* Footer */
.site-footer {
background-color: var(--color-footer-bg);
@@ -1146,14 +1276,14 @@ img {
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-border: #334155;
--color-text: #f8fafc;
--color-text-secondary: #94a3b8;
--color-text-muted: #64748b;
--color-footer-bg: #000000;
--color-footer-text: #94a3b8;
--color-bg: #1c1917;
--color-surface: #292524;
--color-border: #44403c;
--color-text: #fef3c7;
--color-text-secondary: #d6d3d1;
--color-text-muted: #a8a29e;
--color-footer-bg: #0c0a09;
--color-footer-text: #a8a29e;
}
.site-header {
@@ -1162,7 +1292,14 @@ img {
}
.hero {
background: linear-gradient(135deg, var(--color-bg) 0%, #1e293b 100%);
background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #44403c 100%);
}
.hero h1 {
background: linear-gradient(to right, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feature-card,