/* Central Prairie Pest Control -- brand.css * * Presentation-only overrides. Nothing here changes the page markup, so there is * no rendered-HTML / RSC-payload pair that can fall out of step, and nothing for * Tailwind to purge. Same reasoning as brand.js and social-dock.js, except this * is a real stylesheet in , so it applies on the first paint instead of * after load -- no flash of the old layout. * * What it does: the pest lists used to run straight down the page, one tall card * per pest with a paragraph of write-up, which made both the homepage and /pests/ * drag on. The write-ups already live on the pest pages themselves, so here the * cards collapse to just the name, sitting side by side. * * The grids are addressed by their exact class attribute. Both strings are unique * across the whole site (checked), which is what makes this safe without adding a * hook class to the markup. If a grid's classes ever change, these rules simply * stop matching and the original layout comes back -- it fails open. * ---------------------------------------------------------------------------- */ /* ===== header logo: full lockup at rest, CP mark once scrolled ============ brand.js puts .cppc-scrolled on past 40px. It has to live on and be driven from a stylesheet, because React re-renders the header and wipes anything we add to the header itself. */ header img[src*="logo-wordmark"] { max-width: 200px; opacity: 1; transition: max-width .34s ease, opacity .22s ease, margin-left .34s ease; } html.cppc-scrolled header img[src*="logo-wordmark"] { max-width: 0; opacity: 0; margin-left: -10px; } header img[src*="logo-mark"] { transition: height .34s ease, width .34s ease; } html.cppc-scrolled header img[src*="logo-mark"] { height: 46px !important; width: 103px !important; } /* ===== closing-band watermark ============================================ The "pests don't wait" band carried a giant faint "CP" set in the display face. It reads as a stray monogram rather than as branding, so it is off. One of these per page, on 23 pages. */ div[aria-hidden="true"][class*="text-[22rem]"] { display: none; } /* ===== homepage, "FIND YOUR PEST." ========================================= */ div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } @media (min-width: 640px) { div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; } } /* each card down to a single centred line */ div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a { display: flex; align-items: center; min-height: 3.5rem; padding: .85rem 1rem; } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a > p { font-size: 12.5px; line-height: 1.35; letter-spacing: .1em; } /* the second paragraph in every card is the write-up */ div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a > p + p { display: none; } /* the pest's mark to the left of its name. "Browse all pests" (/pests/) is not a pest, so it gets none. */ div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a { gap: .75rem; } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a:not([href="/pests/"])::before { content: ""; flex: none; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .9; transition: opacity .3s ease, transform .3s ease; } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a:not([href="/pests/"]):hover::before { opacity: 1; transform: scale(1.06); } @media (max-width: 479px) { div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a { gap: .6rem; padding: .75rem .8rem; } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a:not([href="/pests/"])::before { width: 32px; height: 32px; } } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/bed-bug-control/"]::before { background-image: url("/images/pests/marks/bed-bugs.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/cockroach-control/"]::before { background-image: url("/images/pests/marks/cockroaches.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/mice-rat-control/"]::before { background-image: url("/images/pests/marks/mice-rats.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/ant-control/"]::before { background-image: url("/images/pests/marks/ants.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/wasp-control/"]::before { background-image: url("/images/pests/marks/wasps.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/tick-control/"]::before { background-image: url("/images/pests/marks/ticks.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/mosquito-control/"]::before { background-image: url("/images/pests/marks/mosquitoes.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/fly-control/"]::before { background-image: url("/images/pests/marks/flies.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/pigeon-control/"]::before { background-image: url("/images/pests/marks/pigeons.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/stored-product-pests/"]::before { background-image: url("/images/pests/marks/stored-product-pests.png"); } div[class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"] > a[href="/occasional-invaders/"]::before { background-image: url("/images/pests/marks/occasional-invaders.png"); } /* ===== /pests/ ============================================================= */ div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } @media (min-width: 640px) { div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; } } /* The card becomes a two-column grid: the pest's mark on the left, its name over the link on the right. The mark is a ::before, so nothing is added to the markup. */ div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "mark name" "mark link"; column-gap: .85rem; align-content: center; padding: .9rem 1rem; } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a::before { content: ""; grid-area: mark; width: 54px; height: 54px; align-self: center; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .9; transition: opacity .3s ease, transform .3s ease; } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a:hover::before { opacity: 1; transform: scale(1.06); } /* the kicker just restates the heading ("Bed Bug Treatment" / "Bed Bugs") */ div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a > span:first-of-type { display: none; } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a > p { display: none; } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a > h3 { grid-area: name; align-self: end; margin-top: 0; font-size: 1.05rem; } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a > span:last-of-type { grid-area: link; align-self: start; margin-top: 0; padding-top: .2rem; font-size: 12px; } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/bed-bug-control/"]::before { background-image: url("/images/pests/marks/bed-bugs.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/cockroach-control/"]::before { background-image: url("/images/pests/marks/cockroaches.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/mice-rat-control/"]::before { background-image: url("/images/pests/marks/mice-rats.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/ant-control/"]::before { background-image: url("/images/pests/marks/ants.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/wasp-control/"]::before { background-image: url("/images/pests/marks/wasps.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/tick-control/"]::before { background-image: url("/images/pests/marks/ticks.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/mosquito-control/"]::before { background-image: url("/images/pests/marks/mosquitoes.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/fly-control/"]::before { background-image: url("/images/pests/marks/flies.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/pigeon-control/"]::before { background-image: url("/images/pests/marks/pigeons.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/stored-product-pests/"]::before { background-image: url("/images/pests/marks/stored-product-pests.png"); } div[class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"] > div > a[href="/occasional-invaders/"]::before { background-image: url("/images/pests/marks/occasional-invaders.png"); } /* --------------------------------------------------------------------------- /pests/ -- "The wander-in crowd" Five cards, all pointing at the same page, so there is no href to hang the artwork on: they are matched in document order instead. If the order ever changes, the marks follow the position, not the name -- check this block. The write-up stays here. This section is five short entries, not the long list, so it does not drag the page the way the library above did. --------------------------------------------------------------------------- */ div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "mark name" "mark copy" "mark link"; column-gap: 1rem; } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a::before { content: ""; grid-area: mark; width: 64px; height: 64px; align-self: start; margin-top: .1rem; background-repeat: no-repeat; background-position: center top; background-size: contain; opacity: .9; transition: opacity .3s ease, transform .3s ease; } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a:hover::before { opacity: 1; transform: scale(1.06); } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a > span:nth-of-type(1) { grid-area: name; } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a > span:nth-of-type(2) { grid-area: copy; } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a > span:nth-of-type(3) { grid-area: link; align-self: end; } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a:nth-child(1)::before { background-image: url("/images/pests/marks/spiders.png"); } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a:nth-child(2)::before { background-image: url("/images/pests/marks/beetles.png"); } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a:nth-child(3)::before { background-image: url("/images/pests/marks/silverfish.png"); } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a:nth-child(4)::before { background-image: url("/images/pests/marks/earwigs.png"); } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a:nth-child(5)::before { background-image: url("/images/pests/marks/centipedes.png"); } @media (max-width: 479px) { div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a { grid-template-columns: 48px 1fr; column-gap: .8rem; } div[class="mt-10 grid grid-cols-1 gap-px border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-3"] > a::before { width: 48px; height: 48px; } } /* Netlify injects a fixed "Powered by Netlify" badge (iframe#nl-badge-frame) in the bottom-right corner, where it covered the Free Quote half of the phone action bar. Below 768px (where that bar shows) lift the badge above the bar. The bar is 57-80px tall depending on text wrap; the badge's visible part starts 13px above its bottom. */ @media (max-width: 767px) { #nl-badge-frame { bottom: calc(76px + env(safe-area-inset-bottom)) !important; } }