/* ========================================================================== Perkin theme.css The design ships as inline styles on the markup. This file provides only: 1) base reset + fonts (from the original ) 2) interactive states the mockup handled with tooling (dropdowns, hovers) 3) marquee animations 4) a pragmatic responsive layer (the mockup is a fixed 1440px desktop design) ========================================================================== */ /* ---------- 1. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: #ffffff; color: #0f0e13; font-family: Geologica, sans-serif; font-weight: 500; font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a:hover { color: inherit; } img { max-width: 100%; } /* ---------- 2. Header nav dropdowns + hovers ---------- */ /* Primary nav: right-aligned, with left padding reserving the overhanging logo so items never slide under it. The reserve scales with viewport but never drops below the logo's footprint; the link size/gap tighten on smaller canvases so the right-aligned menu still fits beside the logo. */ .pk-nav-inner { justify-content: flex-end; padding-left: clamp(340px, 26vw, 430px); padding-right: clamp(20px, 5vw, 118px); } .pk-nav-inner > ul { justify-content: flex-end; } @media (min-width: 1025px) and (max-width: 1440px) { .pk-nav .pk-navlink { font-size: 14px !important; } .pk-nav-inner > ul { gap: 18px !important; } } @media (min-width: 1025px) and (max-width: 1200px) { .pk-nav .pk-navlink { font-size: 13px !important; letter-spacing: 0.2px !important; } .pk-nav-inner > ul { gap: 12px !important; } .pk-nav-inner { padding-left: clamp(320px, 26vw, 360px); } } .pk-nav-item { position: static; } .pk-nav-item.has-dropdown > a { cursor: pointer; } .pk-dropdown { display: none; } .pk-nav-item:hover > .pk-dropdown, .pk-nav-item:focus-within > .pk-dropdown, .pk-nav-item.pk-open > .pk-dropdown { display: block; } .pk-navlink { transition: color .2s ease, box-shadow .2s ease; } .pk-navlink:hover { color: #ffd131 !important; box-shadow: inset 0 -3px 0 #f9cc3c; } .pk-menu a { transition: background .15s ease; } .pk-menu a:hover { background: #dbe2d5; } /* Header top-bar "Leave a Review" link. */ .pk-topbar-link { transition: color .15s ease; } .pk-topbar-link:hover { color: #f9cc3c; } /* Header "Proudly Serving…" promo link (to the service area page). */ .pk-hdr-promo { transition: color .15s ease; } .pk-hdr-promo:hover { color: #184830; } .pk-hdr-promo:hover span:last-child { text-decoration: underline; text-underline-offset: 2px; } /* Mobile-only service-area callout between the logo and hamburger (hidden on desktop). */ .pk-hdr-promo-m { display: none; } /* Mobile drawer + sticky CTA bar: inert on desktop, activated ≤1024px. */ .pk-drawer-close, .pk-drawer-foot, .pk-drawer-cta, .pk-mobile-cta, .pk-drawer-overlay { display: none; } /* Internal hero mascot: bottom-right on desktop; below the buttons (centered) on tablet. */ .pk-ihero-mascot { position: absolute; right: clamp(0px, 2vw, 48px); bottom: 0; z-index: 0; width: min(440px, 34%); pointer-events: none; line-height: 0; } @media (max-width: 1200px) { .pk-ihero-mascot { min-width: 25vw; } } @media (max-width: 1024px) { /* Mascot drops below the buttons, flush to the section's bottom edge... */ .pk-ihero:not(.pk-ihero--nomascot) { padding-bottom: 0 !important; } .pk-ihero-mascot { position: static; right: auto; bottom: auto; width: min(300px, 60vw); min-width: 0; margin: 28px auto 0; } /* ...but heroes with no mascot keep breathing room under the phone button. */ .pk-ihero--nomascot { padding-bottom: 44px !important; } } /* "Poke out" hard-shadow buttons. The design's hover states were tooling-only (style-hover, stripped on export). These rules restore the poke-out for every hard-shadow button/link by matching its inline shadow color — no per-button class needed. */ .pk-btn { transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms cubic-bezier(.22,1,.36,1); } .pk-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #0f0e13; } a[style*="box-shadow:5px 5px 0 #0f0e13"]:hover, button[style*="box-shadow:5px 5px 0 #0f0e13"]:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #0f0e13; } a[style*="box-shadow:5px 5px 0 #fff"]:hover, button[style*="box-shadow:5px 5px 0 #fff"]:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #fff; } /* footer buttons use a white hard shadow */ .pk-btn-lite { transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms cubic-bezier(.22,1,.36,1); } .pk-btn-lite:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #fff; } /* generic link hover used on footer links / "Learn More" style links */ .pk-underline { transition: color .15s ease; } .pk-underline:hover { color: #fff; } /* Footer text links turn yellow on hover (buttons/icons excluded — they use pk-btn-lite). */ #footer .pk-underline { transition: color .15s ease; } #footer .pk-underline:hover { color: #ffd131 !important; } .pk-fb { transition: border-color .15s ease; } .pk-fb-icon { transition: background-color .15s ease; } .pk-fb:hover { border-color: #ffd131; } .pk-fb:hover .pk-fb-icon { background-color: #ffd131 !important; } /* Service sidebar "Our Services" menu (native
accordion). */ .pk-svcmenu-group { border-bottom: 2px solid rgba(15,14,19,.14); } .pk-svcmenu-group:last-child { border-bottom: 0; } .pk-svcmenu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 16px 0; list-style: none; font-family: Geologica, sans-serif; font-weight: 700; font-size: 16px; line-height: 22px; letter-spacing: 0.4px; text-transform: uppercase; color: #0f0e13; } .pk-svcmenu-head::-webkit-details-marker { display: none; } .pk-svcmenu-toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 2px solid #0f0e13; background: #f9cc3c; color: #0f0e13; font-weight: 900; font-size: 17px; line-height: 1; } .pk-svcmenu-toggle::before { content: "+"; } .pk-svcmenu-group[open] > .pk-svcmenu-head .pk-svcmenu-toggle { background: #184830; color: #fff; } .pk-svcmenu-group[open] > .pk-svcmenu-head .pk-svcmenu-toggle::before { content: "\2212"; } .pk-svcmenu-list { display: grid; gap: 2px; margin: 0; padding: 0 0 16px; list-style: none; } .pk-svcmenu-link { display: block; padding: 11px 16px; border-radius: 6px; font-family: Geologica, sans-serif; font-weight: 700; font-size: 15px; line-height: 20px; color: #184830; transition: background .15s ease, color .15s ease; } .pk-svcmenu-link:hover { background: rgba(15,14,19,.06); } .pk-svcmenu-link.is-active { background: #184830; color: #fff; } /* Homepage "What We Do" accordion: equal-width cards that expand on hover/focus. (Cards ship with flex-basis:0 + no grow, so without this they collapse to slivers.) */ .pk-svccard { flex-grow: 1; } .pk-svccard-full { opacity: 0; pointer-events: none; } .pk-svccard:hover, .pk-svccard:focus-within { flex-grow: 2.6; } .pk-svccard:hover .pk-svccard-min, .pk-svccard:focus-within .pk-svccard-min { opacity: 0; } .pk-svccard:hover .pk-svccard-full, .pk-svccard:focus-within .pk-svccard-full { opacity: 1; pointer-events: auto; } /* ---- Before/After: one-at-a-time carousel + draggable comparison sliders ---- */ .pk-ba { display: flex; align-items: center; justify-content: center; gap: 24px; } .pk-ba-nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0f0e13; background: #fff; color: #0f0e13; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; } .pk-ba-nav svg { width: 18px; height: 18px; } .pk-ba-nav:hover { background: #f9cc3c; transform: translateY(-2px); } .pk-ba-viewport { flex: 1 1 auto; max-width: 560px; min-width: 0; overflow: hidden; } .pk-ba-track { display: flex; transition: transform .45s cubic-bezier(.22,1,.36,1); } .pk-ba-slide { flex: 0 0 100%; min-width: 0; } .pk-ba-compare { --pos: 50%; position: relative; border-radius: 32px; border: 3px solid #0f0e13; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; width: fit-content; max-width: 100%; margin-inline: auto; } .pk-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; } /* The base (after) image sets the box's natural aspect ratio so uploads aren't force-cropped to 4:3; the before image overlays it. Capped at 400px tall. */ .pk-ba-compare > .pk-ba-img:not(.pk-ba-before) { position: relative; width: auto; height: auto; max-width: 100%; max-height: 400px; } .pk-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .pk-ba-shade { position: absolute; inset: 3px; z-index: 1; pointer-events: none; border-radius: 29px; background: linear-gradient(to bottom, rgba(7,43,26,0) 64%, rgba(7,43,26,0.52) 86%, rgba(7,43,26,0.82) 100%); } .pk-ba-label { position: absolute; bottom: 20px; z-index: 3; font-weight: 800; font-size: 17px; line-height: 22px; letter-spacing: .6px; text-transform: uppercase; color: #fff; pointer-events: none; } .pk-ba-label--before { left: 22px; } .pk-ba-label--after { right: 22px; } .pk-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%); z-index: 4; width: 4px; padding: 0; border: 0; background: #fff; cursor: ew-resize; } .pk-ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: #f9cc3c; border: 3px solid #0f0e13; display: flex; align-items: center; justify-content: center; } .pk-ba-knob svg { width: 24px; height: 24px; display: block; } .pk-ba-caption { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #ffd131; } .pk-ba-dots { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; } .pk-ba-dot { width: 12px; height: 12px; border-radius: 50%; padding: 0; border: 2px solid #f9cc3c; background: transparent; cursor: pointer; transition: background .2s ease, transform .2s ease; } .pk-ba-dot.is-active { background: #f9cc3c; transform: scale(1.15); } @media (max-width: 560px) { .pk-ba { gap: 10px; } .pk-ba-nav { width: 38px; height: 38px; } } /* ---- Service Area page: grouped area lists ---- */ .pk-sa-group { padding-block: 22px; border-top: 1px solid #e3e3e3; } .pk-sa-group:first-child { border-top: 0; } .pk-sa-group-title { margin: 0 0 14px; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(22px, 3vw, 28px); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: #184830; } .pk-sa-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; } .pk-sa-item { display: inline-flex; align-items: flex-start; gap: 8px; padding-block: 4px; font-weight: 700; font-size: 16px; line-height: 24px; color: #184830; text-decoration: none; min-width: 0; } .pk-sa-item--link { transition: color .15s ease; } .pk-sa-item--link span { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; } .pk-sa-item--link:hover { color: #437f44; } @media (max-width: 1024px) { .pk-sa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pk-sa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } } /* About — team member selector thumbnails */ .pk-team-thumb { border: 3px solid transparent; } .pk-team-thumb img { filter: grayscale(1); } .pk-team-thumb:hover { transform: translateY(-4px); } .pk-team-thumb:hover img { filter: grayscale(0); } .pk-team-thumb.is-active { border-color: #f9cc3c; } .pk-team-thumb.is-active img { filter: grayscale(0); } /* Team member photo: fixed 392px on desktop, full-width on mobile (no overflow). */ @media (max-width: 640px) { #team [style*="width:392px"] { width: 100% !important; } /* Tighten the space above (heading) and below (bio) the member photo. */ #team [style*="margin-bottom:56px"] { margin-bottom: 22px !important; } #team [style*="gap:72px"] { gap: 22px !important; } /* Move the hero-photo selector thumbnails above the name/bio (below the headshot). */ .pk-team-thumbs { order: -1; padding-top: 0 !important; margin-bottom: 20px; } } /* About — safety cards: rows of 3; hovered card expands to ~2 columns */ .pk-safety-row { display: flex; gap: 24px; align-items: stretch; } .pk-safety-card { flex: 1 1 0; min-width: 0; min-height: 376px; display: flex; flex-direction: column; overflow: hidden; background: #0f0e13; border: 3px solid #0f0e13; border-radius: 24px; padding: 26px 28px; transition: flex-grow 480ms cubic-bezier(.22,1,.36,1), border-color 320ms cubic-bezier(.22,1,.36,1); } .pk-safety-card:hover { border-color: #f9cc3c; } @media (min-width: 1025px) { .pk-safety-card.is-featured { flex-grow: 2; } /* default: featured card is ~2 columns */ .pk-safety-row:hover .pk-safety-card { flex-grow: 1; } /* hovering the row resets all... */ .pk-safety-row:hover .pk-safety-card:hover { flex-grow: 2; } /* ...then expands the hovered one */ } @media (max-width: 1024px) { .pk-safety-row { flex-wrap: wrap; } .pk-safety-card { flex: 1 1 45%; min-height: 320px; } } @media (max-width: 620px) { .pk-safety-card { flex-basis: 100%; min-height: 0; } } /* Blog archive grid (Blog page template) */ .pk-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; } .pk-blog-card { display: flex; flex-direction: column; background: #fff; border: 3px solid #0f0e13; border-radius: 20px; overflow: hidden; box-shadow: 6px 6px 0 rgba(0,0,0,.28); } .pk-blog-card[hidden] { display: none; } .pk-blog-thumb { display: block; aspect-ratio: 16 / 10; background: #dbe2d5; overflow: hidden; } .pk-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .pk-blog-card:hover .pk-blog-thumb img { transform: scale(1.04); } .pk-blog-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #1e2e24 url(../pattern/hero.png) center/cover no-repeat; } .pk-blog-thumb-fallback img { width: auto; height: auto; max-width: 62%; max-height: 56%; display: block; } .pk-blog-body { display: flex; flex-direction: column; flex: 1; padding: 24px; } .pk-blog-date { font-weight: 700; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: #437f44; } .pk-blog-title { margin: 8px 0 0; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: 0.02em; color: #184830; } .pk-blog-title a { color: inherit; text-decoration: none; } .pk-blog-title a:hover { color: #437f44; } .pk-blog-excerpt { margin: 12px 0 0; font-size: 15px; line-height: 24px; color: #4c4c4c; } .pk-blog-more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase; color: #184830; text-decoration: none; align-self: flex-start; } .pk-blog-more:hover { color: #437f44; } @media (max-width: 1024px) { .pk-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 640px) { .pk-blog-grid { grid-template-columns: 1fr; } } /* Single post layout */ .pk-post-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 56px; align-items: start; } .pk-post-figure { border: 3px solid #0f0e13; border-radius: 24px; overflow: hidden; margin-bottom: 32px; } .pk-post-figure img { display: block; width: 100%; height: auto; } @media (max-width: 1024px) { .pk-post-layout { grid-template-columns: 1fr; gap: 40px; } } /* Single post — recent-posts sidebar widget */ .pk-recent { border: 3px solid #0f0e13; border-radius: 24px; background: #fff; padding: 24px 22px; margin-bottom: 28px; box-shadow: 6px 6px 0 rgba(0,0,0,.18); } .pk-recent-title { margin: 0; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: #184830; } .pk-recent-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .pk-recent-item a { display: flex; align-items: center; gap: 14px; text-decoration: none; } .pk-recent-thumb { flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #dbe2d5; border: 2px solid #0f0e13; } .pk-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pk-recent-name { display: block; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: 16px; line-height: 20px; color: #184830; } .pk-recent-item a:hover .pk-recent-name { color: #437f44; } .pk-recent-date { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: #6b6b6b; } /* Service-area cities that link to a service-area page: green + underlined by default (non-links stay dark green); hover lightens the green and drops the underline. */ .pk-area-link { color: #166534; transition: color .15s ease; } .pk-area-link .pk-area-label { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: currentColor; text-underline-offset: 3px; } .pk-area-link:hover { color: #437f44; } .pk-area-link:hover .pk-area-label { text-decoration: none; } /* ---------- 3. Marquees ---------- The moving element carries an inline `animation:stats-marquee|brands-marquee`. These keyframes (ported from the original design) drive it; .pk-marquee pauses on hover. .pk-marquee-track is a structural hook only (no animation of its own). */ @keyframes stats-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes brands-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } } .pk-marquee:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .pk-marquee { animation: none !important; } } /* Brand partners: greyscale by default, fade to full color on hover of a logo. */ .pk-marquee-track img { transition: filter .3s ease; } .pk-marquee-track:hover img { filter: grayscale(0) opacity(1) !important; } /* Spinning "If It's Not Workin'" badge ring (ported from the design). */ @keyframes badge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ---------- Scroll reveal + hero flourishes (Home / About / Service) ---------- All motion is gated behind (prefers-reduced-motion: no-preference). The .pk-reveal hidden state is only applied by JS to below-the-fold elements, so there is never a flash of hidden content and nothing hides if JS is off. */ @media (prefers-reduced-motion: no-preference) { .pk-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; } .pk-reveal.is-visible { opacity: 1; transform: none; } /* Electric orb flies the hero path ONCE on load; the flash pops as it lands. The mascot then arrives only AFTER the orb has finished (delayed). */ @keyframes pk-orb-flight { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes pk-orb-flash { 0% { opacity: 0; transform: scale(.35); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.6); } } .pk-orb { animation: pk-orb-flight 2.6s ease-out .2s 1 both; } .pk-flash { animation: pk-orb-flash .8s ease-out 2.2s 1 both; } /* Hero mascot arrival (home) — starts after the orb lands (~2.8s). Resting transform matches the inline translateX(7%). */ @keyframes pk-mascot-arrive { 0% { opacity: 0; transform: translateX(7%) scale(.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(7%) scale(1); } } .pk-mascot { animation: pk-mascot-arrive 1s cubic-bezier(.22,1,.36,1) 2.7s both; } /* Targeted scroll-in animations (JS adds .pk-a + .pk-a-, then .is-in). */ .pk-a { opacity: 0; transition: opacity .85s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; } .pk-a-slide-right { transform: translateX(90px); } .pk-a-fly-in { transform: translateX(-150%) translateY(14px) rotate(-5deg); } .pk-a-rise { transform: translateY(64px); } .pk-a-rise-up { transform: translateY(150px); } /* enters from the bottom of the column */ .pk-a.is-in { opacity: 1; transform: none; } /* One-shot fly-through (reviews flying mascot): a slow right→left cross with a layered up/down "dip" wave (mirrors the flyby-cross + flyby-dip pair from the original index.html). The outer element crosses; the inner img waves. */ .pk-flyby { opacity: 0; } .pk-flyby.is-in { animation: pk-flyby-cross 4.4s ease-in-out both; } .pk-flyby.is-in .pk-fly-dip { animation: pk-flyby-dip 4.4s ease-in-out both; } @keyframes pk-flyby-cross { 0% { opacity: 0; transform: translateX(70vw); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-120vw); } } @keyframes pk-flyby-dip { 0% { transform: translateY(-12px) rotate(3deg); } 25% { transform: translateY(34px) rotate(-3deg); } 50% { transform: translateY(-22px) rotate(3deg); } 75% { transform: translateY(30px) rotate(-4deg); } 100% { transform: translateY(-44px) rotate(2deg); } } } /* ---- Classic reviews section (two-column: mascot left, 1-up slider right) ---- */ .pk-rev-classic-slider, .pk-rev-classic-slider .pk-rev-viewport { min-width: 0; max-width: 100%; } .pk-rev-classic-slider .pk-rev-track > * { flex: 0 0 100%; min-width: 0; box-sizing: border-box; } .pk-rev-quote { background: #072b1a; border: 2px solid #dbe2d5; border-radius: 32px; padding: 32px; } .pk-rev-quote blockquote { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .pk-rev-arrow-dark { width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer; background: #0f0e13; color: #fff; border: 2px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease, opacity .2s ease; } .pk-rev-arrow-dark:hover:not(:disabled) { background: #f9cc3c; color: #0f0e13; transform: translateY(-2px); } .pk-rev-arrow-dark:disabled { opacity: .35; cursor: default; } .pk-reviews-flying { position: absolute; top: 14%; right: 0; left: auto; z-index: 1; width: min(300px, 24%); pointer-events: none; line-height: 0; } @media (max-width: 1024px) { /* When the two columns stack, keep the mascot tidy and drop the flyby accent. */ .pk-reviews-flying { display: none; } .pk-front-mascot { max-height: 380px !important; } } /* ---------- 4. Google reviews (slider + grid) ---------- */ .pk-rev-card { display: flex; flex-direction: column; text-align: left; background: #fff; color: #0f0e13; border: 3px solid #0f0e13; border-radius: 20px; padding: 24px; box-shadow: 6px 6px 0 rgba(0,0,0,.28); box-sizing: border-box; } .pk-rev-text { margin: 14px 0 0; font-size: 15px; line-height: 23px; color: #4c4c4c; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .pk-rev-text.is-expanded { -webkit-line-clamp: unset; overflow: visible; } .pk-rev-more { align-self: flex-start; margin-top: 8px; background: none; border: 0; padding: 0; color: #184830; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* Slider */ .pk-rev-slider { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; } .pk-rev-viewport { overflow: hidden; } .pk-rev-track { display: flex; gap: 24px; transition: transform .5s cubic-bezier(.22,1,.36,1); will-change: transform; } .pk-rev-track > .pk-rev-card { flex: 0 0 calc((100% - 48px) / 3); } .pk-rev-arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #0f0e13; background: #f9cc3c; color: #0f0e13; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 3px 3px 0 #0f0e13; transition: transform .2s ease; } .pk-rev-arrow:hover:not(:disabled) { transform: translateY(-2px); } .pk-rev-arrow:disabled { opacity: .35; cursor: default; } .pk-rev-dots { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; margin-top: 24px; } .pk-rev-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; padding: 0; } .pk-rev-dot.is-active { background: #f9cc3c; border-color: #f9cc3c; } /* Grid (3 across desktop) */ .pk-rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .pk-rev-grid-card[hidden] { display: none; } /* ---------- Coupons (homepage + [perkin_coupons] / [perkin_coupon]) ---------- 3 across desktop / 2 tablet / 1 mobile. Large row-gap leaves room for the mascot that pokes ~94px above each card. Uses a class (not inline grid) so the generic "collapse grids" responsive rule doesn't override the 3/2/1 rhythm. */ /* Flex-centered so a partial row (1 or 2 cards) stays centered, not left-aligned. max-width caps it at 3 across; cards wrap to 2 / 1 as the viewport narrows. */ .pk-coupon-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 120px 40px; max-width: 1204px; margin-inline: auto; } .pk-coupon-grid > .pk-coupon-card { flex: 0 1 360px; max-width: 100%; } .pk-coupon-section { padding: 110px clamp(16px, 5vw, 32px) 48px; } @media (max-width: 640px) { .pk-coupon-grid > .pk-coupon-card { flex-basis: 100%; } } /* ---------- WYSIWYG content (Content 1/2/3 on service pages) ---------- */ .pk-richtext { font-size: 16px; line-height: 26px; color: #4c4c4c; } .pk-richtext > *:first-child { margin-top: 0; } .pk-richtext h2, .pk-richtext h3, .pk-richtext h4 { font-family: Alverata, Fraunces, Georgia, serif; color: #184830; line-height: 1.1; margin: 40px 0 12px; } .pk-richtext h2 { font-size: clamp(28px, 4vw, 42px); } .pk-richtext h3 { font-size: clamp(22px, 3vw, 30px); } .pk-richtext p { margin: 0 0 18px; } .pk-richtext ul, .pk-richtext ol { margin: 0 0 18px; padding-left: 26px; } .pk-richtext li { margin-bottom: 10px; } .pk-richtext a { color: #184830; text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; } .pk-richtext a:hover { color: #437f44; } .pk-richtext img { border-radius: 16px; height: auto; } .pk-richtext strong { color: #184830; } /* ========================================================================== 5. Responsive layer Breakpoints: Desktop >1024px | Tablet 641–1024px | Mobile ≤640px (small-phone tweaks ≤480px). The mockup is a fixed ~1440px desktop design; below the desktop breakpoint we relax the fixed width, collapse multi-column grids, and swap the mega-nav for a mobile menu. ========================================================================== */ /* Relax the fixed 1440px canvas on anything narrower than the design width. */ @media (max-width: 1440px) { header[style], footer[style] { min-width: 0 !important; } [style*="max-width:1760px"] { max-width: 100% !important; } [style*="padding-inline:118px"] { padding-inline: clamp(20px, 5vw, 72px) !important; } } /* ---- Tablet: ≤1024px ---- */ @media (max-width: 1024px) { /* two-up reviews */ .pk-rev-track > .pk-rev-card { flex-basis: calc((100% - 24px) / 2); } .pk-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Collapse the design's multi-column grids to a single column. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* ---- Mobile header: compact row, hamburger, right-slide drawer ---- */ .pk-menu-toggle { display: inline-flex !important; } .pk-hdr-ctas, .pk-hdr-promo { display: none !important; } /* Service-area callout between logo and hamburger. */ .pk-hdr-promo-m { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 150px; justify-content: flex-start; text-align: left; text-decoration: none; font-family: Geologica, sans-serif; font-weight: 700; font-size: 10px; line-height: 13px; letter-spacing: .2px; color: #184830; } .pk-hdr-promo-m > span:first-child { flex: none; } .pk-hdr-promo-m > span:last-child { text-wrap: balance; } /* Tighten the logo row so the callout has room. */ header [style*="padding-block:28px"] { gap: 12px !important; } /* Logo scales down and drops the desktop overhang. */ .pk-logo { margin-block: 0 !important; } .pk-logo-img { height: 55px !important; } /* Drawer panel slides in from the right. */ .pk-nav { position: fixed !important; top: 0; right: 0; bottom: 0; left: auto !important; width: min(360px, 88vw); z-index: 1000; background: #0f0e13; border-bottom: 0 !important; border-left: 3px solid #f9cc3c; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: block !important; padding: 64px 22px 32px; box-shadow: -18px 0 44px rgba(0,0,0,.45); } .pk-nav.is-open { transform: translateX(0); } /* Stack the menu vertically. */ .pk-nav-inner { display: block !important; padding: 0 !important; max-width: none !important; } .pk-nav-inner > ul { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; justify-content: flex-start !important; } .pk-nav-item { position: static; border-bottom: 1px solid rgba(219,226,213,.14); } .pk-navlink { padding: 14px 4px !important; font-size: 16px !important; letter-spacing: .4px !important; justify-content: space-between; } .pk-navlink:hover { box-shadow: none !important; } /* Dropdowns become inline accordions (tap the parent to open). */ .pk-dropdown { position: static !important; inset: auto !important; min-width: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0 0 10px 14px !important; background: transparent !important; box-shadow: none !important; } .pk-dropdown ul { grid-template-columns: 1fr !important; } .pk-dropdown a { color: #dbe2d5 !important; } .pk-dropdown a:hover { background: rgba(219,226,213,.12) !important; } .pk-nav-item:hover > .pk-dropdown, .pk-nav-item:focus-within > .pk-dropdown { display: none; } .pk-nav-item.pk-open > .pk-dropdown { display: block; } /* Close button (top-right of the drawer). */ .pk-drawer-close { display: inline-flex !important; align-items: center; justify-content: center; position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 2px solid #f9cc3c; border-radius: 8px; background: transparent; color: #f9cc3c; cursor: pointer; } /* Backdrop. */ .pk-drawer-overlay { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(15,14,19,.55); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .pk-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } /* Drawer CTAs: stacked full-width buttons between the menu and the footer. */ .pk-drawer-cta { display: grid; gap: 12px; margin-top: 20px; } .pk-drawer-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 3px solid #0f0e13; border-radius: 3px; padding: 13px 18px; font-family: Geologica, sans-serif; font-weight: 900; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; box-shadow: 5px 5px 0 #f9cc3c; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1); } .pk-drawer-btn:active { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #f9cc3c; } .pk-drawer-btn--book { background: #f9cc3c; color: #184830; box-shadow: 5px 5px 0 #fff; } .pk-drawer-btn--book:active { box-shadow: 7px 7px 0 #fff; } .pk-drawer-btn--call { background: #fff; color: #184830; } /* Drawer footer callouts. */ .pk-drawer-foot { display: block; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(219,226,213,.18); } .pk-drawer-foot-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-family: Geologica, sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; color: #dbe2d5; text-decoration: none; } .pk-drawer-foot-row:hover { color: #ffd131; } .pk-drawer-foot-lic { font-weight: 700; font-size: 13px; letter-spacing: .5px; color: #9fb0a4; } /* Sticky bottom CTA bar (both actions, thumb-reachable). */ .pk-mobile-cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; border-top: 3px solid #0f0e13; } .pk-mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 12px; font-family: Geologica, sans-serif; font-weight: 900; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .pk-mobile-cta-book { background: #f9cc3c; color: #184830; } .pk-mobile-cta-call { background: #184830; color: #fff; } body { padding-bottom: 64px; } body.pk-drawer-open { overflow: hidden; } body.pk-drawer-open .pk-mobile-cta { display: none; } /* drawer covers the screen */ /* Tighten the top green bar's side padding on mobile. */ header [style*="padding:9px 118px"] { padding-left: 16px !important; padding-right: 16px !important; } /* Compact the logo + hamburger row. */ header [style*="padding-block:28px"] { padding-block: 10px !important; } /* Big overlapping mascots / negative margins tend to overflow — tame them. */ img[style*="max-width:none"] { max-width: 100% !important; } h1[style] { font-size: clamp(34px, 6vw, 54px) !important; line-height: 1.05 !important; } } @media (min-width: 1025px) { .pk-menu-toggle { display: none; } } /* ---- Mobile: ≤640px ---- */ @media (max-width: 640px) { .pk-rev-track > .pk-rev-card { flex-basis: 100%; } .pk-rev-grid { grid-template-columns: 1fr; } .pk-rev-arrow { width: 40px; height: 40px; } h1[style] { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.06 !important; } h2[style] { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.1 !important; } [style*="padding-block:96px"] { padding-block: 52px !important; } [style*="padding-block:88px"] { padding-block: 44px !important; } [style*="padding-block:80px"] { padding-block: 44px !important; } /* Buttons full-width so tap targets are comfortable. */ a[style*="box-shadow:5px 5px 0"] { width: 100%; } [style*="display:flex"][style*="gap:16px"] { flex-direction: column; } /* The horizontal service-cards flex row becomes a stack; show full content. */ [style*="height:520px"] { height: auto !important; flex-direction: column !important; } [style*="height:520px"] > * { min-height: 300px; } .pk-svccard { flex-grow: 1 !important; } .pk-svccard-min { opacity: 0 !important; } .pk-svccard-full { opacity: 1 !important; pointer-events: auto !important; } } /* ---- Small phones: ≤480px ---- */ @media (max-width: 480px) { [style*="padding-inline:118px"], [style*="padding-inline:72px"] { padding-inline: 16px !important; } .pk-rev-card { padding: 20px; } } /* ---- Gravity Forms (form ID 1) styled to match the dark service form card ---- */ .pk-gform .gform_wrapper, .pk-gform .gform_wrapper form { margin: 0; } .pk-gform .gform_heading, .pk-gform .gform_required_legend { display: none; } /* Field spacing — Gravity Forms provides the grid + width columns natively; just tighten the row gap (GF defaults to ~40px). */ .pk-gform .gform_fields { row-gap: 24px !important; column-gap: 14px !important; margin: 0; padding: 0; } .pk-gform .gfield { min-width: 0; margin: 0; padding: 0; } /* Labels + name sub-labels: force visible, yellow, uppercase. */ .pk-gform .gfield_label, .pk-gform .gform-field-label--type-sub { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; display: block !important; visibility: visible !important; margin: 0 0 6px !important; padding: 0 !important; font-family: Geologica, sans-serif !important; font-weight: 700 !important; font-size: 14px !important; line-height: 18px !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #ffd131 !important; } .pk-gform .gfield_required { display: none !important; } /* Complex "Name" field: hide its "Name" legend, keep First/Last side by side, and put the First/Last sub-labels ABOVE their inputs (GF outputs them after). */ .pk-gform .gfield--type-name > .gfield_label { display: none !important; } .pk-gform .ginput_container--name { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; } .pk-gform .ginput_container--name .gform-grid-col { min-width: 0; padding: 0; display: flex; flex-direction: column; } .pk-gform .ginput_container--name .gform-field-label--type-sub { order: -1; } /* Consent field: hide its "Consent" legend. */ .pk-gform .gfield--type-consent > .gfield_label { display: none !important; } /* Inputs / select / textarea. */ .pk-gform input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .pk-gform select, .pk-gform textarea { width: 100% !important; box-sizing: border-box; border: 3px solid #0f0e13; border-radius: 8px; background: #fff; padding: 11px 13px; font-family: Geologica, sans-serif; font-weight: 500; font-size: 15px; line-height: 20px; color: #0f0e13; } .pk-gform textarea { min-height: 120px; line-height: 23px; resize: vertical; } .pk-gform ::placeholder { color: #6b6b6b; opacity: 1; } .pk-gform input[type="file"] { padding: 0 !important; } .pk-gform .gfield_description.gform_fileupload_rules { color: #fff !important; } .pk-gform select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0e13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } /* Consent row: checkbox + light text. */ .pk-gform .ginput_container_consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; } .pk-gform .ginput_container_consent input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #184830; border: 3px solid #0f0e13; border-radius: 6px; cursor: pointer; } .pk-gform .gfield_consent_label { margin: 0 !important; font-family: Geologica, sans-serif !important; font-weight: 500 !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: 0 !important; text-transform: none !important; color: #dbe2d5 !important; } .pk-gform .gfield_consent_label a { color: #ffd131; text-decoration: underline; text-underline-offset: 2px; } /* Submit button (full width). Broad selectors + !important to beat GF theme CSS. */ .pk-gform .gform_footer, .pk-gform .gform-footer { margin: 24px 0 0 !important; padding: 0 !important; } .pk-gform .gform_footer input[type="submit"], .pk-gform .gform_footer button, .pk-gform .gform-footer input[type="submit"], .pk-gform .gform-footer button, .pk-gform input.gform_button, .pk-gform .gform_button, .pk-gform .gform-button { width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; border: 3px solid #0f0e13 !important; border-radius: 3px !important; padding: 14px 24px !important; margin: 0 !important; font-family: Geologica, sans-serif !important; font-weight: 900 !important; font-size: 17px !important; line-height: 24px !important; letter-spacing: 2.4px !important; text-transform: uppercase !important; background: #f9cc3c !important; color: #184830 !important; box-shadow: 5px 5px 0 #fff !important; cursor: pointer !important; transition: transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms cubic-bezier(0.22,1,0.36,1); } .pk-gform .gform_footer input[type="submit"]:hover, .pk-gform .gform_footer button:hover, .pk-gform .gform_button:hover, .pk-gform .gform-button:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #fff !important; } /* Validation / confirmation. */ .pk-gform .gfield_validation_message, .pk-gform .validation_message { color: #ffb3a7; font-size: 13px; margin-top: 6px; background: none; border: 0; padding: 0; } .pk-gform .gfield_error input, .pk-gform .gfield_error select, .pk-gform .gfield_error textarea { border-color: #d64545; } .pk-gform .gform_confirmation_message { color: #fff; } /* Narrow sidebar / mobile: stack the two-column rows. */ @media (max-width: 520px) { .pk-gform .ginput_container--name { grid-template-columns: 1fr; } } /* ========================================================================== Mobile responsiveness pass — targeted overrides (last so they win) ========================================================================== */ /* 2) Homepage service grid: horizontal accordion → stacked rows on tablet & mobile. */ @media (max-width: 1024px) { .pk-svcgrid { height: auto !important; flex-direction: column !important; } .pk-svcgrid > * { min-height: 280px; } .pk-svccard { flex-grow: 1 !important; } .pk-svccard-min { opacity: 0 !important; } .pk-svccard-full { opacity: 1 !important; pointer-events: auto !important; } } /* Hero mobile-only bits are hidden on desktop/tablet. */ .pk-hero-badge, .pk-hero-overlay { display: none; } /* 3) + 5) Homepage hero: single column, mascot centered below the buttons; centered text. */ @media (max-width: 1024px) { /* Inline grid-column:1/2 forces a phantom 2nd column on collapse — reset it. */ .pk-hero-grid { grid-template-columns: 1fr !important; padding-inline: 22px !important; } /* min-width:0 so the column can shrink to the padded width instead of being forced wider by nowrap text / full-width buttons (which spilled off-screen). */ .pk-hero-copy, .pk-hero-media { grid-column: auto !important; min-width: 0 !important; } .pk-hero-copy { max-width: 100%; overflow-wrap: break-word; } /* Mascot moves ABOVE the headline. */ .pk-hero-media { order: -1; justify-content: center; height: auto !important; align-self: auto !important; } .pk-hero-media .pk-mascot { width: min(280px, 62vw) !important; transform: none !important; margin: 0 auto 6px !important; } } @media (max-width: 640px) { section[aria-label="Introduction"] { padding-top: 20px !important; } .pk-hero-copy { text-align: center; padding-bottom: 40px !important; } .pk-hero-copy .pk-hero-h, .pk-hero-copy .pk-hero-sub { text-align: center; } /* Let the (desktop-nowrap) first headline line wrap so it can't force overflow. */ .pk-hero-copy .pk-hero-h span { white-space: normal !important; } .pk-hero-copy .pk-hero-h { font-size: clamp(40px, 12vw, 58px) !important; line-height: 1.02 !important; } .pk-hero-copy .pk-hero-sub { margin-left: auto !important; margin-right: auto !important; } .pk-hero-copy [style*="gap:16px"] { justify-content: center; align-items: center; } /* Turn off the flying orb / flash on phones. */ .pk-orb, .pk-flash { display: none !important; } /* Shrink CTA button tracking so labels never overflow narrow screens. */ a[style*="letter-spacing:2.7px"], button[style*="letter-spacing:2.7px"] { letter-spacing: 1px !important; } /* Swap the full-body mascot for the uploaded CTA captain image. */ .pk-hero-media .pk-mascot { display: none !important; } .pk-hero-badge { display: block !important; width: min(300px, 78vw); height: auto; margin: 0 auto; filter: drop-shadow(0 16px 26px rgba(0,0,0,0.5)); } /* Black-to-transparent overlay: mascot pops on black up top, circuit shows below. */ .pk-hero-overlay { display: block; background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 24%, rgba(0,0,0,.38) 48%, transparent 72%); } } /* 4) Mobile header top bar: single star, drop the "Leave a Review" link. */ .pk-topbar-star1 { display: none; } @media (max-width: 640px) { .pk-topbar-stars { display: none; } .pk-topbar-star1 { display: inline-block; } .pk-topbar-sep, .pk-topbar-link { display: none !important; } } /* 6) "Call or Book Today" mini-CTA: hide mascot, center + tighten text/buttons. */ @media (max-width: 1024px) { .pk-minicta-mascot { display: none !important; } .pk-minicta-grid { gap: 16px !important; } .pk-minicta-copy { text-align: center !important; } .pk-minicta-actions { align-items: center !important; } } /* Services CTA card: taller, mascot centered on top of the title (like the icons). */ @media (max-width: 640px) { .pk-svc-cta-mascot { display: none !important; } /* hide the flying mascot on mobile */ /* Image occupies only the top ~75% (top-aligned) so its bottom isn't buried by the gradient; the lower ~25% is a solid dark-green panel for the copy. */ .pk-svcgrid > * { min-height: 480px; } .pk-svcgrid .pk-svccard > img { height: 75% !important; bottom: auto !important; object-position: top !important; } .pk-svcgrid .pk-svccard-full { background: linear-gradient(to bottom, rgba(7,43,26,0) 0%, rgba(7,43,26,0) 66%, rgba(7,43,26,.6) 74%, #072b1a 78%); } /* "Not Sure What You Need?" CTA card: hidden on mobile (a global CTA follows it). */ .pk-svcgrid div.pk-svccard { display: none !important; } } /* 7) About-section badge: smaller, no longer hanging off the left edge. */ @media (max-width: 640px) { #about [style*="left:-54px"] { width: 120px !important; left: -6px !important; top: -22px !important; } #careers [style*="right:-54px"] { width: 118px !important; right: -6px !important; top: -22px !important; } } /* 8) Why Choose Us reasons: native one-at-a-time scroll on phones, cards centered. */ @media (max-width: 640px) { [data-pk-drag-marquee] { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-inline: calc((100vw - min(86vw, 340px)) / 2) !important; } .pk-reason-card { flex-basis: min(86vw, 340px) !important; margin-right: 16px !important; scroll-snap-align: center; } } /* 9) Reviews: center rating + headline + arrows (leave the quote text left-aligned). */ @media (max-width: 1024px) { .pk-rev-content > span, .pk-rev-content > h2 { text-align: center; } .pk-rev-actions { justify-content: center; } } /* 10) Service-area section: map above the city-list column; city list 2-up; smaller van. */ @media (max-width: 1024px) { .pk-sa-media { order: 1 !important; margin-bottom: 20px; } .pk-sa-copy { order: 2 !important; } .pk-sa-pills { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { #service-area img[data-view="self"] { width: 190px !important; right: -6px !important; bottom: -14px !important; } #service-area { padding-bottom: 90px !important; } } /* 11) Final CTA: smaller badge, bigger headline, tighter stack, centered. */ @media (max-width: 1024px) { .pk-fcta-grid { gap: 16px !important; } .pk-fcta-badge { width: 170px !important; margin-block: 0 !important; } .pk-fcta-copy { text-align: center; } .pk-fcta-copy h2 { font-size: clamp(32px, 9vw, 46px) !important; line-height: 1.05 !important; } .pk-fcta-copy p { margin-top: 10px !important; } .pk-fcta-actions { align-items: center !important; } } /* 12) Footer legal links: one left-aligned ROW on mobile. */ @media (max-width: 640px) { .pk-footer-bottom { flex-direction: column !important; align-items: flex-start !important; text-align: left; } .pk-footer-legal { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 12px !important; width: 100%; } .pk-footer-legal a { white-space: nowrap; font-size: 12px; } /* Less dead space above the logo; more room between the footer CTA buttons. */ .pk-footer-grid { padding-block: 28px 32px !important; } .pk-footer-cta { gap: 18px !important; } } /* Tighter vertical spacing on mobile (stacked sections). */ @media (max-width: 1024px) { .pk-about-grid { gap: 24px !important; } /* about image ↔ text */ .pk-reviews-grid { gap: 20px !important; } /* mascot ↔ review rating */ } /* Why Choose Us slider: tighter top/bottom + mobile nav arrows. */ .pk-reasons-nav { display: none; } @media (max-width: 640px) { [data-pk-drag-marquee] { padding-block: 8px !important; } .pk-reasons-nav { display: flex; justify-content: center; gap: 16px; margin-top: 16px; } .pk-reasons-prev, .pk-reasons-next { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0f0e13; background: #f9cc3c; color: #0f0e13; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 3px 3px 0 #0f0e13; } } /* Trusted-partner badges: always render (exempt the marquee from scroll-reveal). */ [aria-label="Affiliations"] > div > div { opacity: 1 !important; transform: none !important; } /* The generic mobile "img[max-width:none] → 100%" rule collapsed these logos to nothing inside the auto-width marquee track; restore their natural sizing. */ [aria-label="Affiliations"] .pk-marquee img { max-width: none !important; } /* On phones, give each logo a fixed slot so wide logos can't overlap their neighbors. */ @media (max-width: 640px) { [aria-label="Affiliations"] .pk-marquee-track { width: 140px !important; height: 70px !important; margin-right: 30px !important; } [aria-label="Affiliations"] .pk-marquee img { max-width: 100% !important; max-height: 44px !important; width: auto !important; height: auto !important; } } /* Coupons: tighten the gap between the yellow offer headline and its description. */ .pk-coupon-desc { margin-top: -8px; } @media (max-width: 640px) { .pk-coupon-desc { margin-top: -14px !important; } } /* Service-area section: tighter gap between the map and the city-list column. */ @media (max-width: 1024px) { .pk-sa-grid { gap: 24px !important; } } /* Reviews page rating call-out: center the Google icon + rating + count on mobile. */ @media (max-width: 640px) { .pk-rev-callout { justify-content: center; text-align: center; } .pk-rev-callout-info { justify-content: center; flex-wrap: wrap; margin: 0 auto; } .pk-rev-callout-info > div > div { justify-content: center; } } /* Header dropdown caret is its own control (parent link stays navigable). */ .pk-nav-toggle { background: none; border: 0; padding: 0 4px; margin: 0; cursor: pointer; color: #f9cc3c; display: inline-flex; align-items: center; } .pk-nav-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; } .pk-nav-item.pk-open > .pk-nav-toggle svg { transform: rotate(180deg); } @media (max-width: 1024px) { /* Parent link takes the row; caret sits at the right as a big tap target. */ .pk-nav-item.has-dropdown > .pk-navlink { flex: 1 1 auto; } .pk-nav-toggle { margin-left: auto; padding: 14px 12px; } /* Dropdown wraps to its own full-width line (accordion). min-width:0 so the flex item can shrink to the drawer instead of sizing to its longest label. */ .pk-nav-item.has-dropdown > .pk-dropdown { flex-basis: 100%; width: 100%; min-width: 0; } .pk-dropdown ul, .pk-dropdown li { min-width: 0; } /* Long submenu labels wrap instead of overflowing off the drawer. */ .pk-dropdown a { white-space: normal !important; overflow-wrap: anywhere; } /* Never split the mobile dropdown into two columns (override the >12-item grid). */ .pk-dropdown ul { grid-auto-flow: row !important; grid-template-rows: auto !important; grid-template-columns: 1fr !important; } /* Belt-and-suspenders: keep the drawer from ever scrolling sideways. */ .pk-nav { overflow-x: hidden; } } /* Service page: tighter content→sidebar (coupon) gap; smaller featured-image badge. */ @media (max-width: 1024px) { .pk-service-grid { gap: 28px !important; } } @media (max-width: 640px) { .pk-service-badge { width: 118px !important; top: -20px !important; left: -6px !important; } } /* ========================================================================== Home Protection Plan template ========================================================================== */ .pk-hp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: stretch; } .pk-hp-card { display: flex; flex-direction: column; background: #fff; border: 3px solid #0f0e13; border-radius: 16px; overflow: hidden; box-shadow: 6px 6px 0 rgba(15,14,19,.14); } .pk-hp-card--vip { box-shadow: 12px 12px 0 #f9cc3c; } .pk-hp-head { padding: 28px 30px; } .pk-hp-head--member { background: #184830; } .pk-hp-head--vip { background: #0f0e13; } .pk-hp-eyebrow { display: block; font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .pk-hp-head--member .pk-hp-eyebrow { color: #b5d3b5; } .pk-hp-head--vip .pk-hp-eyebrow { color: #dcdcdc; } .pk-hp-name { margin: 0; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.12; letter-spacing: 0.03em; text-transform: uppercase; } .pk-hp-head--member .pk-hp-name { color: #fff; } .pk-hp-head--vip .pk-hp-name { color: #f9cc3c; } .pk-hp-price { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; } .pk-hp-price strong { font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(34px, 4vw, 46px); line-height: 1; } .pk-hp-price span { font-weight: 700; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; opacity: .9; } .pk-hp-head--member .pk-hp-price strong, .pk-hp-head--member .pk-hp-price span { color: #fff; } .pk-hp-head--vip .pk-hp-price strong, .pk-hp-head--vip .pk-hp-price span { color: #f9cc3c; } .pk-hp-body { flex: 1; display: flex; flex-direction: column; padding: 28px 30px 30px; } .pk-hp-lead { margin: 0; font-size: 15.5px; line-height: 24px; color: #0f0e13; } .pk-hp-sec { margin: 26px 0 12px; font-family: Geologica, sans-serif; font-weight: 800; font-size: 15px; line-height: 21px; letter-spacing: .4px; text-transform: uppercase; color: #184830; } .pk-hp-secintro { margin: 0 0 14px; font-size: 14.5px; line-height: 22px; color: #4c4c4c; } .pk-hp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pk-hp-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 21px; color: #0f0e13; } .pk-hp-check { flex: none; width: 22px; height: 22px; margin-top: 1px; } .pk-hp-check svg { width: 22px; height: 22px; display: block; } .pk-hp-cta { margin-top: auto; padding-top: 26px; } .pk-hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 3px; border: 3px solid #0f0e13; padding: 13px 24px; font-weight: 900; font-size: 16px; line-height: 22px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1); } .pk-hp-btn--member { background: #184830; color: #fff; box-shadow: 5px 5px 0 #0f0e13; } .pk-hp-btn--vip { background: #f9cc3c; color: #184830; box-shadow: 5px 5px 0 #0f0e13; } .pk-hp-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #0f0e13; } /* Keep the label color on hover (base a:hover{color:inherit} would turn it dark). */ .pk-hp-btn--member:hover { color: #fff; } .pk-hp-btn--vip:hover { color: #184830; } @media (max-width: 900px) { .pk-hp-plans { grid-template-columns: 1fr; gap: 28px; } .pk-hp-card--vip { box-shadow: 8px 8px 0 #f9cc3c; } } @media (max-width: 1024px) { /* Hero stacks; mascot centers under the copy. */ .pk-hp-hero-media { align-self: center !important; margin-top: 8px; } .pk-hp-hero-media img { max-width: 300px !important; } .pk-hp-hero-copy { text-align: center; } .pk-hp-hero-copy p { margin-left: auto; margin-right: auto; } .pk-hp-hero-copy [style*="gap:16px"] { justify-content: center; } } /* ========================================================================== Contact page template ========================================================================== */ .pk-c-bullets { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pk-c-bullets li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; line-height: 20px; letter-spacing: .4px; text-transform: uppercase; color: #fff; } .pk-c-bolt { flex: none; color: #ffd131; line-height: 0; } .pk-c-bolt svg { width: 20px; height: 20px; display: block; } /* Two-column block, pulled up to overlap the hero. */ .pk-c-main { position: relative; z-index: 2; margin-top: clamp(40px, 6vw, 64px); } .pk-c-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; } .pk-c-info { background: #fff; border: 3px solid #0f0e13; border-radius: 20px; padding: clamp(28px, 3vw, 44px); box-shadow: 6px 6px 0 rgba(15,14,19,.12); } .pk-c-h2 { margin: 0; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: #184830; } .pk-c-body { margin: 18px 0 0; font-size: 16px; line-height: 26px; color: #4c4c4c; } .pk-c-phone { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); color: #184830; text-decoration: none; } .pk-c-phone-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #f9cc3c; border: 3px solid #0f0e13; display: flex; align-items: center; justify-content: center; } .pk-c-office { margin: 30px 0 14px; font-family: Geologica, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #0f0e13; } .pk-c-details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .pk-c-details li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: #0f0e13; } .pk-c-details li > span:first-child, .pk-c-ic { flex: none; width: 22px; display: inline-flex; } .pk-c-ic svg { width: 20px; height: 20px; } .pk-c-formcard { background: #184830; border: 3px solid #0f0e13; border-radius: 20px; padding: clamp(24px, 3vw, 40px); box-shadow: 12px 12px 0 #f9cc3c; } .pk-c-formtitle { margin: 0 0 20px; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: 0.03em; text-transform: uppercase; color: #f9cc3c; } /* Free Second Opinion: text left, mascot right. */ .pk-c-so-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; } .pk-c-so-media { display: flex; justify-content: flex-end; } .pk-c-so-mascot { display: block; width: clamp(180px, 20vw, 260px); height: auto; filter: drop-shadow(0 18px 26px rgba(15,14,19,.28)); } @media (max-width: 900px) { .pk-c-grid { grid-template-columns: 1fr; } .pk-c-formcard { box-shadow: 8px 8px 0 #f9cc3c; } .pk-c-so-grid { grid-template-columns: 1fr; } .pk-c-so-media { justify-content: center; } .pk-c-so-mascot { width: min(220px, 60vw); } } /* Thank You page: hide the internal-hero Book/Call buttons (page has its own CTAs). */ .page-template-template-thank-you-php .pk-ihero-ctas { display: none; } /* Homepage hero SEO tag swap (headline =
, subtitle =

): lock the subtitle size so the global mobile h1 clamp can't enlarge it. */ @media (max-width: 1024px) { .pk-hero-copy .pk-hero-sub { font-size: 18px !important; line-height: 28px !important; } } /* ========================================================================== Perkin Perks Program template ========================================================================== */ .pk-pp-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .pk-pp-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; border: 3px solid #0f0e13; border-radius: 0; padding: clamp(26px, 3vw, 44px); } .pk-pp-card--green { background: #184830; box-shadow: 10px 10px 0 #f9cc3c; } .pk-pp-card--dark { background: #0f0e13; box-shadow: 10px 10px 0 rgba(15,14,19,.2); } .pk-pp-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #f9cc3c; border: 3px solid #0f0e13; color: #0f0e13; font-family: Geologica, sans-serif; font-weight: 900; font-size: 18px; line-height: 1; margin-bottom: 16px; } .pk-pp-eyebrow { display: block; font-family: Geologica, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #ffd131; margin-bottom: 10px; } .pk-pp-title { margin: 0; font-family: Alverata, Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; } .pk-pp-sub { margin: 14px 0 0; font-weight: 700; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.4; color: #ffd131; } .pk-pp-body { margin: 14px 0 0; font-size: 15.5px; line-height: 24px; color: #dbe2d5; } .pk-pp-btn { margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid #0f0e13; border-radius: 3px; padding: 12px 22px; font-family: Geologica, sans-serif; font-weight: 900; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; background: #f9cc3c; color: #184830; box-shadow: 5px 5px 0 #0f0e13; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1); } .pk-pp-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #0f0e13; color: #184830; } .pk-pp-details { background: #fff; border: 3px solid #0f0e13; border-radius: 0; padding: clamp(20px, 2.4vw, 30px); } .pk-pp-details-label { display: block; font-family: Geologica, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #184830; margin-bottom: 16px; } .pk-pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .pk-pp-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 21px; color: #0f0e13; } .pk-pp-check { flex: none; width: 22px; height: 22px; margin-top: 1px; } .pk-pp-check svg { width: 22px; height: 22px; display: block; } @media (max-width: 1024px) { .pk-pp-hero-media { align-self: center !important; margin-top: 8px; } .pk-pp-hero-media img { max-width: 300px !important; } .pk-pp-hero-copy { text-align: center; } .pk-pp-hero-copy p { margin-left: auto; margin-right: auto; } .pk-pp-hero-copy [style*="gap:16px"] { justify-content: center; } } @media (max-width: 860px) { .pk-pp-card { grid-template-columns: 1fr; } .pk-pp-card--green { box-shadow: 7px 7px 0 #f9cc3c; } .pk-pp-card--dark { box-shadow: 7px 7px 0 rgba(15,14,19,.2); } } /* Smooth in-page scrolling; offset anchor targets for the sticky header (~100px). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } #perks, #contact-form, #careers-form, #hp-form { scroll-margin-top: 110px; }