/* =========================================================== SEO City Page Theme Variation ----------------------------------------------------------- Additive only. Loaded AFTER seo-pages.css so it overrides. Applied to as: seo-g{0-7} seo-a{0-5} seo-h{0-2} chosen deterministically per city slug in seo-page.php, so every city renders a visibly different hero gradient, accent color, and hero layout (plus section order varied in PHP), while staying inside the brand's dark, professional look. The public homepage and global styles are NOT touched. =========================================================== */ /* ---- accent palette (default = brand amber) ---- */ body[class*="seo-a"] { --seo-accent: #f59e0b; --seo-accent-soft: rgba(245,158,11,.14); } body.seo-a0 { --seo-accent: #f59e0b; --seo-accent-soft: rgba(245,158,11,.14); } body.seo-a1 { --seo-accent: #3b82f6; --seo-accent-soft: rgba(59,130,246,.14); } body.seo-a2 { --seo-accent: #10b981; --seo-accent-soft: rgba(16,185,129,.14); } body.seo-a3 { --seo-accent: #14b8a6; --seo-accent-soft: rgba(20,184,166,.14); } body.seo-a4 { --seo-accent: #a855f7; --seo-accent-soft: rgba(168,85,247,.14); } body.seo-a5 { --seo-accent: #ef6c4d; --seo-accent-soft: rgba(239,108,77,.14); } /* ---- hero + cta gradient families ---- */ body.seo-g0 .seo-hero, body.seo-g0 .seo-cta { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } body.seo-g1 .seo-hero, body.seo-g1 .seo-cta { background: linear-gradient(135deg, #0b2b2b 0%, #103d3a 100%); } body.seo-g2 .seo-hero, body.seo-g2 .seo-cta { background: linear-gradient(160deg, #1a1530 0%, #2a2150 100%); } body.seo-g3 .seo-hero, body.seo-g3 .seo-cta { background: linear-gradient(135deg, #0d2018 0%, #143527 100%); } body.seo-g4 .seo-hero, body.seo-g4 .seo-cta { background: linear-gradient(120deg, #0a1a33 0%, #122a52 100%); } body.seo-g5 .seo-hero, body.seo-g5 .seo-cta { background: linear-gradient(160deg, #2a1020 0%, #3d1730 100%); } body.seo-g6 .seo-hero, body.seo-g6 .seo-cta { background: linear-gradient(135deg, #17171b 0%, #29292f 100%); } body.seo-g7 .seo-hero, body.seo-g7 .seo-cta { background: linear-gradient(120deg, #11202e 0%, #1c3550 100%); } /* a faint accent wash on the hero so the accent reads even on dark */ body[class*="seo-g"] .seo-hero { position: relative; } body[class*="seo-g"] .seo-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 120% at 100% 0%, var(--seo-accent-soft) 0%, transparent 45%); } body[class*="seo-g"] .seo-hero > .container { position: relative; z-index: 1; } /* ---- accent applied to interactive + heading elements ---- */ body[class*="seo-a"] .seo-block-text h2 { border-left: 4px solid var(--seo-accent); padding-left: 14px; } body[class*="seo-a"] .seo-icon-wrap:hover { box-shadow: 0 8px 32px var(--seo-accent-soft); border-color: var(--seo-accent); } body[class*="seo-a"] .seo-service-card:hover { border-color: var(--seo-accent); box-shadow: 0 4px 16px var(--seo-accent-soft); } body[class*="seo-a"] .seo-service-card.active { border-color: var(--seo-accent); background: var(--seo-accent-soft); } body[class*="seo-a"] .seo-nearby-card:hover { background: var(--seo-accent); border-color: var(--seo-accent); color: #fff; } body[class*="seo-a"] .btn-accent { background: var(--seo-accent); border-color: var(--seo-accent); color: #0f172a; } body[class*="seo-a"] .breadcrumb a:hover { color: var(--seo-accent); } /* ---- hero layout variants ---- */ /* h0 = default (left aligned, inherited) */ body.seo-h1 .seo-hero .container { text-align: center; } body.seo-h1 .seo-hero h1, body.seo-h1 .seo-hero-sub { margin-left: auto; margin-right: auto; } body.seo-h1 .seo-hero .breadcrumb { justify-content: center; } body.seo-h1 .seo-hero .btn-group { justify-content: center; display: flex; gap: 1rem; flex-wrap: wrap; } body.seo-h2 .seo-hero h1 { border-left: 5px solid var(--seo-accent); padding-left: 20px; } /* ---- local-detail blocks (render only when data present) ---- */ .seo-local { padding: var(--space-4xl) 0; background: var(--color-gray-50); } .seo-local.alt { background: var(--color-white); } .seo-local h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-lg); text-align: center; } .seo-local p.seo-local-lead { max-width: 760px; margin: 0 auto var(--space-2xl); text-align: center; color: var(--color-gray-600); font-size: 1.05rem; line-height: 1.75; } .seo-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); max-width: 900px; margin: 0 auto; } .seo-type-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-top: 3px solid var(--seo-accent, #f59e0b); border-radius: 10px; padding: var(--space-lg); font-weight: 600; color: var(--color-dark); font-size: 1rem; } .seo-areas-wrap { max-width: 820px; margin: 0 auto; text-align: center; } .seo-areas-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; } .seo-area-chip { display: inline-block; padding: var(--space-xs) var(--space-md); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 999px; font-size: 0.9rem; color: var(--color-gray-700); } @media (max-width: 768px) { .seo-types-grid { grid-template-columns: 1fr; } } /* ---- real testimonials ---- */ .seo-reviews { padding: var(--space-4xl) 0; background: var(--color-white); } .seo-reviews h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-2xl); text-align: center; } .seo-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); max-width: 1000px; margin: 0 auto; } .seo-review-card { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-left: 4px solid var(--seo-accent, #f59e0b); border-radius: 12px; padding: var(--space-xl); } .seo-review-stars { color: var(--seo-accent, #f59e0b); letter-spacing: 2px; margin-bottom: var(--space-sm); } .seo-review-text { color: var(--color-gray-700); line-height: 1.7; font-size: 1rem; margin-bottom: var(--space-md); } .seo-review-author { font-weight: 700; color: var(--color-dark); font-size: .95rem; } .seo-review-author span { display: block; font-weight: 500; color: var(--color-gray-500); font-size: .85rem; } /* ---- FAQ ---- */ .seo-faq { padding: var(--space-4xl) 0; background: var(--color-gray-50); } .seo-faq h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-2xl); text-align: center; } .seo-faq-list { max-width: 820px; margin: 0 auto; } .seo-faq-item { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 10px; margin-bottom: var(--space-md); overflow: hidden; } .seo-faq-item summary { cursor: pointer; padding: var(--space-lg); font-weight: 600; color: var(--color-dark); font-size: 1.02rem; list-style: none; position: relative; padding-right: 2.5rem; } .seo-faq-item summary::-webkit-details-marker { display: none; } .seo-faq-item summary::after { content: "+"; position: absolute; right: var(--space-lg); top: 50%; transform: translateY(-50%); color: var(--seo-accent, #f59e0b); font-size: 1.4rem; font-weight: 700; line-height: 1; } .seo-faq-item[open] summary::after { content: "\2212"; } .seo-faq-item[open] summary { border-bottom: 1px solid var(--color-gray-200); } .seo-faq-a { padding: var(--space-lg); color: var(--color-gray-600); line-height: 1.75; font-size: 1rem; } /* ---- city -> state hub link ---- */ .seo-statelink { padding: var(--space-2xl) 0; background: var(--color-white); text-align: center; } .seo-statelink p { color: var(--color-gray-600); font-size: 1.02rem; } .seo-statelink a { color: var(--seo-accent, #f59e0b); font-weight: 700; text-decoration: none; } .seo-statelink a:hover { text-decoration: underline; } a.seo-area-chip:hover { background: var(--seo-accent, #f59e0b); color: #fff; border-color: var(--seo-accent, #f59e0b); }