/* theme-2026-asset-version: 59 — bump ?v= on theme-2026.css/js in HTML when changing assets */ /* ============================================================================= Эдвайс · theme-2026 · Premium editorial redesign Applied per taste-skill + redesign-skill: - Single-accent palette (brick red) on warm cream paper - Unbounded (display cyrillic) + Geist (body cyrillic) - Grain overlay, tinted shadows, spring physics, magnetic feel - Editorial hero, asymmetric stats, borderless product rows ============================================================================= */ /* ----------------------------------------------------------------------------- Responsive breakpoints (reference — existing rules use mixed thresholds on purpose) - xs: max 560px — single-column category tiles, tight footer headline - sm: max 619–679px — blog grid → 1 col, footer / reading scale - md: max 768–900px — home alternating sections stack, proof strip, equipment grid - lg: max 1024–1099px — home intro 1 col, blog grid → 2 col Use the closest tier when adding new rules; avoid introducing one-off 623px etc. ----------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Geist:wght@400;500;600;700&display=swap&subset=cyrillic,cyrillic-ext,latin,latin-ext"); :root { /* Motion */ --adv-ease: cubic-bezier(0.22, 1, 0.36, 1); --adv-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --adv-transition: 0.35s var(--adv-ease); /* Type */ --adv-font-display: "Unbounded", "Plus Jakarta Sans", system-ui, sans-serif; --adv-font-body: "Geist", "Inter", system-ui, -apple-system, sans-serif; --adv-font-ui: var(--adv-font-body); --adv-font: var(--adv-font-body); /* One reading scale site-wide (home intro, product rows, articles, subpages) */ --adv-text-body: clamp(1.125rem, 1.35vw, 1.25rem); --adv-text-body-lh: 1.62; /* Slightly denser for header strip, footer links, UI lines — still ≥16px */ --adv-text-meta: clamp(1rem, 1.15vw, 1.125rem); /* Proof / trust lines under heroes */ --adv-text-strip: clamp(1.3rem, 1.6vw, 1.5rem); /* 13-15px — était 10.6-11.9 */ /* Primary / secondary CTAs — same optical scale as body copy on the home page */ --adv-text-button: var(--adv-text-body); /* Rhythm (4px base) */ --adv-1: 0.25rem; --adv-2: 0.5rem; --adv-3: 0.75rem; --adv-4: 1rem; --adv-5: 1.25rem; --adv-6: 1.5rem; --adv-8: 2rem; --adv-10: 2.5rem; --adv-12: 3rem; --adv-16: 4rem; --adv-20: 5rem; --adv-24: 6rem; --adv-container: 1320px; --adv-gutter: clamp(1.25rem, 4vw, 2.5rem); --adv-section-y: clamp(4rem, 10vw, 7.5rem); --adv-section-y-tight: clamp(2.5rem, 6vw, 4rem); /* Editorial paper palette */ --adv-paper: #f4f1eb; --adv-paper-elevated: #fbf9f4; --adv-paper-deep: #ebe7dd; --adv-paper-contrast: #e0dace; --adv-bg: var(--adv-paper); --adv-bg-elevated: var(--adv-paper-elevated); --adv-surface: var(--adv-paper-elevated); --adv-band: var(--adv-paper-deep); --adv-surface-subtle: var(--adv-paper-deep); --adv-surface-band: var(--adv-paper-deep); /* Ink (warm near-black) */ --adv-ink: #14171c; --adv-ink-muted: #4a4f58; --adv-ink-soft: #7a7f88; --adv-ink-faint: #a7aab0; --adv-border: rgba(20, 23, 28, 0.08); --adv-border-strong: rgba(20, 23, 28, 0.14); --adv-border-soft: rgba(20, 23, 28, 0.05); /* Single accent (deep brick) — replaces bright red */ --adv-accent: #b8311c; --adv-accent-hover: #8f2414; --adv-accent-soft: #f3dfd9; --adv-accent-deep: #5a180c; /* Legacy aliases (kept for safety; now remapped to single palette) */ --adv-red: var(--adv-accent); --adv-red-hover: var(--adv-accent-hover); --adv-brand: var(--adv-accent); --adv-brand-hover: var(--adv-accent-hover); --adv-green: var(--adv-ink-muted); --adv-green-soft: rgba(20, 23, 28, 0.06); --adv-accent-dark: var(--adv-accent-hover); /* Dark surfaces (for stats band) */ --adv-dark: #0e1013; --adv-dark-soft: #1c2028; --adv-dark-warm: #15171c; /* Radii */ --adv-radius: 24px; --adv-radius-sm: 16px; --adv-radius-inner: 12px; --adv-radius-pill: 999px; /* Tinted shadows (warm, match paper hue) */ --adv-shadow-xs: 0 1px 2px rgba(40, 30, 18, 0.06); --adv-shadow-sm: 0 10px 30px -12px rgba(40, 30, 18, 0.12), 0 2px 6px rgba(40, 30, 18, 0.05); --adv-shadow: 0 30px 60px -20px rgba(40, 30, 18, 0.18), 0 8px 20px -8px rgba(40, 30, 18, 0.08); --adv-shadow-lg: 0 50px 100px -30px rgba(40, 30, 18, 0.25), 0 20px 40px -15px rgba(40, 30, 18, 0.12); --adv-shadow-accent: 0 14px 34px -16px rgba(184, 49, 28, 0.22); } /* Selection color — aligned with palette, avoids accidental red halo artifact on tapped buttons */ body.site ::selection { background: rgba(20, 23, 28, 0.85); color: #fff; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body.site { font-family: var(--adv-font-body) !important; background: var(--adv-paper) !important; color: var(--adv-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } body.adv-home #wb_root.root { background: var(--adv-paper); } body.adv-home { overflow-x: hidden; } /* Site-wide horizontal overflow guard (Jivo widget, etc.) */ html, body.site { overflow-x: hidden; max-width: 100%; } /* Prevent ugly mid-word breaks on Cyrillic compound words */ body.site h1, body.site h2, body.site h3, body.site h4, body.site h5, body.site .wb-stl-heading1, body.site .wb-stl-heading2, body.site .wb-stl-heading3, body.site .adv-hero-h1, body.site .adv-cat__title { hyphens: manual !important; -webkit-hyphens: manual !important; word-break: normal !important; overflow-wrap: break-word !important; -webkit-locale: "ru" !important; } /* Grain overlay — fixed, non-interactive, breaks sterile flatness */ body.adv-2026::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } /* Focus visible */ body.site a:focus-visible, body.site button:focus-visible, body.site .btn:focus-visible, body.site .btn-default:focus-visible, body.site input:focus-visible, body.site textarea:focus-visible, body.site select:focus-visible { outline: 2px solid var(--adv-accent); outline-offset: 3px; border-radius: 6px; } body.site a:focus:not(:focus-visible), body.site button:focus:not(:focus-visible) { outline: none; } /* ---------- Global shell (all adv-2026 pages) ---------- */ body.adv-2026 [id^="wb_header_"] { position: sticky; top: 0; z-index: 10050; } body.adv-2026 [id^="wb_header_"] > .wb_content { padding-left: 0 !important; padding-right: 0 !important; background: rgba(244, 241, 235, 0.78) !important; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border-bottom: 1px solid var(--adv-border); box-shadow: none !important; transition: box-shadow var(--adv-transition), background 0.25s ease; } body.adv-scrolled [id^="wb_header_"] > .wb_content { box-shadow: 0 1px 0 var(--adv-border-strong), 0 12px 30px -20px rgba(40, 30, 18, 0.18) !important; background: rgba(244, 241, 235, 0.96) !important; } body.adv-2026 #wb_element_instance11776_0 { width: 100% !important; max-width: var(--adv-container) !important; margin-left: auto !important; margin-right: auto !important; } body.adv-2026 #wb_element_instance11776_0 > .wb_content { padding: var(--adv-4) var(--adv-gutter) !important; min-height: 4.5rem; align-items: center !important; } body.adv-2026 #wb_element_instance11781_0 > .wb-elm-line, body.adv-2026 #wb_element_instance11781_0 { border-top: 0 !important; height: 0 !important; min-height: 0 !important; } body.adv-2026 [id^="wb_main_"] > .wb_content { max-width: var(--adv-container); margin-left: auto; margin-right: auto; padding-left: var(--adv-gutter); padding-right: var(--adv-gutter); padding-bottom: var(--adv-20); box-sizing: border-box; width: 100%; } /* Two always render one per line — never mashed together. */ body.site .adv-phone-line { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; vertical-align: baseline; max-width: 100%; } body.site .adv-phone-line--compact { gap: 0.2rem; } /* Stacked variant kept as alias of default (same behaviour). */ body.site .adv-phone-line--stacked { flex-direction: column; align-items: flex-start; gap: 0.2rem; } body.site .adv-phone-line__link { white-space: nowrap; } /* ---------- Typography ---------- */ body.site h1, body.site h2, body.site h3, body.site h4, body.site h5 { font-family: var(--adv-font-display) !important; color: var(--adv-ink); } body.site h1.wb-stl-heading1, body.site h1.wb-stl-heading2 { font-family: var(--adv-font-display) !important; font-weight: 700 !important; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; } body.site .wb-stl-heading2, body.site h2.wb-stl-heading2 { font-family: var(--adv-font-display) !important; font-weight: 700 !important; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; } body.site .wb-stl-normal, body.site p.wb-stl-normal { font-family: var(--adv-font-body) !important; line-height: var(--adv-text-body-lh) !important; color: var(--adv-ink-muted); font-size: var(--adv-text-body); font-weight: 400; max-width: 65ch; } body.site h4.wb-stl-custom9 { font-family: var(--adv-font-body) !important; font-weight: 600 !important; font-size: 0.75rem !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--adv-ink-soft); } /* NEUTRALIZE legacy multi-color chromatic chaos. The HTML has inline spans color:rgba(248,16,16,1) (bright red) and rgba(0,188,0,1) (pure green) that create "Christmas / discount store" vibe. → Headings: all tokens → pure ink (typography does the hierarchy). → Inline body highlights: remove color, keep semantic weight. */ body.site h1 span[style*="rgba(248,16,16"], body.site h2 span[style*="rgba(248,16,16"], body.site h3 span[style*="rgba(248,16,16"], body.site h4 span[style*="rgba(248,16,16"], body.site h1 span[style*="rgba(0,188,0"], body.site h2 span[style*="rgba(0,188,0"], body.site h3 span[style*="rgba(0,188,0"], body.site h4 span[style*="rgba(0,188,0"], body.site h1 strong span[style*="rgba(248,16,16"], body.site h2 strong span[style*="rgba(248,16,16"], body.site h1 strong span[style*="rgba(0,188,0"], body.site h2 strong span[style*="rgba(0,188,0"] { color: var(--adv-ink) !important; font-weight: inherit !important; } /* Inline red highlights in body text (paragraphs) — neutralize to medium-weight ink */ body.site p .wb-stl-normal span[style*="rgba(248,16,16"], body.site p span[style*="rgba(248,16,16"], body.site .wb-stl-normal span[style*="rgba(248,16,16"] { color: var(--adv-ink) !important; font-weight: 600 !important; background: linear-gradient(0deg, rgba(184, 49, 28, 0.14) 0%, rgba(184, 49, 28, 0.14) 26%, transparent 26%) !important; padding: 0 0.15em; border-radius: 2px; } /* Footer: keep phone/email accent */ body.site [id^="wb_footer_"] h2 a span[style*="rgba(248,16,16"], body.site [id^="wb_footer_"] h2 span[style*="rgba(248,16,16"] { color: var(--adv-accent) !important; font-weight: 600 !important; background: none !important; padding: 0 !important; } /* Header phone number: ink */ body.site #wb_element_instance11780_0 h2 span[style*="rgba(248,16,16"] { color: var(--adv-ink) !important; background: none !important; padding: 0 !important; } /* Legacy (subpages / old exports) */ body.site font[color] { color: inherit !important; } body.site h2 strong[style*="rgb(0, 188, 0)"], body.site h2 strong[style*="0, 188, 0"] { color: var(--adv-ink) !important; } /* Footer nav green → ink muted */ body.site [id^="wb_footer_"] a span[style*="rgba(0,188,0"] { color: var(--adv-ink) !important; } /* Large display-style section headings */ body.adv-home #wb_element_instance7_1 .wb-stl-heading2, body.adv-home #wb_element_instance7_1 :is(h2, h3), body.adv-home #wb_element_instance10_1 :is(h2, h3), body.adv-home #wb_element_instance41_1 :is(h2, h3), body.adv-home #wb_element_instance54_1 :is(h2, h3), body.adv-home #wb_element_instance20_1 :is(h2, h3), body.adv-home #wb_element_instance27_1 :is(h2, h3), body.adv-home #wb_element_instance48_1 :is(h2, h3), body.adv-home #wb_element_instance14_1 :is(h2, h3) { font-family: var(--adv-font-display) !important; font-weight: 700 !important; } /* ---------- Navigation ---------- */ body.site .hmenu > li > a { position: relative; font-family: var(--adv-font-body) !important; font-size: 1.4rem !important; /* 14px @ 10px root — was 11.25px */ font-weight: 600 !important; /* was 500 — meilleure visibilité */ text-transform: none; letter-spacing: -0.01em !important; border-radius: var(--adv-radius-inner) !important; color: var(--adv-ink) !important; /* was --adv-ink-muted — boutons plus visibles */ background: transparent !important; transition: color 0.25s ease, background 0.25s ease !important; padding: 0.7rem 1.05rem !important; } body.adv-2026 #wb_element_instance11776_0 > .wb_content { min-height: 6rem; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } /* Logo scale up slightly so header feels balanced with bigger nav */ body.adv-2026 #wb_element_instance11778_0 img { height: 44px !important; width: auto !important; } body.site .hmenu > li > a::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.4rem; height: 1.5px; background: var(--adv-accent); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s var(--adv-ease); } body.site .hmenu > li > a:hover::after, body.site .hmenu > li.over > a::after, body.site .hmenu > li.active > a::after { transform: scaleX(1); transform-origin: left center; } body.site .hmenu > li > a:hover, body.site .hmenu > li.over > a { color: var(--adv-ink) !important; background: transparent !important; } body.site .hmenu > li.active > a { color: var(--adv-ink) !important; font-weight: 600 !important; } body.site .btn-collapser { border-radius: var(--adv-radius-inner) !important; border: 1px solid var(--adv-border-strong) !important; background: var(--adv-paper-elevated) !important; box-shadow: none !important; } body.site .btn-collapser:focus-visible { outline: 2px solid var(--adv-accent); outline-offset: 2px; } body.site .wb-menu-mobile.collapse-expanded > ul.hmenu, body.site .wb-menu.collapse-expanded > ul.hmenu { padding: var(--adv-3) var(--adv-gutter) var(--adv-6) !important; margin: 0 !important; background: var(--adv-paper-elevated) !important; border-bottom: 1px solid var(--adv-border) !important; } body.site .wb-menu-mobile.collapse-expanded .hmenu > li > a, body.site .wb-menu.collapse-expanded .hmenu > li > a { min-height: 46px !important; display: flex !important; align-items: center !important; padding: 0.65rem 1rem !important; font-size: 1rem !important; border-radius: var(--adv-radius-inner) !important; } body.site .wb-menu-mobile.collapse-expanded .hmenu > li.active > a, body.site .wb-menu.collapse-expanded .hmenu > li.active > a { background: rgba(184, 49, 28, 0.08) !important; color: var(--adv-accent) !important; font-weight: 600 !important; } body.site .wb-menu-mobile.collapse-expanded .hmenu > li > a::after, body.site .wb-menu.collapse-expanded .hmenu > li > a::after { display: none; } /* Stacking: mobile menu overlay above Jivo chat launcher */ body.site .wb-menu-mobile.collapse-expanded > ul { z-index: 10060 !important; } /* Jivo (code-ya.jivosite.com): keep widget below site chrome so hamburger / expanded menu stay usable */ body.site #jivo-iframe-container, body.site jivo-iframe-container, body.site [id^="jivo_iframe"], body.site [class*="jivo-shadow"], body.site iframe[id^="jivo"], body.site iframe[name^="jivo"] { z-index: 10040 !important; } /* Header phone block — global (all pages) */ body.adv-2026 #wb_element_instance11780_0 { padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; text-align: right !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 2px !important; } body.adv-2026 #wb_element_instance11780_0 :is(h2, p).wb-stl-heading2 { font-family: var(--adv-font-body) !important; font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -0.015em !important; text-transform: none; margin: 0 !important; font-variant-numeric: tabular-nums; line-height: 1.2 !important; } body.adv-2026 #wb_element_instance11780_0 :is(h2, p) span, body.adv-2026 #wb_element_instance11780_0 :is(h2, p) a { color: var(--adv-ink) !important; text-decoration: none; } body.adv-2026 .adv-header-phone, body.adv-2026 a.adv-header-phone { color: var(--adv-ink) !important; font-family: var(--adv-font-body) !important; /* override common.css Helvetica */ font-size: 1.6rem !important; /* 16px — proche de la nav (14) */ font-weight: 700 !important; background: none !important; padding: 0 !important; letter-spacing: -0.01em; } body.adv-2026 .adv-header-hours { color: var(--adv-ink-muted) !important; font-family: var(--adv-font-body) !important; font-size: 1.25rem !important; /* 12.5px — lisible mais discret */ } body.site a.adv-footer-legacy-email { color: var(--adv-accent) !important; font-weight: 600 !important; text-decoration: none; } body.site a.adv-footer-legacy-email:hover { color: var(--adv-accent-hover) !important; } body.adv-2026 #wb_element_instance11780_0 .wb-stl-normal { font-size: var(--adv-text-meta) !important; color: var(--adv-ink-soft) !important; margin: 0 !important; letter-spacing: 0.01em; line-height: 1.45 !important; } /* ---------- Images ---------- */ body.site .wb_element_picture .wb-picture-wrapper { border-radius: var(--adv-radius-sm) !important; overflow: hidden !important; box-shadow: var(--adv-shadow-sm) !important; transition: box-shadow 0.5s var(--adv-ease), transform 0.5s var(--adv-ease); background: var(--adv-paper-contrast); } body.site .wb_element_picture img[src^="/gallery_gen/"] { transition: transform 1s var(--adv-ease), filter 0.5s var(--adv-ease); filter: saturate(0.9) contrast(1.02); } body.site .wb_element_picture .wb-picture-wrapper:hover { box-shadow: var(--adv-shadow); } body.site .wb_element_picture .wb-picture-wrapper:hover img[src^="/gallery_gen/"] { transform: scale(1.04); filter: saturate(1) contrast(1.02); } /* ---------- Buttons (magnetic + spring feel) ---------- Primary = brand red accent (owns the brand, warm, distinctive). Secondary = ghost/outline in ink. Hover on primary wipes to ink. */ body.site a.wb_button { position: relative; display: inline-flex !important; align-items: center; justify-content: center; font-family: var(--adv-font-body) !important; font-weight: 600 !important; font-size: var(--adv-text-button) !important; text-transform: none; letter-spacing: -0.015em !important; border-radius: var(--adv-radius-pill) !important; border: 1px solid var(--adv-accent) !important; background: var(--adv-accent) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(184, 49, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; min-height: 56px !important; padding: 15px 30px !important; overflow: hidden; transition: transform 0.45s var(--adv-spring), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important; will-change: transform; -webkit-tap-highlight-color: transparent; } body.site a.wb_button:focus:not(:focus-visible) { outline: none !important; box-shadow: 0 1px 2px rgba(184, 49, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } body.site a.wb_button > span { color: #fff !important; position: relative; z-index: 2; font-size: inherit !important; } /* Hover: wipe to ink (dark) for a solid inverted state */ body.site a.wb_button::before { content: ""; position: absolute; inset: 0; background: var(--adv-ink); transform: translateX(-101%); transition: transform 0.6s var(--adv-ease); z-index: 1; } body.site a.wb_button:hover { transform: translateY(-2px); border-color: var(--adv-ink) !important; box-shadow: 0 14px 30px -12px rgba(20, 23, 28, 0.35) !important; } body.site a.wb_button:hover::before { transform: translateX(0); } body.site a.wb_button:active { transform: translateY(0) scale(0.98); } body.site a.wb_button:focus-visible { outline: 2px solid var(--adv-accent); outline-offset: 3px; } /* Secondary (ghost on light bg) */ body.site a.wb_button.adv-btn-secondary { background: transparent !important; border: 1.5px solid var(--adv-border-strong) !important; color: var(--adv-ink) !important; box-shadow: none !important; } body.site a.wb_button.adv-btn-secondary > span { color: var(--adv-ink) !important; } body.site a.wb_button.adv-btn-secondary::before { background: var(--adv-ink); } body.site a.wb_button.adv-btn-secondary:hover { border-color: var(--adv-ink) !important; color: #fff !important; box-shadow: 0 12px 32px -12px rgba(20, 23, 28, 0.35) !important; } body.site a.wb_button.adv-btn-secondary:hover > span { color: #fff !important; } /* Secondary on dark hero */ body.adv-home #wb_element_instance1_1 a.wb_button.adv-btn-secondary { background: rgba(255, 255, 255, 0.08) !important; border: 1.5px solid rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.adv-home #wb_element_instance1_1 a.wb_button.adv-btn-secondary > span { color: #fff !important; } body.adv-home #wb_element_instance1_1 a.wb_button.adv-btn-secondary::before { background: #fff; } body.adv-home #wb_element_instance1_1 a.wb_button.adv-btn-secondary:hover { color: var(--adv-ink) !important; border-color: #fff !important; } body.adv-home #wb_element_instance1_1 a.wb_button.adv-btn-secondary:hover > span { color: var(--adv-ink) !important; } /* ---------- Footer (global fallback before JS hides legacy footer) ---------- */ body.site [id^="wb_footer_"] > .wb_content { background: var(--adv-paper) !important; border-top: 1px solid var(--adv-border) !important; box-shadow: none !important; } body.site [id^="wb_footer_"] a:hover { color: var(--adv-accent); text-decoration: none; } body.site [id^="wb_footer_"] p.wb-stl-custom10 a, body.site [id^="wb_footer_"] p.wb-stl-custom10 a b { color: var(--adv-ink-muted) !important; font-weight: 600 !important; } body.site [id^="wb_footer_"] p.wb-stl-custom10 a:hover, body.site [id^="wb_footer_"] p.wb-stl-custom10 a:hover b { color: var(--adv-accent) !important; } /* ============================================================================ * Footer éditorial v15 — .adv-footer * Strategy: hide the WebBuilder footer completely (adv-2026 only), inject a * hand-built .adv-footer via JS that speaks the same design language as the * rest of the site (paper + brick, Unbounded + Geist, warm shadows, spring). * ============================================================================ */ body.adv-2026.adv-footer-injected [id^="wb_footer_"], body.adv-2026.adv-footer-injected #wb_footer_c_0 { display: none !important; } .adv-footer { position: relative; background: var(--adv-paper); color: var(--adv-ink); font-family: var(--adv-font-body); isolation: isolate; overflow: hidden; margin-top: clamp(4rem, 8vw, 7rem); } /* Top hairline with a subtle brick accent cap */ /* Inner wrapper */ .adv-footer__inner { position: relative; max-width: var(--adv-container); margin: 0 auto; padding: 0 var(--adv-gutter); box-sizing: border-box; z-index: 1; } /* ----- Editorial statement (warm CTA band) ----- */ .adv-footer__statement { position: relative; background: linear-gradient(180deg, var(--adv-paper-contrast) 0%, var(--adv-paper-deep) 100%); color: var(--adv-ink); padding: clamp(3rem, 7vw, 5.5rem) var(--adv-gutter); overflow: hidden; isolation: isolate; border-top: 3px solid var(--adv-accent); border-bottom: 1px solid var(--adv-border-strong); } .adv-footer__statement::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(184, 49, 28, 0.08), transparent 60%), radial-gradient(ellipse at bottom left, rgba(20, 23, 28, 0.04), transparent 60%); pointer-events: none; z-index: 0; } .adv-footer__statement-inner { position: relative; z-index: 1; max-width: var(--adv-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; } @media (min-width: 880px) { .adv-footer__statement-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } .adv-footer__eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--adv-font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--adv-ink-soft); margin-bottom: clamp(1rem, 2vw, 1.5rem); } .adv-footer__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--adv-accent); } .adv-footer__headline { font-family: var(--adv-font-display); font-weight: 600; font-size: clamp(2.25rem, 5.8vw, 4.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--adv-ink); margin: 0; max-width: 14ch; } .adv-footer__headline em { font-style: normal; color: var(--adv-accent); font-weight: 700; } .adv-footer__subline { font-family: var(--adv-font-body); font-size: var(--adv-text-meta); line-height: var(--adv-text-body-lh); color: var(--adv-ink-muted); max-width: 38ch; margin: 0 0 clamp(1.5rem, 2.5vw, 2rem); } .adv-footer__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; } .adv-footer__cta-btn { display: inline-flex; align-items: center; gap: 0.55rem; height: 3.25rem; padding: 0 1.5rem; border-radius: var(--adv-radius-pill); font-family: var(--adv-font-display); font-size: var(--adv-text-button); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: background 0.25s var(--adv-ease), color 0.25s var(--adv-ease), transform 0.35s var(--adv-spring), box-shadow 0.3s var(--adv-ease), border-color 0.25s var(--adv-ease); will-change: transform; } .adv-footer__cta-btn--primary { background: var(--adv-ink); color: var(--adv-paper-elevated); border: 1px solid var(--adv-ink); box-shadow: var(--adv-shadow-sm); } .adv-footer__cta-btn--primary:hover { background: var(--adv-accent); border-color: var(--adv-accent); color: #fff; transform: translateY(-2px); box-shadow: var(--adv-shadow-accent), var(--adv-shadow-sm); } .adv-footer__cta-btn--ghost { background: transparent; color: var(--adv-ink); border: 1px solid var(--adv-border-strong); } .adv-footer__cta-btn--ghost:hover { border-color: var(--adv-ink); background: rgba(20, 23, 28, 0.04); transform: translateY(-2px); } .adv-footer__cta-btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--adv-spring); } .adv-footer__cta-btn:hover svg { transform: translate(3px, -3px); } /* ----- Main grid ----- */ .adv-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 3.5rem); } @media (min-width: 620px) { .adv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .adv-footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: clamp(1.5rem, 3.5vw, 3rem); } } .adv-footer__col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .adv-footer__logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; max-width: max-content; transition: opacity 0.25s var(--adv-ease); } .adv-footer__logo:hover { opacity: 0.78; } .adv-footer__logo img { display: block; height: 38px; width: auto; max-width: 100%; } @media (min-width: 880px) { .adv-footer__logo img { height: 42px; } } .adv-footer__tagline { font-size: 0.9375rem; line-height: 1.6; color: var(--adv-ink-muted); margin: 0; max-width: 32ch; } .adv-footer__col-title { font-family: var(--adv-font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--adv-ink-soft); margin: 0 0 0.5rem; } .adv-footer__links, .adv-footer__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .adv-footer__links a { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; font-weight: 500; color: var(--adv-ink); text-decoration: none; line-height: 1.3; transition: color 0.2s ease, transform 0.3s var(--adv-spring); padding: 0.05rem 0; width: fit-content; } .adv-footer__links a::before { content: ""; width: 0; height: 1px; background: var(--adv-accent); transition: width 0.35s var(--adv-ease); margin-right: 0; } .adv-footer__links a:hover { color: var(--adv-accent); } .adv-footer__links a:hover::before { width: 16px; margin-right: 0.4rem; } .adv-footer__links li.is-all a { font-family: var(--adv-font-display); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--adv-accent); margin-top: 0.4rem; } .adv-footer__links li.is-all a::after { content: "→"; margin-left: 0.25rem; transition: transform 0.3s var(--adv-spring); display: inline-block; } .adv-footer__links li.is-all a:hover::after { transform: translateX(4px); } /* Contact column rows — icône centrée verticalement avec le texte */ .adv-footer__contact li { display: flex; align-items: center; /* centre l'icône avec le texte (1 ligne) */ gap: 0.65rem; font-size: 0.9375rem; color: var(--adv-ink-muted); line-height: 1.5; } /* Exception téléphone : 2 numéros empilés. Icône alignée au CENTRE du PREMIER numéro. */ .adv-footer__contact li:has(.adv-footer__phones) { align-items: flex-start; } .adv-footer__contact li:has(.adv-footer__phones) > svg { margin-top: 14px; /* centre sur le 1er .adv-footer__phone (min-height 44 / 2 - icon/2) */ } /* Adresse multi-lignes : aligne en haut */ .adv-footer__contact li:has(span:not(.adv-footer__phones)) { align-items: flex-start; } .adv-footer__contact li:has(span:not(.adv-footer__phones)) > svg { margin-top: 4px; } .adv-footer__contact svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--adv-accent); } .adv-footer__contact a { color: var(--adv-ink); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .adv-footer__contact a:hover { color: var(--adv-accent); } /* Phones: same scale as catalog links / contact lines — not display-sized */ .adv-footer__phone { font-family: var(--adv-font-body) !important; font-size: 1.5rem !important; /* 15px — était 9.4 */ font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.35; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0.35rem 0.5rem 0.35rem 0; box-sizing: border-box; } .adv-footer__phones { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; line-height: 1.35; } /* Mail line in contact column — match tap target size (Lighthouse target-size / WCAG 2.5.5) */ .adv-footer__contact li > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.5rem 0.35rem 0; box-sizing: border-box; } /* Social icons — directly under «Пн–Пт» in the Контакты column */ .adv-footer__col-socials { margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--adv-border); display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; } .adv-footer__col-socials .adv-footer__social-label { margin-right: 0; } .adv-footer__col-socials .adv-footer__socials { margin: 0; flex: none; } /* Social row — lives inside the legal stripe (.adv-footer__meta) on the right */ .adv-footer__socials { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .adv-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--adv-paper-elevated); border: 1px solid var(--adv-border); color: var(--adv-ink-muted); text-decoration: none; transition: background 0.25s var(--adv-ease), border-color 0.25s var(--adv-ease), transform 0.35s var(--adv-spring), box-shadow 0.3s var(--adv-ease), color 0.25s var(--adv-ease); } .adv-footer__socials a:hover { background: var(--adv-ink); border-color: var(--adv-ink); color: var(--adv-paper-elevated); transform: translateY(-2px); box-shadow: var(--adv-shadow-sm); } .adv-footer__socials svg { width: 15px; height: 15px; fill: currentColor; } .adv-footer__social-label { font-family: var(--adv-font-display); font-size: 1.2rem; /* 12px (était 7.5) */ font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--adv-ink-soft); margin-right: 0.5rem; } /* ----- Legal bottom stripe — compact, single line copyright ----- */ .adv-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.5rem 2rem; padding: clamp(1rem, 1.75vw, 1.25rem) 0 clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--adv-border); position: relative; z-index: 2; } .adv-footer__copy { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--adv-ink-soft); max-width: 58ch; } .adv-footer__meta { display: inline-flex; align-items: center; gap: clamp(0.85rem, 1.5vw, 1.25rem); flex-wrap: wrap; justify-content: flex-end; font-size: 0.75rem; color: var(--adv-ink-soft); } .adv-footer__meta a { color: var(--adv-ink-soft); text-decoration: none; transition: color 0.2s ease; } .adv-footer__meta a:hover { color: var(--adv-accent); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .adv-footer *, .adv-footer *::before, .adv-footer *::after { transition: none !important; animation: none !important; } .adv-footer__cta-btn:hover, .adv-footer__socials a:hover { transform: none !important; } } /* Small screens polish */ @media (max-width: 619px) { .adv-footer__headline { font-size: clamp(2.25rem, 11vw, 3.25rem); } .adv-footer__statement-inner { align-items: start; } .adv-footer__legal { flex-direction: column; align-items: flex-start; } } /* ============================================================= * Catalog / blog card grid — 2026 editorial premium. * * Neutralises legacy WebBuilder per-page CSS (/css/3.css, /css/7.css) * that forced a 1-col horizontal strip layout with 300px left thumbnail, * caption offset via `margin-left:-300px; padding-left:300px`, beige tint, * fixed 300px height, and 30px Helvetica titles. * * Replaces it with a responsive grid of vertical cards: * - Image top (aspect 4/3, paper bg, subtle hover zoom) * - Caption below with title, 2-line clamped description, CTA arrow * - Elevation on hover, accent border, title color swap, arrow travel * * Columns adapt to viewport: * ≥ 1100px → 3 columns * 680–1099px → 2 columns * < 680px → 1 column * 38 category cards × 3-up column is the right density for browsing; * 2-up would double the scroll length without adding clarity. * ============================================================= */ /* Grid container — WebBuilder HTML nests items inside a single *
child of .wb-blog-list, so we grid that inner
. */ body.site .wb-blog-type-list .wb-blog-list, body.site .wb-blog-type-thumbs .wb-blog-list { text-align: left !important; margin: 0 !important; background: transparent !important; } body.site .wb-blog-type-list .wb-blog-list > div, body.site .wb-blog-type-thumbs .wb-blog-list > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--adv-6) !important; } @media (max-width: 1099px) { body.site .wb-blog-type-list .wb-blog-list > div, body.site .wb-blog-type-thumbs .wb-blog-list > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 679px) { body.site .wb-blog-type-list .wb-blog-list > div, body.site .wb-blog-type-thumbs .wb-blog-list > div { grid-template-columns: 1fr !important; gap: var(--adv-5) !important; } } /* Card shell — vertical stack, neutralises all legacy box rules */ body.site .wb-blog-item { position: relative; display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--adv-border); border-radius: 14px; background: var(--adv-paper-elevated) !important; overflow: hidden; isolation: isolate; text-decoration: none !important; box-shadow: 0 1px 0 rgba(20, 23, 28, 0.02); transition: transform 0.45s var(--adv-ease), box-shadow 0.45s var(--adv-ease), border-color 0.3s ease; } body.site .wb-blog-item:hover { transform: translateY(-4px); border-color: var(--adv-border-strong); box-shadow: 0 2px 4px rgba(20, 23, 28, 0.04), 0 18px 40px -14px rgba(20, 23, 28, 0.18); } /* Thumbs layout (blog index) wraps thumbnail + caption inside an extra * `.wrapper` div, and legacy site.css absolutely positions `.caption` on top * of the thumbnail. Flatten `.wrapper` into the card flex flow and restore * a normal stacked layout so the caption sits below the image. */ body.site .wb-blog-type-thumbs .wb-blog-item > .wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; position: static !important; flex: 0 0 auto !important; } body.site .wb-blog-type-thumbs .wb-blog-item .caption { position: static !important; z-index: auto !important; width: 100% !important; background: transparent !important; flex-direction: column !important; gap: var(--adv-2); min-height: 0; padding: var(--adv-4) var(--adv-5) var(--adv-3) !important; } body.site .wb-blog-type-thumbs .wb-blog-item .caption .title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } body.site .wb-blog-type-thumbs .wb-blog-item .caption .description { word-break: normal !important; } /* Listing cards: hide WebBuilder publish timestamp */ body.site .wb-blog .wb-blog-item .caption .date { display: none !important; } /* CTA arrow — thumbs variant has no caption-wrapper, attach to .caption */ body.site .wb-blog-type-thumbs .wb-blog-item .caption::after { content: "→"; align-self: flex-start; margin-top: var(--adv-2); padding-top: 0; font-family: var(--adv-font-body); font-size: 1.125rem; line-height: 1; font-weight: 400; color: var(--adv-accent); opacity: 0.55; transform: translateX(0); transition: transform 0.35s var(--adv-spring), opacity 0.3s ease; } body.site .wb-blog-type-thumbs .wb-blog-item:hover .caption::after { transform: translateX(6px); opacity: 1; } html.adv-reduced-motion body.site .wb-blog-type-thumbs .wb-blog-item:hover .caption::after { transform: none; } /* Image — fixed 4/3 aspect, cover, subtle scale on hover */ body.site .wb-blog-item .blog-item-thumbnail { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: var(--adv-paper) !important; border-radius: 0 !important; flex: 0 0 auto; transform-origin: center center; transition: transform 0.7s var(--adv-ease); } body.site .wb-blog-item:hover .blog-item-thumbnail { transform: scale(1.03); } /* Subtle hairline between image and caption */ body.site .wb-blog-item .blog-item-thumbnail + .caption { border-top: 1px solid var(--adv-border); } /* Caption — natural height (no flex-grow) so short cards don’t leave a void under text */ body.site .wb-blog-item .caption { display: flex !important; flex: 0 0 auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } body.site .wb-blog-type-list .wb-blog-list > div > .wb-blog-item, body.site .wb-blog-type-thumbs .wb-blog-list > div > .wb-blog-item { align-self: start; } body.site .wb-blog-type-list .wb-blog-item .caption .caption-wrapper, body.site .wb-blog-type-thumbs .wb-blog-item .caption .caption-wrapper { display: flex; flex-direction: column; gap: var(--adv-2); width: 100%; min-height: 0; padding: var(--adv-4) var(--adv-5) var(--adv-3) !important; } /* Inner wrapper: use display: contents so title + description become * direct flex children of .caption-wrapper, letting our ::after arrow * use margin-top:auto to anchor at the card bottom regardless of copy. */ body.site .wb-blog-type-list .wb-blog-item .caption .caption-wrapper > div, body.site .wb-blog-type-thumbs .wb-blog-item .caption .caption-wrapper > div { display: contents; overflow: visible !important; max-height: none !important; } /* Title — display font, proper hierarchy, accent on hover */ body.site .wb-blog-type-list .wb-blog-item .caption .title, body.site .wb-blog-type-thumbs .wb-blog-item .caption .title { font: 700 clamp(1.5rem, 1.6vw, 1.75rem)/1.25 var(--adv-font-display) !important; letter-spacing: -0.02em !important; color: var(--adv-ink) !important; text-decoration: none !important; text-transform: none !important; margin: 0 !important; height: auto !important; text-wrap: balance; transition: color 0.2s ease; } body.site .wb-blog-item:hover .caption .title { color: var(--adv-accent) !important; text-decoration: none !important; } /* Description — 2-line clamp; bump à 13-14px pour lisibilité */ body.site .wb-blog-type-list .wb-blog-item .caption .description, body.site .wb-blog-type-thumbs .wb-blog-item .caption .description { font-family: var(--adv-font-body) !important; font-weight: 400 !important; font-size: clamp(1.3rem, 1.5vw, 1.45rem) !important; /* 13-14.5px (était 11.3-12.5) */ line-height: 1.5 !important; color: var(--adv-ink-muted) !important; margin: 0 !important; height: auto !important; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Date (blog items only, catalog cards don't have one) */ body.site .wb-blog-type-list .wb-blog-item .caption .date, body.site .wb-blog-type-thumbs .wb-blog-item .caption .date { font: 700 0.6875rem/1.2 var(--adv-font-body) !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--adv-ink-soft) !important; margin: 0 !important; } /* CTA affordance — arrow directly under description (no flex gap to card bottom) */ body.site .wb-blog-type-list .wb-blog-item .caption .caption-wrapper::after, body.site .wb-blog-type-thumbs .wb-blog-item .caption .caption-wrapper::after { content: "→"; align-self: flex-start; margin-top: var(--adv-2); padding-top: 0; font-family: var(--adv-font-body); font-size: 1.125rem; line-height: 1; font-weight: 400; color: var(--adv-accent); opacity: 0.55; transform: translateX(0); transition: transform 0.35s var(--adv-spring), opacity 0.3s ease; } body.site .wb-blog-item:hover .caption .caption-wrapper::after { transform: translateX(6px); opacity: 1; } /* Reduced motion — kill image zoom and arrow slide */ html.adv-reduced-motion body.site .wb-blog-item:hover .blog-item-thumbnail { transform: none; } html.adv-reduced-motion body.site .wb-blog-item:hover .caption .caption-wrapper::after { transform: none; } body.site .wb_element[data-plugin="Line"] .wb-elm-line { border-top: 1px solid var(--adv-border) !important; border-bottom: 0 !important; opacity: 1; } /* Catalog / blog filters */ body.site .wb-blog-filters .btn, body.site .wb-blog > .btn-default, body.site .wb-blog a.btn-default { border-radius: var(--adv-radius-inner) !important; border: 1px solid var(--adv-border-strong) !important; background: var(--adv-paper-elevated) !important; color: var(--adv-ink) !important; font-family: var(--adv-font-body) !important; font-size: var(--adv-text-button) !important; font-weight: 500 !important; padding: 0.55rem 1.1rem !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } body.site .wb-blog-filters .btn:hover, body.site .wb-blog > .btn-default:hover { background: var(--adv-ink) !important; color: #fff !important; border-color: var(--adv-ink) !important; transform: translateY(-1px); } body.site .wb-blog table, body.site .wb-blog .wb-blog-list { border-radius: var(--adv-radius-sm); overflow: hidden; } /* Blog article: phone callout */ body.site h2.adv-callout, body.site .adv-callout { margin: var(--adv-8) auto !important; max-width: 36rem; } /* ---------- Scroll reveal ---------- */ .adv-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--adv-ease) var(--adv-delay, 0ms), transform 0.9s var(--adv-ease) var(--adv-delay, 0ms); will-change: opacity, transform; } .adv-reveal.adv-inview { opacity: 1; transform: none; will-change: auto; } .adv-reveal-blog { opacity: 0; transform: translateY(20px); transition: opacity 0.65s var(--adv-ease) var(--adv-delay, 0ms), transform 0.65s var(--adv-ease) var(--adv-delay, 0ms); } .adv-reveal-blog.adv-inview { opacity: 1; transform: none; } /* Staggered columns inside home product rows — parent keeps single IO observation */ body.adv-home .adv-reveal-row.adv-reveal { opacity: 1; transform: none; transition: none; will-change: auto; } body.adv-home .adv-reveal-row .adv-reveal-slice { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(0); transition: opacity 0.88s var(--adv-ease) var(--adv-slice-delay, 0ms), transform 0.88s var(--adv-ease) var(--adv-slice-delay, 0ms); will-change: opacity, transform; } body.adv-home .adv-reveal-row .adv-reveal-slice--media .wb-picture-wrapper { clip-path: inset(0 0 0 100%); transition: clip-path 0.95s var(--adv-ease) var(--adv-slice-delay, 0ms); } body.adv-home .adv-reveal-row.adv-inview .adv-reveal-slice { opacity: 1; transform: none; will-change: auto; } body.adv-home .adv-reveal-row.adv-inview .adv-reveal-slice--media .wb-picture-wrapper { clip-path: inset(0 0 0 0); } html.adv-reduced-motion body.adv-home .adv-reveal-row .adv-reveal-slice, html.adv-reduced-motion body.adv-home .adv-reveal-row .adv-reveal-slice--media .wb-picture-wrapper { opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important; filter: none !important; } /* Scroll-driven reveal (see html.adv-scroll-timeline + .adv-reveal-scroll in theme-2026.js) */ @keyframes adv-reveal-scroll-kf { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .adv-reveal-scroll { animation: adv-reveal-scroll-kf linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } html.adv-reduced-motion .adv-reveal-scroll { animation: none !important; opacity: 1 !important; transform: none !important; } /* ============================================================================= HOME — editorial rhythm ============================================================================= */ /* Hide empty WebBuilder spacer bands */ body.adv-home #wb_element_instance3_1, body.adv-home #wb_element_instance16_1, body.adv-home #wb_element_instance23_1, body.adv-home #wb_element_instance29_1, body.adv-home #wb_element_instance38_1, body.adv-home #wb_element_instance44_1, body.adv-home #wb_element_instance50_1, body.adv-home #wb_element_instance57_1 { display: none !important; } /* Main column */ body.adv-home #wb_main_1 > .wb_content { display: block; width: 100%; max-width: var(--adv-container); margin-left: auto; margin-right: auto; padding-left: var(--adv-gutter); padding-right: var(--adv-gutter); padding-bottom: var(--adv-20); } body.adv-home #wb_main_1 > .wb_content > .wb_element { margin-left: 0 !important; margin-right: 0 !important; } /* --- HERO: editorial, asymmetric, full bleed, grain, fade to paper --- */ body.adv-home #wb_element_instance1_1 { width: 100% !important; max-width: none !important; } body.adv-home #wb_element_instance1_1 > .wb_content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-height: clamp(540px, 82vh, 880px); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; padding: clamp(4rem, 10vw, 8rem) var(--adv-gutter) clamp(3rem, 6vw, 5rem) !important; border-radius: 0; overflow: hidden; background-size: cover !important; background-position: center 30% !important; background-attachment: scroll !important; isolation: isolate; box-shadow: none; } /* Warm gradient + mesh orbs + paper fade at bottom for seamless integration */ body.adv-home #wb_element_instance1_1 > .wb_content::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 100% 70% at 12% -5%, rgba(184, 49, 28, 0.2) 0%, transparent 58%), radial-gradient(ellipse 55% 45% at 88% 28%, rgba(255, 255, 255, 0.14) 0%, transparent 52%), radial-gradient(ellipse 45% 35% at 42% 92%, rgba(20, 23, 28, 0.35) 0%, transparent 50%), linear-gradient(180deg, rgba(14, 16, 19, 0.32) 0%, rgba(14, 16, 19, 0.48) 45%, rgba(14, 16, 19, 0.6) 78%, rgba(14, 16, 19, 0.55) 100%), radial-gradient(ellipse at 75% 30%, rgba(184, 49, 28, 0.22) 0%, transparent 55%); pointer-events: none; } /* Bottom vignette fading into paper — court (140px) pour ne pas chevaucher la trust strip */ body.adv-home #wb_element_instance1_1 > .wb_content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0; background: linear-gradient(180deg, rgba(244, 241, 235, 0) 0%, rgba(244, 241, 235, 0.15) 40%, rgba(244, 241, 235, 0.6) 75%, var(--adv-paper) 100%); pointer-events: none; } body.adv-home #wb_element_instance1_1 > .wb_content > * { position: relative; z-index: 1; width: 100%; max-width: var(--adv-container); margin-left: auto; margin-right: auto; } body.adv-home #wb_element_instance2_1 { width: 100% !important; max-width: none !important; } body.adv-home #wb_element_instance2_1 > .wb_content { min-height: auto !important; padding: var(--adv-6) 0 !important; justify-content: flex-end !important; align-items: flex-start !important; flex-direction: column !important; gap: var(--adv-4); } body.adv-home .adv-hero-stack { max-width: 56rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--adv-5); } body.adv-home .adv-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--adv-font-body) !important; font-size: 1.3rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: rgba(255, 255, 255, 0.75) !important; margin: 0 !important; padding: 0.45rem 0.95rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--adv-radius-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.adv-home .adv-hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--adv-accent); box-shadow: 0 0 12px var(--adv-accent); animation: adv-pulse 2.4s ease-in-out infinite; } @keyframes adv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } body.adv-home .adv-hero-h1 { font-family: var(--adv-font-display) !important; font-weight: 700 !important; font-size: clamp(2.5rem, 6.5vw, 5.25rem) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; color: #fff !important; margin: 0 !important; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35); text-wrap: balance; } body.adv-home .adv-hero-lead { color: rgba(255, 255, 255, 0.92) !important; font-size: clamp(1.5rem, 2vw, 1.8rem) !important; line-height: 1.55 !important; margin: 0 !important; max-width: 36rem; font-weight: 400; } body.adv-home .adv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adv-3); margin-top: var(--adv-4); } @keyframes adv-hero-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } body.adv-home .adv-hero-stack > * { animation: adv-hero-in 0.88s var(--adv-ease) both; } body.adv-home .adv-hero-stack > *:nth-child(1) { animation-delay: 0.06s; } body.adv-home .adv-hero-stack > *:nth-child(2) { animation-delay: 0.18s; } body.adv-home .adv-hero-stack > *:nth-child(3) { animation-delay: 0.28s; } body.adv-home .adv-hero-stack > *:nth-child(4) { animation-delay: 0.38s; } body.adv-home .adv-hero-stack > *:nth-child(5) { animation-delay: 0.48s; } html.adv-reduced-motion body.adv-home .adv-hero-stack > * { animation: none !important; opacity: 1 !important; transform: none !important; } /* Proof strip — one system everywhere (home hero + injected subpage hero): 3-col grid, bar gap, wrap */ body.adv-home .adv-proof-strip, body.adv-subpage .adv-proof-strip { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; column-gap: clamp(1rem, 3vw, 2.5rem); row-gap: var(--adv-3); font-family: var(--adv-font-body) !important; font-size: var(--adv-text-strip) !important; font-weight: 600 !important; letter-spacing: -0.01em; } body.adv-home .adv-proof-strip { margin: var(--adv-8) 0 0 !important; padding: var(--adv-6) 0 0 !important; max-width: 58rem; border-top: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.96) !important; } body.adv-subpage .adv-proof-strip { margin: var(--adv-7) 0 0 !important; padding: var(--adv-5) 0 0 !important; max-width: 62rem; border-top: 1px solid var(--adv-border); color: var(--adv-ink) !important; } body.adv-home .adv-proof-strip li, body.adv-subpage .adv-proof-strip li { position: relative; padding-left: calc(18px + 0.65rem); line-height: 1.4; min-width: 0; white-space: normal; overflow: visible; hyphens: manual; word-break: normal; } body.adv-home .adv-proof-strip li::before, body.adv-subpage .adv-proof-strip li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 18px; height: 2px; background: var(--adv-accent); border-radius: 1px; } body.adv-home .adv-proof-strip li::before { box-shadow: 0 0 14px rgba(184, 49, 28, 0.55); } body.adv-subpage .adv-proof-strip li::before { box-shadow: none; } /* --- Mid CTA band — light editorial card (reduces dark-block fatigue) --- */ body.adv-home .adv-mid-cta-band { width: 100% !important; margin: var(--adv-12) 0 !important; } body.adv-home .adv-section-cta { position: relative; background: var(--adv-paper-deep) !important; border: 1px solid var(--adv-border-strong) !important; border-left: 4px solid var(--adv-accent) !important; border-radius: var(--adv-radius-inner); box-shadow: var(--adv-shadow-sm); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3rem) !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--adv-6); overflow: hidden; } body.adv-home .adv-section-cta > * { position: relative; z-index: 1; } body.adv-home .adv-section-cta-label { margin: 0 !important; font-family: var(--adv-font-display) !important; font-weight: 600 !important; font-size: clamp(1.375rem, 2.2vw, 1.875rem) !important; letter-spacing: -0.025em !important; line-height: 1.15; color: var(--adv-ink) !important; max-width: 32rem; } /* Primary button (phone) stays black with accent hover — consistent with site */ body.adv-home .adv-section-cta .wb_button { background: var(--adv-ink) !important; border-color: var(--adv-ink) !important; color: #fff !important; } body.adv-home .adv-section-cta .wb_button > span { color: #fff !important; } body.adv-home .adv-section-cta .wb_button::before { background: var(--adv-accent); } body.adv-home .adv-section-cta .wb_button:hover { border-color: var(--adv-accent) !important; } body.adv-home .adv-section-cta .wb_button:hover > span { color: #fff !important; } /* Secondary ghost — borderless cream */ body.adv-home .adv-section-cta .wb_button.adv-btn-secondary { background: transparent !important; border: 1.5px solid var(--adv-border-strong) !important; color: var(--adv-ink) !important; } body.adv-home .adv-section-cta .wb_button.adv-btn-secondary > span { color: var(--adv-ink) !important; } body.adv-home .adv-section-cta .wb_button.adv-btn-secondary::before { background: var(--adv-ink); } body.adv-home .adv-section-cta .wb_button.adv-btn-secondary:hover { border-color: var(--adv-ink) !important; } body.adv-home .adv-section-cta .wb_button.adv-btn-secondary:hover > span { color: #fff !important; } /* --- Intro section: editorial split (no card) --- */ body.adv-home #wb_element_instance4_1 > .wb_content { padding: var(--adv-section-y) 0 !important; background: transparent !important; } body.adv-home #wb_element_instance5_1 > .wb_content { padding: 0 !important; } body.adv-home #wb_element_instance6_1 > .wb_content { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; column-gap: clamp(1rem, 2.2vw, 1.75rem) !important; row-gap: var(--adv-10) !important; align-items: center !important; background: transparent !important; border: none !important; border-radius: var(--adv-radius-sm) !important; padding: 0 !important; box-shadow: none !important; transition: transform 0.5s var(--adv-ease), box-shadow 0.5s var(--adv-ease); } body.adv-home #wb_element_instance6_1 > .wb_content:hover { transform: translateY(-5px); box-shadow: var(--adv-shadow); } body.adv-home #wb_element_instance7_1 { max-width: none !important; margin: 0 !important; width: 100% !important; } body.adv-home #wb_element_instance7_1 .wb-stl-heading2, body.adv-home #wb_element_instance7_1 h2 { font-family: var(--adv-font-display) !important; font-weight: 700 !important; font-size: clamp(2rem, 4.2vw, 3.5rem) !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; text-align: left !important; margin-bottom: var(--adv-6) !important; } body.adv-home #wb_element_instance7_1 .wb-stl-normal { font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; text-align: left !important; max-width: none !important; } body.adv-home #wb_element_instance8_1 { margin: 0 !important; max-width: none !important; width: 100% !important; opacity: 1 !important; } body.adv-home #wb_element_instance8_1 .wb-picture-wrapper { border-radius: var(--adv-radius) !important; aspect-ratio: 4 / 5; max-height: min(620px, 62vh); box-shadow: var(--adv-shadow-lg) !important; } body.adv-home #wb_element_instance8_1 img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Unify product photography: paper backing + gentle grade (hero intro image stays natural). */ body.adv-home #wb_main_1 .wb_element_picture .wb-picture-wrapper { background: var(--adv-paper-deep); } body.adv-home #wb_main_1 .wb_element_picture img { filter: contrast(1.03) saturate(0.96); } body.adv-home #wb_element_instance8_1 img { filter: none !important; } body.adv-home #wb_main_1 .wb_element_picture img[src*="gemini"] { filter: contrast(1.06) saturate(0.88) brightness(1.02); } /* --- Section headers (centered, editorial with rule) --- */ body.adv-home #wb_element_instance9_1 > .wb_content, body.adv-home #wb_element_instance51_1 > .wb_content { padding: var(--adv-section-y-tight) 0 var(--adv-6) !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } body.adv-home #wb_element_instance10_1 { width: 100% !important; max-width: 48rem !important; margin-left: auto !important; margin-right: auto !important; position: relative; } body.adv-home #wb_element_instance10_1::before { content: "Каталог"; display: block; font-family: var(--adv-font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--adv-ink-soft); margin-bottom: var(--adv-4); } body.adv-home #wb_element_instance10_1 h2 { text-align: center !important; font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.1 !important; letter-spacing: -0.04em !important; margin: 0 auto !important; } /* --- PRODUCT ROWS: borderless editorial zig-zag --- */ /* Force row wrappers to full container width */ body.adv-home #wb_main_1 #wb_element_instance11_1, body.adv-home #wb_main_1 #wb_element_instance58_1, body.adv-home #wb_main_1 #wb_element_instance39_1, body.adv-home #wb_main_1 #wb_element_instance45_1, body.adv-home #wb_main_1 #wb_element_instance52_1 { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; } body.adv-home #wb_main_1 #wb_element_instance11_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance58_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance39_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance45_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance52_1 > .wb_content { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; gap: clamp(2rem, 4vw, 3.5rem) !important; align-items: center !important; padding: var(--adv-7) clamp(0.5rem, 1.5vw, 1rem) !important; margin: 0 !important; background: transparent !important; border: none !important; border-top: 1px solid var(--adv-border) !important; border-radius: var(--adv-radius-sm) !important; box-shadow: none !important; flex-wrap: nowrap !important; justify-content: stretch !important; align-content: stretch !important; width: 100% !important; max-width: none !important; transition: transform 0.5s var(--adv-ease), box-shadow 0.5s var(--adv-ease); } body.adv-home #wb_main_1 #wb_element_instance11_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance58_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance39_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance45_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance52_1 > .wb_content:hover { transform: translateY(-5px); box-shadow: var(--adv-shadow-sm); } @media (prefers-reduced-motion: reduce) { body.adv-home #wb_element_instance6_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance11_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance58_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance39_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance45_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance52_1 > .wb_content { transition: none; } body.adv-home #wb_element_instance6_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance11_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance58_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance39_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance45_1 > .wb_content:hover, body.adv-home #wb_main_1 #wb_element_instance52_1 > .wb_content:hover { transform: none; } } /* Kill WebBuilder's hardcoded column constraints — force children to fill grid cells */ body.adv-home #wb_element_instance12_1, body.adv-home #wb_element_instance13_1, body.adv-home #wb_element_instance58a_1, body.adv-home #wb_element_instance58b_1, body.adv-home #wb_element_instance40_1, body.adv-home #wb_element_instance43_1, body.adv-home #wb_element_instance46_1, body.adv-home #wb_element_instance47_1, body.adv-home #wb_element_instance53_1, body.adv-home #wb_element_instance56_1 { width: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; flex: 1 1 auto !important; } /* Reverse (zig-zag) every other row: image right when even */ body.adv-home #wb_main_1 #wb_element_instance39_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance52_1 > .wb_content { background: transparent !important; } /* Image containers: larger, refined aspect */ body.adv-home #wb_main_1 #wb_element_instance11_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance58_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance39_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance45_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance52_1 .wb_element_picture .wb-picture-wrapper { min-height: 320px; aspect-ratio: 4 / 3; height: 100%; border-radius: var(--adv-radius) !important; } body.adv-home #wb_main_1 #wb_element_instance11_1 .wb_element_picture img, body.adv-home #wb_main_1 #wb_element_instance58_1 .wb_element_picture img, body.adv-home #wb_main_1 #wb_element_instance39_1 .wb_element_picture img, body.adv-home #wb_main_1 #wb_element_instance45_1 .wb_element_picture img, body.adv-home #wb_main_1 #wb_element_instance52_1 .wb_element_picture img { width: 100% !important; height: 100% !important; min-height: 320px; object-fit: cover !important; } body.adv-home #wb_main_1 #wb_element_instance11_1 .wb-layout-vertical > .wb_content, body.adv-home #wb_main_1 #wb_element_instance58_1 .wb-layout-vertical > .wb_content, body.adv-home #wb_main_1 #wb_element_instance39_1 .wb-layout-vertical > .wb_content, body.adv-home #wb_main_1 #wb_element_instance45_1 .wb-layout-vertical > .wb_content, body.adv-home #wb_main_1 #wb_element_instance52_1 .wb-layout-vertical > .wb_content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: var(--adv-4) !important; height: 100%; padding: var(--adv-2) 0 !important; } body.adv-home #wb_main_1 #wb_element_instance11_1 .wb-stl-heading2, body.adv-home #wb_main_1 #wb_element_instance58_1 .wb-stl-heading2, body.adv-home #wb_main_1 #wb_element_instance39_1 .wb-stl-heading2, body.adv-home #wb_main_1 #wb_element_instance45_1 .wb-stl-heading2, body.adv-home #wb_main_1 #wb_element_instance52_1 .wb-stl-heading2 { text-align: left !important; font-family: var(--adv-font-display) !important; font-size: clamp(1.5rem, 2.2vw, 2rem) !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; margin: 0 !important; hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: break-word !important; word-break: normal !important; text-wrap: balance; } body.adv-home #wb_main_1 #wb_element_instance11_1 .wb-stl-normal, body.adv-home #wb_main_1 #wb_element_instance58_1 .wb-stl-normal, body.adv-home #wb_main_1 #wb_element_instance39_1 .wb-stl-normal, body.adv-home #wb_main_1 #wb_element_instance45_1 .wb-stl-normal, body.adv-home #wb_main_1 #wb_element_instance52_1 .wb-stl-normal { text-align: left !important; font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; max-width: none !important; color: var(--adv-ink-muted) !important; } body.adv-home #wb_main_1 #wb_element_instance11_1 [data-plugin="Button"], body.adv-home #wb_main_1 #wb_element_instance58_1 [data-plugin="Button"], body.adv-home #wb_main_1 #wb_element_instance39_1 [data-plugin="Button"], body.adv-home #wb_main_1 #wb_element_instance45_1 [data-plugin="Button"], body.adv-home #wb_main_1 #wb_element_instance52_1 [data-plugin="Button"] { margin-top: var(--adv-2) !important; padding-top: var(--adv-2) !important; } /* Natural DOM order already alternates (row 2/4/6 have text first, picture second → image-right). No flip needed. Explicit grid areas for precision on swapped rows. */ body.adv-home #wb_element_instance39_1 > .wb_content, body.adv-home #wb_element_instance52_1 > .wb_content { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important; } /* --- TRUST METRICS STRIP: inline editorial, no box, thin top/bottom border --- Note: #31_1 is moved by JS to just BEFORE the "Что мы предлагаем" title. This is the trust strip right after the hero. No card, no background, just big numbers with hairline dividers — editorial print style. #30_1 is left wrapping rows 4/5. */ body.adv-home #wb_element_instance31_1 { display: block !important; width: 100% !important; max-width: var(--adv-container) !important; margin: clamp(2.5rem, 5vw, 4rem) auto clamp(2.5rem, 5vw, 4rem) !important; padding: 0 var(--adv-gutter) !important; box-sizing: border-box !important; } body.adv-home #wb_element_instance31_1 > .wb_content { position: relative; padding: clamp(2rem, 3.5vw, 2.75rem) 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-top: 1px solid var(--adv-border) !important; border-bottom: 1px solid var(--adv-border) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; } body.adv-home #wb_element_instance31_1 > .wb_content::before { display: none !important; } /* Stacked layout: eyebrow on top (centered), 3 stats full-width below */ body.adv-home #wb_element_instance32_1 > .wb_content { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "tagline" "stats" !important; gap: clamp(1.5rem, 2.8vw, 2rem) !important; align-items: start !important; text-align: left !important; position: relative; z-index: 1; width: 100% !important; max-width: none !important; } body.adv-home #wb_element_instance33_1 { grid-area: tagline !important; width: 100% !important; max-width: none !important; margin: 0 !important; text-align: left !important; } /* The big tagline pseudo-after is dropped — too heavy for inline band. Only the small eyebrow "Почему выбирают нас" is kept as section label. */ body.adv-home #wb_element_instance33_1::after { display: none !important; } /* The right-column CTA was relevant only when the block was a dark closing section. In the new inline trust-strip role, it is hidden (and the JS injection is disabled below in theme-2026.js). Kept defensive rule. */ body.adv-home .adv-stats-cta { display: none !important; } /* Kill WebBuilder's 200px cap on stat cells — force them to fill the grid column */ body.adv-home #wb_element_instance35_1, body.adv-home #wb_element_instance36_1, body.adv-home #wb_element_instance37_1 { max-width: none !important; width: auto !important; margin: 0 !important; } body.adv-home #wb_element_instance33_1 h4 { font-family: var(--adv-font-body) !important; font-weight: 600 !important; font-size: 0.8125rem !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--adv-ink-soft) !important; margin: 0 0 var(--adv-4) 0 !important; display: inline-flex; align-items: center; gap: 0.7rem; } body.adv-home #wb_element_instance33_1 h4::before { content: ""; display: block; width: 28px; height: 1px; background: var(--adv-accent); } body.adv-home #wb_element_instance33_1 h4 span { color: inherit !important; } /* Trust strip: eyebrow only fades/slides — stat digits stay visible so count-up from 0 is actually seen */ html.adv-trust-prep body.adv-home #wb_element_instance33_1 h4::before { transform: scaleX(0); transform-origin: left center; transition: transform 0.65s var(--adv-ease) 0.12s; } html.adv-trust-prep body.adv-home #wb_element_instance31_1.adv-trust-inview #wb_element_instance33_1 h4::before { transform: scaleX(1); } html.adv-trust-prep body.adv-home #wb_element_instance33_1 { opacity: 0; transform: translateY(16px); } html.adv-trust-prep body.adv-home #wb_element_instance31_1.adv-trust-inview #wb_element_instance33_1 { opacity: 1; transform: none; transition: opacity 0.88s var(--adv-ease), transform 0.88s var(--adv-ease); } /* Tagline injected below the eyebrow */ body.adv-home #wb_element_instance33_1::after { content: "Работаем с 2014 года. Собственный склад и транспорт — подбираем упаковку под вашу задачу."; display: block; font-family: var(--adv-font-display); font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 600; color: var(--adv-ink); letter-spacing: -0.022em; line-height: 1.18; max-width: 38rem; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; } /* Stats grid: editorial — numbers massive, split by hairline */ body.adv-home #wb_element_instance34_1 { grid-area: stats !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body.adv-home #wb_element_instance34_1 > .wb_content { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 0 !important; background: transparent !important; border: none !important; border-radius: 0; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } body.adv-home #wb_element_instance35_1, body.adv-home #wb_element_instance36_1, body.adv-home #wb_element_instance37_1 { padding: 0 clamp(1rem, 2.5vw, 2rem) !important; position: relative; text-align: left !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; } body.adv-home #wb_element_instance35_1:first-child { padding-left: 0 !important; } body.adv-home #wb_element_instance37_1 { padding-right: 0 !important; } body.adv-home #wb_element_instance35_1, body.adv-home #wb_element_instance36_1 { border-right: 1px solid var(--adv-border) !important; } body.adv-home #wb_element_instance35_1 :is(h2, p), body.adv-home #wb_element_instance36_1 :is(h2, p), body.adv-home #wb_element_instance37_1 :is(h2, p) { font-family: var(--adv-font-display) !important; font-variant-numeric: tabular-nums; font-size: clamp(3rem, 7vw, 5rem) !important; font-weight: 700 !important; line-height: 0.92 !important; letter-spacing: -0.055em !important; margin: 0 !important; text-align: left !important; } body.adv-home #wb_element_instance35_1 :is(h2, p):first-child, body.adv-home #wb_element_instance36_1 :is(h2, p):first-child, body.adv-home #wb_element_instance37_1 :is(h2, p):first-child, body.adv-home #wb_element_instance35_1 :is(h2, p):first-child strong, body.adv-home #wb_element_instance36_1 :is(h2, p):first-child strong, body.adv-home #wb_element_instance37_1 :is(h2, p):first-child strong, body.adv-home #wb_element_instance35_1 :is(h2, p):first-child span, body.adv-home #wb_element_instance36_1 :is(h2, p):first-child span { color: var(--adv-accent) !important; } body.adv-home #wb_element_instance35_1 :is(h2, p):last-child, body.adv-home #wb_element_instance36_1 :is(h2, p):last-child, body.adv-home #wb_element_instance37_1 :is(h2, p):last-child { font-family: var(--adv-font-body) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.16em !important; line-height: 1.3 !important; margin-top: var(--adv-3) !important; text-transform: uppercase !important; } body.adv-home #wb_element_instance35_1 :is(h2, p):last-child, body.adv-home #wb_element_instance36_1 :is(h2, p):last-child, body.adv-home #wb_element_instance37_1 :is(h2, p):last-child, body.adv-home #wb_element_instance35_1 :is(h2, p):last-child strong, body.adv-home #wb_element_instance36_1 :is(h2, p):last-child strong, body.adv-home #wb_element_instance37_1 :is(h2, p):last-child strong, body.adv-home #wb_element_instance35_1 :is(h2, p):last-child span, body.adv-home #wb_element_instance36_1 :is(h2, p):last-child span { color: var(--adv-ink-soft) !important; font-weight: 500 !important; } /* Third stat is now unified with #35/36 (big number + small label), styled via the shared rules above since JS rewrites its content to "12 / Лет опыта" (retoolThirdStat()). No extra specifics needed. */ /* Consultation CTA aside — right column, light editorial card */ body.adv-home .adv-stats-cta { grid-area: cta !important; display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.85rem); background: rgba(255, 255, 255, 0.55) !important; border: 1px solid var(--adv-border) !important; border-left: 3px solid var(--adv-accent) !important; border-radius: var(--adv-radius-inner); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-self: stretch; width: 100%; max-width: 26rem; margin-left: auto; } body.adv-home .adv-stats-cta__eyebrow { font-family: var(--adv-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--adv-ink-soft); margin: 0; display: inline-flex; align-items: center; gap: 0.55rem; } body.adv-home .adv-stats-cta__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--adv-accent); } body.adv-home .adv-stats-cta__phone { font-family: var(--adv-font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.028em; color: var(--adv-ink); text-decoration: none; font-variant-numeric: tabular-nums; line-height: 1.05; transition: color 0.2s ease; } body.adv-home .adv-stats-cta__phone:hover { color: var(--adv-accent); } body.adv-home .adv-stats-cta__hours { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--adv-font-body); font-size: var(--adv-text-meta); color: var(--adv-ink-soft); margin: 0; } body.adv-home .adv-stats-cta__hours svg { width: 16px; height: 16px; stroke: currentColor; } body.adv-home .adv-stats-cta__btn { margin-top: 0.45rem; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.4rem; background: var(--adv-ink); color: #fff; font-family: var(--adv-font-body); font-weight: 600; font-size: var(--adv-text-button); letter-spacing: -0.01em; border-radius: var(--adv-radius-pill); text-decoration: none; transition: background 0.25s ease, color 0.25s ease, transform 0.4s var(--adv-spring); } body.adv-home .adv-stats-cta__btn svg { width: 14px; height: 14px; stroke: currentColor; transition: transform 0.3s ease; } body.adv-home .adv-stats-cta__btn:hover { background: var(--adv-accent); color: #fff; transform: translateY(-2px); } body.adv-home .adv-stats-cta__btn:hover svg { transform: translate(2px, -2px); } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { body.adv-home #wb_element_instance6_1 > .wb_content { grid-template-columns: 1fr !important; gap: var(--adv-10) !important; } body.adv-home #wb_element_instance8_1 .wb-picture-wrapper { aspect-ratio: 16 / 10; max-height: none; } } @media (max-width: 900px) { body.adv-home #wb_main_1 #wb_element_instance11_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance58_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance39_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance45_1 > .wb_content, body.adv-home #wb_main_1 #wb_element_instance52_1 > .wb_content { grid-template-columns: 1fr !important; gap: var(--adv-6) !important; padding: var(--adv-8) 0 !important; direction: ltr !important; } body.adv-home #wb_main_1 #wb_element_instance11_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance58_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance39_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance45_1 .wb_element_picture .wb-picture-wrapper, body.adv-home #wb_main_1 #wb_element_instance52_1 .wb_element_picture .wb-picture-wrapper { min-height: 280px; aspect-ratio: 4 / 3; } body.adv-home #wb_element_instance34_1 > .wb_content { grid-template-columns: 1fr !important; gap: var(--adv-6) !important; padding: var(--adv-8) 0 0 !important; } body.adv-home #wb_element_instance35_1, body.adv-home #wb_element_instance36_1 { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 0 0 var(--adv-6) !important; } body.adv-home #wb_element_instance37_1 { padding: var(--adv-2) 0 0 !important; } body.adv-home [id^="wb_header_"] { position: relative; } body.adv-home .adv-section-cta { padding: var(--adv-8) !important; flex-direction: column; align-items: flex-start; } /* Trust strip on mobile: stats stack into single column, with dividers below each */ body.adv-home #wb_element_instance34_1 > .wb_content { grid-template-columns: 1fr !important; gap: 0 !important; } body.adv-home #wb_element_instance35_1, body.adv-home #wb_element_instance36_1, body.adv-home #wb_element_instance37_1 { padding: var(--adv-5) 0 !important; border-right: none !important; border-bottom: 1px solid var(--adv-border) !important; } body.adv-home #wb_element_instance35_1:first-child { padding-top: 0 !important; padding-left: 0 !important; } body.adv-home #wb_element_instance37_1 { padding-bottom: 0 !important; padding-right: 0 !important; border-bottom: none !important; } } @media (max-width: 768px) { body.site .wb_element_picture .wb-picture-wrapper:hover img[src^="/gallery_gen/"] { transform: none; } body.site .hmenu > li > a::after { display: none; } body.adv-home #wb_element_instance11780_0 { text-align: center !important; align-items: center !important; width: 100%; margin-top: var(--adv-2) !important; } body.adv-home #wb_element_instance1_1 > .wb_content { min-height: clamp(520px, 90vh, 760px); padding: clamp(3rem, 12vw, 5rem) var(--adv-gutter) clamp(2.5rem, 6vw, 4rem) !important; } } /* Safety: fully hide any legacy marquee markup served from stale cache */ .adv-marquee { display: none !important; } /* ============================================================================= CATEGORY GRID — custom SVG line-art illustrations Injected between marquee and existing intro. 8 tiles, 4x2 on desktop. ============================================================================= */ .adv-cats { padding: var(--adv-section-y) 0 var(--adv-12); } .adv-cats__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--adv-3); margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 42rem; } .adv-cats__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--adv-font-body); font-size: 1.2rem; /* 12px (était 7.5) */ font-weight: 600; /* +100 lisibilité */ letter-spacing: 0.16em; text-transform: uppercase; color: var(--adv-ink-soft); margin: 0; } .adv-cats__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--adv-accent); } .adv-cats__title { font-family: var(--adv-font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--adv-ink); margin: 0; text-wrap: balance; } .adv-cats__lead { font-family: var(--adv-font-body); font-size: clamp(1.4rem, 1.6vw, 1.6rem); /* 14-16px (était 10.6) */ line-height: 1.6; color: var(--adv-ink-muted); margin: 0; max-width: 36rem; } .adv-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1vw, 1rem); position: relative; } .adv-cat { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 2.5vw, 2.25rem); min-height: 240px; background: var(--adv-paper-elevated); border: 1px solid var(--adv-border); border-radius: var(--adv-radius-sm); text-decoration: none; color: var(--adv-ink); overflow: hidden; isolation: isolate; transition: transform 0.5s var(--adv-ease), box-shadow 0.5s var(--adv-ease), border-color 0.4s ease, background 0.4s ease; will-change: transform; } .adv-cat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(184, 49, 28, 0.08) 0%, transparent 55%); opacity: 0; transition: opacity 0.5s ease; z-index: 0; pointer-events: none; } .adv-cat > * { position: relative; z-index: 1; } .adv-cat:hover { transform: translateY(-4px); border-color: var(--adv-ink); box-shadow: var(--adv-shadow); background: var(--adv-paper); } .adv-cat:hover::before { opacity: 1; } .adv-cat__icon { display: flex; align-items: center; justify-content: flex-start; width: clamp(56px, 6vw, 72px); height: clamp(56px, 6vw, 72px); color: var(--adv-ink); transition: color 0.4s ease, transform 0.6s var(--adv-spring); } .adv-cat:hover .adv-cat__icon { color: var(--adv-accent); transform: translateY(-4px) rotate(-3deg); } .adv-cat__icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .adv-cat__body { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; } .adv-cat__title { font-family: var(--adv-font-display); font-weight: 600; font-size: clamp(1.5rem, 1.8vw, 1.75rem); /* 15-17.5px (était 10.6) */ line-height: 1.15; letter-spacing: -0.02em; color: var(--adv-ink); margin: 0; } .adv-cat__desc { font-family: var(--adv-font-body); font-size: var(--adv-text-body); line-height: var(--adv-text-body-lh); color: var(--adv-ink-muted); margin: 0; } .adv-cat__arrow { position: absolute; top: clamp(1.5rem, 2.5vw, 2.25rem); right: clamp(1.5rem, 2.5vw, 2.25rem); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--adv-ink-faint); transition: color 0.3s ease, transform 0.5s var(--adv-spring); } .adv-cat:hover .adv-cat__arrow { color: var(--adv-accent); transform: translate(4px, -4px) rotate(0); } .adv-cat__arrow svg { width: 16px; height: 16px; } @media (max-width: 1024px) { .adv-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .adv-cats__grid { grid-template-columns: 1fr; } .adv-cat { min-height: 180px; } } /* ============================================================================= CONTACTS PAGE — scoped via #wb_main_4 Editorial split: left = big title + direct info; right = form. Map full-width below with custom framing. ============================================================================= */ body.site #wb_main_4 > .wb_content { /* 4.css sets padding: 0 — restore horizontal gutter like other adv-2026 mains */ padding-bottom: var(--adv-section-y); /* Slightly wider min than --adv-gutter on narrow viewports + notches */ padding-left: max(clamp(1.375rem, 5vw, 2.75rem), env(safe-area-inset-left, 0px)) !important; padding-right: max(clamp(1.375rem, 5vw, 2.75rem), env(safe-area-inset-right, 0px)) !important; box-sizing: border-box; } body.site #wb_main_4 #wb_element_instance1_4 > .wb_content, body.site #wb_main_4 #wb_element_instance2_4 > .wb_content { padding: 0 !important; background: transparent !important; } /* Contacts: 4.css uses align-items:center on this column — avoid side-effects on nested grid/flex. */ body.adv-contacts #wb_main_4 #wb_element_instance2_4 > .wb_content { align-items: stretch !important; } /* WebBuilder keeps an empty #wb_element_instance3_4 slot; title + lead moved into col1 (#wb_element_instance5_4). */ body.adv-contacts #wb_main_4 #wb_element_instance3_4.adv-contact-intro-sentinel { display: none !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; height: 0 !important; flex: 0 0 0 !important; overflow: hidden !important; visibility: hidden !important; border: 0 !important; } /* Title + intro: same vertical start as the form card (right column). */ body.adv-contacts #wb_main_4 #wb_element_instance5_4 .adv-contact-intro { max-width: 46rem; margin: 0 0 var(--adv-8) 0; padding-top: var(--adv-6); } body.adv-contacts #wb_main_4 #wb_element_instance5_4 .adv-contact-intro h1.wb-stl-heading2, body.adv-contacts #wb_main_4 #wb_element_instance5_4 .adv-contact-intro h2.wb-stl-heading2 { font-family: var(--adv-font-display) !important; font-weight: 700 !important; font-size: clamp(2.6rem, 4vw, 3.6rem) !important; /* 26-36px (était 13.5-18.5) */ line-height: 1.1 !important; letter-spacing: -0.025em !important; color: var(--adv-ink); margin: 0 0 var(--adv-4) !important; } body.adv-contacts #wb_main_4 #wb_element_instance5_4 .adv-contact-intro .wb-stl-normal { font-size: clamp(1.4rem, 1.6vw, 1.6rem) !important; /* 14-16px (était 11.3) */ line-height: var(--adv-text-body-lh) !important; max-width: 46rem; color: var(--adv-ink-muted); margin: 0 !important; } /* 2-column: info | form * 4.css sets align-content: space-around on this row — with a tall left column the grid * row can sit vertically centered, so the form looks “dropped”. Pin to start. */ body.site #wb_main_4 #wb_element_instance4_4 > .wb_content { display: grid !important; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start !important; align-content: start !important; justify-content: start !important; padding: var(--adv-10) 0 !important; background: transparent !important; } body.site #wb_main_4 #wb_element_instance5_4, body.site #wb_main_4 #wb_element_instance6_4 { align-self: start !important; justify-self: stretch; } /* LEFT: contact info column — grid label / value, one reading size for all values */ body.site #wb_main_4 #wb_element_instance5_4 { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details { display: flex; flex-direction: column; gap: var(--adv-5); max-width: 36rem; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__row { display: grid; grid-template-columns: minmax(4.25rem, 5.25rem) minmax(0, 1fr); column-gap: var(--adv-5); row-gap: var(--adv-2); align-items: start; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__label { font-family: var(--adv-font-body) !important; font-size: 1.15rem !important; /* 11.5px label uppercase (était 6.9) */ font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--adv-ink-soft) !important; line-height: 1.3 !important; padding-top: 0.28em; margin: 0 !important; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__value { font-family: var(--adv-font-body) !important; font-size: 1.5rem !important; /* 15px (était ~10) */ line-height: var(--adv-text-body-lh) !important; color: var(--adv-ink) !important; min-width: 0; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__text, body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__phones { margin: 0 !important; font-size: inherit !important; font-weight: 400 !important; color: inherit !important; max-width: none !important; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__phones .adv-phone-line__link { font-weight: 500 !important; font-size: inherit !important; font-family: inherit !important; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details a.adv-contact-details__mailto, body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details .adv-phone-line__link { color: var(--adv-ink); text-decoration: none; text-transform: none; font-variant-numeric: tabular-nums; background-image: linear-gradient(0deg, var(--adv-accent), var(--adv-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 0.35s var(--adv-ease), color 0.25s ease; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details a.adv-contact-details__mailto:hover, body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details .adv-phone-line__link:hover { color: var(--adv-accent); background-size: 100% 100%; background-image: linear-gradient(0deg, rgba(184, 49, 28, 0.08), rgba(184, 49, 28, 0.08)); } @media (max-width: 420px) { body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__row { grid-template-columns: 1fr; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__label { padding-top: 0; } body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-details__row + .adv-contact-details__row .adv-contact-details__label { margin-top: var(--adv-2) !important; } } /* RIGHT: form card * 4.css sets #wb_element_instance6_4 { height: 210px } — clips fields + textarea. * Flex + order places title + hint above the form (::after was rendering after ). */ body.site #wb_main_4 #wb_element_instance6_4 { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; height: auto !important; min-height: 0 !important; overflow: visible !important; padding: clamp(2rem, 3vw, 2.75rem); background: var(--adv-paper-elevated); border: 1px solid var(--adv-border); border-radius: var(--adv-radius); box-shadow: var(--adv-shadow-sm); max-width: none !important; width: 100% !important; margin: 0 !important; } /* Same top inset as .adv-contact-intro so headline and card edge line up. */ body.adv-contacts #wb_main_4 #wb_element_instance6_4 { padding: var(--adv-6) clamp(2rem, 3vw, 2.75rem) clamp(2rem, 3vw, 2.75rem); } body.site #wb_main_4 #wb_element_instance6_4::before { content: "Быстрая заявка"; order: 1; flex-shrink: 0; display: block; font-family: var(--adv-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--adv-ink); margin-bottom: 0.35rem; } body.site #wb_main_4 #wb_element_instance6_4::after { content: "Напишите нам — ответим в рабочие часы."; order: 2; flex-shrink: 0; display: block; font-family: var(--adv-font-body); font-size: 0.875rem; color: var(--adv-ink-soft); margin-bottom: 1.25rem; } body.site #wb_main_4 #wb_element_instance6_4 .wb_form { order: 3; flex: 1 1 auto; min-width: 0; width: 100%; } body.site #wb_main_4 .wb_form table { width: 100%; border-collapse: collapse; } body.site #wb_main_4 .wb_form tr { display: flex; flex-direction: column; margin-bottom: 1rem; } body.site #wb_main_4 .wb_form tr.form-footer { margin-top: 0.5rem; } body.site #wb_main_4 .wb_form th { font-family: var(--adv-font-body) !important; font-weight: 500 !important; font-size: 1.2rem !important; /* 12px label form (était 7.5) */ letter-spacing: 0.08em !important; text-transform: uppercase; color: var(--adv-ink-soft) !important; text-align: left !important; padding: 0 0 0.5rem !important; background: transparent !important; border: none !important; } body.site #wb_main_4 .wb_form td { padding: 0 !important; background: transparent !important; border: none !important; } body.site #wb_main_4 .wb_form .form-control, body.site #wb_main_4 .wb_form .form-field { width: 100% !important; font-family: var(--adv-font-body) !important; font-size: var(--adv-text-meta) !important; padding: 0.85rem 1rem !important; background: var(--adv-paper) !important; color: var(--adv-ink) !important; border: 1px solid var(--adv-border-strong) !important; border-radius: var(--adv-radius-inner) !important; box-shadow: none !important; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; outline: none !important; } body.site #wb_main_4 .wb_form .form-area-field { min-height: 120px !important; resize: vertical; font-family: var(--adv-font-body) !important; } body.site #wb_main_4 .wb_form .form-control:focus, body.site #wb_main_4 .wb_form .form-field:focus { border-color: var(--adv-ink) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(20, 23, 28, 0.08) !important; } body.site #wb_main_4 .wb_form tr.form-footer td { display: flex !important; justify-content: flex-start; height: auto !important; min-height: 0 !important; } /* 4.css: tr.form-footer > td { height: 20px } — crushes the submit row */ body.site #wb_main_4 #wb_element_instance6_4 form tr.form-footer > td { height: auto !important; } body.site #wb_main_4 .wb_form .btn, body.site #wb_main_4 .wb_form button[type="submit"] { display: inline-flex !important; align-items: center; justify-content: center; width: auto; max-width: 100%; font-family: var(--adv-font-body) !important; font-weight: 600 !important; font-size: 1.5rem !important; /* 15px — était 11.3 */ letter-spacing: -0.01em; color: #fff !important; background: var(--adv-accent) !important; border: 1px solid var(--adv-accent) !important; border-radius: var(--adv-radius-pill) !important; min-height: 44px !important; min-width: 11rem; padding: 0.65rem 1.75rem !important; cursor: pointer; box-shadow: 0 1px 2px rgba(20, 23, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; transition: transform 0.3s var(--adv-spring), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } body.site #wb_main_4 .wb_form .btn:hover, body.site #wb_main_4 .wb_form button[type="submit"]:hover { background: var(--adv-accent-hover) !important; border-color: var(--adv-accent-hover) !important; transform: translateY(-2px); box-shadow: var(--adv-shadow-accent) !important; } body.site #wb_main_4 .wb_form .btn:active, body.site #wb_main_4 .wb_form button[type="submit"]:active { transform: translateY(0) scale(0.98); } /* Map — full-bleed, bordered frame */ body.site #wb_main_4 #wb_element_instance7_4 > .wb_content { padding: var(--adv-10) 0 !important; background: transparent !important; } body.site #wb_main_4 #wb_element_instance8_4 { width: 100% !important; height: clamp(360px, 55vh, 560px) !important; border-radius: var(--adv-radius) !important; overflow: hidden !important; border: 1px solid var(--adv-border); box-shadow: var(--adv-shadow-sm); position: relative; } body.site #wb_main_4 #wb_element_instance8_4::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--adv-radius); box-shadow: inset 0 0 0 1px rgba(20, 23, 28, 0.06); z-index: 2; } /* Direct-call CTAs (injected via JS) — even grid, no orphaned single button row */ .adv-contact-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--adv-3); margin-top: var(--adv-8); padding-top: var(--adv-6); border-top: 1px solid var(--adv-border); } @media (min-width: 720px) { .adv-contact-cta { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .adv-contact-cta__btn { display: inline-flex; align-items: center; gap: 0.6rem; width: 100%; min-width: 0; justify-content: flex-start; padding: 0.7rem 1.1rem 0.7rem 0.85rem; background: var(--adv-paper-elevated); border: 1px solid var(--adv-border-strong); border-radius: var(--adv-radius-pill); color: var(--adv-ink); text-decoration: none !important; font-family: var(--adv-font-body); font-weight: 500; font-size: var(--adv-text-meta); letter-spacing: -0.005em; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--adv-spring); background-image: none !important; } .adv-contact-cta__btn:hover { background: var(--adv-accent) !important; border-color: var(--adv-accent) !important; color: #fff !important; transform: translateY(-1px); } .adv-contact-cta__btn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; } .adv-contact-cta__btn:hover svg { opacity: 1; } /* Inline SVG default size is ~300×150px in browsers — cap the hours icon */ body.site #wb_main_4 #wb_element_instance5_4 .adv-contact-hours svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; display: block; } @media (max-width: 900px) { body.site #wb_main_4 #wb_element_instance4_4 > .wb_content { grid-template-columns: 1fr !important; gap: var(--adv-8); align-content: start !important; } } /* ---------- Motion reduced ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.adv-trust-prep body.adv-home #wb_element_instance33_1 { opacity: 1 !important; transform: none !important; transition: none !important; } html.adv-trust-prep body.adv-home #wb_element_instance33_1 h4::before { transform: scaleX(1) !important; transition: none !important; } .adv-reveal, .adv-reveal-blog { opacity: 1 !important; transform: none !important; transition: none !important; } body.site .wb_element_picture .wb-picture-wrapper:hover img[src^="/gallery_gen/"] { transform: none; } body.site a.wb_button:hover { transform: none; } body.site a.wb_button::before { transition: none; } body.site a.wb_button.adv-btn-secondary:hover { transform: none; } body.site .wb-blog-item:hover { transform: none; } body.site .hmenu > li > a::after { transition: none; } body.adv-home .adv-hero-eyebrow::before { animation: none; } .adv-cat:hover { transform: none; } .adv-cat:hover .adv-cat__icon { transform: none; } .adv-cat:hover .adv-cat__arrow { transform: none; } } html.adv-reduced-motion .adv-reveal, html.adv-reduced-motion .adv-reveal-blog { opacity: 1 !important; transform: none !important; transition: none !important; } html.adv-reduced-motion.adv-trust-prep body.adv-home #wb_element_instance33_1 { opacity: 1 !important; transform: none !important; transition: none !important; } html.adv-reduced-motion.adv-trust-prep body.adv-home #wb_element_instance33_1 h4::before { transform: scaleX(1) !important; transition: none !important; } /* ============================================================================ * TYPOGRAPHY SCALE v16 — site-wide body (uses --adv-text-body in :root) * ============================================================================ */ /* --- Body paragraph mass (main reading surface) — exclut hero + footer + cards qui ont leur propre échelle --- */ body.site .wb-stl-normal:not(.adv-hero-lead):not(.adv-hero-eyebrow):not(.adv-footer__subline):not(.adv-footer__tagline):not(.adv-footer__copy):not(.adv-prod-card__lead):not(.adv-prod-grid__lead):not(.adv-cats__lead):not(.adv-cat__desc):not(.st-hero-eyebrow):not(.st-hero-lead):not(.st-results-count):not(.pp-cat):not(.pp-lead):not(.cfg-lead):not(.cmp-lead):not(.cmp-empty__text):not(.adv-payment-page__deck):not(.adv-payment-band__label), body.site p.wb-stl-normal:not(.adv-hero-lead):not(.adv-hero-eyebrow):not(.adv-footer__subline):not(.adv-footer__tagline):not(.adv-footer__copy):not(.adv-prod-card__lead):not(.adv-prod-grid__lead):not(.adv-cats__lead):not(.adv-cat__desc):not(.st-hero-eyebrow):not(.st-hero-lead):not(.st-results-count):not(.pp-cat):not(.pp-lead):not(.cfg-lead):not(.cmp-lead):not(.cmp-empty__text):not(.adv-payment-page__deck):not(.adv-payment-band__label), body.site p:not(.wb-stl-custom16):not(.wb-stl-custom9):not(.wb-stl-custom10):not(.adv-hero-eyebrow):not(.adv-hero-lead):not(.adv-footer__subline):not(.adv-footer__tagline):not(.adv-footer__copy):not(.adv-prod-card__lead):not(.adv-prod-grid__lead):not(.adv-cats__lead):not(.adv-cat__desc):not(.st-hero-eyebrow):not(.st-hero-lead):not(.st-results-count):not(.pp-cat):not(.pp-lead):not(.cfg-lead):not(.cmp-lead):not(.cmp-empty__text):not(.adv-payment-page__deck):not(.adv-payment-band__label) { font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; } /* Keep narrow UI/labels at their specialised sizes */ body.site p.wb-stl-custom9, body.site p.wb-stl-custom10, body.site p.wb-stl-custom16, body.site p.wb-stl-custom24 { line-height: 1.5 !important; } /* Editorial intro/lead paragraphs in hero + page tops — same scale */ body.adv-home #wb_element_instance8_1 p, body.adv-home #wb_element_instance8_1 .wb-stl-normal { font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; } /* Category / feature card body copy */ body.site .adv-cat__desc, body.site .adv-cat__title + p, body.site .adv-feature p { font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; } /* --- Small labels / eyebrows — lift below-threshold 11px to 12px --- */ body.site h4.wb-stl-custom9, body.site .wb-stl-custom9 { font-size: 0.8125rem !important; /* 12 → 13 (eyebrow presence) */ letter-spacing: 0.14em !important; } /* --- Navigation (mobile overlay) — align with meta scale --- */ body.site .wb-menu-mobile.collapse-expanded .hmenu > li > a, body.site .wb-menu.collapse-expanded .hmenu > li > a { font-size: var(--adv-text-meta) !important; } /* --- Footer body mass — bumpé pour lisibilité (audit 2026-05-09) --- */ .adv-footer__tagline, .adv-footer__links a, .adv-footer__contact li { font-size: 1.4rem; /* 14px (était ~11) */ line-height: var(--adv-text-body-lh); } .adv-footer__eyebrow, .adv-footer__col-title { font-size: 1.2rem; /* 12px label uppercase (était 7.5) */ } .adv-footer__copy { font-size: 1.3rem; /* 13px copyright (était 11.3) */ } .adv-footer__subline { font-size: 1.4rem; /* 14px (était 11.3) */ } /* --- Blog list body copy --- */ body.site .wb-blog-item .wb-stl-normal, body.site .wb-blog-item p { font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; } /* --- Responsive: keep the same reading scale on narrow screens --- */ @media (max-width: 639px) { body.site .wb-stl-normal:not(.adv-hero-lead):not(.adv-hero-eyebrow):not(.adv-footer__subline):not(.adv-footer__tagline):not(.adv-footer__copy):not(.adv-prod-card__lead):not(.adv-prod-grid__lead):not(.adv-cats__lead):not(.adv-cat__desc):not(.st-hero-eyebrow):not(.st-hero-lead):not(.st-results-count):not(.pp-cat):not(.pp-lead):not(.cfg-lead):not(.cmp-lead):not(.cmp-empty__text):not(.adv-payment-page__deck):not(.adv-payment-band__label), body.site p.wb-stl-normal:not(.adv-hero-lead):not(.adv-hero-eyebrow):not(.adv-footer__subline):not(.adv-footer__tagline):not(.adv-footer__copy):not(.adv-prod-card__lead):not(.adv-prod-grid__lead):not(.adv-cats__lead):not(.adv-cat__desc):not(.st-hero-eyebrow):not(.st-hero-lead):not(.st-results-count):not(.pp-cat):not(.pp-lead):not(.cfg-lead):not(.cmp-lead):not(.cmp-empty__text):not(.adv-payment-page__deck):not(.adv-payment-band__label), body.site p:not(.wb-stl-custom16):not(.wb-stl-custom9):not(.wb-stl-custom10):not(.adv-hero-eyebrow):not(.adv-hero-lead):not(.adv-footer__subline):not(.adv-footer__tagline):not(.adv-footer__copy):not(.adv-prod-card__lead):not(.adv-prod-grid__lead):not(.adv-cats__lead):not(.adv-cat__desc):not(.st-hero-eyebrow):not(.st-hero-lead):not(.st-results-count):not(.pp-cat):not(.pp-lead):not(.cfg-lead):not(.cmp-lead):not(.cmp-empty__text):not(.adv-payment-page__deck):not(.adv-payment-band__label) { font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; } } /* ============================================================================= * SUBPAGE HERO v17 — compact dark banner injected on non-home pages * Matches home hero typography (eyebrow pill, display H1, lead, CTAs, proof * strip) in a shorter full-bleed band so sub-pages feel part of the same * editorial system as the landing page. * Injection: see `injectSubpageHero()` in js/theme-2026.js. * ============================================================================= */ /* Subpage hero — light editorial band. * Warm paper with a subtle top-right accent wash and a whisper of grain, * framed by a thin accent rule on the left. No dark slab: the hero melts * into the content below on the same paper tone. */ body.adv-subpage .adv-page-hero { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; padding-top: clamp(3.5rem, 7.5vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); padding-left: max(clamp(1.375rem, 5vw, 2.75rem), env(safe-area-inset-left, 0px)); padding-right: max(clamp(1.375rem, 5vw, 2.75rem), env(safe-area-inset-right, 0px)); background: radial-gradient(ellipse 95% 75% at 92% -10%, rgba(184, 49, 28, 0.10) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(120, 85, 55, 0.06) 0%, transparent 60%), linear-gradient(180deg, #fbf9f4 0%, #f6f2ea 55%, var(--adv-paper) 100%); color: var(--adv-ink); overflow: hidden; isolation: isolate; margin-bottom: var(--adv-10); border-bottom: 1px solid var(--adv-border); } /* Top hairline — anchors the hero under the sticky header without a harsh edge */ body.adv-subpage .adv-page-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, rgba(184, 49, 28, 0) 0%, rgba(184, 49, 28, 0.35) 18%, rgba(184, 49, 28, 0.35) 82%, rgba(184, 49, 28, 0) 100%); pointer-events: none; } /* Soft accent ribbon fading down the right edge — editorial signature */ body.adv-subpage .adv-page-hero::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: clamp(140px, 18vw, 260px); z-index: 0; background: radial-gradient(ellipse 100% 90% at 100% 0%, rgba(184, 49, 28, 0.18) 0%, transparent 65%), linear-gradient(180deg, rgba(184, 49, 28, 0.05) 0%, transparent 60%); pointer-events: none; opacity: 0.9; } body.adv-subpage .adv-page-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--adv-container); margin: 0 auto; padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 2px solid var(--adv-accent); } /* Stack mirrors landing hero but with light treatment */ body.adv-subpage .adv-hero-stack { max-width: 58rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--adv-5); } body.adv-subpage .adv-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--adv-font-body) !important; font-size: 1.3rem !important; /* 13px (était 8.1) */ font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--adv-accent) !important; margin: 0 !important; padding: 0 !important; background: transparent; border: none; border-radius: 0; } body.adv-subpage .adv-hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--adv-accent); border-radius: 1px; animation: none; box-shadow: none; } body.adv-subpage .adv-hero-h1 { font-family: var(--adv-font-display) !important; font-weight: 700 !important; font-size: clamp(2.125rem, 5vw, 4rem) !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; color: var(--adv-ink) !important; margin: 0 !important; text-wrap: balance; } body.adv-subpage .adv-hero-lead { color: var(--adv-ink-muted) !important; font-size: clamp(1.4rem, 1.6vw, 1.6rem) !important; /* 14-16px (était 11.9-14.4) */ line-height: 1.55 !important; margin: 0 !important; max-width: 46rem; font-weight: 400; } body.adv-subpage .adv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adv-3); margin-top: var(--adv-4); } /* Breadcrumb — small inline trail above H1 when we have one */ body.adv-subpage .adv-hero-crumbs { font-family: var(--adv-font-body); font-size: var(--adv-text-meta); letter-spacing: 0.02em; color: var(--adv-ink-soft); margin: 0 0 calc(-1 * var(--adv-2)) 0; } body.adv-subpage .adv-hero-crumbs a { color: var(--adv-ink-muted); text-decoration: none; border-bottom: 1px solid var(--adv-border); transition: color .2s ease, border-color .2s ease; } body.adv-subpage .adv-hero-crumbs a:hover { color: var(--adv-accent); border-color: var(--adv-accent); } body.adv-subpage .adv-hero-crumbs .sep { margin: 0 .5rem; opacity: .55; } /* CTAs on light hero — the base theme .wb_button styles already produce * the exact look we want (red primary, ghost outline secondary), so we * deliberately do NOT override anything here. */ /* Reduced motion */ html.adv-reduced-motion body.adv-subpage .adv-hero-eyebrow::before { animation: none; } @media (max-width: 900px) { body.adv-home .adv-proof-strip, body.adv-subpage .adv-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--adv-4); } body.adv-home .adv-proof-strip li:nth-child(3), body.adv-subpage .adv-proof-strip li:nth-child(3) { grid-column: 1 / -1; max-width: 100%; } } @media (max-width: 639px) { body.adv-subpage .adv-page-hero { padding-top: clamp(2.25rem, 8vw, 3.5rem); padding-bottom: clamp(2rem, 6vw, 3rem); padding-left: max(clamp(1.25rem, 5.5vw, 2.5rem), env(safe-area-inset-left, 0px)); padding-right: max(clamp(1.25rem, 5.5vw, 2.5rem), env(safe-area-inset-right, 0px)); margin-bottom: var(--adv-8); } } /* ============================================================= * UNIFORMISATION 2026 — cross-page polish * Harmonises every secondary page (equipment, payment, contacts, * catalog categories, blog articles) with the landing design * system. Targets generic WebBuilder artefacts rather than * per-instance IDs so that fixes propagate automatically. * ============================================================= */ /* Legacy WebBuilder article/category HTML: floated thumbs — stack on narrow screens (no JS body class required) */ @media (max-width: 639px) { body.site [id^="wb_main_"] .wb-blog img[style*="float"] { float: none !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } body.site [id^="wb_main_"] h2 img[style*="float"] { float: none !important; display: block !important; max-width: 100% !important; height: auto !important; margin: var(--adv-4) auto !important; } } /* ---------- Form honeypot (invisible to humans, visible to bots) ---------- */ body.site form.wb_form textarea.hpc { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ---------- Equipment Shape dividers — fallback when JS regrouping fails ---------- */ body.site #wb_main_6 .wb_element_shape { height: 1px !important; margin: var(--adv-8) 0 !important; } body.site #wb_main_6 .wb_element_shape > .wb_shp { background: var(--adv-border) !important; opacity: 0.8 !important; border: 0 !important; height: 1px !important; border-radius: 0 !important; } /* ============================================================= * Equipment page — catalog-style card grid. * The JS groups each model (image column + spec column + features * column + optional YouTube) into an
* containing a thumbnail + body. Styling mirrors the catalog grid. * ============================================================= */ body.adv-equipment #wb_main_6 > .wb_content { padding: 0 var(--adv-gutter) !important; background: transparent !important; } body.adv-equipment .adv-equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--adv-6); max-width: 1280px; margin: 0 auto; } @media (max-width: 900px) { body.adv-equipment .adv-equipment-grid { grid-template-columns: 1fr; gap: var(--adv-5); } } body.adv-equipment .adv-equipment-card { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--adv-paper-elevated) !important; border: 1px solid var(--adv-border); border-radius: 14px; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(20, 23, 28, 0.02); transition: transform 0.45s var(--adv-ease), box-shadow 0.45s var(--adv-ease), border-color 0.3s ease; } body.adv-equipment .adv-equipment-card:hover { transform: translateY(-4px); border-color: var(--adv-border-strong); box-shadow: 0 2px 4px rgba(20, 23, 28, 0.04), 0 18px 40px -14px rgba(20, 23, 28, 0.18); } /* Thumbnail — show the full product (contain, not cover) on a warm paper * background with a subtle floor gradient, so the whole machine is visible. */ body.adv-equipment .adv-equipment-card__thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; background-color: #fbf9f4; background-size: contain; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid var(--adv-border); padding: var(--adv-4); box-sizing: border-box; transform-origin: center center; transition: transform 0.7s var(--adv-ease); } /* Soft floor gradient sits below the product via a pseudo-element so it * does not conflict with the inline background-image url() set by JS. */ body.adv-equipment .adv-equipment-card__thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 60% at 50% 100%, rgba(20, 23, 28, 0.06) 0%, transparent 65% ); pointer-events: none; z-index: 0; } body.adv-equipment .adv-equipment-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--adv-3); padding: var(--adv-6) var(--adv-6) var(--adv-6); } /* Collapsed "more" section (functional features + video) */ body.adv-equipment .adv-equipment-card__more[hidden] { display: none !important; } body.adv-equipment .adv-equipment-card__more { display: flex; flex-direction: column; gap: var(--adv-3); border-top: 1px solid var(--adv-border); margin-top: var(--adv-2); padding-top: var(--adv-4); } /* Toggle button */ body.adv-equipment .adv-equipment-card__toggle { appearance: none; -webkit-appearance: none; border: 1px solid var(--adv-border); background: transparent; color: var(--adv-ink) !important; font-family: var(--adv-font-body) !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase; padding: 0.75rem 1rem; margin-top: var(--adv-3); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; align-self: flex-start; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; } body.adv-equipment .adv-equipment-card__toggle:hover, body.adv-equipment .adv-equipment-card__toggle:focus-visible { border-color: var(--adv-accent); color: var(--adv-accent) !important; outline: none; } body.adv-equipment .adv-equipment-card__toggle-icon { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; border-radius: 999px; background: var(--adv-accent); color: #fff; transition: transform 0.25s ease; } body.adv-equipment .adv-equipment-card__toggle[aria-expanded="true"] .adv-equipment-card__toggle-icon { transform: rotate(180deg); } /* Neutralise every legacy width/height/flex/bg rule from /css/6.css on the columns we moved into the card, so they behave as natural block flow. */ body.adv-equipment .adv-equipment-card__body .wb_element[data-plugin="LayoutElement"] { width: 100% !important; height: auto !important; max-width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; padding: 0 !important; background: transparent !important; } body.adv-equipment .adv-equipment-card__body .wb_element[data-plugin="LayoutElement"] > .wb_content { padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; display: block !important; } body.adv-equipment .adv-equipment-card__body .wb_element[data-plugin="TextArea"] { width: 100% !important; height: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; background: transparent !important; line-height: normal; } /* Typography inside the card body */ body.adv-equipment .adv-equipment-card__body h3 { font-family: var(--adv-font-display) !important; font-size: clamp(1.0625rem, 1.2vw, 1.25rem) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; color: var(--adv-ink) !important; margin: 0 0 var(--adv-1) !important; text-wrap: balance; transition: color 0.2s ease; } body.adv-equipment .adv-equipment-card:hover .adv-equipment-card__body h3 { color: var(--adv-accent) !important; } body.adv-equipment .adv-equipment-card__body p, body.adv-equipment .adv-equipment-card__body li { font-family: var(--adv-font-body) !important; font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; color: var(--adv-ink-muted) !important; margin: 0 0 var(--adv-2) !important; text-align: left !important; } body.adv-equipment .adv-equipment-card__body p strong { display: block; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--adv-ink) !important; margin-top: var(--adv-4); margin-bottom: var(--adv-2); } body.adv-equipment .adv-equipment-card__body ul, body.adv-equipment .adv-equipment-card__body ol { padding-left: 1.25rem; margin: 0 0 var(--adv-3) !important; } body.adv-equipment .adv-equipment-card__body li { margin-bottom: 0.25rem !important; } body.adv-equipment .adv-equipment-card__body li::marker { color: var(--adv-accent); } /* YouTube embed nested inside card */ body.adv-equipment .adv-equipment-card__body .wb_element[data-plugin="Youtube"] { margin: var(--adv-4) 0 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border-radius: 10px !important; overflow: hidden; border: 1px solid var(--adv-border); box-shadow: none; position: relative; } /* Reveal animation — staggered like catalog cards */ html:not(.adv-reduced-motion) body.adv-equipment .adv-equipment-card { opacity: 0; transform: translateY(28px); animation: advEquipReveal 0.9s var(--adv-ease) both; } html:not(.adv-reduced-motion) body.adv-equipment .adv-equipment-card:nth-child(1) { animation-delay: 0ms; } html:not(.adv-reduced-motion) body.adv-equipment .adv-equipment-card:nth-child(2) { animation-delay: 80ms; } html:not(.adv-reduced-motion) body.adv-equipment .adv-equipment-card:nth-child(3) { animation-delay: 160ms; } html:not(.adv-reduced-motion) body.adv-equipment .adv-equipment-card:nth-child(4) { animation-delay: 240ms; } html:not(.adv-reduced-motion) body.adv-equipment .adv-equipment-card:nth-child(n+5) { animation-delay: 320ms; } @keyframes advEquipReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* ---------- YouTube embeds — proper aspect ratio, card-like container ---------- */ body.site .wb_element[data-plugin="Youtube"] { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; max-width: 100%; margin: var(--adv-6) 0; border-radius: var(--adv-radius) !important; overflow: hidden; background: var(--adv-ink); box-shadow: var(--adv-shadow-sm); border: 1px solid var(--adv-border); } body.site .wb_element[data-plugin="Youtube"] iframe.youtube-player { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; display: block; } /* ---------- Facebook comments — hide the social-plugin clutter ---------- */ body.site .fb-comments, body.site #fb-root, body.site .wb-blog > div:has(> .fb-comments) { display: none !important; } /* ---------- Article body (catalog category pages + blog articles) ---------- * WebBuilder wraps the article in `.wb-blog > div[style*="overflow"]`. * Centre the prose, enforce a comfortable measure, normalise images. * ---------------------------------------------------------------- */ body.adv-catalog-cat #wb_main_3 .wb-blog, body.adv-blog-article #wb_main_7 .wb-blog, body.site #wb_main_3 .wb-blog, body.site #wb_main_7 .wb-blog { max-width: 76rem; /* 760px — colonne article centrée, pas de vide à droite */ margin-inline: auto; padding-inline: var(--adv-gutter, 1.5rem); } /* Paragraphes catalogue détail / blog article : pas de max-width interne */ body.site #wb_main_3 .wb-blog p, body.site #wb_main_7 .wb-blog p { max-width: none !important; } /* Premier paragraphe lead (plus grand, accroche la lecture) */ body.site #wb_main_3 .wb-blog > div[style*="overflow"] > p:first-of-type, body.site #wb_main_7 .wb-blog > div[style*="overflow"] > p:first-of-type { font-size: clamp(1.7rem, 2vw, 1.9rem) !important; /* 17-19px lead */ color: var(--adv-ink) !important; font-weight: 500; line-height: 1.5 !important; margin-bottom: var(--adv-5) !important; } /* Si le premier

contient seulement une image (pattern catalogue) → pas de styling lead */ body.site #wb_main_3 .wb-blog > div[style*="overflow"] > p:first-of-type:has(> img:only-child), body.site #wb_main_7 .wb-blog > div[style*="overflow"] > p:first-of-type:has(> img:only-child) { font-size: inherit !important; font-weight: inherit !important; } /* Cache les

vides Webasyst (artefacts éditeur) */ body.site #wb_main_3 .wb-blog h2:empty, body.site #wb_main_7 .wb-blog h2:empty, body.site #wb_main_3 .wb-blog h2:not(:has(*))[class~="wb-stl-heading2"]:where(:is(h2)), body.site #wb_main_3 .wb-blog h2.wb-stl-heading2:not(:has(:not(br))), body.site #wb_main_7 .wb-blog h2.wb-stl-heading2:not(:has(:not(br))) { display: none !important; } /* Images dans le contenu : neutralise les vieux styles inline (border vert, border-radius asymétrique, float) */ body.site #wb_main_3 .wb-blog p img, body.site #wb_main_7 .wb-blog p img { border: none !important; border-radius: 14px !important; box-shadow: 0 6px 22px -10px rgba(40, 30, 18, 0.18); max-width: 100%; height: auto !important; display: block; margin: var(--adv-5) auto !important; float: none !important; } /* Si l'image est la seule chose dans son

, on garde le centrage. Sinon on autorise float pour les patterns "image floatée + texte" sur desktop seulement (en wrapping content) */ @media (min-width: 720px) { body.site #wb_main_3 .wb-blog p img:not(:only-child), body.site #wb_main_7 .wb-blog p img:not(:only-child) { max-width: 280px; margin: 0 0 var(--adv-3) var(--adv-4) !important; float: right !important; } } body.adv-catalog-cat #wb_main_3 .wb-blog > div[style*="overflow"], body.adv-blog-article #wb_main_7 .wb-blog > div[style*="overflow"] { overflow: visible !important; } /* H1 fiches catalogue (injecté par scripts/add-h1-catalog.py) */ .adv-cat-detail__title { font-family: var(--adv-font-display); font-weight: 700; font-size: clamp(2.4rem, 3.2vw, 3.2rem); /* 24-32px modeste */ line-height: 1.1; letter-spacing: -0.02em; color: var(--adv-ink); margin: 0.5rem 0 1.5rem; } /* CTA fin fiche catalogue (injecté par scripts/normalize-catalog-cta.py) */ .adv-cat-cta-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px; margin: var(--adv-7) 0 var(--adv-3) !important; padding-top: var(--adv-5); border-top: 1px solid var(--adv-border, rgba(20, 23, 28, 0.08)); max-width: none !important; } .adv-cat-cta { display: inline-flex; align-items: center; gap: 6px; padding: 14px 28px; background: var(--adv-accent, #b8311c); color: #fff !important; font-family: var(--adv-font-body); font-size: 1.5rem; font-weight: 600; text-decoration: none !important; border-radius: 999px; border: 1px solid var(--adv-accent, #b8311c); transition: background 0.18s ease, transform 0.12s ease; min-height: 44px; } .adv-cat-cta:hover { background: var(--adv-accent-hover, #8f2414); color: #fff !important; text-decoration: none !important; transform: translateY(-1px); } .adv-cat-cta-phone { color: var(--adv-ink) !important; font-family: var(--adv-font-body); font-size: 1.5rem; font-weight: 600; text-decoration: none !important; padding: 14px 8px; min-height: 44px; display: inline-flex; align-items: center; } .adv-cat-cta-phone:hover { color: var(--adv-accent, #b8311c) !important; text-decoration: none !important; } body.site #wb_main_3 .wb-blog p, body.site #wb_main_3 .wb-blog li, body.adv-catalog-cat #wb_main_3 .wb-blog p, body.adv-catalog-cat #wb_main_3 .wb-blog li, body.adv-blog-article #wb_main_7 .wb-blog p, body.adv-blog-article #wb_main_7 .wb-blog li, body.site #wb_main_7 .wb-blog p, body.site #wb_main_7 .wb-blog li { font-family: var(--adv-font-body) !important; font-size: clamp(1.4rem, 1.5vw, 1.55rem) !important; /* 14-15.5px lecture longue */ line-height: 1.6 !important; color: var(--adv-ink) !important; margin: 0 0 var(--adv-4) !important; } body.adv-catalog-cat #wb_main_3 .wb-blog p.wb-stl-normal:empty, body.adv-blog-article #wb_main_7 .wb-blog p.wb-stl-normal:empty { display: none; } /* Article + catalogue détail H1 */ body.site #wb_main_7 .wb-blog h1, body.site #wb_main_3 .wb-blog h1, body.adv-blog-article #wb_main_7 .wb-blog h1 { font-family: var(--adv-font-display) !important; font-size: clamp(2.8rem, 4vw, 3.6rem) !important; /* 28-36px (était 18) */ line-height: 1.1 !important; letter-spacing: -0.025em !important; color: var(--adv-ink) !important; margin: 0 0 var(--adv-5) !important; font-weight: 700 !important; } body.adv-catalog-cat #wb_main_3 .wb-blog h2, body.adv-blog-article #wb_main_7 .wb-blog h2, body.site #wb_main_3 .wb-blog h2, body.site #wb_main_7 .wb-blog h2 { font-family: var(--adv-font-display) !important; font-size: clamp(2rem, 2.6vw, 2.4rem) !important; /* 20-24px (était 13.75-17.5) */ line-height: 1.25 !important; letter-spacing: -0.025em !important; color: var(--adv-ink) !important; margin: var(--adv-7) 0 var(--adv-4) !important; text-wrap: balance; } body.adv-catalog-cat #wb_main_3 .wb-blog h3, body.adv-blog-article #wb_main_7 .wb-blog h3 { font-family: var(--adv-font-display) !important; font-size: clamp(1.125rem, 1.4vw, 1.375rem) !important; line-height: 1.3 !important; letter-spacing: -0.02em !important; color: var(--adv-ink) !important; margin: var(--adv-6) 0 var(--adv-3) !important; } body.adv-catalog-cat #wb_main_3 .wb-blog ol, body.adv-catalog-cat #wb_main_3 .wb-blog ul, body.adv-blog-article #wb_main_7 .wb-blog ol, body.adv-blog-article #wb_main_7 .wb-blog ul { padding-left: 1.5rem; margin: 0 0 var(--adv-5) !important; } /* Images: neutralise per-instance inline border/radius, unify framing */ body.adv-catalog-cat #wb_main_3 .wb-blog img, body.adv-blog-article #wb_main_7 .wb-blog img { max-width: 100% !important; height: auto !important; border: 1px solid var(--adv-border) !important; border-radius: 12px !important; margin: var(--adv-5) auto !important; display: block !important; float: none !important; box-shadow: var(--adv-shadow-sm); } /* Small inline promo banners (pill-shaped CTA images) stay pill-rounded */ body.adv-catalog-cat #wb_main_3 .wb-blog p[style*="center"] img, body.adv-blog-article #wb_main_7 .wb-blog p[style*="center"] img { border: 0 !important; border-radius: 999px !important; box-shadow: var(--adv-shadow-accent); max-height: 64px !important; width: auto !important; margin: var(--adv-6) auto !important; } /* First image in article — bigger, centred product shot */ body.adv-catalog-cat #wb_main_3 .wb-blog p.wb-stl-normal:first-of-type > img, body.adv-blog-article #wb_main_7 .wb-blog p.wb-stl-normal:first-of-type > img { display: block !important; max-width: min(420px, 100%) !important; width: auto !important; height: auto !important; margin: 0 auto var(--adv-6) !important; } /* Back button — subtle breadcrumb chip with arrow. Catches the * category/article `‹ Обратно` link anywhere inside the article body. */ body.adv-catalog-cat .wb-blog a.btn-default, body.adv-blog-article .wb-blog a.btn-default { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; font-family: var(--adv-font-body) !important; font-size: 0.8125rem !important; font-weight: 500 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--adv-ink-muted) !important; background: transparent !important; border: 1px solid var(--adv-border) !important; border-radius: var(--adv-radius-pill) !important; padding: 0.45rem 0.9rem 0.45rem 0.75rem !important; text-decoration: none !important; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important; } body.adv-catalog-cat .wb-blog a.btn-default:hover, body.adv-blog-article .wb-blog a.btn-default:hover { color: var(--adv-ink) !important; border-color: var(--adv-ink) !important; background: var(--adv-paper-elevated) !important; transform: none !important; } /* Normalise anchor colour inside article prose (red/green junk) */ body.adv-catalog-cat #wb_main_3 .wb-blog a, body.adv-blog-article #wb_main_7 .wb-blog a { color: var(--adv-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(184, 49, 28, 0.35); transition: color 0.2s ease, text-decoration-color 0.2s ease; } body.adv-catalog-cat #wb_main_3 .wb-blog a:hover, body.adv-blog-article #wb_main_7 .wb-blog a:hover { color: var(--adv-ink); text-decoration-color: var(--adv-ink); } body.adv-catalog-cat #wb_main_3 .wb-blog > div:first-child a.btn-default, body.adv-blog-article #wb_main_7 .wb-blog > div:first-child a.btn-default { text-decoration: none !important; } /* ---------- Generic inline colour span neutralisation in body prose ---------- * The legacy HTML is peppered with * (neon red) and (neon green). These * inherit into body copy and wreck typography. We already neutralised them * in headings above; here we cover body text and list items everywhere * except the footer nav (where green links are the design). * -------------------------------------------------------------- */ body.site p span[style*="rgba(248,16,16"], body.site li span[style*="rgba(248,16,16"], body.site td span[style*="rgba(248,16,16"] { color: var(--adv-accent) !important; font-weight: 600; } body.site :not([id^="wb_footer_"]) p span[style*="rgba(0,188,0"], body.site :not([id^="wb_footer_"]) li span[style*="rgba(0,188,0"], body.site :not([id^="wb_footer_"]) td span[style*="rgba(0,188,0"] { color: var(--adv-ink) !important; font-weight: 600; } /* ---------- Long-form pages (equipment, payment-and-delivery) ---------- * Pages with wall-of-text TextAreas: tighten measure, typography and * rhythm so they read like the rest of the site. * ------------------------------------------------------------------ */ body.adv-subpage:not(.adv-catalog):not(.adv-catalog-cat):not(.adv-blog):not(.adv-blog-article):not(.adv-contacts) [id^="wb_main_"] [data-plugin="TextArea"] p, body.adv-subpage:not(.adv-catalog):not(.adv-catalog-cat):not(.adv-blog):not(.adv-blog-article):not(.adv-contacts) [id^="wb_main_"] [data-plugin="TextArea"] li { font-family: var(--adv-font-body) !important; font-size: var(--adv-text-body) !important; line-height: var(--adv-text-body-lh) !important; color: var(--adv-ink) !important; } body.adv-subpage:not(.adv-catalog):not(.adv-catalog-cat):not(.adv-blog):not(.adv-blog-article):not(.adv-contacts) [id^="wb_main_"] [data-plugin="TextArea"] h2, body.adv-subpage:not(.adv-catalog):not(.adv-catalog-cat):not(.adv-blog):not(.adv-blog-article):not(.adv-contacts) [id^="wb_main_"] [data-plugin="TextArea"] h3 { font-family: var(--adv-font-display) !important; letter-spacing: -0.025em !important; color: var(--adv-ink) !important; text-wrap: balance; margin-top: var(--adv-7) !important; margin-bottom: var(--adv-3) !important; } body.adv-subpage:not(.adv-catalog):not(.adv-catalog-cat):not(.adv-blog):not(.adv-blog-article):not(.adv-contacts) [id^="wb_main_"] [data-plugin="TextArea"] h2 { font-size: clamp(1.375rem, 2vw, 1.75rem) !important; line-height: 1.25 !important; } body.adv-subpage:not(.adv-catalog):not(.adv-catalog-cat):not(.adv-blog):not(.adv-blog-article):not(.adv-contacts) [id^="wb_main_"] [data-plugin="TextArea"] h3 { font-size: clamp(1.125rem, 1.4vw, 1.375rem) !important; line-height: 1.3 !important; } /* ---------- Callout blocks (adv-callout phone CTA in articles) ---------- */ body.site h2.adv-callout, body.site .wb-stl-heading1.adv-callout { display: block; padding: var(--adv-6) var(--adv-5) !important; background: linear-gradient(180deg, #fff 0%, var(--adv-paper-elevated) 100%); border: 1px solid var(--adv-border) !important; border-left: 3px solid var(--adv-accent) !important; border-radius: 14px !important; text-align: center !important; font-family: var(--adv-font-display) !important; font-size: clamp(1.6rem, 2vw, 1.9rem) !important; /* 16-19px (était 11.25) */ line-height: 1.35 !important; letter-spacing: -0.02em !important; color: var(--adv-ink) !important; box-shadow: var(--adv-shadow-sm); } body.site h2.adv-callout a, body.site .wb-stl-heading1.adv-callout a { color: var(--adv-accent) !important; text-decoration: none !important; font-weight: 700 !important; white-space: nowrap; } /* ---------- Оплата и доставка (payment-and-delivery) ---------- */ /* 5.css forces #wb_main_5 > .wb_content { padding: 0 } and wins over the generic * adv-2026 main gutter rule — restore horizontal inset so copy matches other pages. */ body.adv-2026.adv-payment #wb_main_5 > .wb_content { max-width: var(--adv-container) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--adv-gutter) !important; padding-right: var(--adv-gutter) !important; box-sizing: border-box !important; width: 100% !important; } body.adv-payment #wb_main_5 .adv-payment-page { max-width: none; width: 100%; margin: 0; padding: 0 0 var(--adv-10); box-sizing: border-box; } body.adv-payment .adv-payment-page__h1 { font-family: var(--adv-font-display); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.6rem); /* 26-36px */ line-height: 1.1; letter-spacing: -0.025em; color: var(--adv-ink); margin: 0 0 var(--adv-4); } body.adv-payment .adv-payment-page__deck { font-family: var(--adv-font-body); font-size: clamp(1.5rem, 1.7vw, 1.7rem); /* 15-17px (était 11.3-12.5) */ line-height: 1.55; color: var(--adv-ink); margin: 0 0 clamp(var(--adv-8), 4vw, var(--adv-10)); max-width: min(48rem, 100%); padding-left: var(--adv-4); border-left: 3px solid var(--adv-accent); } body.adv-payment .adv-payment-page__h2 { font-family: var(--adv-font-display); font-size: clamp(1.375rem, 2vw, 1.75rem) !important; letter-spacing: -0.025em; color: var(--adv-ink) !important; margin: 0 0 var(--adv-3) !important; line-height: 1.25 !important; } body.adv-payment .adv-payment-page__h3 { font-family: var(--adv-font-display); font-size: clamp(1.0625rem, 1.3vw, 1.25rem) !important; letter-spacing: -0.02em; color: var(--adv-ink) !important; margin: var(--adv-5) 0 var(--adv-2) !important; line-height: 1.3 !important; } /* Полосы: широкая картинка, текст под ней (без «зигзага») */ body.adv-payment .adv-payment-band { margin-bottom: clamp(var(--adv-9), 5vw, var(--adv-10)); } body.adv-payment .adv-payment-band__media { max-width: min(40rem, 100%); margin-inline: auto; height: clamp(132px, 22vw, 200px); border-radius: 14px; overflow: hidden; border: 1px solid var(--adv-border); background: var(--adv-paper-elevated); box-shadow: 0 1px 0 rgba(20, 23, 28, 0.05), 0 12px 28px -18px rgba(20, 23, 28, 0.28); } body.adv-payment .adv-payment-band__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } body.adv-payment .adv-payment-band__inner { padding-top: var(--adv-6); max-width: min(44rem, 100%); } body.adv-payment .adv-payment-band__inner .adv-payment-page__h2 { margin-top: 0 !important; } body.site #wb_main_5 .adv-payment-band__inner p, body.adv-payment .adv-payment-band__inner p { margin: 0 0 var(--adv-3); font-family: var(--adv-font-body); font-size: clamp(1.4rem, 1.6vw, 1.6rem) !important; /* 14-16px (était 11.3-12.5) */ line-height: var(--adv-text-body-lh); color: var(--adv-ink); } body.adv-payment .adv-payment-band__inner p:last-child { margin-bottom: 0; } body.adv-payment .adv-payment-band__label { font-size: 1.3rem !important; /* 13px (était 11.3) */ text-transform: uppercase; letter-spacing: 0.06em; color: var(--adv-ink-soft) !important; margin: var(--adv-5) 0 var(--adv-3) !important; font-weight: 600; } body.adv-payment .adv-payment-pills { display: flex; flex-wrap: wrap; gap: var(--adv-2); margin: 0; padding: 0; } body.adv-payment .adv-payment-pills__item { display: inline-block; padding: 0.35rem 0.75rem; font-family: var(--adv-font-body); font-size: var(--adv-text-meta); line-height: 1.35; color: var(--adv-ink); background: var(--adv-paper-elevated); border: 1px solid var(--adv-border); border-radius: 999px; } body.adv-payment .adv-payment-checklist { margin: 0 0 var(--adv-4); padding-left: 1.25rem; font-family: var(--adv-font-body); font-size: var(--adv-text-body); line-height: var(--adv-text-body-lh); color: var(--adv-ink); } body.adv-payment .adv-payment-checklist li { margin-bottom: var(--adv-2); } body.adv-payment .adv-payment-band__inner a { color: var(--adv-accent); text-underline-offset: 3px; } body.adv-payment .adv-payment-band__inner a:hover { color: var(--adv-ink); } body.adv-payment .adv-payment-legal { margin-top: clamp(var(--adv-10), 6vw, var(--adv-20)); padding: var(--adv-8) 0 0; border-top: 1px solid var(--adv-border); } body.adv-payment .adv-payment-legal > .adv-payment-page__h2 { margin-bottom: var(--adv-6) !important; } body.adv-payment .adv-payment-details { margin-bottom: var(--adv-3); border: 1px solid var(--adv-border); border-radius: 12px; background: var(--adv-paper-elevated); overflow: hidden; } body.adv-payment .adv-payment-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--adv-3); cursor: pointer; padding: var(--adv-4) var(--adv-5); font-family: var(--adv-font-display); font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 600; letter-spacing: -0.02em; color: var(--adv-ink); list-style: none; } body.adv-payment .adv-payment-details summary::-webkit-details-marker { display: none; } body.adv-payment .adv-payment-details summary::after { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--adv-ink-muted); border-bottom: 2px solid var(--adv-ink-muted); transform: rotate(45deg); transition: transform 0.2s ease; } body.adv-payment .adv-payment-details[open] summary::after { transform: rotate(-135deg); } body.adv-payment .adv-payment-details > p, body.adv-payment .adv-payment-details .adv-payment-legal-list { margin: 0 var(--adv-5) var(--adv-4); padding: 0 0 var(--adv-5); font-family: var(--adv-font-body); font-size: var(--adv-text-body); line-height: var(--adv-text-body-lh); color: var(--adv-ink); } body.adv-payment .adv-payment-details[open] summary { border-bottom: 1px solid var(--adv-border); } body.adv-payment .adv-payment-legal-list { list-style: disc; padding-left: 1.25rem; margin-top: var(--adv-3); } body.adv-payment .adv-payment-legal-list li { margin-bottom: var(--adv-3); } @media (max-width: 640px) { body.adv-payment .adv-payment-band__media { max-width: 100%; height: clamp(120px, 36vw, 168px); } body.adv-payment .adv-payment-page__deck { padding-left: var(--adv-3); font-size: 1.5rem; /* 15px (était 10.6 sur mobile) */ } } /* ============================================================================= Equipment specs table (Phase 4 of visual audit) Two-column table: label (th) on left, value on right. Warm paper surface with subtle row separators — scans fast, no more wall-of-text specs. ============================================================================= */ body.adv-equipment .adv-equipment-specs { display: grid; grid-template-columns: minmax(14rem, auto) 1fr; gap: 0; width: 100%; margin: var(--adv-4) 0 var(--adv-6); background: var(--adv-paper-elevated); border: 1px solid var(--adv-border); border-radius: var(--adv-radius-sm); overflow: hidden; box-shadow: var(--adv-shadow-xs); } body.adv-equipment .adv-equipment-specs tbody { display: contents; } body.adv-equipment .adv-equipment-specs tr { display: contents; } body.adv-equipment .adv-equipment-specs th, body.adv-equipment .adv-equipment-specs td { padding: 0.7rem 1.1rem !important; border-bottom: 1px solid var(--adv-border-soft) !important; background: transparent !important; font-family: var(--adv-font-body) !important; font-size: var(--adv-text-meta) !important; line-height: 1.4 !important; text-align: left !important; } body.adv-equipment .adv-equipment-specs th { color: var(--adv-ink-muted) !important; font-weight: 500 !important; background: transparent !important; } body.adv-equipment .adv-equipment-specs td { color: var(--adv-ink) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; } body.adv-equipment .adv-equipment-specs tr:last-child th, body.adv-equipment .adv-equipment-specs tr:last-child td { border-bottom: none !important; } body.adv-equipment .adv-equipment-specs tr:hover th, body.adv-equipment .adv-equipment-specs tr:hover td { background: var(--adv-paper-deep) !important; } @media (max-width: 619px) { body.adv-equipment .adv-equipment-specs { grid-template-columns: 1fr; } body.adv-equipment .adv-equipment-specs th { padding-bottom: 0.2rem !important; font-size: 0.8125rem !important; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: none !important; } body.adv-equipment .adv-equipment-specs td { padding-top: 0.1rem !important; padding-bottom: 0.8rem !important; } } /* Phase 5B — form reassurance line under the submit button */ body.site #wb_main_4 .wb_form .adv-form__reassure { margin: 0.85rem 0 0 !important; font-family: var(--adv-font-body) !important; font-size: 1.3rem !important; /* 13px (était 9) */ line-height: 1.45 !important; color: var(--adv-ink-soft) !important; max-width: 32rem; } /* Phase 5B — section heading above the form */ body.site #wb_main_4 .adv-form__heading { margin: 0 0 var(--adv-5) !important; font-size: clamp(1.375rem, 2vw, 1.75rem) !important; color: var(--adv-ink) !important; text-align: left; } /* ============================================================================= Phase 6B — Micro-interactions for dynamism Subtle motion on hover/scroll that respects reduced-motion. ============================================================================= */ /* Eyebrow dot pulse — subtle breathing on the accent bullet */ @keyframes adv-eyebrow-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } } body.site .adv-hero-eyebrow::before { animation: adv-eyebrow-pulse 2.6s ease-in-out infinite; } html.adv-reduced-motion body.site .adv-hero-eyebrow::before { animation: none; } /* Catalog / blog cards — visible lift on hover (already has some, make it more obvious) */ body.site .wb-blog-item { transition: transform 0.35s var(--adv-spring), box-shadow 0.35s var(--adv-ease) !important; } body.site .wb-blog-item:hover { transform: translateY(-4px); box-shadow: var(--adv-shadow) !important; } html.adv-reduced-motion body.site .wb-blog-item:hover { transform: none; box-shadow: var(--adv-shadow-sm) !important; } /* Home product images — float on hover of their section */ body.adv-home #wb_main_1 .wb-picture-wrapper img { transition: transform 0.5s var(--adv-ease) !important; } body.adv-home .wb_element_picture:hover .wb-picture-wrapper img { transform: scale(1.025); } html.adv-reduced-motion body.adv-home .wb_element_picture:hover .wb-picture-wrapper img { transform: none; } /* Header nav link — growing underline on hover */ body.site .hmenu > li > a::before { content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: 0.35rem; height: 2px; background: var(--adv-accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--adv-ease); opacity: 0; } body.site .hmenu > li > a:hover::before, body.site .hmenu > li.wb_this_page_menu_item > a::before { transform: scaleX(1); opacity: 1; } html.adv-reduced-motion body.site .hmenu > li > a::before { transition: none; } /* Equipment specs row — subtle tint on hover (already exists, keep consistent) */ body.adv-equipment .adv-equipment-specs tr { transition: background 0.25s ease; } /* Phase-3 polish — form footer stacks button + reassurance on mobile */ body.site #wb_main_4 .wb_form tr.form-footer td { flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; } body.site #wb_main_4 .wb_form .adv-form__reassure { flex: 1 1 18rem; } @media (max-width: 619px) { body.site #wb_main_4 .wb_form tr.form-footer td { flex-direction: column; align-items: flex-start; } body.site #wb_main_4 .wb_form .adv-form__reassure { margin-top: 0 !important; flex: 1 1 100%; } } /* ============================================================ Equipment detail pages (.pp-*) — overrides typo lisible Cible 41 fiches /equipment/{slug}/ qui partagent le template. Audit 2026-05-09. ============================================================ */ .pp-crumbs { font-size: 1.3rem !important; } .pp-cat { font-size: 1.3rem !important; } .pp-h1 { font-size: clamp(2.6rem, 4vw, 3.6rem) !important; /* 26-36px */ line-height: 1.1 !important; } .pp-lead { font-size: clamp(1.4rem, 1.6vw, 1.6rem) !important; } .pp-cta { font-size: 1.4rem !important; } .pp-section h2 { font-size: clamp(2rem, 3vw, 2.6rem) !important; /* 20-26px */ } .pp-related-cat { font-size: 1.1rem !important; } .pp-related-title { font-size: clamp(1.5rem, 1.8vw, 1.7rem) !important; line-height: 1.3 !important; }