/* Theme Name: SOS Nuisible Theme URI: https://sosnuisible.dev Description: SOS Nuisible child theme. Holds the custom brand color skin and safe overrides so parent theme updates don't wipe our changes. Author: SOS Nuisible Template: insectra Version: 1.0.0 Requires PHP: 8.2 Text Domain: sos-nuisible */ /* Add safe custom CSS overrides below. */ /* =================================================================== * "Zone d'intervention" — Manche map section * HTML lives in an Elementor HTML widget; only the markup is there. * =================================================================== */ .sos-zone{--blue:#01336D;--orange:#F1590B;--teal:#038A7F;--grey:#4A4A4A;--light:#EAEAEA;color:var(--grey);} .sos-zone *{box-sizing:border-box;} .sos-map{position:relative;padding:22px 22px 8px;border-radius:28px; background:linear-gradient(160deg,#fff 0%,#F7FAFC 55%,#F1F7F6 100%); border:1px solid rgba(1,51,109,.08); box-shadow:none;} .sos-map__head{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-bottom:6px;} .sos-map__badge{background:var(--blue);color:#fff;font-size:12px;font-weight:600; padding:8px 15px;border-radius:30px;letter-spacing:.2px;} .sos-map__live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600; color:var(--teal);background:rgba(3,138,127,.09);padding:8px 14px;border-radius:30px;} .sos-map__live i{width:7px;height:7px;border-radius:50%;background:var(--teal); animation:sosBlink 2s ease-in-out infinite;} @keyframes sosBlink{0%,100%{opacity:1;}50%{opacity:.25;}} .sos-map svg{display:block;width:100%;height:auto;max-height:560px;margin:0 auto;overflow:visible;} .sos-map__shape{fill:url(#sosFill);stroke:url(#sosStroke);stroke-width:2.5; stroke-linejoin:round;stroke-linecap:round;} .sos-map__texture{pointer-events:none;} .sos-map__glow{pointer-events:none;} .sos-map__route{fill:none;stroke:url(#sosRoute);stroke-width:2.6;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:1 12;opacity:.95; animation:sosDash 26s linear infinite;} @keyframes sosDash{to{stroke-dashoffset:-260;}} .sos-zone__pin{cursor:default;} .sos-zone__pin .pulse{fill:var(--orange);transform-box:fill-box;transform-origin:center; animation:sosPulse 3s ease-out infinite;pointer-events:none;} @keyframes sosPulse{0%{transform:scale(.5);opacity:.5;}70%{transform:scale(2.4);opacity:0;}100%{opacity:0;}} .sos-zone__pins g:nth-child(2) .pulse{animation-delay:.35s;} .sos-zone__pins g:nth-child(3) .pulse{animation-delay:.7s;} .sos-zone__pins g:nth-child(4) .pulse{animation-delay:1.05s;} .sos-zone__pins g:nth-child(5) .pulse{animation-delay:1.4s;} .sos-zone__pins g:nth-child(6) .pulse{animation-delay:1.75s;} .sos-zone__pins g:nth-child(7) .pulse{animation-delay:2.1s;} .sos-zone__pins g:nth-child(8) .pulse{animation-delay:2.45s;} .sos-zone__pin .halo{fill:#fff;opacity:.9;transform-box:fill-box;transform-origin:center; transition:transform .3s cubic-bezier(.34,1.56,.64,1);} .sos-zone__pin .dot{fill:var(--blue);stroke:#fff;stroke-width:2.5;transform-box:fill-box; transform-origin:center;transition:fill .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);} .sos-zone__pin text{font-size:12.5px;font-weight:700;fill:var(--blue);letter-spacing:.2px; pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round; transition:fill .3s ease;} .sos-zone__pin:hover .dot,.sos-zone__pin.is-active .dot{fill:var(--orange);transform:scale(1.5);} .sos-zone__pin:hover .halo,.sos-zone__pin.is-active .halo{transform:scale(1.25);} .sos-zone__pin:hover text,.sos-zone__pin.is-active text{fill:var(--orange);} /* Left column (chips / stats / CTA) — used when the text side is present. */ .sos-zone__eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff; border:1px solid var(--light);border-radius:40px;padding:7px 16px;font-size:14px; font-weight:600;color:var(--blue);} .sos-zone__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--orange);} .sos-zone__title{margin:18px 0 14px;font-size:clamp(28px,3vw,42px);line-height:1.18;color:var(--blue);} .sos-zone__title em{font-style:normal;color:var(--orange);} .sos-zone__lead{margin:0 0 26px;font-size:16px;line-height:1.75;max-width:52ch;} .sos-zone__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; list-style:none;margin:0 0 30px;padding:0;} .sos-zone__stats li{background:#fff;border:1px solid var(--light);border-radius:14px;padding:18px 16px;} .sos-zone__stats strong{display:block;font-size:28px;line-height:1;color:var(--blue);} .sos-zone__stats span{display:block;margin-top:6px;font-size:13px;line-height:1.4;} .sos-zone__chips-label{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--blue);} .sos-zone__chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 30px;padding:0;} .sos-zone__chip{background:#fff;border:1px solid var(--light);border-radius:40px; padding:8px 15px;font-size:14px;cursor:default;transition:all .25s ease;} .sos-zone__chip:hover,.sos-zone__chip.is-active{border-color:var(--orange);color:var(--blue); font-weight:600;transform:translateY(-2px);} .sos-zone__cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;} .sos-zone__btn{display:inline-flex;align-items:center;background:var(--orange);color:#fff; text-decoration:none;font-weight:600;font-size:16px;padding:15px 30px;border-radius:40px; transition:all .3s ease;} .sos-zone__btn:hover{background:var(--blue);color:#fff;transform:translateY(-2px);} .sos-zone__link{color:var(--blue);font-weight:600;text-decoration:none; border-bottom:1px solid var(--light);padding-bottom:3px;transition:all .3s ease;} .sos-zone__link:hover{color:var(--orange);border-color:var(--orange);} .sos-zone__link span{display:inline-block;transition:transform .3s ease;} .sos-zone__link:hover span{transform:translateX(4px);} .sos-zone__note{margin:18px 0 0;font-size:13px;opacity:.75;} @media (max-width:575px){ .sos-zone__stats{grid-template-columns:1fr;} .sos-zone__cta{gap:14px;} .sos-zone__btn{width:100%;justify-content:center;} } @media (prefers-reduced-motion:reduce){ .sos-map__route,.sos-zone__pin .pulse,.sos-map__live i{animation:none;} .sos-zone *{transition:none !important;} } /* === Header height race-condition fix (THE intermittent bug) ========= * insectra/assets/js/custom.js (TM_HeaderTopElementorSticky, ~line 1150): * if ($window.width() < 1024) { $header.css("height", ); } * else { $header.css("height", "auto"); } * If that runs while the window reports < 1024px (window opened narrow, then * maximised; slow layout), it stamps an inline `height: 92.375px` on
. *
's children are all absolute/fixed, so that reserved space is pure * empty white that pushes the hero down — the bug that "a refresh fixes". * A normal inline style loses to an !important author rule, so this wins. * Scoped to desktop only, so the theme's real mobile behaviour is untouched. */ @media (min-width: 1024px) { header#header { height: auto !important; } /* Every header variant must stay OUT of the document flow on desktop, or it * reserves empty space that pushes the hero down. Measured while the bug was * happening: heroTop 140 = 120 (sticky header height) + 20 (hero margin), so * a variant was falling back into flow. These re-assert the theme's own * intent from a second stylesheet, so one slow/failed CSS file can't undo it. */ header#header > #elementor-header-top { position: absolute !important; top: 0; left: 0; right: 0; z-index: 11; } header#header > #elementor-header-top-sticky { position: fixed !important; } header#header > #elementor-header-top-mobile { display: none !important; } } /* === Header overlay safety net ====================================== * The transparent header must overlay the hero (position:absolute). That rule * lives in the PARENT's style-main.css. If that single file is slow or fails * to load — the site ships ~57 stylesheets, so an occasional dropped request * is realistic — the header falls back into normal flow and renders as a white * bar that pushes the hero down. That is the intermittent bug that a refresh * "fixes" (the file is then cached). * Re-declaring the rule here — a DIFFERENT file, also in — means the * layout survives that failure. */ @media (min-width: 1025px) { body:not(.elementor-editor-active) header #elementor-header-top.elementor-header-top-transparent { position: absolute !important; top: 0; left: 0; right: 0; z-index: 11; } } /* === Features Block – Skin Style3 =================================== * Shrink the featured badge image so it sits centered inside the theme's * orange circle (.image border) with breathing room. The theme leaves the * at full size; we constrain it. Adjust the 70% to taste. * Markup: .features-block-style3 > .image-box > .image > img * ------------------------------------------------------------------- */ /* Orange circle (the bordered box): make it a perfect circle sized to hug * the badge instead of the oversized 312x280 default. */ .features-block-style3 .image-box .image { width: 170px !important; max-width: 170px !important; height: 170px !important; background-color: #fff !important; } /* Remove the theme's diagonal orange slash drawn across the circle * (::before = 4px bar rotated -40deg in --theme-color1). */ .features-block-style3 .image-box .image::before { display: none !important; } /* Badge image: fill + zoom so the icon's blue ring hugs the orange border; * mix-blend-mode multiply drops the white/near-white square background of the * PNG (it blends into the white circle behind it). */ .features-block-style3 .image-box .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1.12); mix-blend-mode: multiply; } /* === Theme Button – Skin Style1 ===================================== * The button has a fixed 56px height and assumes a single-line label. In * narrow columns the text wraps to 2 lines and overflows the pill, colliding * with the arrow circle. Keep the label on one line. */ .btn-style1 { white-space: nowrap; } .btn-style1 .theme-btn { white-space: nowrap; } /* === Header: remove the horizontal divider line above the menu ======= * It's an Elementor Divider widget (view-line), data-id 9e3bcc3, rendered as * a 1px line. Marked elementor-invisible so it's hard to select in the editor. * Hidden here by its unique element id. */ .elementor-element-9e3bcc3 { display: none !important; } /* Header nav: remove the grey (#D5D5D557) background box behind the menu. */ .elementor-element-f5d6c4b > .elementor-widget-container { background-color: transparent !important; } /* === Native Page Title: smaller heading + top spacing ================ * Title was oversized and sat too close to the (transparent) header. * Adjust the two values to taste. */ .tm-page-title .title { font-size: 42px !important; line-height: 1.15 !important; } .tm-page-title { padding-top: 60px !important; } @media (max-width: 767px) { .tm-page-title .title { font-size: 30px !important; } .tm-page-title { padding-top: 40px !important; } } /* === "Du ponctuel au contrat annuel" — Working Block style2 restyle === * Scoped to that one widget (id 181ee54). Colored cards + white text + * A/B/C letters instead of numbered circles + no bug watermark. * Note: the highlighted sub-box and the "Demander une proposition" CTA are * structural (one text node / no button in this widget) — add the CTA as an * Elementor Button widget if wanted. */ /* Card base */ .elementor-element-181ee54 .working-block-style2 { border-radius: 16px !important; overflow: hidden; } /* Kill the theme's hover/active orange overlay so our colors stay clean */ .elementor-element-181ee54 .working-block-style2::before { display: none !important; } /* Per-card background colors (brand palette) */ .elementor-element-181ee54 .isotope-item:nth-child(1) .working-block-style2 { background-color: #038A7F !important; /* vert petrole */ } .elementor-element-181ee54 .isotope-item:nth-child(2) .working-block-style2 { background-color: #01336D !important; /* bleu profond */ } .elementor-element-181ee54 .isotope-item:nth-child(3) .working-block-style2 { background-color: #F1590B !important; /* orange terre */ } /* White text in every card (incl. hover) */ .elementor-element-181ee54 .working-block-style2 .working-title, .elementor-element-181ee54 .working-block-style2:hover .working-title, .elementor-element-181ee54 .working-block-style2 .working-details, .elementor-element-181ee54 .working-block-style2:hover .working-details { color: #ffffff !important; } /* Remove the bug watermark */ .elementor-element-181ee54 .working-block-style2 .shape-style1 { display: none !important; } /* Turn the numbered circle into a big translucent letter */ .elementor-element-181ee54 .working-block-style2 .number-top .number { background: transparent !important; width: auto !important; height: auto !important; line-height: 1 !important; border-radius: 0 !important; font-size: 0 !important; /* hides the 01/02/03 digits */ } .elementor-element-181ee54 .working-block-style2 .number-top .number::before { font-size: 52px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.35); } .elementor-element-181ee54 .isotope-item:nth-child(1) .working-block-style2 .number-top .number::before { content: "A"; } .elementor-element-181ee54 .isotope-item:nth-child(2) .working-block-style2 .number-top .number::before { content: "B"; } .elementor-element-181ee54 .isotope-item:nth-child(3) .working-block-style2 .number-top .number::before { content: "C"; } /* === Floating decorative insects: make them fluid (vw) ================ * The theme pins each object in fixed px (position + size) tuned for a ~1920px * (24") screen, so they misplace on 13"/14" laptops. Converted every object's * px to vw (px / 19.2, ref 1920) so they scale & reposition proportionally on * ANY screen width. Values match the original look at 1920px. */ /* The theme leaves these at background-size:auto, so the image draws at its * natural pixel size and gets CROPPED whenever the box is smaller (which the * vw sizing below makes happen on any screen under ~1920px). `contain` scales * the image to the box instead, keeping its aspect ratio — nothing cut off. */ .each-object { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } .each-object.elementor-repeater-item-061d4e7 { top: -25.83vw !important; left: -28.80vw !important; width: 13.02vw !important; height: 13.02vw !important; } .each-object.elementor-repeater-item-2481413 { top: -25.47vw !important; left: 8.49vw !important; width: 8.65vw !important; height: 11.88vw !important; } /* Both triangles in brand orange, drawn with clip-path (exact #F1590B, crisp * at any size, and one less image request). */ .each-object.elementor-repeater-item-2481413 { background-image: none !important; background-color: #F1590B !important; clip-path: polygon(0 0, 100% 0, 50% 100%); } .each-object.elementor-repeater-item-283dfd4 { top: 3.18vw !important; left: -8.02vw !important; width: 15.94vw !important; height: 15.36vw !important; } .each-object.elementor-repeater-item-2dc3764 { top: -7.19vw !important; left: -11.88vw !important; width: 11.25vw !important; height: 11.82vw !important; } .each-object.elementor-repeater-item-3444a8e { top: -21.15vw !important; left: -24.58vw !important; width: 56.82vw !important; height: 32.29vw !important; } .each-object.elementor-repeater-item-7241fe8 { bottom: 31.77vw !important; right: -12.71vw !important; width: 14.27vw !important; height: 14.84vw !important; } /* Bee (abeille.png) — enlarged ~1.75x from the theme's 8.54vw. Keeps the * original aspect ratio (1.197) so `contain` fills the box with no gaps. */ .each-object.elementor-repeater-item-72e2ef7 { top: -1.04vw !important; right: 36.46vw !important; width: 15vw !important; height: 12.53vw !important; } .each-object.elementor-repeater-item-930087c { top: -27.08vw !important; right: -17.81vw !important; width: 16.77vw !important; height: 13.59vw !important; } .each-object.elementor-repeater-item-a70c7be { top: -39.06vw !important; left: 31.77vw !important; width: 15.00vw !important; height: 14.17vw !important; } .each-object.elementor-repeater-item-b48ab25 { top: -14.95vw !important; right: -30.36vw !important; width: 15.16vw !important; height: 13.28vw !important; } .each-object.elementor-repeater-item-bec41d3 { top: 5.10vw !important; right: -11.88vw !important; width: 12.29vw !important; height: 11.04vw !important; } .each-object.elementor-repeater-item-f68a521 { top: -2.14vw !important; right: -14.43vw !important; width: 15.00vw !important; height: 14.17vw !important; } /* Hero: move the left green triangle (tri1.png) down so it sits on the title. * Scoped to the left hero widget only (6f3d39c) — the other copy is untouched. * Nudge the -10vw up/down to reposition. */ .elementor-element-6f3d39c .each-object.elementor-repeater-item-2481413 { top: -10vw !important; /* Back to roughly the original size (166x228 at 1920), capped so it never * grows past it on wide screens. Ratio 0.728 kept at both ends. */ width: clamp(64px, 6vw, 110px) !important; height: clamp(88px, 8.24vw, 151px) !important; /* Brand orange. Drawn with clip-path instead of recolouring tri1.png, so the * colour is exact (#F1590B) and the edges stay crisp at any size. */ background-image: none !important; background-color: #F1590B !important; clip-path: polygon(0 0, 100% 0, 50% 100%); } /* === Sticky contact card ============================================ * The theme's scroll handling breaks CSS position:sticky, so this is driven * by JS (assets/js/sticky.js). We only stop the card stretching so it keeps * its natural height. Give the container CSS ID "contact-sticky". */ .contact-sticky, #contact-sticky { align-self: flex-start; } /* Services list (service-block-style2): remove the orange bottom line that * expands on hover (::after uses --theme-color1). Grey separator kept. */ .service-block-style2::after, .service-block-style2:hover::after { display: none !important; } /* Blog cards (skin-style-current-theme2): equalise excerpt height so all cards * line up. Clamp every excerpt to 3 lines (line-height 30.4px = 1.9em). */ .blog-item-current-style2 .mascot-post-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; height: 5.7em; /* 3 lines */ } /* Clamp long titles to 3 lines with ellipsis so every card lines up. */ .blog-item-current-style2 .entry-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; height: 6.3em; /* 3 lines (line-height 33.6px) */ } /* =================================================================== * CookieYes consent banner — SOS Nuisible branding * CookieYes prints its own