From 41f3f9f672db9080277e6ffdb8cf6fd83cb168d7 Mon Sep 17 00:00:00 2001 From: ksloan Date: Mon, 17 Aug 2026 11:56:57 -0400 Subject: [PATCH] feat(site): Replace products page with contact and refresh branding - 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 --- about.html | 6 +- contact.html | 8 +- css/style.css | 201 ++++++++++++++++++++++++++++++++++++++++++-------- index.html | 21 ++++-- products.html | 91 ----------------------- services.html | 26 ++++--- 6 files changed, 209 insertions(+), 144 deletions(-) delete mode 100644 products.html diff --git a/about.html b/about.html index a8c436e..c73617f 100644 --- a/about.html +++ b/about.html @@ -24,7 +24,7 @@
  • Home
  • About
  • Services
    • -
  • Products
    • +
  • Contact
    • @@ -147,7 +147,9 @@ +
  • Services
    • +
  • Contact
    • +

    Contact

    diff --git a/contact.html b/contact.html index 1c73f1a..836915c 100644 --- a/contact.html +++ b/contact.html @@ -22,7 +22,9 @@ @@ -133,7 +135,9 @@

    Quick Links

    diff --git a/css/style.css b/css/style.css index 1a4bb73..34988be 100644 --- a/css/style.css +++ b/css/style.css @@ -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, diff --git a/index.html b/index.html index 12178d6..3d98124 100644 --- a/index.html +++ b/index.html @@ -21,10 +21,10 @@ @@ -34,9 +34,10 @@
    +

    Your Dog Deserves the Best Day Ever

    Trusted dog walking, grooming, and overnight care from people who truly love dogs.

    - Book a Visit + Book a Visit
    @@ -75,6 +76,13 @@ +
    +
    +

    Meet the Team

    +

    We are a small crew of dog lovers dedicated to keeping your pups happy and healthy. Every handler on our team is certified and genuinely passionate about dogs.

    + Learn About Us +
    +
    @@ -121,7 +129,10 @@

    Quick Links

    +
  • About
    • +
  • Services
    • +
  • Contact
    • +

    Contact

    @@ -139,4 +150,4 @@ - \ No newline at end of file + diff --git a/products.html b/products.html deleted file mode 100644 index 5c20d21..0000000 --- a/products.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - Products | Happy Tails Pet Care - - - - - - -
    -
    - - -
    -
    - -
    -
    -
    -

    Our Products

    -

    -
    -
    - -
    -
    - - -
    -
    -
    -
    - -
    -
    -

    Ready to Schedule Your Pup?

    -

    Get in touch today and let us put together the perfect care plan for your dog.

    - Book a Visit -
    -
    -
    - - - - - - \ No newline at end of file diff --git a/services.html b/services.html index 08c3422..0734347 100644 --- a/services.html +++ b/services.html @@ -24,7 +24,7 @@
  • Home
  • About
  • Services
    • -
  • Products
    • +
  • Contact
    • @@ -53,7 +53,7 @@
  • Water Breaks
    • $25/walk
    - Book a Walk + Book a Walk @@ -173,7 +173,7 @@

    Ready to Schedule Your Pup?

    Get in touch today and let us put together the perfect care plan for your dog.

    - Book a Visit + Book a Visit
    @@ -189,8 +189,10 @@

    Quick Links

    +
  • About
    • +
  • Services
    • +
  • Contact
    • +

    Contact

    @@ -208,4 +210,4 @@ - \ No newline at end of file +