/* ════════════════════════════════════════════════════════════════════════ ITfresh — premium liveliness + audit-fix layer (enhance.css) Additive & reversible. Loaded LAST in so it wins the cascade. 2026-05-28 (rev.2 — applies design-audit fixes P0/P1/P2). ════════════════════════════════════════════════════════════════════════ */ /* ── Detailed raster icon tiles (replace former emoji) ───────────────── */ .cta-icon, .guarantee-icon { display: block; margin: 0 auto 1rem; width: 64px; height: 64px; border-radius: 18px; object-fit: cover; -webkit-user-drag: none; user-select: none; box-shadow: 0 6px 16px rgba(139, 58, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.30); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, filter 0.4s ease; } .guarantee-icon { width: 72px; height: 72px; } .cta-option:hover .cta-icon, .cta-option:focus-visible .cta-icon { transform: translateY(-5px) scale(1.07) rotate(-2deg); box-shadow: 0 14px 30px rgba(217, 112, 0, 0.34); filter: saturate(1.08) brightness(1.04); will-change: transform; } .guarantee-item:hover .guarantee-icon { transform: translateY(-5px) scale(1.06) rotate(2deg); box-shadow: 0 14px 30px rgba(217, 112, 0, 0.30); filter: saturate(1.08) brightness(1.04); will-change: transform; } /* ── P0: CTA-option cards — force clean centred column (a rogue rule makes .cta-option display:flex row → icon-left, cramped text). Higher specificity (.cta-options .cta-option) guarantees the win. ─ */ .cta-options .cta-option { display: flex; flex-direction: column; align-items: center; text-align: center; } /* ── Card depth: confident lift + warm shadow bloom ──────────────────── */ .cta-option, .guarantee-item { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease; } .cta-option:hover, .guarantee-item:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(139, 58, 0, 0.16); will-change: transform; } /* ── Small inline icons (replace inline emoji in buttons/links/footer) ─ */ .inline-ico { display: inline-block; height: 1.15em; width: 1.15em; border-radius: 5px; object-fit: cover; vertical-align: -0.22em; margin-right: 0.2em; } /* ── Buttons: soft sheen sweep (complements existing ::before fill) ───── */ .hero-cta::after, .contact-link::after { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.34) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; z-index: 1; transition: left 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); } .hero-cta:hover::after, .contact-link:hover::after { left: 130%; } .contact-link { position: relative; overflow: hidden; } .hero-cta > *, .contact-link > * { position: relative; z-index: 2; } /* ── P1: urgency banner — darken for AA contrast (was white-on-#d97000 = 3.35) and stop the persistent pulse (calmer for B2B). ────────── */ .urgency-banner { background: linear-gradient(135deg, #8b3a00, #6e2f00); animation: none; } /* ── P2: calm the floating WhatsApp (persistent bounce → hover only) ──── */ .floating-whatsapp { animation: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .floating-whatsapp:hover { transform: scale(1.08); } /* ── P1: case-results — kill green-on-green low contrast (2.37) ───────── */ .case-results { background: linear-gradient(135deg, #fff7ef, #ffeed9); border: 1px solid rgba(139, 58, 0, 0.12); } .case-results span[style*="27ae60"], .case-results span[style*="2ecc71"], .case-results span[style*="2ECC71"] { color: #157a37 !important; } .case-results span[style*="e74c3c"], .case-results span[style*="E74C3C"] { color: #b8341f !important; } /* ── P2: missing reveal delays referenced in markup ──────────────────── */ .delay-7 { transition-delay: 0.7s; } .delay-8 { transition-delay: 0.8s; } /* ── Smoother reveals (refine easing only; JS still toggles .visible) ── */ .reveal, .reveal-left, .reveal-scale { transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ── Logo: static (no motion) + soft blend into background (req 2026-05-29) ─ */ .hero-logo-top, .loading-logo-img, .nav-logo-img, .contact-logo, .mobile-nav-logo, .footer-logo-img { animation: none !important; } /* large display logos gently meld with the warm background */ .hero-logo-top, .contact-logo { mix-blend-mode: multiply; } /* ── Homepage "Статьи и кейсы" block (internal links home→articles) ──── */ .home-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .home-article { display: block; padding: 1.1rem 1.2rem; background: #fff; border-radius: 14px; border: 1px solid rgba(139, 58, 0, 0.10); color: var(--text); text-decoration: none; font-family: "Josefin Slab", serif; font-size: 1.02rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(139, 58, 0, 0.07); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s; } .home-article:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(139, 58, 0, 0.14); border-color: var(--orange); will-change: transform; } /* ── Thin scroll-progress bar (injected by enhance.js) ───────────────── */ #itf-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000; background: linear-gradient(90deg, #f0a020, #d97000, #8b3a00); box-shadow: 0 0 8px rgba(217, 112, 0, 0.5); transition: width 0.1s linear; pointer-events: none; } /* ── Breathing warm glow (idle, motion-safe) ─────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .hero-glow { animation: itfGlowPulse 7s ease-in-out infinite; } .contact-glow { animation: itfBreath 9s ease-in-out infinite; } @keyframes itfGlowPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } @keyframes itfBreath { 0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } } }