/* ========================================================================== POLK PEST CONTROL — Global Stylesheet A "premium home-service brand" foundation with a comic/superhero accent. Edit brand colors, fonts and spacing in the :root token block below — everything in the site is built from these variables. ========================================================================== */ /* ---------- Fonts ---------- Anton = heroic, condensed display face for major headlines Bangers = genuine comic-book lettering, used ONLY for small accents (badges, the "Hero Tip" label, numbered eyebrows) — never for body copy or long headlines, so the site doesn't read as a kids' cartoon. Inter = clean, highly-readable body/UI face. Loaded via a in each page's (after preconnect hints), not a CSS @import — @import blocks the browser from discovering and fetching the font stylesheet until this file itself has already been downloaded and parsed, adding a full extra network round-trip before headline text can render in its real font. ------------------------------------------------------------------------- */ /* ========================================================================== BRAND TOKENS — change once, updates everywhere Colors were sampled directly from the Polk Pest Control logo artwork. ========================================================================== */ :root{ /* --- Brand colors --- */ --red: #E31712; --red-dark: #AE0F0C; --red-light: #FDE7E6; --charcoal: #17191B; --charcoal-soft: #23262A; --charcoal-line: #33373C; --green: #2E9E1E; --green-dark: #1E7112; --green-light: #E7F6E3; --yellow: #FFCE00; --yellow-dark: #E0AD00; --cream: #FAF7F0; --cream-deep: #F2EDE1; --white: #FFFFFF; --ink: #1B1B1A; --ink-soft: #4B4B48; --gray-500: #767672; --gray-300: #D8D4C8; --gray-200: #E8E4D8; /* --- Type --- */ --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-comic: 'Bangers', 'Anton', cursive; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- Layout --- */ --container-w: 1220px; --container-pad: 24px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --header-h: 84px; --bottom-bar-h: 64px; /* --- Shadows (comic "offset panel" style) --- */ --shadow-comic-sm: 4px 4px 0 var(--charcoal); --shadow-comic-md: 7px 7px 0 var(--charcoal); --shadow-comic-red: 7px 7px 0 var(--red-dark); --shadow-soft: 0 18px 40px -18px rgba(23,25,27,0.35); --shadow-card: 0 2px 4px rgba(23,25,27,0.06), 0 12px 28px -14px rgba(23,25,27,0.18); /* --- Motion --- */ --ease: cubic-bezier(.22,.9,.32,1); --dur-fast: .18s; --dur-med: .38s; } /* ========================================================================== RESET ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } /* The native [hidden] behavior is easily overridden by our own display:flex/inline-flex utility classes (.btn, footer-social a, etc.), since an author-stylesheet class rule normally wins over the UA default `[hidden]{display:none}` rule. Force it so config-gated elements (social icons, the Google reviews link) truly disappear until main.js reveals them. */ [hidden]{ display: none !important; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; height: auto; } svg{ display: block; } a{ color: inherit; text-decoration: none; } ul, ol{ margin: 0; padding: 0; list-style: none; } button{ font: inherit; cursor: pointer; } h1,h2,h3,h4,p,figure{ margin: 0; } input, textarea, select{ font: inherit; } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; } .skip-link{ position: absolute; left: -9999px; top: 0; background: var(--charcoal); color: var(--white); padding: 14px 20px; z-index: 999; border-radius: 0 0 8px 0; font-weight: 700; } .skip-link:focus{ left: 0; } .visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h1, h2, h3, .h1, .h2, .h3{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.04; color: var(--charcoal); } h1, .h1{ font-size: clamp(2.4rem, 5.4vw, 4.4rem); } h2, .h2{ font-size: clamp(1.9rem, 3.6vw, 3rem); } h3, .h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); } .eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-comic); letter-spacing: 0.04em; font-size: 1.05rem; color: var(--red); } .eyebrow.on-dark{ color: var(--yellow); } .eyebrow.green{ color: var(--green); } p{ color: var(--ink-soft); } .lede{ font-size: 1.15rem; line-height: 1.6; } .text-white{ color: var(--white); } .text-white p, p.text-white{ color: rgba(255,255,255,0.82); } /* ========================================================================== LAYOUT HELPERS ========================================================================== */ .container{ width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); } .section{ padding: 80px 0; } .section-sm{ padding: 56px 0; } @media (max-width: 720px){ .section{ padding: 56px 0; } .section-sm{ padding: 40px 0; } } .section-head{ max-width: 720px; margin: 0 0 44px; } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } .section-head h2{ margin-top: 10px; } .section-head p{ margin-top: 14px; } .bg-charcoal{ background: var(--charcoal); } .bg-charcoal-soft{ background: var(--charcoal-soft); } .bg-cream-deep{ background: var(--cream-deep); } .bg-white{ background: var(--white); } .bg-green{ background: var(--green); } .grid{ display: grid; gap: 28px; } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } .grid-4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px){ .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } } /* subtle halftone texture, used as a decorative layer only */ .halftone{ background-image: radial-gradient(circle, rgba(23,25,27,0.16) 1.4px, transparent 1.4px); background-size: 11px 11px; } .halftone.on-dark{ background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1.4px, transparent 1.4px); } .halftone.red{ background-image: radial-gradient(circle, rgba(227,23,18,0.22) 1.6px, transparent 1.6px); } /* ========================================================================== BUTTONS / CTA SYSTEM ========================================================================== */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-family: var(--font-display); letter-spacing: 0.02em; font-size: 1rem; text-transform: uppercase; border: 2px solid transparent; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); white-space: nowrap; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: var(--red); color: var(--white); box-shadow: var(--shadow-comic-red); } .btn-primary:hover{ background: var(--red-dark); transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--red-dark); } .btn-primary:active{ transform: translate(1px,1px); box-shadow: 3px 3px 0 var(--red-dark); } .btn-secondary{ background: var(--white); color: var(--charcoal); border-color: var(--charcoal); } .btn-secondary:hover{ background: var(--charcoal); color: var(--white); } .btn-secondary.on-dark{ background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); } .btn-secondary.on-dark:hover{ background: var(--white); color: var(--charcoal); border-color: var(--white); } .btn-green{ background: var(--green); color: var(--white); box-shadow: 7px 7px 0 var(--green-dark); } .btn-green:hover{ background: var(--green-dark); transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--green-dark); } .btn-block{ width: 100%; } .btn-lg{ padding: 18px 34px; font-size: 1.08rem; } .btn-sm{ padding: 11px 20px; font-size: 0.85rem; } @media (max-width: 420px){ /* Longer CTA labels ("Get A Free Property Evaluation") can out-width a 360-390px phone screen before they'd naturally wrap — letting the label wrap onto two lines here is safer than forcing an overflow. */ .btn{ white-space: normal; text-align: center; } .btn-lg{ padding: 16px 22px; font-size: 0.98rem; } } .btn svg{ width: 18px; height: 18px; flex-shrink: 0; } .cta-row{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } /* ========================================================================== HEADER / NAVIGATION ========================================================================== */ .site-header{ position: sticky; top: 0; z-index: 200; background: rgba(250,247,240,0.94); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--gray-300); transition: box-shadow var(--dur-med) var(--ease), padding var(--dur-med) var(--ease); } .site-header.is-scrolled{ box-shadow: 0 8px 24px -16px rgba(0,0,0,0.35); } .header-inner{ max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img{ height: 52px; width: auto; } .brand-word{ font-family: var(--font-display); line-height: 0.92; text-transform: uppercase; } .brand-word .line1{ display:block; font-size: 1.28rem; color: var(--red); letter-spacing: 0.02em; } .brand-word .line2{ display:block; font-size: 1.28rem; color: var(--charcoal); letter-spacing: 0.02em; } .main-nav{ display: flex; min-width: 0; } .main-nav ul{ display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); } .main-nav a{ font-weight: 600; font-size: 0.98rem; color: var(--charcoal); position: relative; padding: 6px 2px; white-space: nowrap; } .main-nav a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--red); border-radius: 2px; transition: right var(--dur-fast) var(--ease); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right: 0; } .main-nav a[aria-current="page"]{ color: var(--red); } .header-actions{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-call{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.02rem; color: var(--charcoal); letter-spacing: 0.01em; } .header-call svg{ width: 20px; height: 20px; color: var(--red); } .nav-toggle{ display: none; background: transparent; border: none; padding: 8px; width: 46px; height: 46px; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content: ""; display: block; width: 24px; height: 3px; background: var(--charcoal); border-radius: 2px; position: relative; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease); } .nav-toggle span::before{ position: absolute; top: -8px; } .nav-toggle span::after{ position: absolute; top: 8px; } .nav-toggle[aria-expanded="true"] span{ background: transparent; } .nav-toggle[aria-expanded="true"] span::before{ top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after{ top: 0; transform: rotate(-45deg); } .mobile-panel{ position: fixed; inset: var(--header-h) 0 0 0; background: var(--cream); z-index: 190; padding: 24px var(--container-pad) 32px; overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .mobile-panel.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-panel ul{ display: flex; flex-direction: column; } .mobile-panel a{ display: block; padding: 16px 4px; font-family: var(--font-display); font-size: 1.65rem; text-transform: uppercase; color: var(--charcoal); border-bottom: 1px solid var(--gray-300); } .mobile-panel a[aria-current="page"]{ color: var(--red); } .mobile-panel .cta-row{ margin-top: 26px; flex-direction: column; align-items: stretch; } .mobile-panel .cta-row .btn{ width: 100%; } /* Switch to the hamburger well before the header actually runs out of room: logo + 7 nav links + call link + CTA button get cramped in the ~940-1150px "small laptop / tablet landscape" range long before the grid visibly overflows. Verified against real rendering — see README. */ @media (max-width: 1220px){ .main-nav, .header-call{ display: none; } .nav-toggle{ display: inline-flex; } } @media (max-width: 520px){ .brand-word .line1, .brand-word .line2{ font-size: 1.05rem; } .brand img{ height: 44px; } .header-actions{ gap: 8px; } /* The sticky mobile action bar already repeats this CTA at the bottom of the screen on every phone-width page, so the header copy of it is dropped here rather than forcing an overflow-prone squeeze. */ .header-actions .btn-primary{ display: none; } } /* Sticky mobile bottom action bar */ .mobile-actionbar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; display: none; grid-template-columns: 1fr 1fr; background: var(--charcoal); border-top: 2px solid var(--red); padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); gap: 10px; } .mobile-actionbar a{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; font-family: var(--font-display); text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.02em; } .mobile-actionbar .call{ background: var(--white); color: var(--charcoal); } .mobile-actionbar .eval{ background: var(--red); color: var(--white); } .mobile-actionbar svg{ width: 18px; height: 18px; } @media (max-width: 940px){ .mobile-actionbar{ display: grid; } body{ padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom)); } } /* ========================================================================== HERO ========================================================================== */ .hero{ position: relative; background: var(--charcoal); overflow: hidden; padding: 64px 0 84px; } .hero-burst{ position: absolute; top: -180px; right: -160px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(227,23,18,0.55) 0%, rgba(227,23,18,0) 70%); pointer-events: none; } .hero-halftone{ position: absolute; inset: 0; opacity: 0.5; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 60%); } .hero-inner{ position: relative; z-index: 2; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; } .hero-copy .eyebrow{ margin-bottom: 14px; } .hero-copy h1{ color: var(--white); font-size: clamp(2.6rem, 5.6vw, 4.6rem); } .hero-copy h1 .accent{ color: var(--red); -webkit-text-stroke: 1px rgba(255,255,255,0.15); } .hero-sub{ font-family: var(--font-display); text-transform: uppercase; color: var(--yellow); font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: 0.03em; margin-top: 16px; } .hero-copy p.lede{ color: rgba(255,255,255,0.78); margin-top: 18px; max-width: 46ch; } .hero-copy .cta-row{ margin-top: 30px; } .trust-strip{ margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.9); text-transform: uppercase; } .trust-strip span{ display: flex; align-items: center; gap: 8px; } .trust-strip svg{ width: 16px; height: 16px; color: var(--yellow); flex-shrink: 0; } .hero-visual{ position: relative; display: flex; align-items: flex-end; justify-content: center; } .hero-visual .scene{ position: relative; width: 100%; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-soft); } .hero-visual .mascot-pop{ position: absolute; left: -6%; bottom: -6%; width: 58%; z-index: 3; filter: drop-shadow(0 22px 20px rgba(0,0,0,0.45)); } .hero-visual .comic-badge{ position: absolute; top: 6%; right: 4%; z-index: 4; } /* generic "reveal on load" for hero elements — subtle, brief, respectful of reduced motion */ .reveal-up{ opacity: 0; transform: translateY(16px); animation: revealUp var(--dur-med) var(--ease) forwards; } @keyframes revealUp{ to{ opacity: 1; transform: translateY(0);} } .delay-1{ animation-delay: .08s; } .delay-2{ animation-delay: .16s; } .delay-3{ animation-delay: .24s; } .delay-4{ animation-delay: .32s; } @media (prefers-reduced-motion: reduce){ .reveal-up{ opacity: 1; transform: none; animation: none; } } @media (max-width: 940px){ .hero-inner{ grid-template-columns: 1fr; } .hero-visual{ order: -1; max-width: 420px; margin: 0 auto; } .hero-copy p.lede{ max-width: none; } } /* ========================================================================== MEDIA / PHOTO PLACEHOLDERS Tasteful stand-ins for real photography. Swap the / background inside .media-frame with real photos when available — each is clearly labeled in the HTML with an editable comment. ========================================================================== */ .media-frame{ position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; } .media-frame img{ width: 100%; height: 100%; object-fit: cover; } .media-frame.ph{ display: flex; align-items: flex-end; min-height: 220px; background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.10), transparent 40%), linear-gradient(135deg, var(--charcoal-soft), var(--charcoal)); } .media-frame.ph.green-tone{ background: radial-gradient(circle at 80% 10%, rgba(255,255,255,0.10), transparent 45%), linear-gradient(135deg, var(--green-dark), var(--green)); } .media-frame.ph .ph-pattern{ position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.16) 1.4px, transparent 1.4px); background-size: 14px 14px; opacity: 0.55; } .media-frame.ph .ph-label{ position: relative; z-index: 2; margin: 18px; padding: 10px 14px; border-radius: 10px; background: rgba(23,25,27,0.55); border: 1px dashed rgba(255,255,255,0.5); color: var(--white); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; max-width: 88%; } .media-frame.ph .ph-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); width: 74px; height: 74px; color: rgba(255,255,255,0.5); z-index: 1; } /* ========================================================================== SERVICE CARDS ========================================================================== */ .service-card{ position: relative; background: var(--white); border-radius: var(--radius-md); padding: 34px 28px 30px; border: 2px solid var(--charcoal); box-shadow: var(--shadow-comic-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .service-card:hover{ transform: translate(-3px,-3px); box-shadow: 10px 10px 0 var(--charcoal); } .service-card .icon-badge{ width: 62px; height: 62px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--red-light); color: var(--red); } .service-card.green .icon-badge{ background: var(--green-light); color: var(--green); } .service-card .icon-badge svg{ width: 32px; height: 32px; } .service-card h3{ margin-bottom: 10px; } .service-card p{ margin-bottom: 20px; } .service-card .card-link{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); text-transform: uppercase; font-size: 0.88rem; color: var(--red); } .service-card.green .card-link{ color: var(--green-dark); } .service-card .card-link svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); } .service-card:hover .card-link svg{ transform: translateX(4px); } .service-card .burst-hover{ position: absolute; top: -14px; right: -14px; width: 46px; height: 46px; opacity: 0; transform: scale(0.6) rotate(-10deg); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); color: var(--yellow); } .service-card:hover .burst-hover{ opacity: 1; transform: scale(1) rotate(0deg); } /* ========================================================================== PROCESS STEPS (evaluation section) ========================================================================== */ .process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 42px; } @media (max-width: 940px){ .process-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } } .process-step{ background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); padding: 26px 22px; } .process-step .num{ font-family: var(--font-comic); color: var(--yellow); font-size: 1.5rem; letter-spacing: 0.02em; } .process-step h3{ color: var(--white); margin-top: 10px; } .process-step p{ margin-top: 8px; font-size: 0.95rem; } .process-step-connector{ display: none; } /* ========================================================================== PEST GRID ("Meet the Bad Guys") ========================================================================== */ .pest-grid{ display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; margin-top: 40px; } @media (max-width: 940px){ .pest-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 560px){ .pest-grid{ grid-template-columns: repeat(2,1fr); } } .pest-chip{ background: var(--charcoal-soft); border: 1px solid var(--charcoal-line); border-radius: var(--radius-md); padding: 22px 14px 18px; text-align: center; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .pest-chip:hover{ transform: translateY(-4px); border-color: var(--red); } .pest-chip .pest-icon{ width: 44px; height: 44px; margin: 0 auto 12px; color: var(--red); } .pest-chip span{ display: block; color: var(--white); font-weight: 700; font-size: 0.92rem; } /* ========================================================================== MASCOT SPEECH BUBBLE ("Hero Tip") ========================================================================== */ .hero-tip{ display: flex; align-items: flex-start; gap: 18px; background: var(--white); border: 2px solid var(--charcoal); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-comic-sm); max-width: 480px; } .hero-tip img{ width: 54px; height: auto; flex-shrink: 0; } .hero-tip .bubble-label{ font-family: var(--font-comic); color: var(--red); font-size: 1.1rem; letter-spacing: 0.02em; display: block; margin-bottom: 4px; } .hero-tip p{ color: var(--ink); font-size: 0.95rem; margin: 0; } /* ========================================================================== LOCAL AREA SECTION ========================================================================== */ .area-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; } @media (max-width: 560px){ .area-list{ grid-template-columns: 1fr; } } .area-item{ display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: var(--radius-sm); padding: 16px 18px; border: 1px solid var(--gray-300); font-weight: 700; font-family: var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; font-size: 0.95rem; } .area-item svg{ width: 20px; height: 20px; color: var(--red); flex-shrink: 0; } /* ========================================================================== REVIEWS Not currently used on any page (no verified reviews exist yet — see CONTENT-NEEDED.md) but kept ready to go: once real Google reviews are available, rebuild the homepage reviews section with `.review-card` markup instead of designing it from scratch. ========================================================================== */ .review-card{ background: var(--white); border-radius: var(--radius-md); padding: 26px 24px; border: 1px solid var(--gray-300); box-shadow: var(--shadow-card); } .review-card .stars{ color: var(--yellow); display: flex; gap: 3px; margin-bottom: 14px; } .review-card .stars svg{ width: 18px; height: 18px; } .review-card blockquote{ margin: 0 0 16px; font-size: 0.98rem; color: var(--ink); font-style: italic; } .review-card .reviewer{ font-weight: 700; font-size: 0.9rem; } .review-card .reviewer span{ display: block; font-weight: 500; color: var(--gray-500); font-size: 0.82rem; } /* ========================================================================== ABOUT PREVIEW / TEAM / TRUCK ========================================================================== */ .split{ display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } @media (max-width: 860px){ .split{ grid-template-columns: 1fr; gap: 32px; } } .split.reverse .split-media{ order: 2; } @media (max-width: 860px){ .split.reverse .split-media{ order: -1; } } .badge-list{ margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .badge-list li{ display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; color: var(--ink-soft); } .badge-list svg{ width: 20px; height: 20px; color: var(--green); flex-shrink: 0; margin-top: 2px; } /* ========================================================================== FORM (Free Evaluation) ========================================================================== */ .form-card{ background: var(--white); border-radius: var(--radius-lg); border: 2px solid var(--charcoal); box-shadow: var(--shadow-comic-md); padding: 36px; } @media (max-width: 560px){ .form-card{ padding: 24px 20px; } } .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 620px){ .form-row{ grid-template-columns: 1fr; } } .field{ margin-bottom: 20px; } .field label{ display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 7px; color: var(--charcoal); } .field .req{ color: var(--red); } .field input, .field select, .field textarea{ width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--gray-300); background: var(--cream); font-size: 1rem; color: var(--ink); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--red); background: var(--white); outline: none; } .field textarea{ min-height: 120px; resize: vertical; } .field-hint{ font-size: 0.8rem; color: var(--gray-500); margin-top: 6px; } .field-error{ font-size: 0.82rem; color: var(--red-dark); margin-top: 6px; display: none; font-weight: 600; } .field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--red); } .field.has-error .field-error{ display: block; } /* honeypot spam trap — never shown to real visitors */ .hp-field{ position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; } .form-status{ border-radius: 10px; padding: 16px 18px; font-weight: 600; font-size: 0.95rem; margin-bottom: 22px; display: none; } .form-status.success{ display: block; background: var(--green-light); color: var(--green-dark); } .form-status.error{ display: block; background: var(--red-light); color: var(--red-dark); } .form-status[hidden]{ display: none !important; } /* ========================================================================== FAQ ========================================================================== */ .faq-category{ margin-bottom: 40px; } .faq-category h3{ margin-bottom: 16px; color: var(--red); } .faq-item{ border-bottom: 1px solid var(--gray-300); } .faq-item summary{ list-style: none; cursor: pointer; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 1.02rem; color: var(--charcoal); } .faq-item summary::-webkit-details-marker{ display: none; } .faq-item summary .plus{ flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--charcoal); display: flex; align-items: center; justify-content: center; position: relative; } .faq-item summary .plus::before, .faq-item summary .plus::after{ content: ""; position: absolute; background: var(--charcoal); transition: transform var(--dur-fast) var(--ease); } .faq-item summary .plus::before{ width: 12px; height: 2px; } .faq-item summary .plus::after{ width: 2px; height: 12px; } .faq-item[open] summary .plus::after{ transform: rotate(90deg) scaleY(0); } .faq-item .faq-answer{ padding: 0 0 20px; color: var(--ink-soft); max-width: 68ch; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer{ background: var(--charcoal); color: rgba(255,255,255,0.75); padding: 64px 0 28px; } .footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); } @media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } } .footer-brand .brand{ margin-bottom: 14px; } .footer-brand .brand-word .line1{ color: var(--red); } .footer-brand .brand-word .line2{ color: var(--white); } .footer-brand p{ color: rgba(255,255,255,0.6); font-size: 0.92rem; max-width: 32ch; } .footer-col h4{ font-family: var(--font-display); text-transform: uppercase; color: var(--white); font-size: 0.95rem; letter-spacing: 0.03em; margin-bottom: 16px; } .footer-col ul{ display: flex; flex-direction: column; gap: 10px; } .footer-col a{ font-size: 0.92rem; color: rgba(255,255,255,0.68); transition: color var(--dur-fast); } .footer-col a:hover{ color: var(--yellow); } .footer-cta .btn{ margin-top: 14px; } .footer-phone{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; color: var(--white); margin-bottom: 6px; } .footer-phone svg{ width: 20px; height: 20px; color: var(--red); } .footer-social{ display: flex; gap: 12px; margin-top: 16px; } .footer-social a{ width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; } .footer-social svg{ width: 17px; height: 17px; } .footer-bottom{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 0.82rem; color: rgba(255,255,255,0.48); } .footer-bottom a{ color: rgba(255,255,255,0.6); } .footer-bottom a:hover{ color: var(--yellow); } .footer-bottom-links{ display: flex; gap: 18px; flex-wrap: wrap; } /* ========================================================================== BREADCRUMBS ========================================================================== */ .breadcrumbs{ padding: 18px 0; font-size: 0.85rem; color: var(--gray-500); } .breadcrumbs ol{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .breadcrumbs a{ color: var(--gray-500); } .breadcrumbs a:hover{ color: var(--red); } .breadcrumbs li:not(:last-child)::after{ content: "/"; margin-left: 6px; color: var(--gray-300); } .breadcrumbs li[aria-current]{ color: var(--charcoal); font-weight: 600; } /* ========================================================================== PAGE HERO (interior pages) ========================================================================== */ .page-hero{ background: var(--charcoal); padding: 52px 0 64px; position: relative; overflow: hidden; } .page-hero .eyebrow{ margin-bottom: 12px; } .page-hero h1{ color: var(--white); max-width: 16ch; } .page-hero p.lede{ color: rgba(255,255,255,0.78); margin-top: 16px; max-width: 60ch; } .page-hero .cta-row{ margin-top: 26px; } /* ========================================================================== CARDS: generic content card, used on service/lawn/mosquito pages ========================================================================== */ .content-card{ background: var(--white); border-radius: var(--radius-md); padding: 28px; border: 1px solid var(--gray-300); } .content-card h3{ margin-bottom: 10px; } .content-card ul{ margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .content-card ul li{ display: flex; gap: 10px; align-items: flex-start; font-size: 0.96rem; color: var(--ink-soft); } .content-card ul li svg{ width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 3px; } /* ========================================================================== COMIC DECOR (SVG bursts / speech shapes reused across pages) ========================================================================== */ .comic-burst-shape{ filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); } /* ========================================================================== 404 PAGE ========================================================================== */ .error-page{ min-height: 70vh; display: flex; align-items: center; background: var(--charcoal); position: relative; overflow: hidden; } .error-inner{ position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto; padding: 80px var(--container-pad); } .error-inner img{ width: 160px; margin: 0 auto 24px; } .error-inner h1{ color: var(--white); font-size: clamp(2rem,6vw,3.2rem); } .error-inner p{ color: rgba(255,255,255,0.72); margin-top: 14px; font-size: 1.05rem; } .error-inner .cta-row{ margin-top: 30px; justify-content: center; } .error-code{ font-family: var(--font-comic); color: var(--red); font-size: 1.4rem; letter-spacing: 0.04em; } /* ========================================================================== LEGAL PAGES ========================================================================== */ .legal-content{ max-width: 760px; } .legal-content h2{ margin-top: 40px; margin-bottom: 14px; font-size: 1.4rem; } .legal-content h2:first-child{ margin-top: 0; } .legal-content p{ margin-bottom: 14px; } .legal-content ul{ margin: 0 0 14px 0; padding-left: 20px; list-style: disc; } .legal-content li{ margin-bottom: 8px; color: var(--ink-soft); } .legal-updated{ font-size: 0.85rem; color: var(--gray-500); margin-bottom: 30px; font-style: italic; } /* ========================================================================== MISC UTILITIES ========================================================================== */ .mt-0{ margin-top: 0 !important; } .center-text{ text-align: center; } .max-w-content{ max-width: 640px; } .scroll-reveal{ opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .scroll-reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .scroll-reveal{ opacity: 1; transform: none; transition: none; } } /* ======================================================================== FINAL ART-DIRECTION PASS — brings the production build closer to the approved comic/superhero mockup while preserving accessibility and layout. ======================================================================== */ /* Dark comic header from approved mockup */ .site-header{ background: rgba(9,11,13,.97); border-bottom: 1px solid rgba(255,255,255,.10); backdrop-filter: saturate(130%) blur(10px); } .site-header.is-scrolled{ box-shadow: 0 12px 34px -16px rgba(0,0,0,.78); } .brand-word .line1{ color: var(--red); } .brand-word .line2{ color: var(--white); } .main-nav a{ color: rgba(255,255,255,.92); } .main-nav a:hover{ color: var(--white); } .main-nav a[aria-current="page"]{ color: var(--white); } .header-call{ color: var(--yellow); } .header-call svg{ color: var(--yellow); } .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ background: var(--white); } .mobile-panel{ background: #0c0e10; } .mobile-panel a{ color: var(--white); border-bottom-color: rgba(255,255,255,.12); } .mobile-panel a[aria-current="page"]{ color: var(--red); } /* Squarer home-service CTAs like the approved reference */ .btn{ border-radius: 7px; } .mobile-actionbar a{ border-radius: 7px; } /* Hero: real branded scene + stronger comic composition */ .hero{ padding: 0; background: #0d0f11; min-height: 610px; } .hero::before{ content:""; position:absolute; inset:0 auto 0 0; width:58%; z-index:0; pointer-events:none; background: radial-gradient(circle at 0 18%, rgba(227,23,18,.24), transparent 26%), linear-gradient(90deg, rgba(9,11,13,1) 0%, rgba(9,11,13,.98) 68%, rgba(9,11,13,.55) 88%, transparent 100%); } .hero-burst{ width:720px; height:720px; top:-250px; right:36%; opacity:.55; } .hero-inner{ min-height: 610px; grid-template-columns: .88fr 1.12fr; gap: 0; align-items: stretch; } .hero-copy{ position:relative; z-index:4; align-self:center; padding:64px 46px 64px 0; } .hero-copy h1{ font-family: var(--font-comic); font-size: clamp(3rem, 6vw, 5.6rem); line-height:.92; letter-spacing:.015em; text-shadow: 4px 5px 0 rgba(0,0,0,.35); } .hero-copy h1 .accent{ color: var(--red); -webkit-text-stroke: 1px rgba(0,0,0,.4); text-shadow: 4px 5px 0 #5f0906; } .hero-copy .eyebrow{ color:var(--yellow); } .hero-sub{ display:inline-block; background:var(--yellow); color:#111; padding:7px 12px; margin-top:18px; transform:skew(-4deg); box-shadow:4px 4px 0 rgba(0,0,0,.45); } .hero-copy p.lede{ color:rgba(255,255,255,.91); } .hero-visual{ min-width:0; position:relative; } .hero-visual .scene{ position:absolute; inset:0; width:calc(100% + max(0px, (100vw - var(--container-w))/2)); height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; } .hero-photo-frame picture,.hero-photo-frame img{ width:100%; height:100%; } .hero-photo-frame img{ object-fit:cover; object-position:center center; } .hero-photo-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,11,13,.48) 0%, rgba(9,11,13,.05) 26%, transparent 54%); pointer-events:none; } /* Services: cleaner custom comic panels rather than SaaS cards */ .services-showcase{ position:relative; background: radial-gradient(circle, rgba(23,25,27,.09) 1.2px, transparent 1.2px) 0 0/13px 13px, #fbfaf6; } .services-showcase .section-head h2{ font-family:var(--font-comic); letter-spacing:.02em; } .services-showcase .grid{ align-items:stretch; } .service-card{ border:0; border-radius:3px; box-shadow:0 10px 24px -15px rgba(0,0,0,.45), 5px 6px 0 #d9d5cc; padding:32px 28px 28px; overflow:visible; } .service-card:nth-child(1),.service-card:nth-child(3){ border-top:5px solid var(--red); } .service-card:nth-child(2){ border-top:5px solid var(--green); } .service-card:hover{ transform:translateY(-5px); box-shadow:0 16px 32px -18px rgba(0,0,0,.5), 7px 8px 0 #d9d5cc; } .service-card .icon-badge{ border-radius:50%; width:70px; height:70px; } .hero-tip-inline{ margin:34px 0 0 auto; max-width:430px; position:relative; } .hero-tip-inline::before{ content:""; position:absolute; left:38px; bottom:-14px; width:22px; height:22px; background:var(--white); border-right:2px solid var(--charcoal); border-bottom:2px solid var(--charcoal); transform:rotate(45deg); } .hero-tip-inline img{ width:66px; margin-top:-18px; } /* Evaluation flow closer to the approved infographic */ .evaluation-showcase{ background:#111416; position:relative; overflow:hidden; } .evaluation-showcase::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 88% 45%, rgba(227,23,18,.16), transparent 28%); } .evaluation-showcase .container{ position:relative; z-index:2; } .evaluation-showcase .section-head{ max-width:900px; } .evaluation-showcase .section-head h2{ font-family:var(--font-comic); font-size:clamp(2.4rem,4.5vw,4.2rem); } .process-grid{ gap:0; margin-top:34px; } .process-step{ position:relative; background:transparent; border:0; border-radius:0; padding:18px 26px 18px; text-align:center; } .process-step:not(:last-child)::after{ content:"→"; position:absolute; right:-13px; top:55px; color:var(--white); font:700 2.2rem/1 var(--font-display); z-index:4; } .process-step .num{ display:block; font-size:1.45rem; } .process-icon{ width:74px; height:74px; border-radius:50%; margin:8px auto 14px; display:flex; align-items:center; justify-content:center; color:var(--white); border:3px solid var(--green); background:#171b1d; box-shadow:0 0 0 5px rgba(255,255,255,.05); } .process-step:nth-child(2) .process-icon,.process-step:nth-child(4) .process-icon{ border-color:var(--yellow); } .process-icon svg{ width:36px; height:36px; } .process-step h3{ font-size:1.08rem; } .process-step p{ color:rgba(255,255,255,.72); font-size:.88rem; } .process-cta{ display:flex; justify-content:flex-end; margin-top:30px; } .comic-starburst-cta{ width:250px; min-height:126px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 34px; color:var(--white); background:var(--red); clip-path:polygon(50% 0,59% 16%,73% 5%,76% 23%,94% 17%,87% 35%,100% 45%,84% 55%,96% 72%,77% 75%,75% 96%,60% 84%,50% 100%,40% 84%,25% 96%,23% 76%,4% 73%,16% 55%,0 45%,14% 35%,6% 17%,24% 23%,28% 5%,41% 16%); filter:drop-shadow(6px 8px 0 rgba(0,0,0,.45)); transition:transform var(--dur-fast) var(--ease); } .comic-starburst-cta:hover{ transform:scale(1.035) rotate(-1deg); } .comic-starburst-cta span{ font:400 1.15rem/1 var(--font-comic); } .comic-starburst-cta strong{ color:var(--yellow); font:400 1.85rem/.95 var(--font-comic); text-transform:uppercase; } /* Meet the bad guys: light, circular, easy to scan */ .pest-showcase{ background: radial-gradient(circle, rgba(23,25,27,.08) 1.2px, transparent 1.2px) 0 0/14px 14px, var(--cream); } .pest-showcase .section-head{ margin-bottom:18px; } .pest-showcase .section-head h2{ font-family:var(--font-comic); font-size:clamp(2.2rem,4vw,3.5rem); } .pest-chip{ background:transparent; border:0; padding:10px 8px; } .pest-chip:hover{ border-color:transparent; transform:translateY(-5px); } .pest-chip .pest-icon{ width:98px; height:98px; padding:25px; margin-bottom:12px; border-radius:50%; background:#ead9bd; color:#17191b; border:4px solid #fff; box-shadow:0 5px 18px -10px rgba(0,0,0,.55); } .pest-chip:nth-child(2n) .pest-icon{ background:#d9c8a8; } .pest-chip span{ color:var(--charcoal); font-family:var(--font-display); text-transform:uppercase; } /* Lawn: strong green panel + real service photo */ .lawn-showcase{ background:#f4f0e6; padding:0; } .lawn-showcase .container{ max-width:none; padding:0; } .lawn-showcase .split{ gap:0; min-height:520px; } .lawn-showcase .split-copy{ background:linear-gradient(135deg,#194d14,#267c1d); color:var(--white); padding:64px max(34px, calc((100vw - var(--container-w))/2)); padding-right:56px; } .lawn-showcase .split-copy h2,.lawn-showcase .split-copy p,.lawn-showcase .badge-list li{ color:var(--white); } .lawn-showcase .split-copy h2{ font-family:var(--font-comic); font-size:clamp(2.6rem,4vw,4rem); } .lawn-showcase .split-copy .eyebrow{ color:var(--yellow); } .lawn-showcase .badge-list svg{ color:var(--yellow); } .lawn-showcase .split-media,.lawn-showcase .photo-frame{ height:100%; min-height:520px; border-radius:0; } .photo-frame picture,.photo-frame img{ width:100%; height:100%; } .photo-frame img{ object-fit:cover; } /* Mosquito: darker, premium outdoor-treatment feel */ .mosquito-showcase{ background:#0d1115; padding:0; } .mosquito-showcase .container{ max-width:none; padding:0; } .mosquito-showcase .split{ gap:0; min-height:500px; } .mosquito-showcase .split-copy{ padding:64px max(34px, calc((100vw - var(--container-w))/2)); padding-left:56px; } .mosquito-showcase .split-copy h2{ font-family:var(--font-comic); font-size:clamp(2.6rem,4vw,4rem); } .mosquito-showcase .split-media,.mosquito-showcase .photo-frame{ height:100%; min-height:500px; border-radius:0; } .mosquito-photo{ position:relative; } .mosquito-target{ position:absolute; right:7%; top:50%; transform:translateY(-50%); width:115px; height:115px; border:3px solid var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--red); background:rgba(7,9,12,.34); box-shadow:0 0 0 14px rgba(227,23,18,.08); } .mosquito-target::before,.mosquito-target::after{ content:""; position:absolute; background:var(--red); } .mosquito-target::before{ width:150%; height:2px; } .mosquito-target::after{ width:2px; height:150%; } .mosquito-target svg{ width:54px; height:54px; } /* Local area is intentionally calmer between the big art-directed panels */ .local-showcase{ background:#f4f0e6; } .local-showcase .area-item{ border:0; box-shadow:0 7px 18px -14px rgba(0,0,0,.45); border-left:4px solid var(--red); } /* About + Hero Mobile: real brand photography, no placeholders */ .about-showcase{ background:#fff; } .about-showcase .photo-frame,.truck-showcase .photo-frame{ aspect-ratio:4/3; } .about-showcase .photo-frame img,.truck-showcase .photo-frame img{ object-fit:cover; } .truck-showcase{ background:#f4f0e6; } .truck-showcase h2{ font-family:var(--font-comic); font-size:clamp(2.3rem,4vw,3.6rem); } .truck-photo{ border:3px solid var(--charcoal); border-radius:4px; box-shadow:8px 8px 0 var(--charcoal); } /* Interior pages: retain premium comic style */ .page-hero{ background: radial-gradient(circle at 78% 18%, rgba(227,23,18,.24), transparent 26%), radial-gradient(circle, rgba(255,255,255,.09) 1.2px, transparent 1.2px) 0 0/13px 13px, #101316; } .page-hero h1{ font-family:var(--font-comic); letter-spacing:.02em; } .content-card{ border-radius:4px !important; } /* Responsive adjustments */ @media (max-width: 940px){ .hero{ min-height:auto; padding:0; } .hero::before{ width:100%; background:linear-gradient(180deg,rgba(9,11,13,.97),rgba(9,11,13,.82)); } .hero-inner{ min-height:auto; grid-template-columns:1fr; padding:0; } .hero-copy{ padding:48px var(--container-pad) 38px; order:1; } .hero-visual{ order:2; height:420px; max-width:none; width:100%; margin:0; } .hero-visual .scene{ position:relative; width:100%; height:100%; } .hero-photo-frame::after{ background:linear-gradient(180deg,rgba(9,11,13,.10),rgba(9,11,13,.45)); } .process-step:not(:last-child)::after{ display:none; } .process-cta{ justify-content:center; } .lawn-showcase .container,.mosquito-showcase .container{ padding:0; } .lawn-showcase .split-copy,.mosquito-showcase .split-copy{ padding:48px var(--container-pad); } .lawn-showcase .split-media,.lawn-showcase .photo-frame,.mosquito-showcase .split-media,.mosquito-showcase .photo-frame{ min-height:360px; } } @media (max-width:620px){ .hero-copy h1{ font-size:clamp(3rem,15vw,4.7rem); } .hero-sub{ font-size:.94rem; } .hero-visual{ height:330px; } .hero-copy .cta-row .btn{ width:100%; } .trust-strip{ gap:10px 14px; } .process-grid{ grid-template-columns:1fr 1fr; } .process-step{ padding:16px 8px; } .process-icon{ width:62px; height:62px; } .process-icon svg{ width:30px; height:30px; } .pest-grid{ grid-template-columns:repeat(3,1fr); } .pest-chip .pest-icon{ width:78px; height:78px; padding:20px; } .hero-tip-inline{ margin:34px auto 0; } .comic-starburst-cta{ width:220px; min-height:112px; } } @media (max-width:420px){ .pest-grid{ grid-template-columns:repeat(2,1fr); } } /* ============================================================================= FINAL POLK PEST ART-DIRECTION PASS — high-resolution assets + estimate modal ============================================================================= */ .owner-line{ display:inline-flex; align-items:center; gap:10px; margin:18px 0 2px; padding:10px 14px; background:var(--charcoal); color:var(--yellow); border-left:5px solid var(--red); font:700 .92rem/1.2 var(--font-body); letter-spacing:.055em; text-transform:uppercase; box-shadow:5px 5px 0 rgba(0,0,0,.12); } /* Make the upgraded hero photograph the visual anchor without sacrificing copy. */ .hero-photo-frame{ box-shadow:0 24px 60px -30px rgba(0,0,0,.7), 10px 10px 0 rgba(227,23,18,.35); } .hero-photo-frame img{ filter:saturate(1.04) contrast(1.02); } .hero-copy h1 .accent{ color:var(--yellow); -webkit-text-stroke:1px rgba(0,0,0,.3); text-shadow:4px 5px 0 var(--red-dark); } .services-showcase .section-head h2{ max-width:860px; margin-inline:auto; } .pest-chip span{ font-family:var(--font-display); text-transform:uppercase; } /* Estimate modal */ body.modal-open{ overflow:hidden; } .estimate-modal{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:20px; } .estimate-modal.is-open{ display:flex; } .estimate-backdrop{ position:absolute; inset:0; background:rgba(2,4,6,.82); backdrop-filter:blur(4px); } .estimate-dialog{ position:relative; z-index:1; width:min(720px,100%); max-height:min(90vh,850px); overflow:auto; background:var(--white); border:3px solid var(--charcoal); border-top:8px solid var(--red); border-radius:10px; box-shadow:0 35px 100px rgba(0,0,0,.55), 9px 9px 0 var(--yellow); } .estimate-dialog-head{ padding:27px 30px 22px; color:var(--white); background: radial-gradient(circle at 92% 12%, rgba(227,23,18,.35) 1px, transparent 2px) 0 0/13px 13px, var(--charcoal); } .estimate-dialog-head h2{ color:var(--white); font-family:var(--font-comic); font-size:clamp(2.2rem,6vw,3.3rem); margin:5px 0 5px; } .estimate-dialog-head p{ margin:0; color:rgba(255,255,255,.8); } .estimate-close{ position:absolute; right:14px; top:13px; z-index:3; width:42px; height:42px; border:0; border-radius:50%; background:var(--red); color:var(--white); font-size:28px; line-height:1; box-shadow:3px 3px 0 var(--red-dark); } .estimate-form{ padding:26px 30px 30px; } .estimate-form .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } .estimate-form .field.full{ grid-column:1/-1; } .estimate-form textarea{ resize:vertical; min-height:105px; } .estimate-submit{ width:100%; margin-top:4px; } .estimate-privacy{ margin:12px 0 0; text-align:center; color:var(--ink-soft); font-size:.78rem; } .hp-field{ position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; } /* Stronger branding on the hero mobile + owner sections. */ .truck-showcase .photo-frame img,.about-showcase .photo-frame img{ object-position:center; } .truck-showcase .photo-frame{ box-shadow:10px 10px 0 var(--green), 0 20px 45px -28px rgba(0,0,0,.45); } .about-showcase .photo-frame{ box-shadow:10px 10px 0 var(--red), 0 20px 45px -28px rgba(0,0,0,.45); } @media (max-width:720px){ .estimate-modal{ padding:10px; align-items:flex-end; } .estimate-dialog{ max-height:94vh; border-radius:12px 12px 0 0; box-shadow:0 -20px 70px rgba(0,0,0,.5); } .estimate-dialog-head{ padding:23px 20px 18px; } .estimate-form{ padding:20px; } .estimate-form .form-grid{ grid-template-columns:1fr; } .estimate-form .field.full{ grid-column:auto; } .owner-line{ font-size:.78rem; } } /* ========================================================================== POLK PEST CONTROL — 2026 LANDING PAGE / BRAND SYSTEM V2 Visual target: premium local home-service website with restrained superhero comic energy. These rules intentionally override the original foundation. ========================================================================== */ :root{ --pp-black:#08090a; --pp-black-2:#0f1113; --pp-red:#e51b16; --pp-red-dark:#9f0d0a; --pp-green:#148329; --pp-green-dark:#075c19; --pp-yellow:#ffc914; --pp-cream:#f7f4ed; --pp-blue:#1677b8; } /* ---------- Shared header / interior-page visual system ---------- */ .site-header{ height:76px; background:rgba(5,6,7,.98); border-bottom:2px solid rgba(255,255,255,.08); box-shadow:0 8px 28px rgba(0,0,0,.18); } .site-header.is-scrolled{box-shadow:0 12px 32px rgba(0,0,0,.32);} .header-inner{height:76px;max-width:1320px;padding-inline:20px;gap:18px;} .brand{color:#fff;} .brand-logo-only{display:flex;align-items:center;width:190px;min-width:190px;height:72px;overflow:hidden;} .brand-logo-only picture{display:block;width:100%;height:100%;} .brand-logo-only img{width:100%;height:100%;object-fit:contain;object-position:left center;} .main-nav ul{gap:18px;} .main-nav a{font-family:var(--font-display);font-size:1rem;letter-spacing:.04em;color:#f5f5f5;padding:26px 0 22px;position:relative;white-space:nowrap;text-transform:uppercase;} .main-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:17px;height:3px;background:var(--pp-red);transition:left .18s ease,right .18s ease;} .main-nav a:hover,.main-nav a[aria-current="page"]{color:#fff;} .main-nav a:hover::after,.main-nav a[aria-current="page"]::after{left:0;right:0;} .header-actions-stack{gap:5px;align-items:stretch;min-width:190px;} .header-phone-v2,.site-header .header-call{ min-height:31px;padding:5px 12px;border-radius:3px;background:var(--pp-yellow);color:#08090a!important; font-family:var(--font-display);font-size:1.07rem;letter-spacing:.025em;box-shadow:none;justify-content:center;border:0; } .header-phone-v2 svg,.site-header .header-call svg{width:18px;height:18px;} .header-eval-v2{display:flex;align-items:center;justify-content:center;min-height:29px;padding:5px 12px;background:linear-gradient(#ef241e,#c70d09);border:1px solid #ff4d45;color:white;font-family:var(--font-display);text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;border-radius:3px;} .header-eval-v2:hover{filter:brightness(1.08);} .site-header .header-actions>.btn-primary{background:var(--pp-red);box-shadow:none;border-radius:3px;} .nav-toggle{margin-left:4px;} /* ---------- Hero ---------- */ .home-v2{background:#fff;} .pp-hero{position:relative;min-height:625px;background:var(--pp-black);color:#fff;overflow:visible;border-bottom:0;} .pp-hero-photo{position:absolute;inset:0;background:url('../images/v2/hero-pestman-yard-v2.webp') center 48%/cover no-repeat;} .pp-hero-overlay{position:absolute;inset:0;background: linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.38) 25%,rgba(0,0,0,.76) 44%,rgba(0,0,0,.49) 63%,rgba(0,0,0,.13) 100%), linear-gradient(0deg,rgba(0,0,0,.35),transparent 40%); } .pp-speed-lines{position:absolute;inset:0;pointer-events:none;opacity:.2;background: radial-gradient(circle at 96% 2%,var(--pp-red) 0 2px,transparent 3px) 0 0/18px 18px no-repeat, linear-gradient(115deg,transparent 74%,rgba(255,255,255,.08) 74.2%,transparent 74.5%);} .pp-hero-layout{min-height:625px;display:grid;grid-template-columns:minmax(0,1fr) 350px;align-items:center;gap:34px;position:relative;z-index:2;padding-top:38px;padding-bottom:38px;} .pp-hero-copy{width:min(610px,100%);margin-left:22%;padding:24px 0 40px;text-shadow:0 3px 12px rgba(0,0,0,.55);} .pp-kicker{margin:0 0 8px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--pp-yellow);font-size:clamp(.9rem,1.1vw,1.05rem);} .pp-hero h1{font-size:clamp(3.9rem,6.35vw,6.7rem);line-height:.9;letter-spacing:.01em;color:#fff;text-shadow:4px 5px 0 rgba(0,0,0,.55);} .pp-hero h1 span{color:var(--pp-yellow);} .pp-service-ribbon{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:20px 0 14px;font-family:var(--font-display);text-transform:uppercase;font-size:1.04rem;color:#fff;} .pp-service-ribbon b{color:var(--pp-red);font-size:1.25rem;} .pp-hero-lede{max-width:545px;color:#fff;font-size:1.02rem;line-height:1.55;font-weight:600;text-shadow:0 2px 5px #000;} .pp-hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:23px;align-items:center;} .btn-v2{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 19px;border:2px solid transparent;border-radius:4px;font-family:var(--font-display);font-size:1.01rem;letter-spacing:.025em;text-transform:uppercase;transition:transform .17s ease,filter .17s ease,box-shadow .17s ease;} .btn-v2:hover{transform:translateY(-2px);filter:brightness(1.06);} .btn-v2:active{transform:translateY(1px);} .btn-v2-red{background:linear-gradient(#ef2a23,#cf100b);color:#fff;border-color:#ff655f;box-shadow:4px 5px 0 rgba(101,5,4,.75);} .btn-v2-outline{background:rgba(0,0,0,.48);color:#fff;border-color:var(--pp-yellow);box-shadow:4px 5px 0 rgba(0,0,0,.55);} .btn-v2-outline svg{width:18px;height:18px;color:var(--pp-yellow);} .btn-v2-green{background:var(--pp-green);color:#fff;border-color:#8dd19a;} .btn-v2-blue{background:var(--pp-blue);color:#fff;border-color:#88bce1;} .btn-v2-yellow{background:var(--pp-yellow);color:#0b0b0b;border-color:#ffe77c;box-shadow:4px 4px 0 #8d160e;} /* ---------- Desktop floating evaluation card ---------- */ .pp-hero-form-card{align-self:end;position:relative;transform:translateY(165px);background:#121417;border:3px solid #fff;border-radius:9px;padding:12px;box-shadow:0 24px 55px rgba(0,0,0,.55),7px 8px 0 rgba(0,0,0,.33);z-index:5;} .pp-hero-form-card::before{content:"";position:absolute;inset:0;border-radius:6px;background:radial-gradient(circle,var(--pp-red) 0 2px,transparent 2.5px) right top/15px 15px;opacity:.23;pointer-events:none;} .pp-form-burst{position:relative;z-index:1;margin:-3px -3px 12px;padding:12px 14px 13px;text-align:center;background:var(--pp-red);clip-path:polygon(2% 11%,15% 15%,17% 3%,27% 12%,35% 0,42% 11%,50% 3%,58% 12%,66% 0,73% 11%,85% 3%,87% 15%,99% 10%,94% 27%,100% 34%,94% 43%,100% 52%,94% 60%,99% 69%,91% 75%,96% 90%,82% 86%,80% 99%,70% 89%,62% 100%,54% 90%,45% 99%,39% 88%,28% 99%,25% 87%,11% 94%,14% 80%,2% 83%,8% 68%,0 62%,8% 52%,1% 42%,8% 34%);} .pp-form-burst span,.pp-form-burst strong{display:block;font-family:var(--font-display);text-transform:uppercase;color:#fff;line-height:.93;text-shadow:2px 2px 0 #000;} .pp-form-burst span{font-size:1.15rem;} .pp-form-burst strong{font-size:1.65rem;color:var(--pp-yellow);} .pp-inline-form{position:relative;z-index:1;background:#f7f7f5;border-radius:5px;padding:14px;} .pp-inline-form .field{margin-bottom:8px;} .pp-inline-form label{display:block;margin:0 0 3px;color:#2a2a2a;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;} .pp-inline-form input,.pp-inline-form select,.pp-inline-form textarea{width:100%;min-height:37px;padding:7px 9px;background:#fff;border:1px solid #b9b9b5;border-radius:2px;color:#151515;font-size:.8rem;box-shadow:inset 0 1px 2px rgba(0,0,0,.05);} .pp-inline-form textarea{min-height:58px;resize:vertical;} .pp-inline-form .field-error{font-size:.63rem;color:#a80904;line-height:1.15;} .pp-form-submit{width:100%;min-height:45px;border:1px solid #ff5e57;border-radius:3px;background:linear-gradient(#ed2e27,#c90c08);color:#fff;font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;box-shadow:3px 3px 0 #780603;} .pp-form-note{margin-top:9px;color:#5d5d5d;font-size:.64rem;line-height:1.35;text-align:center;} .pp-form-note a{font-weight:800;color:#111;text-decoration:underline;} .pp-inline-form .form-status{font-size:.7rem;padding:7px;margin-top:8px;} /* ---------- Trust strip ---------- */ .pp-trust-strip{position:relative;z-index:3;background:var(--pp-black);color:#fff;border-top:4px solid var(--pp-red);border-bottom:1px solid #23272c;background-image:radial-gradient(circle,rgba(227,23,18,.46) 0 1.5px,transparent 2px);background-size:13px 13px;background-position:right -5px top -6px;} .pp-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);padding-top:18px;padding-bottom:18px;padding-right:390px;gap:0;} .pp-trust-item{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;padding:3px 22px;border-right:1px solid rgba(255,255,255,.2);} .pp-trust-item:last-child{border-right:0;} .pp-trust-icon{width:52px;height:52px;border-radius:50%;background:var(--pp-green);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--pp-green-dark);} .pp-trust-icon svg{width:29px;height:29px;fill:none;stroke:#fff;stroke-width:2;} .pp-trust-item strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:1.1rem;color:#fff;} .pp-trust-item p{font-size:.72rem;color:#d5d5d5;line-height:1.35;} /* ---------- Section typography / comic marks ---------- */ .pp-section{padding:72px 0;} .pp-section-heading{display:flex;align-items:center;gap:14px;margin-bottom:30px;} .pp-kicker-dark{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:#575757;font-size:.86rem;} .pp-section-heading .pp-kicker-dark{display:none;} .pp-section-heading h2,.pp-bad-title h2{font-size:clamp(2.2rem,4.1vw,4rem);color:#111;} .pp-section-heading h2 span,.pp-bad-title h2 span{color:var(--pp-red);} .pp-red-streak{width:115px;height:10px;transform:skew(-22deg);border-top:4px solid var(--pp-red);border-bottom:2px solid var(--pp-red);} /* ---------- Services ---------- */ .pp-services{padding-top:190px;background-color:#fbfaf7;background-image:radial-gradient(#1515151a 1px,transparent 1px);background-size:13px 13px;} .pp-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:930px;} .pp-service-card{position:relative;padding:29px 25px 25px;background:#fff;border:1px solid #ddd;border-radius:13px;box-shadow:0 10px 25px rgba(0,0,0,.08),5px 6px 0 #e0ded9;text-align:center;transition:transform .2s ease,box-shadow .2s ease;} .pp-service-card:hover{transform:translateY(-6px);box-shadow:0 16px 33px rgba(0,0,0,.12),5px 9px 0 #d7d4ce;} .pp-service-icon{width:78px;height:78px;margin:0 auto 18px;background:linear-gradient(145deg,#208b35,#09641b);border-radius:50%;border:4px solid #e8f5ea;display:grid;place-items:center;box-shadow:0 0 0 2px #0b641c;} .pp-service-icon svg{width:47px;height:47px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} .pp-service-card h3{font-size:1.55rem;color:#111;} .pp-service-card p{font-size:.9rem;line-height:1.55;margin:9px auto 18px;max-width:250px;color:#555;} .pp-card-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:var(--pp-red);color:#fff;border-radius:3px;font-family:var(--font-display);text-transform:uppercase;font-size:.88rem;box-shadow:3px 3px 0 var(--pp-red-dark);} .pp-card-btn:hover{transform:translateY(-1px);} /* ---------- Process ---------- */ .pp-process{position:relative;padding:42px 0 48px;background:var(--pp-black);color:#fff;overflow:hidden;border-top:5px solid #171717;border-bottom:5px solid #171717;} .pp-process::before,.pp-process::after{content:"";position:absolute;width:260px;height:100%;top:0;background-image:radial-gradient(circle,var(--pp-red) 0 2px,transparent 2.4px);background-size:14px 14px;opacity:.28;} .pp-process::before{left:-145px}.pp-process::after{right:-160px} .pp-process-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:34px;align-items:center;} .pp-process-title h2{font-size:clamp(2rem,3.35vw,3.3rem);color:#fff;line-height:1.03;} .red-word{color:var(--pp-red)}.yellow-word{color:var(--pp-yellow)} .pp-process-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:11px;align-items:start;margin-top:31px;} .pp-process-step{text-align:center;position:relative;} .pp-step-number{position:absolute;top:-8px;left:calc(50% - 45px);width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--pp-yellow);color:#111;font-family:var(--font-comic);font-size:1.35rem;z-index:2;transform:rotate(-7deg);} .pp-process-icon{width:69px;height:69px;margin:0 auto 10px;border-radius:50%;background:var(--pp-green);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 0 0 3px #0f631f;} .pp-process-icon svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;} .pp-process-step h3{font-size:1.13rem;color:#fff;} .pp-process-step p{margin:7px auto 0;color:#c9c9c9;font-size:.74rem;line-height:1.4;max-width:160px;} .pp-process-arrow{align-self:center;color:var(--pp-red);font-size:2.25rem;font-weight:900;margin-top:12px;transform:scaleX(1.22);} .pp-starburst{aspect-ratio:1/1;width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:var(--pp-red);color:#fff;clip-path:polygon(50% 0,58% 11%,70% 3%,74% 16%,88% 11%,86% 25%,100% 27%,92% 39%,100% 50%,91% 59%,99% 72%,85% 75%,88% 89%,73% 84%,69% 98%,58% 88%,49% 100%,41% 88%,28% 97%,25% 84%,10% 89%,14% 74%,0 71%,9% 59%,0 49%,10% 40%,2% 27%,16% 25%,12% 10%,27% 16%,31% 2%,42% 12%);filter:drop-shadow(6px 7px 0 #650705);transition:transform .18s ease;} .pp-starburst:hover{transform:rotate(-2deg) scale(1.03);} .pp-starburst span,.pp-starburst strong,.pp-starburst em{font-family:var(--font-display);text-transform:uppercase;font-style:normal;text-shadow:2px 2px 0 #000;} .pp-starburst span{font-size:1rem}.pp-starburst strong{font-size:1.65rem;line-height:.94}.pp-starburst em{margin-top:7px;color:var(--pp-yellow);font-size:1.17rem;line-height:1.02;} /* ---------- Bad guys ---------- */ .pp-bad-guys{padding:36px 0 43px;background:#fff;background-image:radial-gradient(#11111112 1px,transparent 1px);background-size:14px 14px;} .pp-bad-title{margin-bottom:22px;} .pp-bad-title h2{font-size:2.15rem;} .pp-pest-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;max-width:1040px;margin:auto;} .pp-pest-item{text-align:center;} .pp-no-pest{position:relative;width:103px;height:103px;margin:auto;border:7px solid #d5130e;border-radius:50%;background:#fff;display:grid;place-items:center;} .pp-no-pest::after{content:"";position:absolute;width:123px;height:7px;background:#d5130e;transform:rotate(-45deg);border-radius:6px;box-shadow:0 0 0 2px #fff;} .pp-pest-silhouette{width:65px;height:65px;fill:#111;stroke:#111;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} .pp-pest-item strong{display:block;margin-top:7px;font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;color:#171717;} /* ---------- Lawn + mosquito split ---------- */ .pp-split-features{display:grid;grid-template-columns:1fr 1fr;min-height:455px;} .pp-feature-panel{position:relative;overflow:hidden;min-height:455px;display:flex;align-items:center;} .pp-feature-bg,.pp-feature-shade{position:absolute;inset:0;} .pp-lawn-panel .pp-feature-bg{background:url('../images/v2/hero-pestman-yard-v2.webp') 33% 70%/cover no-repeat;transform:scale(1.02);} .pp-lawn-panel .pp-feature-shade{background:linear-gradient(90deg,rgba(2,60,16,.96) 0%,rgba(5,89,27,.82) 43%,rgba(5,36,10,.15) 79%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 60%);} .pp-mosquito-panel .pp-feature-bg{background:url('../images/site/mosquito-control-branded.webp') center/cover no-repeat;filter:saturate(.82) brightness(.92);transform:scale(1.02);} .pp-mosquito-panel .pp-feature-shade{background:linear-gradient(90deg,rgba(4,17,30,.9) 0%,rgba(7,32,55,.79) 52%,rgba(0,0,0,.24)),linear-gradient(0deg,rgba(0,0,0,.38),transparent 55%);} .pp-feature-copy{position:relative;z-index:1;width:min(520px,90%);padding:52px clamp(28px,5vw,70px);color:#fff;} .pp-feature-copy h2{font-size:clamp(2.6rem,4.8vw,4.8rem);color:#fff;line-height:.95;text-shadow:3px 4px 0 rgba(0,0,0,.35);} .pp-feature-copy h2 span{color:var(--pp-yellow);} .pp-mosquito-panel .pp-feature-copy h2 span{color:#fff;} .pp-feature-copy>p:not(.pp-kicker){margin:14px 0 21px;color:#fff;font-size:.92rem;line-height:1.55;max-width:430px;} /* ---------- Hero Tip / local / owner row ---------- */ .pp-local-row{padding:28px 0;background:#faf9f5;background-image:radial-gradient(#11111113 1px,transparent 1px);background-size:14px 14px;border-bottom:1px solid #ddd;} .pp-local-grid{display:grid;grid-template-columns:1.25fr .78fr .92fr;align-items:stretch;gap:0;border:1px solid #dedbd3;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.08);} .pp-local-grid>article{position:relative;min-height:240px;padding:24px;border-right:1px solid #dedbd3;overflow:hidden;} .pp-local-grid>article:last-child{border-right:0;} .pp-hero-tip-card{display:grid;grid-template-columns:155px 1fr;align-items:end;padding-left:7px!important;} .pp-hero-tip-card img{align-self:end;width:165px;max-height:235px;object-fit:contain;object-position:bottom;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.13));} .pp-speech{position:relative;align-self:center;background:#fff;border:3px solid #111;border-radius:50% 46% 47% 52%;padding:22px 20px 23px;margin-left:-4px;} .pp-speech::before{content:"";position:absolute;left:-19px;bottom:28px;width:32px;height:32px;background:#fff;border-left:3px solid #111;border-bottom:3px solid #111;transform:rotate(35deg);} .pp-speech h3{position:relative;z-index:1;font-family:var(--font-comic);font-size:1.85rem;color:var(--pp-red);letter-spacing:.02em;} .pp-speech p{position:relative;z-index:1;font-size:.75rem;line-height:1.45;color:#333;} .pp-service-area-card h3,.pp-owner-card h3{font-size:1.85rem;color:#151515;line-height:1;} .pp-service-area-card ul{margin-top:14px;display:grid;gap:7px;padding-right:80px;} .pp-service-area-card li{font-size:.83rem;font-weight:700;color:#333;} .pp-service-area-card li::before{content:"●";color:var(--pp-green);margin-right:8px;} .pp-florida-mark{position:absolute;right:13px;bottom:14px;width:92px;color:var(--pp-green);text-align:center;} .pp-florida-mark svg{width:70px;margin:auto;fill:var(--pp-green);opacity:.9;} .pp-florida-mark span{display:block;margin-top:-8px;font:700 .55rem var(--font-body);line-height:1.05;color:#444;} .pp-owner-card strong{display:block;margin:6px 0 13px;color:var(--pp-yellow-dark);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;} .pp-owner-card p{font-size:.8rem;line-height:1.5;color:#444;} .pp-owner-card a{display:inline-block;margin-top:15px;color:var(--pp-red);font-weight:800;text-transform:uppercase;font-size:.75rem;} /* ---------- Truck section ---------- */ .pp-truck-section{display:grid;grid-template-columns:1.12fr .88fr;min-height:420px;background:var(--pp-black);color:#fff;overflow:hidden;} .pp-truck-image{min-height:420px;} .pp-truck-image picture,.pp-truck-image img{width:100%;height:100%;} .pp-truck-image img{object-fit:cover;object-position:center;} .pp-truck-copy{position:relative;padding:56px clamp(30px,5vw,72px);display:flex;flex-direction:column;justify-content:center;background:var(--pp-black);overflow:hidden;} .pp-truck-copy::after{content:"";position:absolute;right:-60px;top:-40px;width:260px;height:260px;background-image:radial-gradient(circle,var(--pp-red) 0 2px,transparent 2px);background-size:14px 14px;opacity:.25;transform:rotate(16deg);} .pp-truck-copy>*{position:relative;z-index:1;} .pp-truck-copy h2{font-size:clamp(2.8rem,4.7vw,4.8rem);color:#fff;line-height:.93;} .pp-truck-copy h2 span{color:var(--pp-yellow);} .pp-truck-copy>p:not(.pp-kicker){margin-top:15px;color:#d8d8d8;max-width:480px;} .pp-phone-link{font-family:var(--font-display);font-size:1.35rem;color:var(--pp-yellow);} /* ---------- Closing CTA ---------- */ .pp-final-cta{background:linear-gradient(90deg,#c90e0b,#ed231d 55%,#c80c08);border-top:3px solid #ff4e47;border-bottom:3px solid #880502;color:#fff;} .pp-final-grid{min-height:92px;display:grid;grid-template-columns:180px 1fr auto auto;align-items:center;gap:24px;} .pp-final-grid>img{width:170px;height:80px;object-fit:contain;} .pp-final-grid strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:1rem;letter-spacing:.04em;} .pp-final-grid p{color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:1.35rem;line-height:1.05;} .pp-final-phone{font-family:var(--font-display);font-size:1.45rem;color:#fff;white-space:nowrap;} /* ---------- Footer refresh ---------- */ .site-footer.v2-footer,.site-footer{background:#060708;border-top:0;} .v2-footer-grid{grid-template-columns:1.45fr .7fr .8fr 1fr;} .footer-logo-v2{width:205px;min-width:0;height:105px;} .footer-logo-v2 img{width:100%;height:100%;object-fit:contain;object-position:left center;} .site-footer .footer-brand p{max-width:350px;color:#aaa;} .site-footer h4{font-family:var(--font-display);text-transform:uppercase;color:#fff;letter-spacing:.04em;} .site-footer a{color:#bdbdbd;} .site-footer a:hover{color:#fff;} .pp-owner-footer{margin:18px 0;display:flex;flex-direction:column;} .pp-owner-footer small{color:#888;text-transform:uppercase;font-size:.68rem;font-weight:800;} .pp-owner-footer strong{color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:1rem;} .footer-social{display:none!important;} /* ---------- Shared inner-page visual tuning ---------- */ body:not(.home-v2) .page-hero{background:var(--pp-black);} body:not(.home-v2) .page-hero h1{color:#fff;text-shadow:3px 4px 0 #000;} body:not(.home-v2) .page-hero .eyebrow{color:var(--pp-yellow);} body:not(.home-v2) .btn-primary{background:var(--pp-red);box-shadow:4px 4px 0 var(--pp-red-dark);} body:not(.home-v2) .service-card{border-top-color:var(--pp-red);} body:not(.home-v2) h1,body:not(.home-v2) h2,body:not(.home-v2) h3{letter-spacing:.015em;} /* ---------- Mobile / tablet ---------- */ @media (max-width:1180px){ .main-nav ul{gap:16px}.main-nav a{font-size:.9rem}.brand-logo-only{width:170px;min-width:170px}.header-actions-stack{min-width:172px} .pp-hero-copy{margin-left:12%;} .pp-trust-grid{padding-right:365px;} } @media (max-width:1020px){ .site-header,.header-inner{height:70px}.site-header{--header-h:70px} .main-nav{display:none}.header-actions-stack{min-width:auto;flex-direction:row;align-items:center}.header-actions-stack .header-phone-v2,.header-actions-stack .header-eval-v2,.site-header .header-actions>.btn-primary,.site-header .header-actions>.header-call{display:none}.nav-toggle{display:block} .brand-logo-only{width:175px;min-width:175px;height:65px} .pp-hero{min-height:700px;overflow:hidden}.pp-hero-layout{min-height:700px;grid-template-columns:1fr;align-items:center;padding-bottom:30px}.pp-hero-copy{margin:0;width:min(590px,72%);padding:35px 0 70px}.pp-hero-form-card{display:none}.pp-hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.68) 42%,rgba(0,0,0,.32) 75%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.3),transparent 45%)} .pp-trust-grid{padding-right:24px;grid-template-columns:repeat(3,1fr)} .pp-services{padding-top:72px} .pp-process-layout{grid-template-columns:1fr}.pp-starburst{display:none} .pp-local-grid{grid-template-columns:1fr 1fr}.pp-local-grid>article{border-bottom:1px solid #dedbd3}.pp-hero-tip-card{grid-column:1/-1}.pp-owner-card{border-right:0!important} .pp-final-grid{grid-template-columns:140px 1fr auto}.pp-final-grid .btn-v2{display:none}.pp-final-grid>img{width:130px} } @media (max-width:800px){ .pp-hero{min-height:710px}.pp-hero-photo{background-position:28% center}.pp-hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.94) 100%)}.pp-hero-layout{align-items:end}.pp-hero-copy{width:100%;padding:290px 0 38px;margin:0}.pp-hero h1{font-size:clamp(3.3rem,12vw,5.6rem)}.pp-hero-lede{max-width:610px}.pp-service-ribbon{font-size:.9rem} .pp-trust-grid{grid-template-columns:1fr;gap:0;padding-top:7px;padding-bottom:7px}.pp-trust-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:10px 4px}.pp-trust-item:last-child{border-bottom:0}.pp-trust-icon{width:45px;height:45px}.pp-trust-item{grid-template-columns:51px 1fr} .pp-service-grid{grid-template-columns:1fr;max-width:560px}.pp-section-heading{align-items:flex-end}.pp-red-streak{width:70px} .pp-process-grid{grid-template-columns:1fr 1fr;gap:25px}.pp-process-arrow{display:none}.pp-process-step p{max-width:230px}.pp-process-title h2{text-align:center} .pp-pest-grid{grid-template-columns:repeat(3,1fr)} .pp-split-features{grid-template-columns:1fr}.pp-feature-panel{min-height:430px}.pp-feature-copy{width:100%} .pp-truck-section{grid-template-columns:1fr}.pp-truck-image{min-height:300px}.pp-truck-copy{padding:43px 24px 52px} .pp-final-grid{grid-template-columns:100px 1fr}.pp-final-phone{grid-column:1/-1;text-align:center;padding-bottom:11px}.pp-final-grid>img{width:100px}.pp-final-grid p{font-size:1.12rem} .v2-footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:600px){ body{padding-bottom:var(--bottom-bar-h)} .header-inner{padding-inline:12px}.brand-logo-only{width:150px;min-width:150px;height:62px} .pp-hero{min-height:690px}.pp-hero-photo{background-position:22% 38%;background-size:auto 470px;background-repeat:no-repeat;background-color:#050607}.pp-hero-copy{padding-top:320px}.pp-hero h1{font-size:3.45rem}.pp-kicker{font-size:.79rem}.pp-hero-lede{font-size:.91rem}.pp-service-ribbon{gap:6px;font-size:.79rem}.pp-hero-actions{display:grid;grid-template-columns:1fr}.btn-v2{width:100%}.pp-service-ribbon b{font-size:1rem} .pp-section{padding:52px 0}.pp-services{padding-top:55px}.pp-section-heading h2{font-size:2.45rem}.pp-red-streak{display:none} .pp-process{padding:40px 0}.pp-process-grid{grid-template-columns:1fr}.pp-process-title h2{font-size:2.25rem}.pp-process-step{padding:4px 0 13px}.pp-step-number{left:calc(50% - 48px)} .pp-bad-guys{padding:35px 0}.pp-pest-grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}.pp-no-pest{width:92px;height:92px}.pp-no-pest::after{width:109px}.pp-pest-grid .pp-pest-item:last-child{grid-column:1/-1} .pp-feature-panel{min-height:450px}.pp-feature-copy{padding:44px 22px}.pp-feature-copy h2{font-size:3rem} .pp-local-grid{grid-template-columns:1fr}.pp-local-grid>article{border-right:0;border-bottom:1px solid #dedbd3}.pp-hero-tip-card{grid-template-columns:115px 1fr;padding:14px 12px 0!important}.pp-hero-tip-card img{width:125px;max-height:210px}.pp-speech{padding:18px 13px}.pp-speech h3{font-size:1.55rem}.pp-speech p{font-size:.68rem}.pp-local-grid>article:last-child{border-bottom:0}.pp-service-area-card,.pp-owner-card{min-height:210px!important} .pp-truck-image{min-height:245px}.pp-truck-copy h2{font-size:3rem}.pp-truck-copy .pp-hero-actions{display:flex}.pp-phone-link{width:100%;text-align:center} .pp-final-grid{min-height:120px;grid-template-columns:90px 1fr;gap:10px;padding-top:10px;padding-bottom:10px}.pp-final-grid>img{width:85px;height:80px}.pp-final-grid strong{font-size:.78rem}.pp-final-grid p{font-size:1rem}.pp-final-phone{font-size:1.25rem} .v2-footer-grid{grid-template-columns:1fr}.footer-logo-v2{width:190px}.site-footer{padding-bottom:30px} } @media (max-width:390px){.pp-hero h1{font-size:3.05rem}.pp-hero-copy{padding-top:330px}.pp-service-ribbon{font-size:.72rem}.pp-hero-photo{background-position:20% 33%}.pp-hero-tip-card{grid-template-columns:95px 1fr}.pp-hero-tip-card img{width:105px}.pp-speech p{font-size:.64rem}} /* V2 photo elements use real / nodes for reliability. */ .pp-hero-photo{position:absolute;inset:0;display:block;overflow:hidden;background:none;} .pp-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 48%;} .pp-feature-bg{position:absolute;inset:0;display:block;overflow:hidden;background:none!important;} .pp-feature-bg img{width:100%;height:100%;object-fit:cover;} .pp-lawn-panel .pp-feature-bg{transform:scale(1.02);} .pp-lawn-panel .pp-feature-bg img{object-position:33% 70%;} .pp-mosquito-panel .pp-feature-bg{filter:saturate(.82) brightness(.92);transform:scale(1.02);} .pp-mosquito-panel .pp-feature-bg img{object-position:center;} @media(max-width:800px){.pp-hero-photo img{object-position:28% center;}} @media(max-width:600px){.pp-hero-photo{background:#050607}.pp-hero-photo img{height:470px;object-fit:cover;object-position:22% 38%;}} @media(max-width:390px){.pp-hero-photo img{object-position:20% 33%;}} /* ---------- Polk Pest user-supplied icon overrides ---------- */ .pp-icon-photo{background:transparent!important;border:0!important;box-shadow:none!important;overflow:hidden;padding:0;display:block;} .pp-icon-photo img{width:100%;height:100%;display:block;object-fit:contain;} .pp-trust-icon.pp-icon-photo{width:60px;height:60px;} .pp-service-icon.pp-icon-photo{width:96px;height:96px;margin-bottom:16px;} .pp-process-icon.pp-icon-photo{width:76px;height:76px;} .pp-no-pest.pp-icon-photo{width:112px;height:112px;border:0!important;background:transparent!important;} .pp-no-pest.pp-icon-photo::after{display:none;} .pest-icon.pest-icon-photo{width:94px!important;height:94px!important;padding:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;display:block;overflow:hidden;} .pest-icon.pest-icon-photo img{width:100%;height:100%;display:block;object-fit:contain;} /* Mobile menu should show the whole menu without awkward inner scrolling. */ .mobile-panel{ inset: var(--header-h) 0 auto 0; max-height: calc(100svh - var(--header-h)); height: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .mobile-panel ul{gap:0;} @media (max-width:800px){ .pp-trust-icon.pp-icon-photo{width:52px;height:52px;} .pp-service-icon.pp-icon-photo{width:88px;height:88px;} .pp-process-icon.pp-icon-photo{width:72px;height:72px;} } @media (max-width:600px){ .pp-no-pest.pp-icon-photo{width:104px;height:104px;} .pest-icon.pest-icon-photo{width:86px!important;height:86px!important;} } /* ---------- User-requested v4 content refinements ---------- */ .hero-with-photo{position:relative;overflow:hidden;isolation:isolate;} .hero-with-photo::before{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1.02);} .hero-with-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.68) 38%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.24) 100%),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.48));} .hero-pest::before{background-image:url('../images/site/pest-page-hero-scene.png');background-position:center 34%;} .hero-lawn::before{background-image:url('../images/site/lawn-page-hero-scene.png');background-position:center 48%;} .hero-with-photo .container{position:relative;z-index:1;} .feature-split-enhanced{align-items:center;gap:34px;} .feature-photo-tilt{box-shadow:0 18px 38px rgba(0,0,0,.16),8px 9px 0 rgba(0,0,0,.08);transform:rotate(-1deg);overflow:hidden;} .feature-photo-tilt img{display:block;width:100%;height:auto;} .showdown-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,46%);gap:26px;align-items:center;background:#111317;border-radius:20px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.22);} .showdown-copy{padding:30px 28px;color:#fff;} .showdown-copy h2{color:#fff;margin-top:6px;} .showdown-copy p{color:rgba(255,255,255,.84);margin-top:12px;} .showdown-media{min-height:100%;background:#0f0f10;} .showdown-media img{display:block;width:100%;height:100%;object-fit:cover;} .pp-county-graphic{margin-top:16px;display:flex;justify-content:center;align-items:center;min-height:112px;background:linear-gradient(180deg,#fffdf8,#f0efe7);border:1px solid #e4dfd3;border-radius:14px;padding:10px;} .pp-county-graphic img{display:block;max-width:100%;max-height:110px;object-fit:contain;} .pp-service-area-card ul{margin-bottom:10px;} .pp-hero-tip-card img[src*='pestman-thumbs-up']{width:188px;max-height:245px;} #main .pp-process-step:last-child .pp-process-icon.pp-icon-photo img{transform:scale(1.12);} @media (max-width:980px){ .showdown-card{grid-template-columns:1fr;} .showdown-media{order:-1;} } @media (max-width:800px){ .hero-pest::before{background-position:center 28%;} .hero-lawn::before{background-position:center 40%;} } @media (max-width:600px){ .feature-split-enhanced{gap:20px;} .feature-photo-tilt{transform:none;} .showdown-copy{padding:22px 18px;} .mobile-panel{overflow-y:visible;} } /* Netlify form usability: keep the desktop homepage form above the trust strip it overlaps. */ @media (min-width:1021px){ .pp-hero{z-index:4;} .pp-hero-form-card{z-index:50;pointer-events:auto;} .pp-trust-strip{z-index:1;} }