/** * services.css - Services Hub Page * Holiday Lights Decor - Multi-Franchise Template * * Uses GLOBAL palette from main.css for brand consistency. * Hub role:funnel visitors to dedicated service pages. * * Loaded via:$page_css = ['services.css'] * Dependencies:main.css (global),pages-common.css (breadcrumb,FAQ,section-header) * * @version 12.0.0 (UNIFIED PALETTE) */ /* ========================================================================== SERVICES VARIABLES — mapped to global palette ========================================================================== */ :root{--svc-green:var(--color-primary-dark);--svc-green-mid:#234f3e;--svc-green-light:var(--color-primary);--svc-cranberry:var(--color-secondary);--svc-cranberry-light:#d4253f;--svc-gold:var(--color-gold);--svc-gold-soft:rgba(212,175,55,0.12);--svc-cream:var(--color-bg-alt);--svc-light:var(--color-bg-alt);--svc-border:#e4dfd6;--svc-text:var(--color-text);--svc-text-muted:var(--color-text-muted);--svc-radius:12px;--svc-radius-lg:20px;} /* ========================================================================== HERO — Warm forest green with snow ========================================================================== */ .svc-hero{position:relative;min-height:500px;display:flex;align-items:center;overflow:hidden;background:var(--svc-green);padding-top:var(--header-height);text-align:center;} .svc-hero-bg{position:absolute;inset:0;pointer-events:none;} .svc-hero-image{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0.18;} .svc-hero-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,rgba(212,175,55,0.08) 0%,transparent 50%),radial-gradient(ellipse at 20% 0%,rgba(196,30,58,0.05) 0%,transparent 35%),radial-gradient(ellipse at 80% 0%,rgba(196,30,58,0.05) 0%,transparent 35%),linear-gradient(170deg,var(--svc-green) 0%,var(--svc-green-mid) 100%);} .svc-hero .snow-container{z-index:1;} .svc-hero .container{position:relative;z-index:2;} .svc-hero-content{max-width:700px;margin:0 auto;padding:60px 0 50px;} .svc-hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--svc-gold-soft);border:1px solid rgba(212,175,55,0.2);color:var(--svc-gold);padding:6px 16px;border-radius:50px;font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:20px;} .svc-hero-badge svg{width:14px;height:14px;} .svc-hero h1{font-size:clamp(2rem,4.5vw,2.9rem);color:#fff;font-weight:800;line-height:1.15;margin-bottom:16px;} .svc-hero h1 span{color:var(--svc-gold);} .svc-hero-lead{color:rgba(255,255,255,0.55);font-size:1.05rem;line-height:1.75;margin-bottom:28px;} .svc-hero-metrics{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:var(--svc-radius);padding:16px 8px;max-width:560px;margin:0 auto;} .svc-metric{text-align:center;padding:0 22px;} .svc-metric strong{display:block;font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:var(--svc-gold);line-height:1;margin-bottom:4px;} .svc-metric span{font-size:0.72rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.04em;font-weight:500;} .svc-metric-divider{width:1px;height:32px;background:rgba(255,255,255,0.08);flex-shrink:0;} /* ========================================================================== SERVICE LINES — 4 cards with festive accents ========================================================================== */ .svc-lines{padding:90px 0;background:#fff;} .svc-lines-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .svc-line-card{background:#fff;border:1px solid var(--svc-border);border-radius:var(--svc-radius-lg);padding:32px 28px 28px;text-decoration:none;transition:all 0.3s ease;display:block;position:relative;overflow:hidden;} .svc-line-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity 0.3s;} .svc-line-card:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(45,45,45,0.08);} .svc-line-card:hover::before{opacity:1;} .svc-line-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;} .svc-line-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;} .svc-line-icon svg{width:24px;height:24px;} .svc-line-arrow{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.03);display:flex;align-items:center;justify-content:center;transition:all 0.3s;} .svc-line-arrow svg{width:16px;height:16px;color:var(--svc-text-muted);transition:all 0.3s;} .svc-line-card h3{font-size:1.25rem;color:var(--svc-text);margin-bottom:8px;} .svc-line-card p{font-size:0.88rem;color:var(--svc-text-muted);line-height:1.65;margin-bottom:18px;} .svc-line-tags{display:flex;flex-wrap:wrap;gap:6px;} .svc-line-tags span{font-size:0.72rem;font-weight:600;padding:3px 10px;border-radius:50px;background:rgba(0,0,0,0.03);color:var(--svc-text-muted);transition:all 0.3s;} .svc-line-residential .svc-line-icon{background:var(--svc-green);color:var(--svc-gold);box-shadow:0 4px 12px rgba(26,71,42,0.2);} .svc-line-residential::before{background:linear-gradient(90deg,var(--svc-green),var(--svc-cranberry));} .svc-line-residential:hover{border-color:var(--svc-green-light);} .svc-line-residential:hover .svc-line-arrow{background:rgba(26,71,42,0.08);} .svc-line-residential:hover .svc-line-arrow svg{color:var(--svc-green);} .svc-line-residential:hover .svc-line-tags span{background:rgba(26,71,42,0.06);color:var(--svc-green);} .svc-line-commercial .svc-line-icon{background:#1a1a1a;color:#db9340;box-shadow:0 4px 12px rgba(26,26,26,0.2);} .svc-line-commercial::before{background:linear-gradient(90deg,#1a1a1a,#c47a2a);} .svc-line-commercial:hover{border-color:#c47a2a;} .svc-line-commercial:hover .svc-line-arrow{background:rgba(196,122,42,0.08);} .svc-line-commercial:hover .svc-line-arrow svg{color:#c47a2a;} .svc-line-commercial:hover .svc-line-tags span{background:rgba(196,122,42,0.06);color:#a56520;} .svc-line-municipal .svc-line-icon{background:#0c1a2e;color:#c8a84e;box-shadow:0 4px 12px rgba(12,26,46,0.2);} .svc-line-municipal::before{background:linear-gradient(90deg,#0c1a2e,#c8a84e);} .svc-line-municipal:hover{border-color:#1a3556;} .svc-line-municipal:hover .svc-line-arrow{background:rgba(12,26,46,0.06);} .svc-line-municipal:hover .svc-line-arrow svg{color:#1a3556;} .svc-line-municipal:hover .svc-line-tags span{background:rgba(12,26,46,0.05);color:#1a3556;} .svc-line-permanent .svc-line-icon{background:#1e1535;color:#6b96ff;box-shadow:0 4px 12px rgba(30,21,53,0.2);} .svc-line-permanent::before{background:linear-gradient(90deg,#1e1535,#4a7cff);} .svc-line-permanent:hover{border-color:#4a7cff;} .svc-line-permanent:hover .svc-line-arrow{background:rgba(74,124,255,0.06);} .svc-line-permanent:hover .svc-line-arrow svg{color:#4a7cff;} .svc-line-permanent:hover .svc-line-tags span{background:rgba(74,124,255,0.05);color:#3a5fc0;} /* ========================================================================== WHAT'S INCLUDED — 6 items grid ========================================================================== */ .svc-included{padding:90px 0;background:var(--svc-cream);} .svc-included-header{text-align:center;max-width:600px;margin:0 auto 48px;} .svc-included-header .section-label{display:block;margin-bottom:12px;} .svc-included-header h2{font-size:clamp(1.6rem,3.5vw,2.1rem);color:var(--svc-text);margin-bottom:12px;} .svc-included-header p{font-size:0.95rem;color:var(--svc-text-muted);line-height:1.7;} .svc-included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .svc-included-item{background:#fff;border:1px solid var(--svc-border);border-radius:var(--svc-radius);padding:28px 24px;transition:all 0.3s;} .svc-included-item:hover{border-color:var(--svc-green-light);box-shadow:0 6px 20px rgba(45,45,45,0.05);transform:translateY(-2px);} .svc-included-icon{width:44px;height:44px;background:var(--svc-green);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--svc-gold);} .svc-included-icon svg{width:20px;height:20px;} .svc-included-item h3{font-size:1rem;color:var(--svc-text);margin-bottom:6px;} .svc-included-item p{font-size:0.82rem;color:var(--svc-text-muted);line-height:1.6;} /* ========================================================================== PROCESS — 5 steps with festive markers ========================================================================== */ .svc-process{padding:90px 0;background:#fff;} .svc-process-steps{display:flex;justify-content:center;gap:12px;max-width:960px;margin:0 auto;} .svc-process-step{flex:1;text-align:center;padding:28px 16px;background:var(--svc-cream);border:1px solid var(--svc-border);border-radius:var(--svc-radius);transition:all 0.3s;} .svc-process-step:hover{border-color:var(--svc-green-light);transform:translateY(-2px);box-shadow:0 6px 20px rgba(45,45,45,0.05);} .svc-step-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-family:var(--font-heading);font-size:0.85rem;font-weight:800;color:var(--svc-gold);background:var(--svc-green);border-radius:50%;margin-bottom:14px;box-shadow:0 3px 10px rgba(26,71,42,0.2);} .svc-process-step h3{font-size:0.95rem;color:var(--svc-text);margin-bottom:6px;} .svc-process-step p{font-size:0.8rem;color:var(--svc-text-muted);line-height:1.55;} /* ========================================================================== CTA — Forest green with warm glow ========================================================================== */ .svc-cta{position:relative;padding:80px 0;background:var(--svc-green);text-align:center;overflow:hidden;} .svc-cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 80%,rgba(196,30,58,0.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 20%,rgba(212,175,55,0.06) 0%,transparent 40%);pointer-events:none;} .svc-cta .container{position:relative;z-index:1;} .svc-cta-content{max-width:580px;margin:0 auto;} .svc-cta h2{font-size:clamp(1.5rem,3vw,2rem);color:#fff;margin-bottom:14px;line-height:1.2;} .svc-cta p{font-size:0.95rem;color:rgba(255,255,255,0.55);line-height:1.7;margin-bottom:28px;} .svc-cta-actions{display:flex;flex-direction:column;align-items:center;gap:14px;} .svc-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;background:var(--svc-cranberry);color:#fff;font-weight:700;font-size:0.95rem;border-radius:8px;text-decoration:none;border:2px solid var(--svc-cranberry);transition:all 0.3s;} .svc-cta-btn:hover{background:var(--svc-cranberry-light);border-color:var(--svc-cranberry-light);transform:translateY(-1px);box-shadow:0 6px 20px rgba(196,30,58,0.3);color:#fff;} .svc-cta-btn svg{width:16px;height:16px;} .svc-cta-phone{display:inline-flex;align-items:center;gap:6px;font-size:0.88rem;font-weight:600;color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s;} .svc-cta-phone:hover{color:var(--svc-gold);} .svc-cta-phone svg{width:15px;height:15px;} /* ========================================================================== FAQ OVERRIDE ========================================================================== */ .page-services .faq-section{padding:80px 0;background:#fff;} /* ========================================================================== SERVICE PAGES NAV ========================================================================== */ .svc-pages-nav{padding:50px 0 150px;background:#fff;text-align:center;} .svc-pages-nav h3{font-size:0.95rem;color:var(--svc-text-muted);font-weight:500;margin-bottom:20px;} .svc-pages-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;} .svc-pages-links a{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:1px solid var(--svc-border);border-radius:8px;color:var(--svc-text);font-size:0.88rem;font-weight:500;text-decoration:none;transition:all 0.2s;} .svc-pages-links a:hover{border-color:var(--svc-green-light);color:var(--svc-green);background:rgba(26,71,42,0.03);} .svc-pages-links a svg{width:16px;height:16px;} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1100px){.svc-included-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:991px){.svc-hero{min-height:auto;} .svc-hero-content{padding:50px 0 40px;} .svc-lines-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;} .svc-process-steps{flex-wrap:wrap;gap:10px;} .svc-process-step{flex:1 1 calc(33.33% - 10px);min-width:150px;}} @media (max-width:768px){.svc-lines,.svc-included,.svc-process{padding:60px 0;} .svc-included-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;} .svc-process-steps{flex-direction:column;align-items:center;} .svc-process-step{max-width:360px;width:100%;} .svc-hero-metrics{gap:0;padding:14px 4px;} .svc-metric{padding:0 14px;} .svc-cta{padding:60px 0;}} @media (max-width:480px){.svc-hero h1{font-size:1.7rem;} .svc-hero-metrics{flex-wrap:wrap;gap:10px;padding:12px;} .svc-metric{flex:0 0 calc(50% - 5px);padding:10px 0;} .svc-metric-divider{display:none;} .svc-pages-links{flex-direction:column;align-items:stretch;} .svc-pages-links a{justify-content:center;}} @media(min-width:769px){.svc-lines-grid{grid-template-columns:repeat(3,1fr)!important}}