Comprehensive SEO and UI improvements across site
SEO Improvements: - Add Twitter/OG meta tags to gdpr-compliance.php and terms-of-service.php - Add author bios with E-E-A-T signals to all blog articles - Add breadcrumb schema markup to key pages - Create new service pages: price-monitoring.php, competitive-intelligence.php - Create location pages: london.php, manchester.php, birmingham.php - Update sitemap.xml with new pages UI/CSS Improvements: - Move testimonials section from inline styles to CSS classes - Standardize hero gradients to #144784 → #179e83 across all pages - Unify card border styles to border-left: 4px solid #179e83 - Fix CTA gradient direction consistency on location pages - Standardize breadcrumb colors to #144784 - Replace all purple accent colors (#667eea, #764ba2) with brand colors - Add CSS variables for brand consistency in main.css Code Cleanup: - Delete 6 emergency CSS fix files (button-emergency-fix.css, etc.) - Remove related-articles-fix.css references from blog articles - Consolidate styles into main.css 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
@@ -2032,14 +2032,14 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #179e83;
|
||||
color: #144784;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: #144784;
|
||||
color: #179e83;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -3619,4 +3619,346 @@ main {
|
||||
|
||||
.hero-graphic .data-line-6 {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
UNIFIED COMPONENT STYLES
|
||||
Added for UI consistency across all pages
|
||||
============================================ */
|
||||
|
||||
/* CSS Variables for Brand Consistency */
|
||||
:root {
|
||||
--color-primary: #179e83;
|
||||
--color-primary-dark: #11725e;
|
||||
--color-secondary: #144784;
|
||||
--color-secondary-light: #1a5a9e;
|
||||
--color-accent: #1a5a9e;
|
||||
--gradient-hero: linear-gradient(135deg, #144784 0%, #179e83 100%);
|
||||
--gradient-hero-alt: linear-gradient(135deg, #144784 0%, #1a5a9e 100%);
|
||||
--gradient-cta: linear-gradient(135deg, #144784 0%, #179e83 100%);
|
||||
--color-text: #444444;
|
||||
--color-text-dark: #1a1a1a;
|
||||
--color-text-light: #666666;
|
||||
--color-border: #e1e5e9;
|
||||
--color-bg-light: #f8f9fa;
|
||||
--star-color: #f0c14b;
|
||||
}
|
||||
|
||||
/* Dark Testimonials Section (Homepage) */
|
||||
.testimonials-section-dark {
|
||||
padding: 80px 0;
|
||||
background: var(--gradient-hero-alt);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonials-section-dark .section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.testimonials-section-dark .section-header h2 {
|
||||
color: white;
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.testimonials-section-dark .section-header p {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.testimonials-dark-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.testimonial-card-dark {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 35px;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.testimonial-card-dark:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.testimonial-stars {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.testimonial-stars .star {
|
||||
color: var(--star-color);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.testimonial-card-dark .testimonial-text {
|
||||
font-style: italic;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.7;
|
||||
font-size: 1.05rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonial-author-dark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.testimonial-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonial-author-info .author-name {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonial-author-info .author-role {
|
||||
opacity: 0.8;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonials-cta {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.testimonials-cta .btn-white {
|
||||
background: white;
|
||||
color: var(--color-secondary);
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.testimonials-cta .btn-white:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Unified Location Hero (for location pages) */
|
||||
.location-hero {
|
||||
background: var(--gradient-hero);
|
||||
color: white;
|
||||
padding: 120px 0 80px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.location-hero .hero-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.location-hero h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.location-hero .hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 40px;
|
||||
opacity: 0.95;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.location-hero .hero-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.location-hero .hero-cta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Unified Breadcrumb Styling */
|
||||
.breadcrumb-nav {
|
||||
background: var(--color-bg-light);
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.breadcrumb-nav .breadcrumb-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.breadcrumb-nav .breadcrumb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.breadcrumb-nav .breadcrumb-item:not(:last-child)::after {
|
||||
content: '>';
|
||||
margin-left: 8px;
|
||||
color: var(--color-text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.breadcrumb-nav .breadcrumb-link {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumb-nav .breadcrumb-link:hover {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-nav .breadcrumb-current {
|
||||
color: var(--color-text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Unified Card Styles with Top Border Accent */
|
||||
.unified-card {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-top: 4px solid var(--color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.unified-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.unified-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.unified-card p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Unified CTA Section */
|
||||
.unified-cta {
|
||||
padding: 80px 0;
|
||||
background: var(--gradient-cta);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.unified-cta h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.unified-cta p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 40px;
|
||||
opacity: 0.95;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.unified-cta .cta-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for unified components */
|
||||
@media (max-width: 768px) {
|
||||
.testimonials-dark-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.testimonials-section-dark {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.testimonials-section-dark .section-header h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.location-hero h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.location-hero .hero-stats {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.location-hero .hero-cta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unified-cta h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.unified-cta .cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.testimonial-card-dark {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.testimonial-card-dark .testimonial-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.unified-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user