/* ============================================================================ Jupiterpest.com - Home page Figma: J0PCno2gHEW7c6FoluBkTo - node 48:11 - artboard 1600 - 10271 SCALING SYSTEM -------------- Artboard is 1600px wide, so 1vw = 16 design px. Every display size is clamp(min, (figma/16)vw, figma). Every column width is a PERCENTAGE of its parent's CONTENT box. The page gutter is proportional: min(5.625vw, 90px) (90 / 1600). PROVENANCE ---------- The Figma MCP is capped at the seat level, so get_design_context has never run. Everything here was recovered by measurement instead: - geometry from the one get_metadata call that succeeded - colours sampled from the delivered SVGs and background images - type solved from Figma box widths (see the type-token block) Values that no asset could supply are still marked TODO: body/muted/border colours, the gallery band fill (48:293), radii and the card shadow. ========================================================================== */ /* ---------- colour tokens ------------------------------------------------ MEASURED - sampled out of the delivered SVGs and background images. Anything still marked TODO was not derivable from an asset and needs get_design_context to confirm. ------------------------------------------------------------------------ */ :root{ /* brand - read from the icon strokes and fills */ --c-brand: #FFCC00; /* icon strokes, pin fill, chevrons */ --c-brand-star: #FFD700; /* footer stars */ --c-brand-amber: #FFC107; /* review-card stars */ --c-brand-call: #F5C841; /* call icon */ --c-ink: #111111; /* social + badge backgrounds */ --c-slate: #1F2937; /* why-choose icon strokes */ --c-peach: #FDF0EC; /* tip-card icon circle background */ /* band gradient 48:212 (1600-1403) - sampled top ?' bottom */ --c-cream-top: #FAF0E7; --c-cream-mid: #FCEFDE; --c-cream-bot: #FCE9B1; --c-dark-contact: #0D0D0B; /* contact-bg.jpg average */ --c-body: #656565; /* client-supplied body copy colour */ --c-muted: #7A7A7A; /* TODO */ --c-line: #E6E6E6; /* TODO */ --c-page: #FBF0E8; /* client-supplied — whole-body base */ --c-form-icon: #8DA39F; /* stroke colour baked into the form SVGs */ --c-pest-icon: #7A7A7A; /* TODO - pest strip resting grey, no source */ /* Warm chip/tint used by the video captions and the featured "why" card. TODO: taken from the 90% stop of the 48:212 gradient — closest sampled match, but not confirmed. One hex here updates both places. */ --c-tint: #FCEBC6; --c-panel: #FCFAF7; /* client-supplied - tip card fill */ --c-footer-text: #CCCCCC; /* client-supplied - footer contact + links */ --c-gallery: #FCEBCA; /* client-supplied - gallery band 48:293 */ --c-surface: #ffffff; --c-surface-alt: #FAF0E7; --c-dark: #111111; /* TODO - gallery band 48:293, no asset */ --c-footer: #111111; /* TODO */ --c-on-dark: #ffffff; --c-on-dark-mute: #B8B8B8; /* TODO */ --c-on-brand: #111111; /* text on the gold fill - white is 1.7:1 */ /* aliases kept so existing rules resolve */ --c-brand-dark: #111111; --c-accent: #FFCC00; --c-band: #FCEFDE; --c-band-review: #FAF0E7; } /* ---------- fonts ------------------------------------------------------- */ @font-face{font-family:"ImpactJP";src:url("/fonts/impact.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Fraunces";src:url("/fonts/Fraunces-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap} @font-face{font-family:"Inter";src:url("/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} /* Client-supplied. Inter ships one file per optical size; this is the 28pt cut, which is what the Regular and Bold above already are — mixing optical sizes inside one family changes the letterforms between weights. */ @font-face{font-family:"Inter";src:url("/fonts/Inter-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("/fonts/Inter-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("/fonts/Inter-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Outfit";src:url("/fonts/Outfit-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("/fonts/Manrope-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Geist";src:url("/fonts/Geist-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/fonts/Poppins-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} /* ---------- type tokens ------------------------------------------------- SOLVED BY MEASUREMENT, not guessed. For each Figma text box of known width the font size was solved from the rendered advance width (width scales linearly with size). Residuals quoted below are vs the Figma box. Impact 56 "Complete Pest Control Services" -0.2% - "Why Choose Jupiterpest.com" -0.2% - "Have Pest Problems- -0.2% Impact 40 "Termite Control" -0.2% Impact 33.5 "25+ Years Experience" 0.0% - "Certified Operators" -0.1% - "Licensed in Florida" 0.0% Impact 27 "Service Areas" +1.0% - "Quick Links" -1.0% - "Contact" -0.8% Poppins 500/15 "Home" 0.0% - "Cockroaches" 0.0% - "Mice & Rats" -0.2% Poppins 500/20 "Learn More About Us" +1.0% - "View Our Work" +1.2% Poppins 600/19 "How Often Should Termite Inspections- +0.5% Poppins 400/17 "Palm Beach Gardens, FL" +0.5% - "Reviewed: Aug 14, 2026" +0.2% ------------------------------------------------------------------------ */ :root{ --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "ImpactJP", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; --font-accent: "Fraunces", Georgia, "Times New Roman", serif; /* tip numbers */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-tip: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-field: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-form: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fs-h1: clamp(32px, 3.5vw, 56px); /* 580-112 ?' 2 lines @ lh56 */ --fs-h2: clamp(30px, 3.5vw, 56px); --fs-h3: clamp(26px, 2.5vw, 40px); --fs-card-t: clamp(22px, 2.0938vw, 33.5px); --fs-fheading: clamp(20px, 1.6875vw, 27px); --fs-lead: clamp(14px, 1.0625vw, 17px); --fs-body: clamp(14px, 1.0625vw, 17px); --fs-nav: clamp(13px, .9375vw, 15px); --fs-btn: clamp(14px, 1.2188vw, 19.5px); /* solved: "Request Service" box 159 */ --fs-faq: clamp(15px, 1.1875vw, 19px); --fs-small: clamp(12px, .875vw, 14px); --fs-topbar: clamp(10px, .78125vw, 12.5px); /* solved: 48:33 box 387 wide */ --lh-tight: 1; /* Impact headings: 56 / 56 */ --lh-body: 1.5882; /* 27 / 17 */ --r-sm: 8px; /* TODO */ --r-md: 16px; /* TODO */ --r-lg: 24px; /* TODO */ --r-pill: 999px; --shadow: 0 4px 24px rgba(16, 26, 34, .08); /* TODO */ } /* ---------- layout constants (MEASURED from Figma) ---------------------- */ :root{ --aw: 1600; /* artboard width */ --gutter: min(5.625vw, 90px); /* 90 / 1600 */ --content: 1420px; /* 1600 ^' 2-90 */ --header-h: 95px; /* overwritten by main.js */ } /* ============================================================ base ====== */ *, *::before, *::after { box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } body{ margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); background: var(--c-page); } img, svg{ display:block; max-width:100%; } ul, ol{ margin:0; padding:0; list-style:none; } /* the UA sheet gives
`margin: 1em 40px` — that was shrinking every gallery tile by 80px across and 32px down inside its grid track */ figure{ margin:0; } h1, h2, h3{ margin:0; color: var(--c-ink); font-family: var(--font-display); font-weight:400; line-height: var(--lh-tight); } p{ margin:0; } a{ color: inherit; text-decoration: none; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 3px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; padding:12px 20px; background:var(--c-brand); color:var(--c-on-brand); } .skip-link:focus{ left:0; } /* The page gutter. Content box is exactly 88.75vw (= 1420/1600) up to 1600px. */ .wrap{ width:100%; max-width: calc(var(--content) + 2 * 90px); /* 1600 */ margin-inline: auto; padding-inline: var(--gutter); } /* Anchor targets clear the sticky header. */ .section{ scroll-margin-top: var(--header-h); } /* Copy that is still missing from the Figma export. Keeps the designed box height so section geometry can be measured before the text lands. */ .copy:empty{ display:block; min-height: calc(var(--fig-h, 20) * 1px); border: 1px dashed rgba(200, 60, 60, .45); border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(200,60,60,.05) 0 8px, transparent 8px 16px); } .copy--inline:empty{ display:inline-block; min-width: 6em; min-height: 1em; vertical-align: top; } body.copy-hide-gaps .copy:empty{ border-color: transparent; background: none; } /* A pill's own box height wins over the text-box height of the copy inside it. */ .pill.copy:empty{ display:flex; min-height: clamp(32px, 2.625vw, 42px); } /* ...and `display:block` above must not resurrect a [hidden] accordion panel. */ .copy[hidden]{ display:none; } /* Body copy blocks. Every Figma body box resolves to line-height 20 with the text wrapping to boxHeight/20 lines, so one shared rhythm covers them all. Paragraphs butt up with no gap: e.g. 48:132 is 868x160 = 8 lines x 20 with no room for a blank line between the two paragraphs. */ .prose{ font-size: clamp(12px, .9375vw, 15px); line-height: 1.3333; } .prose p{ margin:0; } /* ============================================================ buttons === */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: clamp(6px, .625vw, 10px); font-size: var(--fs-btn); font-weight:500; /* square corners — confirmed on the header phone pill and both hero buttons */ border-radius: 0; transition: background-color .18s ease, color .18s ease, border-color .18s ease; text-align:center; } /* Figma 48:49 "Request Service" 199 - 52 - label 159 - 14 ?' 20px inline pad */ /* Gold fill takes dark text - white on #FFCC00 is 1.7:1 and unreadable. */ .btn--primary{ min-height: clamp(42px, 3.25vw, 52px); padding-inline: clamp(14px, 1.25vw, 20px); background: var(--c-brand); color: var(--c-on-brand); font-weight:600; } .btn--primary:hover{ background: var(--c-ink); color: var(--c-brand); } .btn--outline{ min-height: clamp(42px, 3.25vw, 52px); padding-inline: clamp(14px, 1.25vw, 20px); border: 1px solid currentColor; color: var(--c-on-dark); } /* Figma's buttons are FIXED-width frames with a centred label, not hug-content — the inline padding differs per instance (20 / 23 / 14.5 / 26.5) precisely because the widths are set, not the padding. */ .btn--primary, .btn--outline{ min-width: clamp(150px, 12.4375vw, 199px); } .about__head .btn--primary, .reviews__left .btn--primary{ min-width: clamp(190px, 15.8125vw, 253px); } /* longest label on the page — its 14.5 padding is what keeps the frame at 367 */ .services__copy .btn--primary{ min-width: clamp(240px, 22.9375vw, 367px); padding-inline: clamp(10px, .9063vw, 14.5px); } /* Figma 48:34 phone pill 194.16 - 51.59 - icon 25.16 - 23.59 @ x11 */ .btn--phone{ min-height: clamp(42px, 3.2243vw, 51.59px); padding-inline: clamp(9px, .6875vw, 11px); gap: clamp(8px, .6875vw, 11px); background: var(--c-ink); color: var(--c-on-dark); } .btn--phone:hover{ background: #000; } /* Mask, not a plain : the glyph is one solid path, so `currentColor` lets the same file be gold on the black header and white on the hero photo. */ /* The icon is an INLINE — it must not be masked. A url() mask here is blocked on file:// and wipes the glyph out entirely. */ .btn--phone .btn__icon{ flex:0 0 auto; width: clamp(19px, 1.5726vw, 25.16px); height: clamp(18px, 1.4743vw, 23.59px); } /* solved: 48:38/48:48/48:205/48:477 all put "561-222-9042" in a 136-wide box */ .btn--phone .btn__label{ font-size: clamp(15px, 1.2031vw, 19.25px); font-weight:700; } .btn--submit{ width:100%; min-height: clamp(42px, 2.9732vw, 47.57px); /* was --c-on-dark: white on the gold fill is 1.7:1. The supplied buttonarrow.svg has a black stroke, confirming a dark label. */ background: var(--c-brand); color: var(--c-on-brand); border-radius: var(--r-sm); display:inline-flex; align-items:center; justify-content:center; gap: clamp(6px, .5vw, 8px); /* 48:352 · label box 151 wide → 13.5px, narrower than the other buttons' --fs-btn 16 (those measure 10.5-11.2 px/char in Figma, this one 7.55) */ font-size: clamp(11px, .84375vw, 13.5px); font-weight:600; } /* Small label pills - Figma 48:227 460-40, 48:265 371-42, 48:413 191-42 */ /* block-level flex, not inline-flex: an inline-level pill sits on a line box whose strut adds a few px of phantom height to every parent it appears in. */ /* Pill text solved from the inner text nodes: 418/351/329/144/257 wide across the five pills all resolve to Poppins 18 (17.6-18.1). Padding-inline 21. */ /* max-content sizes the pill to its text (as in Figma) but must still be allowed to shrink, or a long label forces horizontal scroll on mobile. */ .pill{ display:flex; width:max-content; max-width:100%; align-items:center; justify-content:center; text-align:center; min-height: clamp(32px, 2.625vw, 42px); padding-inline: clamp(14px, 1.3125vw, 21px); border-radius: var(--r-pill); background: transparent; border: 1px solid var(--c-brand); color: var(--c-ink); /* client-specified: Inter Medium 19. Was Poppins SemiBold 18 — this brings every eyebrow pill onto the same spec the service-card pills already use. */ font-family: var(--font-ui); font-size: clamp(13px, 1.1875vw, 19px); font-weight:500; line-height: 1.1111; } /* The video captions are a FILLED tan chip with a small radius — not the outlined eyebrow pill the other sections use. TODO: --c-cream-mid is the closest colour sampled from the delivered assets; confirm the exact fill. */ .feature .pill{ min-height: clamp(30px, 2.5vw, 40px); background: var(--c-tint); border: 0; border-radius: var(--r-sm); } /* on the dark bands the outline pill keeps its gold border AND gold text */ .reviews .pill, .contact .pill, .testimonials .pill{ color: var(--c-brand); } /* the Service Areas eyebrow keeps its thin dark rule, but no fill — client-specified: the white capsule is gone, the page shows through. */ .areas .pill{ background: transparent; border-color: var(--c-ink); } .section__title{ font-size: var(--fs-h2); } /* Slider dots - Figma 48:187 - 8-8, pitch 52.8 (vertical) */ /* 48:187 / 48:233 · each marker is 8 wide × 44.8 TALL inside a 52.8 slot — vertical bars with an 8px gap, not round dots. */ .dot{ display:block; width: clamp(5px, .5vw, 8px); height: clamp(28px, 2.8vw, 44.8px); border-radius:4px; background: currentColor; opacity:.4; padding:0; } /* Client-specified: active and hover are the brand gold. `background` is set outright rather than leaning on currentColor — the bars inherit ink in the About row and gold in the Reviews column, so only a literal colour makes both land on the same yellow. */ .dot.is-active, .dot:hover, .dot:focus-visible{ opacity:1; background: var(--c-brand); } .dot{ position:relative; transition: background-color .18s ease, opacity .18s ease; } /* Horizontal marker row. Only the <=900 layouts use it; on desktop the testimonials are a 3-up grid and need no markers at all. */ .dots-row{ display:none; } @media (max-width: 900px){ .dots-row{ display:flex; justify-content:center; align-items:center; gap: 12px; margin-top: 16px; color: var(--c-ink); } /* Every marker row runs horizontally here, so the bar lies down with it — a 5x28 upright bar inside a horizontal row reads as a stray tick. ::after gives each one a 44x43 touch area without moving the paint; the 6px side inset keeps neighbouring areas from overlapping across the 12px gap, so a tap near the edge still selects the marker it looks nearest. */ .dot{ width: 32px; height: 5px; } .dot::after{ content:""; position:absolute; inset: -19px -6px; } } /* ============================================================ header ==== */ /* Figma 48:14 - 1600 - 95 (topbar 23 + navbar 72) */ /* Header is one dark bar in the design, not a dark strip over a white nav. */ .site-header{ position: sticky; top:0; z-index:100; background: var(--c-ink); } /* Gold strip with black uppercase text — was a black strip with white text. */ .topbar{ background: var(--c-brand); color: var(--c-on-brand); } .topbar__inner{ min-height: clamp(20px, 1.4375vw, 23px); display:flex; align-items:center; justify-content:center; } /* 48:33 · text box 387 wide, centred on 800.5 */ .topbar__text{ font-size: var(--fs-topbar); line-height:1; text-transform: uppercase; font-weight:600; letter-spacing:.02em; text-align:center; } .navbar{ background: #000; } /* client-confirmed: pure black, not --c-ink */ .navbar__inner{ min-height: clamp(56px, 4.5vw, 72px); display:flex; align-items:center; } /* logo 191.94 - 25.77 @ x90 (= gutter) */ .brand img{ width: clamp(140px, 11.9961vw, 191.94px); height:auto; } /* nav starts at x462.93 ?' 180.99px after the logo ?' 180.99/1420 = 12.746% */ .nav{ margin-left: 12.746%; flex: 0 0 auto; } /* Fixed gap, not %: .nav is shrink-to-fit, so a percentage gap would resolve against a width that the gap itself helps determine. */ .nav__list{ display:flex; align-items:center; gap: clamp(4px, .875vw, 14px); } .nav__link{ display:inline-flex; align-items:center; gap: clamp(4px, .375vw, 6px); /* client-specified: Inter Bold 15.4 */ font-family: var(--font-ui); font-weight:700; font-size: clamp(13px, .9625vw, 15.4px); line-height:1.6; color: var(--c-on-dark); padding-inline: clamp(10px, 1.3125vw, 21px); padding-block: clamp(8px, .8469vw, 13.55px); border-radius: var(--r-sm); white-space: nowrap; } .nav__item{ position:relative; } .nav__link:hover{ color: var(--c-brand); } /* gold text only — the design has no pill behind the active item */ .nav__link.is-active{ color: var(--c-brand); background: none; } /* ---- dropdown ------------------------------------------------------------ Opens on hover AND on focus-within, so it is reachable by keyboard without any JS. main.js only adds the click/Escape behaviour for touch. */ .nav__menu{ position:absolute; top:100%; left:0; z-index:110; min-width: max-content; padding: clamp(6px, .5vw, 8px) 0; background:#000; border:1px solid rgba(255,255,255,.18); opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .nav__item--has-menu:hover > .nav__menu, .nav__item--has-menu:focus-within > .nav__menu, .nav__item--has-menu.is-open > .nav__menu{ opacity:1; visibility:visible; transform:none; transition: opacity .18s ease, transform .18s ease, visibility 0s; } .nav__menu a{ display:block; white-space:nowrap; padding: clamp(7px, .625vw, 10px) clamp(14px, 1.25vw, 20px); font-family: var(--font-ui); font-weight:400; font-size: clamp(13px, .875vw, 14px); line-height:1.5; color: var(--c-footer-text); } .nav__menu a:hover, .nav__menu a:focus-visible{ color: var(--c-brand); background: rgba(255,255,255,.06); } .nav__menu a[aria-current="page"]{ color: var(--c-brand); } .nav__link--caret::after{ transition: transform .18s ease; } .nav__item--has-menu:hover > .nav__link--caret::after, .nav__item--has-menu.is-open > .nav__link--caret::after{ transform: rotate(180deg); } /* caret - Figma 48:24 polygon 8 x 8. In the design it sits 6 after the label and only ~7 from the link's right edge, not the 21 the plain links use. */ .nav__link--caret{ padding-right: clamp(4px, .4375vw, 7px); } .nav__link--caret::after{ /* client-supplied: nav-caret.svg, a 7x6 gold triangle. Was a CSS clip-path square in currentColor, which drew it 8x8 and took the link's colour — white on the inactive items. The file's own #FFCC00 keeps it gold. */ content:""; width: clamp(6px, .4375vw, 7px); height: clamp(5px, .375vw, 6px); /* no margin-left: the flex `gap` on .nav__link already supplies the 6 */ background: url("/images/icons/nav-caret.svg") center / contain no-repeat; } /* 48:34 · outlined, not filled: gold 2px border on the black bar, gold label. The phone pills on gold panels stay filled. */ .navbar__phone{ margin-left:auto; /* client-specified: white rule, gold label — the frame it was first read from showed the border gold like the text. */ background: transparent; color: var(--c-brand); border: 1px solid #fff; border-radius: 0; /* the 1px border sits outside the shrink-to-fit content box, so the inline padding drops 11 → 10 to keep the frame at Figma's 194.16 */ padding-inline: clamp(8px, .625vw, 10px); } .navbar__phone:hover{ background: var(--c-brand); color: var(--c-on-brand); } /* Sits above the panel (.site-header z-index 100 vs .nav 95), so the same button both opens and closes the menu. */ .hamburger{ display:none; margin-left:auto; width:44px; height:44px; padding:10px; align-items:center; justify-content:center; color: var(--c-on-dark); } .hamburger__bars{ display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; } .hamburger__bar{ display:block; height:2px; width:100%; background: currentColor; border-radius:2px; } /* The close icon. Swapped by `display`, not by rotating the bars — a transform here is invisible to the preview pane's layout tree, so it could not be verified; a display swap can be. */ .hamburger__x{ display:none; width:100%; height:100%; } .hamburger[aria-expanded="true"] .hamburger__bars{ display:none; } .hamburger[aria-expanded="true"] .hamburger__x{ display:block; } .nav-overlay{ position:fixed; inset:0; z-index:90; background: rgba(16,26,34,.45); } /* ============================================================ 1 hero ==== */ /* Figma 48:39 bg 1600-766 - content 48:40 x891 w620, bottom edge y789 */ /* One hero, many pages. Each page swaps only --hero-img; the desktop background and the stacked mobile band both read it, so the photo is named once. */ .hero{ --hero-img: url("/images/hero-bg.jpg"); background: var(--c-surface-alt) var(--hero-img) center / cover no-repeat; } .hero--services{ --hero-img: url("/images/hero-services.jpg"); } .hero--termite{ --hero-img: url("/images/hero-termite-control.jpg"); } .hero--pest-control{ --hero-img: url("/images/hero-professional-pest-control.jpg"); } .hero--pest-control .hero__title em{ display:block; } .hero--rodent{ --hero-img: url("/images/hero-rodent-control.jpg"); } .hero--rodent .hero__title em{ display:block; } .hero--mosquito{ --hero-img: url("/images/hero-mosquito-control.jpg"); } .hero--mosquito .hero__title em{ display:block; } .hero--pine-beetle{ --hero-img: url("/images/hero-pine-beetle-treatment.jpg"); } .hero--pine-beetle .hero__title em{ display:block; } .hero--organic{ --hero-img: url("/images/hero-organic-pest-control.jpg"); } .hero--organic .hero__title em{ display:block; } .hero--no-tent{ --hero-img: url("/images/hero-no-tent-termite-control.jpg"); } .hero--no-tent .hero__title em{ display:block; } .hero--subterranean{ --hero-img: url("/images/hero-subterranean-termite-control.jpg"); } .hero--subterranean .hero__title em{ display:block; } .hero--flea-tick{ --hero-img: url("/images/hero-flea-and-tick-control.jpg"); } .hero--flea-tick .hero__title em{ display:block; } .hero--about{ --hero-img: url("/images/hero-about-us.jpg"); } .hero--about .hero__title em{ display:block; } /* Short title — one line in the design, so no em{display:block} here. */ .hero--service-areas{ --hero-img: url("/images/hero-service-areas.jpg"); } /* Two gold words inside one white line, so the s stay inline here. */ .hero--tips{ --hero-img: url("/images/hero-tips-and-articles.jpg"); } .hero--reviews{ --hero-img: url("/images/hero-reviews-testimonials.jpg"); } .hero--reviews .hero__title em{ display:block; } .hero--gallery{ --hero-img: url("/images/hero-gallery.jpg"); } /* Same two-line split the Services hero uses: gold falls on the whole second line, not the last two words. */ .hero--termite .hero__title em{ display:block; } /* Services hero: gold falls on the whole second line, not the last two words. Measured on the photo behind the text — mean 13.4:1 white, sub-line worst case 12.3:1 — so it carries the type unaided, like the home hero. */ .hero--services .hero__title em{ display:block; } .hero__inner{ min-height: clamp(520px, 47.875vw, 766px); display:flex; align-items:flex-end; justify-content:flex-end; padding-bottom: clamp(40px, 4.5vw, 72px); } /* ---- article hero (tips/*.php) ------------------------------------------- Client-specified: a 300 band with the copy centred, instead of the tall bottom-right banner every other page uses. Two classes deep on purpose. The 900 and 600 blocks both restate .hero__inner's min-height and they sit LATER in the file, so a one-class rule here would lose to them and the band would grow back to 430+ on a tablet. At (0,2,0) this holds at every width. min-height, not height: a long article title still needs somewhere to go. */ /* The tips banner is a bright photo — bees on sun-lit white boards — and the white heading vanished into it. Measured over the band the copy sits in: mean luminance 0.214, p95 0.603, brightest pixel 0.982. Unassisted, white text is 3.98:1 on the mean and 1.61:1 at p95. A flat 70% black puts p95 at 4.55:1, so even the 15px lead clears AA, and the mean lands at 9.2:1. 0.82 would clear the single brightest pixel too, but by then the photo is gone; at 0.70 the 56px heading still holds 3.05:1 against the very worst pixel, above the 3:1 bar large text has to meet. Layered into background-image rather than added as a pseudo-element: .hero already uses ::after for the tablet scrim, and stacking the two would double-darken the bottom of the band. */ .hero--post{ background-image: linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.70)), var(--hero-img); } .hero--post .hero__inner{ min-height: 300px; align-items: center; justify-content: center; /* 32, not 48: the longest of the six titles runs to two lines and its block measures 226, so 48 a side pushed the band to 322. At 32 the content plus padding is 290 and the 300 floor is what sets the height — every article lands on exactly 300 whether its title takes one line or two. */ padding-block: clamp(16px, 2vw, 32px); } .hero--post .hero__content{ width: 100%; max-width: 900px; text-align: center; } .hero--post .hero__title{ max-width: 100%; margin-inline: auto; } .hero--post .hero__actions{ justify-content: center; } .hero__content{ width: 43.662%; } /* 620 / 1420 */ /* The photo behind this box measures mean luminance 0.022 / worst 0.182, so white text is 14.6:1 average and 4.53:1 at its worst pixel - passes 4.5:1 with no scrim. Dark text here was invisible. */ .hero__title{ max-width: 93.548%; /* 580 / 620 */ font-size: var(--fs-h1); color: var(--c-on-dark); } /* "Florida Pests" is gold in the design — is the hook, not italics */ .hero__title em{ font-style: normal; color: var(--c-brand); } /* On the photo the phone pill is a thin outline. Label AND icon are the call gold #F5C841 — the icon follows because it is a currentColor mask. */ .hero .btn--phone{ background: transparent; color: var(--c-brand-call); border: 1px solid #fff; padding-inline: clamp(8px, .625vw, 10px); } .hero .btn--phone:hover{ background: var(--c-brand-call); color: var(--c-ink); } .hero__lead{ color: var(--c-on-dark); } /* Figma 48:41 - 620 x 40. The copy wraps to 2 lines inside 620 at Poppins Regular up to 15px (3 lines at 16), and a 40px box over 2 lines fixes line-height at 20. Size is the largest that satisfies the wrap. */ /* client-specified: Inter SemiBold 15. Was inheriting Poppins from ; the size was already 15 at 1600, only the family and weight change. 600 is a real cut (Inter-SemiBold.ttf, 28pt like the other Inter weights loaded above), not a synthesised bold. */ .hero__lead{ margin-top: clamp(12px, 1.3125vw, 21px); font-family: var(--font-ui); font-weight: 600; font-size: clamp(12px, .9375vw, 15px); line-height: 1.3333; /* 20 / 15 */ } .hero__actions{ margin-top: clamp(12px, 1.3125vw, 21px); display:flex; flex-wrap:wrap; gap: clamp(10px, 1.1775vw, 18.84px); } /* ---- intro band ----------------------------------------------------------- Centred heading + lead over the same insect plate the home About band uses. Only the base colour under the plate differs, so it stays a variable. client-specified: #fffffff0 — white at 94%, so a little of the page cream reads through the plate. (Was a hex guessed off a screenshot.) */ .intro-band{ --intro-base: #fffffff0; background: var(--intro-base) url("/images/about-bg-tinted.png") center / 100% 100% no-repeat; padding-block: clamp(44px, 4.875vw, 78px) clamp(48px, 5.25vw, 84px); text-align:center; } .intro-band__title{ max-width: 52.817%; margin-inline:auto; } /* 750 / 1420 */ .intro-band__lead{ /* 936/1420. Line 1 measures 909 and breaks after "business," as designed; adding the next word would need 962, so this sits safely between. */ max-width: 65.915%; margin-inline:auto; margin-top: clamp(18px, 2.1875vw, 35px); /* client-specified: Inter Medium 15 / #656565, same as the About band's lead */ font-family: var(--font-ui); font-weight:500; font-size: clamp(12px, .9375vw, 15px); line-height: 1.3333; /* 20 */ color: var(--c-body); } /* Placeholder band on the inner pages until their sections are designed. */ .page-head{ padding-block: clamp(48px, 6.25vw, 100px); text-align:center; } .page-head__title{ font-size: var(--fs-h1); } /* ---- notice pages (404, thank-you) --------------------------------------- No design was supplied for either, so these are built from tokens the rest of the site already uses — nothing invented. */ .notice{ padding-block: clamp(56px, 6.875vw, 110px); } .notice__inner{ max-width: 760px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .notice__code{ margin:0; font-family: var(--font-display); line-height:1; font-size: clamp(72px, 10vw, 160px); color: var(--c-brand); } .notice__badge{ display:flex; align-items:center; justify-content:center; width: clamp(56px, 5vw, 80px); height: clamp(56px, 5vw, 80px); border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); } .notice__badge svg{ width: 52%; height: 52%; } .notice__title{ margin-top: clamp(16px, 1.75vw, 28px); } .notice__lead{ margin-top: clamp(12px, 1.25vw, 20px); max-width: 60ch; font-size: clamp(13px, 1vw, 16px); line-height:1.55; color: var(--c-body); } .notice__actions{ margin-top: clamp(20px, 2.25vw, 36px); display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(10px, 1.1775vw, 18.84px); } /* on cream, so the outlined pill needs an ink border — the hero's white one would be invisible here */ .notice .btn--phone{ background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); } .notice .btn--phone:hover{ background: var(--c-ink); color: var(--c-brand); } .notice__links{ margin-top: clamp(26px, 3vw, 48px); display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(10px, 1.25vw, 20px) clamp(16px, 2vw, 32px); } .notice__links a{ display:inline-flex; align-items:center; gap: 8px; font-size: clamp(13px, .9375vw, 15px); font-weight:600; color: var(--c-ink); text-decoration: underline; text-underline-offset: .18em; } .notice__links a:hover{ color: var(--c-body); } /* the chevron ships black; it reads on cream as-is */ .notice__links img{ width:7px; height:auto; flex:0 0 auto; } @media (max-width: 600px){ .notice__actions .btn{ width:100%; } .notice__links{ flex-direction:column; align-items:center; } } /* ============================================================ 2 pests === */ /* Figma 48:55 - 1421 - 136 - 9 items, item 129, pitch 161 ?' gap 32 */ .pests{ padding-block: clamp(20px, 2.125vw, 34px) clamp(24px, 2.6875vw, 43px); } .pests__list{ display:grid; grid-template-columns: repeat(9, minmax(0,1fr)); gap: 2.2535%; /* 32 / 1420 */ } /* item box 129-128 in a 136-tall list; the icon SVG already carries the 12.5 top inset, so only the trailing space is padding here */ .pest{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom: clamp(12px, 1.2188vw, 19.5px); } /* Figma: a 70-70 glyph sitting in a 70-92.5 box. The delivered SVGs are either 70-93 (glyph already inset) or 70-70 - a fixed box + contain normalises both. */ /* Inline — NOT a url() mask. Chrome gives every file:// document its own opaque origin, so a mask-image pointing at a local SVG is blocked and the glyph disappears when index.html is opened directly. */ /* The exported SVGs already carry fill-opacity="0.25" — that IS the Figma resting state, so the colour underneath must be black. Tinting them grey as well stacked two lightenings and washed the strip out. */ .pest__icon{ display:block; width: clamp(40px, 4.375vw, 70px); height: clamp(53px, 5.7813vw, 92.5px); color: #000000; transition: color .18s ease, background-color .18s ease, opacity .18s ease; } .pest__icon path{ transition: fill-opacity .18s ease; } /* Ants ships as a raster, so it is recoloured through a mask — but from a data: URI, which is not a cross-origin fetch and so survives file://. */ .pest__icon--raster{ --ant: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABdCAYAAAAYPxDcAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAU8SURBVHhe7ZrrcdRADIBVAh2QElICJaQD0gF0AB1AB5cOQgf5mUnsmyuBEtKBzUiWlI28L/seuz72m9FA1vb6LGv18gI0Go1Go9FoNBqNRqPRqJSxgy927NSML3Brx6oGf/DYwzj08MMeOxU4N95ji8q5P5dyHKXc22Ob4BzK2bxSBFXOK3y3x5ZyNUoRUClDDwc7vhScY+zgpx3fLBih6E0f4JM9lgteS3NcINpdlKGDt7GHOzueC16Lc9jxzTP08DR08NuO54LX4hx2vGrobfbwzY67oG8gH/EMN/ZYClxGOf4Ff8MxVnly8MekIg8qZOjgL4r1E+Q/0A+hGMXhmF4XUSorZaxKMQgqhZTTwVd7zAXfujwAKauHJ/5bhcae4UYV3sHvmOPGe6ZeTFFouaCTTaTpVDK8wC075A9KUeXwPFlzTdEqusyKk6McXlZBpXxQTmT56Dy1K0UYX+Eh5hPIkXoU4ZNQJHJ81upIVwTyE543OfZTibBIPEmdRDk7Xj38w2dv2+dsUxKY51Cts43hKwM0rV8j7jxTxNpeL0ZAx+i+VQm/K0XzE1yO6F/0RlvDpvFODrNcHH81dPA47GGnN6qJnAyTs9Y3WQZjDw+zB84UVxGsqJlDtpCFRhLDk5PbAqAaZ8oz6DzKYOVBcZlxYcmRioR6N2xpbq4jYTm3ytboF0gZzgYncsl17lbVmuZjtorWhErYw05qIRKMNrhUsMTgzNd980MHO1+UstBcJZabWEMqZHL37oMCpbbJEVt75YRpcc4XtxZB0//IOtbQystJ/84UtyzICdP8wrCCnyWXFyP3R5DPwPOm83f24VNCfiizBMCGec4SPztstnGrEQVOjhP/nT18THAp6vKI3UeKylq+IpCD3cMvO+5Cy0BaBGsEr034DHLMNViLoOl/ZO0LKy3mELMUxPFdyfzqopDVZITRNdlvKgohZC0lwnMKp5OWk/RlW03KryBqsYmlVgxbG4WQCGOVYCU3FymWzOWiSR87Y2l42/MQKis4e/YohNqVwWs5g8Z7aH8ncG41cLpPTSqpdTj/mNJ8NPup1rrHt6yfTablcCf/x/NpQwB/WuEa6tGZ873WSizfKpFaR5YZPRTnJdZKPNajeQ/XUFPBWbt1rEWsxq2evYJLhs+1c1w10dCdKDOummirs5a0vgTWz/z3iiH/ghEpZjEcjq/W0Vo4FFOnLpToSbbLYX62O+Lq4KRPdy9IjsKWM/V95W9pTrGDPuXOz2ogy5jyEH37uJ/FJGsHPue9Ac7Fo+QzuSXCJhAFUCYrDW3ZlpohYimU00ybBZJ95qphH0EpvPkaGY5EAXGv59LgjZz31qyHNwWpg9XxgLNNiW2dyjybc8xc3D3a8TXWouLJhGlpbWkrCDvQWYtxyYYhK74+jzTi7XiVcEth1v/V8WPEFJPcl5mNVwnnIeNs/JgvBCIhZWc04YvDn2Rn614UdpR4HC054C3UVdSQeoU/dlzN/hjxWAanBNGvk1Xg7m5wOYePQUIvojoo8gRMWxvXK8S3PBGKTGY3RZXQg3h8ARLt2KUkoGx16h5rqobUj+QyId7n9UiseNxEZOIqOJpw0ScUz8NHJWAtAik7cU5RQpueLYuWlKcUsJDvyjivGEtCZ0o5tiqPgbtBq/5Em7M/zkV7LE4NxRVz8POsj1BSWQ1s+t6IdE5yfFsxNCIViA6SVQ97+GyPFYe7/8XeWqjVUZzS63ypf7sYpWuWaiNT6VwiN4e6OOQAA6XAJaD7LwjxjUaj0Wg0Go1Go9FYzj+MrGvWcv0cmgAAAABJRU5ErkJggg=="); } /* the ant is a mask, so it has no fill-opacity — match the 0.25 here */ .pest__icon--raster{ background-color: #000000; opacity: .25; -webkit-mask: var(--ant) center / contain no-repeat; mask: var(--ant) center / contain no-repeat; } /* Active/hover treatment, read off the "Ants" item in the design: pale gold wash, gold glyph, gold bar along the bottom edge. The bar is an inset box-shadow, not a border, so hovering does not change the strip's height. */ .pest{ transition: background-color .18s ease, box-shadow .18s ease; } .pest:hover, .pest:focus-within{ background: rgba(255, 204, 0, .22); box-shadow: inset 0 -3px 0 var(--c-brand); } .pest:hover .pest__icon, .pest:focus-within .pest__icon{ color: var(--c-brand); } .pest:hover .pest__icon path, .pest:focus-within .pest__icon path{ fill-opacity: 1; } .pest:hover .pest__icon--raster, .pest:focus-within .pest__icon--raster{ background-color: var(--c-brand); opacity: 1; } .pest__name{ font-size: var(--fs-nav); font-weight:500; color: var(--c-ink); line-height: 1.6; /* 24 / 15 */ } /* ============================================================ 3 about === */ /* Figma 48:53 bg y1074-1840 - 48:126 content y1149-1774 */ /* Figma 48:54 - 1600-766 faint pest-pattern plate, exactly the section box */ .about{ /* The 1600×766 plate is the faint pest pattern: near-white (#F6F6F6) art at a uniform alpha of 69/255. Figma puts a #F7BE00 @ 35% overlay on that layer, which is what turns it tan. The overlay is pre-composited into about-bg-tinted.png (untinted original kept as about-bg.png) — a CSS layer could not reproduce it without a mask, and masks die on file://. */ /* 100% 100%, not cover: the section is taller than the 1600x766 plate, so `cover` scaled it up and cropped the insects off the left and right edges. Stretching 5% vertically keeps every insect where the design puts it. */ /* client-tested: white base, not cream — the plate's own near-white wash is what produces the pale cream once composited. */ background: #ffffff url("/images/about-bg-tinted.png") center / 100% 100% no-repeat; /* client-tested: uncapped vw padding. At 1600 this is the same 75/66 the clamp produced; it just keeps scaling past both ends now. */ padding-block: 4.6875vw 4.125vw; } .about__head{ text-align:center; } .about__title{ max-width: 45.704%; margin-inline:auto; font-size: var(--fs-h2); } /* 649/1420 */ /* client-specified: 15px / line-height auto / Medium 500, centred. Colour now comes from --c-body, which is the same #656565 site-wide. */ .about__lead{ max-width: 66.8%; margin-inline:auto; /* client-specified */ margin-top: clamp(16px, 1.875vw, 30px); /* client-specified: Inter Medium 15 / #656565. Size, weight and colour were already right; the family was inheriting Poppins from . */ font-family: var(--font-ui); font-size: clamp(12px, .9375vw, 15px); line-height: normal; font-weight: 500; color: var(--c-body); text-align: center; } .about__lead p + p{ margin-top: clamp(14px, 1.25vw, 20px); } /* a full blank line */ /* client-specified: inline links in the band are underlined, like the ones in the cards. The global `a{text-decoration:none}` was stripping them here. */ .about__lead a{ color: inherit; text-decoration: underline; text-underline-offset: .18em; } .about__lead a:hover, .about__lead a:focus-visible{ color: var(--c-ink); } .about__head .btn{ margin-top: clamp(16px, 1.875vw, 30px); } /* client-specified: breathing room under the band on the two pages where it sits straight on top of the gold CTA. 4.25vw = 68 at 1600 — client's number, set below the 6.25vw the renders measure there (99 on Pine Beetle, 100 on Organic). Uncapped like the band's own padding so the two keep their proportion past 1600. Opt-in: on the home page this band is followed by the services section with no gap, and that must not move. Reset below 900 — the request was for desktop, and the phone stack is left exactly as it was. */ .about--spaced{ margin-bottom: 4.25vw; } /* The band is a fixed 508 in every render that has one — Pine Beetle, Organic and No Tent all measure 4727-5235 or its equivalent, even though their content differs by a heading line and a paragraph. So the height is the constant and the padding absorbs the difference, rather than the other way round. Centred so the extra space splits evenly, which is what the renders show (95 above / 105 below on the shortest of the three). */ .about--fixed{ min-height: clamp(320px, 31.75vw, 508px); display:grid; align-content:center; } /* 3 cards - 471 - 203 - gap 9 */ .review-cards{ margin-top: clamp(22px, 2.375vw, 38px); display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6338%; /* 9 / 1420 */ } .review-card{ background: rgba(255,255,255,.73); /* client-supplied: #FFFFFF @ 73% */ border-radius: var(--r-md); min-height: clamp(150px, 12.6875vw, 203px); padding: clamp(18px, 1.625vw, 26px) clamp(18px, 2.25vw, 36px); display:flex; flex-direction:column; justify-content:space-between; } .review-card__text{ font-size: var(--fs-body); } .review-card__stars{ width: clamp(104px, 8.6875vw, 139px); height:auto; } /* ============================================================ 4 services */ /* Figma 48:173 heading y1922 - 48:174 slider y2044-2647 */ .services{ padding-top: clamp(44px, 5.125vw, 82px); } /* Figma box 724 is the text's own width, not a constraint - capping at it makes the line wrap the moment the viewport is under 1600. */ .services__title{ text-align:center; max-width: 100%; margin-inline:auto; } /* Client-specified: this section is NOT a carousel. One card, in normal flow. Extra .services__panel blocks simply stack, so a page that needs several services can add them without touching this file. */ .services__slider{ margin-top: clamp(34px, 4.125vw, 66px); position:relative; } .services__track{ display:grid; gap: clamp(20px, 2vw, 32px); } .services__panel{ display:grid; grid-template-columns: 40.845% 57.746%; /* 580 | 820 */ gap: 1.4085%; /* 20 / 1420 */ align-items:stretch; } /* ---- carousel slide mechanics — reviews only ---------------------------- Every slide occupies the SAME grid cell (grid-area 1/1), so the track is as tall as the tallest slide and nothing is absolutely positioned — heights stay automatic at every width. The track clips the horizontal travel, which is what keeps the slide-out from ever creating a horizontal scrollbar. If a renderer ignores `transform` the effect degrades to a clean fade. */ .reviews__right{ display: grid; overflow: hidden; } .review-slide{ grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(8%); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; } .review-slide.is-active{ opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; } /* the slide being replaced travels out to the left */ .review-slide.is-prev{ transform: translateX(-8%); } /* 48:175 · the card is an irregular torn shape, exported at its exact 580×603. Its "torn" areas are painted #FBF0E8 — the page colour — so it blends without needing transparency. No border-radius: the shape carries its own edges. */ .services__copy{ position:relative; /* service-card-plate.png is service-card-bg.png with its cut corners made genuinely transparent instead of painted the page cream. On the cream pages this renders identically — the paint was rgb(251,240,232), which is exactly the body background it was standing in for — but No Tent Termite Control puts this card on a black section, where the painted corners showed as two light triangles. The original file is kept alongside it. */ background: url("/images/service-card-plate.png") center / 100% 100% no-repeat; border-radius: 0; /* The card's designed height, driven by its photo. 603 is the standard plate; pages whose photo is a different height (Rodent Control ships 820x441) set --card-h on the panel and the copy follows. Written as the Figma number so it reads straight off the design: n x .0625vw is n/1600 of the viewport, capped at n px. */ min-height: clamp(240px, calc(var(--card-h, 603) * .0625vw), calc(var(--card-h, 603) * 1px)); /* Vertical padding is a Figma number too, not a fixed proportion of the card: the 603 plate uses 76/85, the shorter 441 plate on Rodent Control uses 42/34. Scaling 76/85 down with the card would have given 56/62 and pushed that card 55px past its designed height. */ /* Horizontal insets are per-card too — a page whose copy is long is drawn with a wider measure. Defaults are the standard plate's 44 / 70 of 580. */ padding: clamp(20px, calc(var(--card-pt, 76) * .0625vw), calc(var(--card-pt, 76) * 1px)) var(--pad-r, 12.069%) clamp(20px, calc(var(--card-pb, 85) * .0625vw), calc(var(--card-pb, 85) * 1px)) var(--pad-l, 7.586%); /* Column, with the copy taking up the slack, so the button sits at the FOOT of the card rather than trailing the text. That is what the design shows: the gap above the button varies card to card — tiny under a long block like Subterranean, large under a short one like Rodent — which only happens if the button is anchored to the bottom. */ display:flex; flex-direction:column; /* A grid item's automatic minimum is its min-content width, and the wide button's `width: max-content` raised that — the 1fr track below 900 grew to 415px inside a 320px page and put 75px of horizontal scroll on the whole site. min-width:0 lets the card shrink to its track again; the button is capped by its own max-width, so nothing is clipped. */ min-width: 0; } /* 76 / 70 / 85 / 44 */ .services__text{ flex: 1 1 auto; } /* A flex child stretches by default; the button is a fixed-width frame in the design, so it opts out or it would run the full width of the card. */ .services__copy .btn{ align-self: flex-start; } /* client-specified: card buttons are bold */ .services__copy .btn--primary{ font-weight: 700; } .services__name{ display:flex; align-items:center; gap: clamp(5px, .4375vw, 7px); font-size: var(--fs-h3); line-height: 1.4; /* 56 / 40 */ } .services__mark{ flex:0 0 auto; width: clamp(18px, 1.75vw, 28px); height:auto; } /* 48:184 - 466 x 280 = 14 lines @ 20 */ /* client-specified: Inter Medium 15px. Fluid off the 1600 artboard the same way every other 15px block on this site is (.about__lead, .intro-band__lead), so it scales instead of pinning. Inter-Medium.ttf is loaded at the top of this file, so 500 is the real cut, not a synthesised one. */ .services__text{ margin-top: clamp(14px, 1.4375vw, 23px); font-family: var(--font-ui); font-weight: 500; font-size: clamp(12px, .9375vw, 15px); line-height: 1.3333; /* 20 / 15 */ } /* That margin is the gap BELOW the heading, so it only applies when there is one. Two cards open straight on the copy — Rodent Control row 2 and Pine Beetle row 2 — and there the margin pushed the first line 23px past the plate's own padding-top. Two classes deep so it outranks the rule above. */ .services__copy .services__text:first-child{ margin-top: 0; } .services__copy .btn{ margin-top: clamp(14px, 1.4375vw, 23px); } .services__media{ position:relative; overflow:hidden; border-radius: 0; background: var(--c-surface-alt); /* square in the design */ } .services__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ---- service rows (Services page) ---------------------------------------- The home page's service card, repeated and alternated. It reuses .services__panel / __copy / __media as-is, so a change to the card shows up on both pages — the only new behaviour is which side the photo sits on. */ .service-rows{ padding-block: clamp(34px, 4.125vw, 66px) clamp(40px, 4.5vw, 72px); } /* Every block in a card is separated by the same step — paragraph to paragraph, list to paragraph, paragraph to list, pill to anything. It was written as `p + p, p + ul` before, which left `ul + p` with nothing: lists carry no bottom margin, so the text under every list sat flush against it on all four service pages. Two classes deep on purpose: `.prose p{margin:0}` is (0,1,1) and would otherwise outrank a single-class rule here. */ /* Scoped to .services__copy, not .service-rows: the home page's card sits in .services__slider instead, so the rule never reached it and its two paragraphs ran together with no blank line between them. */ .services__copy .services__text > * + *{ margin-top: clamp(14px, 1.25vw, 20px); } /* Row 5 is the only card with a list. Bullets indent inside the copy column rather than hanging outside it, which is what the design shows. */ .services__list{ /* spacing comes from the flow rule above, not from the list itself */ margin: 0; padding-left: 1.35em; list-style: disc; } .services__list li{ margin-top: 2px; } .services__list li::marker{ font-size: .85em; } /* Organic Pest Control's bullets are multi-line paragraphs, and that frame sets them a full line apart — measured 40px between the last line of one bullet and the first of the next, against 20 inside a bullet. Every other list on the site runs its items solid, so this is opt-in per list rather than a change to .services__list. Child combinator keeps it above the 2px rule. */ .services__list--spaced > li + li{ margin-top: var(--list-gap, clamp(14px, 1.25vw, 20px)); } /* Location lists run as plain lines in the design — no markers, no indent — but they are still a list, so the markup stays a
    . */ .services__list--plain{ padding-left: 0; list-style: none; } /* The outlined lead-in above a list. Same pill the eyebrows use, but on the cream card it takes the Service Areas treatment — white fill, ink rule — rather than the gold outline, which would read as a second button. TODO: border colour read off the page render; confirm against Figma. */ /* client-specified: Inter Medium 19px, and it holds one line at desktop. */ .services__pill{ /* client-specified: 10px above and below the label inside the pill. .pill on its own only sets a min-height, so a wrapped label filled the box edge to edge. */ padding-block: 10px; /* client-specified: transparent, so the card's plate reads straight through it. Only the ink rule marks the shape. */ background: transparent; border-color: var(--c-ink); font-family: var(--font-ui); font-weight: 500; font-size: clamp(13px, 1.1875vw, 19px); /* 19 / 1600 */ /* client-specified: text reads left, not centred. .pill centres its label for the eyebrow use, which is a single short line; a lead-in that wraps needs its lines to start together. */ justify-content: flex-start; text-align: left; /* Same right-edge allowance the heading and wide button get. Without it the Professional Pest Control lead-in wanted 491px against a 485px measure and broke onto a second line over 6px. `width:max-content` means a pill that does not need the room simply does not take it. */ max-width: calc(100% + var(--pad-r-esc)); } /* Inline links inside the copy: body colour, underlined — they are not calls to action, so they must not compete with the gold button below them. */ .services__text a{ color: inherit; text-decoration: underline; text-underline-offset: .18em; } /* client-specified: the numbered step labels inside a card are black, the same as the pills above them — the copy under each one stays body grey. */ .services__text strong{ color: var(--c-ink); } .services__text a:hover, .services__text a:focus-visible{ color: var(--c-ink); } /* The heading glyph is a pest icon, not the quote mark the home page uses. The pest SVGs ship with fill-opacity="0.25" for the strip's resting state, so these headings point at mark-*.svg — the same artwork re-saved solid, because an cannot have the file's own fill-opacity overridden in CSS. */ /* client-specified: bigger, and sitting slightly high against the heading. The size came from cropping, not scaling: the pest artwork is drawn inside a 70x93 frame with ~29% empty above/below and up to 34% either side, so at a 1em box the glyph was rendering well under 1em. The mark-*.svg viewBox is now the ink's own bounding box, which makes the drawing 1.41x taller at the same box height AND slightly narrower — width matters here because it counts against the heading's one-line fit. `top` rather than a transform: the preview pane does not honour transforms, so this stays measurable. */ /* Scoped to .services__copy, not .service-rows: the Gallery page uses the same plate inside .gallery-rows, and without this its icon fell back to the base rule — wrong size, and centred on the whole two-line heading so it floated in the gap between the lines instead of sitting on line one. */ .services__copy .services__mark{ /* 1.1em everywhere, but a page can state its own: the Flea & Tick frame sets its tick at 29x34 ink, where the termites on the other pages measure ~39 tall. Left as a default so no existing card moves. */ width: auto; height: var(--mark-h, 1.1em); /* Aligned to the FIRST line, not to the middle of the whole heading. On a heading that wraps, `center` left the glyph floating at half-height with nothing beside it; flex-start plus half the leftover leading ((1.4 - 1.1) / 2 = .15em) sits it on line one. A single-line heading looks identical either way. */ align-self: flex-start; margin-top: .15em; position: relative; top: -0.06em; } /* ---- reaching past the card's right padding ------------------------------- Three things in a card may need to run wider than the copy measure and out to the plate's edge: an over-long heading, an over-long button label, and the outlined lead-in. They all need the SAME distance, and that distance changes with the padding — so it is stated once here as a variable and every consumer reads it. Restating the number at each consumer is what produced two specificity bugs earlier: a 3-class override quietly beat the mobile reset. The number is the right padding expressed as a fraction of the CONTENT box, not the border box: a percentage margin/width resolves against the parent's content, while the padding is a percentage of its border box. For the standard card, content is 1 - .12069 - .07586 = .80345, so .12069 / .80345 = .15021. --tight changes the left inset, so its figure differs. */ .services__copy{ --pad-r-esc: 15.021%; } .services__copy--tight{ /* This card's copy runs long enough that the standard 7.586% left inset leaves no room for its heading — on the Professional Pest Control render the text starts ~20px from the plate edge, not 44, and the heading needs 546px in a 574px plate. Right stays put so the paragraph measure matches every other card. .12069 / (1 - .035 - .12069) = .14295 */ --pad-l: 3.5%; --pad-r-esc: 14.295%; } .services__name--flush{ margin-right: calc(-1 * var(--pad-r-esc)); } /* Same card, same reason: this button's label is the longest on the page and its natural width is 519px against a 461px content box — squeezed by 58px, which pushed the label onto a second line and made the button 62px tall against everyone else's 52px. max-width has to exceed 100%: 100% of the containing block IS the content box, so it re-imposes the very limit being escaped. The +--pad-r-esc is the same allowance the heading gets — out to the card's right edge, no further. */ .services__copy .btn--wide{ width: max-content; max-width: calc(100% + var(--pad-r-esc)); } .service-rows .wrap{ display:grid; row-gap: clamp(20px, 2.5vw, 40px); } /* Even rows put the photo first. `order` rather than `direction` or a second grid definition: the DOM keeps heading-then-photo, so the reading order and the tab order stay correct however the columns are painted. */ .service-rows .services__panel:nth-child(even){ grid-template-columns: 57.746% 40.845%; /* mirrored 820 | 580 */ } .service-rows .services__panel:nth-child(even) .services__copy{ order:2; } .service-rows .services__panel:nth-child(even) .services__media{ order:1; } /* The torn plate is NOT mirrored on the reversed rows — client-confirmed. Every card carries the plate the same way round, whichever side the photo is on. */ /* No Tent Termite Control sets one of its rows on a black full-bleed band. Measured off that render: the band runs 2877-3828 around a 712-tall row that starts at 2997, so 120 top and 119 bottom. Nothing inside changes — the card is the same plate, the same insets, the same ink colour. */ .service-rows--dark{ background: var(--c-ink); /* Figma number, like the card's own insets: No Tent's band measures 120, Subterranean's 106, so the page states it rather than sharing one value. */ padding-block: clamp(48px, calc(var(--dark-pad, 120) * .0625vw), calc(var(--dark-pad, 120) * 1px)); } /* One step inside a card whose parts run on the same 20px rhythm as the copy — a bold label, a short list, then a closing line, with no block gaps between them. Wrapping them lets the step take the normal step from its siblings while its own parts stay solid. */ .services__step > * + *{ margin-top: 0; } /* ---- prose + photo split -------------------------------------------------- Two headings and their copy in the left column, one photo spanning the whole right column. No plate — the text sits straight on the page cream. The tracks are the home page's Seasonal Threats section exactly: 600 | 72 | 748 against a 1420 content box, and the photo here is 748 wide, so it runs at its natural size rather than being cropped to a ratio. */ /* Figma numbers again — No Tent measures 91/101, Subterranean 99/98. */ .split{ padding-block: clamp(56px, calc(var(--split-pt, 91) * .0625vw), calc(var(--split-pt, 91) * 1px)) clamp(60px, calc(var(--split-pb, 101) * .0625vw), calc(var(--split-pb, 101) * 1px)); } .split__inner{ display:grid; grid-template-columns: 42.254% 52.676%; gap: 5.0704%; /* Centred, not top-aligned: on both renders the photo is the shorter column on one page and the taller on the other, and in each the slack splits roughly evenly above and below rather than falling to the bottom. */ align-items:center; } .split__copy{ min-width: 0; } .split__title{ font-size: var(--fs-h2); } /* Every block is one step apart; a heading takes a bigger one on both sides. Measured 31.5 below a heading, 32.5 above one, 20 between blocks. Two classes deep on purpose — the same trap the service cards hit: the copy carries .prose, and `.prose p{margin:0}` is (0,1,1), so a one-class rule here lost and every paragraph sat flush against the one above it. */ .split .split__copy > * + *{ margin-top: clamp(14px, 1.25vw, 20px); } .split .split__copy > .split__title + *{ margin-top: clamp(20px, 1.9375vw, 31px); } .split .split__copy > * + .split__title{ margin-top: clamp(22px, 2.0313vw, 32.5px); } .split__copy p{ font-family: var(--font-ui); font-weight: 500; font-size: clamp(12px, .9375vw, 15px); line-height: 1.3333; } /* client-specified: the run-in labels are black, not body grey. Sampled from the render, their darkest pixel is 0,0,0 against 66 for the copy under them. */ .split__copy strong{ font-weight: 700; color: var(--c-ink); } .split__copy a{ color: inherit; text-decoration: underline; text-underline-offset: .18em; } .split__media img{ display:block; width:100%; height:auto; } /* This page's band heading runs to one line at 787 — wider than the 45.704% the two-line headings need. 60% is 852, which clears it; it stays centred. */ .about__title--wide{ max-width: 60%; } /* Same page's lead measures 854 at its widest, not the shared 948. Left at 948 the closing paragraph pulled up onto one line instead of the designed two. */ .about__lead--tight{ max-width: 60.141%; } /* Photo not delivered yet — same dashed marker the missing-copy blocks use, so an absent asset reads as "pending", never as a broken or empty box. */ /* No aspect-ratio here. The panel stretches its items, which makes the block's HEIGHT definite — and an element with an aspect-ratio then computes its WIDTH from that height instead of filling its track. It rendered 820 wide in an 811 track (9px past the card) and 844 in the row whose heading wraps to two lines. The real .services__media has no ratio at this width either: it takes its height from the copy column and the photo fills it absolutely. Below 900 the base rule's 820/603 applies, where one column makes the width definite and the ratio is safe. */ .services__media--pending{ border: 1px dashed rgba(200, 60, 60, .45); background: repeating-linear-gradient(135deg, rgba(200,60,60,.05) 0 8px, transparent 8px 16px), var(--c-surface-alt); } body.copy-hide-gaps .services__media--pending{ border-color: transparent; background: var(--c-surface-alt); } /* CTA band - Figma 48:196/48:197 y2677-2990 h313 */ .cta-band{ margin-top: clamp(18px, 1.875vw, 30px); display:grid; grid-template-columns: 40.845% 57.746%; gap: 1.4085%; align-items:stretch; } .cta-band__figure{ position:relative; height:100%; min-height: clamp(180px, 19.5625vw, 313px); border-radius: 0; overflow:hidden; background: var(--c-surface-alt); } .cta-band__figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* Black panel, not gold: first heading line gold, second white. */ /* 48:196 · the delivered 820x313 plate carries the corner glow, so the CSS gradient guess is gone. NOT clipped: the roach is meant to hang past the panel's bottom-right corner. Kept as PNG rather than JPEG — a smooth gradient over large flat black is exactly where JPEG bands. */ .cta-band__right{ position:relative; border-radius: 0; color: var(--c-on-dark); background: #000 url("/images/cta-band-bg.png") center / 100% 100% no-repeat; min-height: clamp(180px, 19.5625vw, 313px); /* title box is 717 wide inside an 820 card → 39 left / 64 right, not 64/64 */ padding: clamp(26px, 3.6875vw, 59px) 7.8049% clamp(26px, 3.65vw, 58.4px) 4.7561%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap: clamp(14px, 2vw, 32px); } .cta-band__title{ max-width: 100%; /* content box is exactly 717 */ color: var(--c-on-dark); font-size: var(--fs-h2); position:relative; z-index:1; } .cta-band__title em{ font-style:normal; color: var(--c-brand); } /* the phone pill on the black panel is outlined, like the hero's */ .cta-band__right .btn--phone{ position:relative; z-index:1; background: transparent; color: var(--c-brand-call); /* label + icon #F5C841 */ border: 1px solid #fff; padding-inline: clamp(8px, .625vw, 10px); } .cta-band__right .btn--phone:hover{ background:#fff; color: var(--c-ink); } /* 48:206 · 260 wide at x1290 y2834 — it overhangs the 820x313 panel by 40 to the right and 104 below, so it is deliberately not clipped. */ .cta-band__roach{ position:absolute; z-index:2; right: -4.878%; /* -40 / 820 */ bottom: -33.227%; /* -104 / 313 */ width: 31.707%; /* 260 / 820 */ height:auto; pointer-events:none; } /* About Us runs the shared CTA band as its own section rather than tacked onto the end of another one, so it carries the band's own top inset: 98 from the black band above it in that render. */ .about-cta{ padding-top: clamp(40px, 6.125vw, 98px); } .rule{ height: clamp(5px, .5625vw, 9px); margin-top: clamp(60px, 7.4375vw, 119px); background: var(--c-brand); } /* ============================================================ 5 seasonal */ /* Figma 48:215 - y3203-3885 - text 600 | gap 72 | media 748 */ .seasonal{ background: var(--c-cream-top); padding-block: clamp(48px, 5.3125vw, 85px) 0; } .seasonal__inner{ display:grid; grid-template-columns: 42.254% 52.676%; gap: 5.0704%; align-items:center; } /* Was 91.5% (549/600). That is the heading's own width at 1600, not a limit — and as the column shrank between 1200 and 1600 the cap squeezed the heading to three lines while --fs-h2 was still near its maximum. Full column, so it holds the designed two lines all the way across desktop. */ .seasonal__copy .section__title{ max-width: 100%; } /* 48:218 - 600 x 200 = 10 lines @ 20 */ .seasonal__body{ margin-top: clamp(16px, 1.6875vw, 27px); font-size: clamp(12px, .9688vw, 15.5px); line-height: 1.2903; /* 20 */ } /* the two paragraphs are separated by a blank line, same as the About block */ .seasonal__body p + p{ margin-top: clamp(14px, 1.25vw, 20px); } .seasonal__copy .btn{ margin-top: clamp(16px, 1.6875vw, 27px); } /* Square corners. 48:221 (661×682) sits behind 48:222 (748×682) at the same height, so it is fully covered in the design — dropped rather than rendered as a plate that could flash if the photo ever fails to load. */ .seasonal__media{ position:relative; aspect-ratio: 748 / 682; border-radius: 0; } .seasonal__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: 0; } /* ============================================================ 6 features */ /* Figma 48:223 - y3980-4464 - two 700 - 415 cards, gap 20 */ /* the 73px gap up to the reviews band is cream too, so it belongs to this section's padding rather than a margin on .band */ .features{ background: var(--c-cream-top); padding-block: clamp(50px, 5.9375vw, 95px) clamp(46px, 4.5625vw, 73px); } .features__grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.4085%; /* 20 / 1420 */ } /* min-width:0 - a grid item defaults to min-width:auto, which would grow the track to the pill's max-content width instead of letting the pill shrink. */ .feature{ display:flex; flex-direction:column; align-items:center; min-width:0; } .feature .pill{ margin-bottom: clamp(16px, 1.8125vw, 29px); } /* square corners — the video stills sit flush, no rounding in the design */ .feature__media{ position:relative; width:100%; aspect-ratio: 700 / 415; border-radius: 0; overflow:hidden; background: var(--c-surface-alt); } .feature__media img, .feature__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .feature__media img{ object-fit:cover; } /* the thumbnail is a