/* * perf-reveal.css * Replaces animate.css (71.7 KB) + wow.min.js. * Only the five animations this theme actually uses are defined here. * Elements are hidden only when JS is confirmed running (.js-reveal on ), * so a JS failure can never leave content invisible. */ .js-reveal .animate__animated:not(.no-reveal):not(.is-revealed) { opacity: 0; } .animate__animated.is-revealed { opacity: 1; animation-duration: 1s; animation-fill-mode: both; } /* Revealed while already inside the first viewport: show instantly, no animation. */ .animate__animated.is-revealed.is-instant { animation: none; } .animate__animated.is-revealed.animate__fadeInUp { animation-name: tnsFadeInUp; } .animate__animated.is-revealed.animate__fadeInUpBig { animation-name: tnsFadeInUpBig; } .animate__animated.is-revealed.animate__fadeInLeft { animation-name: tnsFadeInLeft; } .animate__animated.is-revealed.animate__fadeInLeftBig { animation-name: tnsFadeInLeftBig; } .animate__animated.is-revealed.animate__fadeInRightBig{ animation-name: tnsFadeInRightBig; } @keyframes tnsFadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } @keyframes tnsFadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: none; } } @keyframes tnsFadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes tnsFadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes tnsFadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-reveal .animate__animated, .animate__animated.is-revealed { opacity: 1 !important; animation: none !important; transform: none !important; } } /* * fa-search is the only Font Awesome glyph this site renders. * Inlined as SVG so the 103 KB FA stylesheet and 255 KB of webfonts can go. */ .fa-search { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--tns-search-icon) no-repeat center / contain; mask: var(--tns-search-icon) no-repeat center / contain; } :root { --tns-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); } /* * The only glyph rendered from the legacy FontAwesome webfont (96 KB) was * \f105 (angle-right) on this one selector. Drawn as SVG instead so the * font never downloads. */ .service-detail-list .accordion-body p:before { content: ""; display: inline-block; width: 0.5em; height: 0.95em; margin-right: 7px; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: var(--tns-angle-right) no-repeat center / contain; mask: var(--tns-angle-right) no-repeat center / contain; } :root { --tns-angle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M64 448c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L146.7 256 41.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3l-128 128C80.4 444.9 72.2 448 64 448z'/%3E%3C/svg%3E"); } /* * Nothing may reference the FontAwesome family any more. Two mega-menu rules * set font-family: FontAwesome with empty content, which was still enough to * pull down fontawesome-webfont.woff + .ttf (258 KB combined). */ .navbar-collapse .menu-top-menu-container > ul li.mega-menu ul.sub-menu li::before, .navbar-collapse .menu-top-menu-container > ul li.mega-menu2 ul.sub-menu li::before { font-family: inherit; } /* * menu.css renders the dropdown carets with FontAwesome's \f107 (angle-down). * Those three rules were the last thing pulling fontawesome-webfont * (.woff 96 KB + .ttf 162 KB). Same glyph, drawn as a masked SVG, so the * colour still follows each rule's own `color` value. */ .menu-item-has-children > a:after, .menu-item-has-children ul li:after, .menu-item-has-children .subItem:before { content: ""; font-family: inherit; background-color: currentColor; -webkit-mask-image: var(--tns-angle-down); mask-image: var(--tns-angle-down); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .menu-item-has-children > a:after { width: 14px; height: 14px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; } .menu-item-has-children ul li:after { width: 12px; height: 12px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 10px 10px; mask-size: 10px 10px; } .menu-item-has-children .subItem:before { height: 16px; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; } :root { --tns-angle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E"); } /* * owl.carousel rebuilds the logo strip into its own stage markup on init. * With CSS no longer render-blocking that rebuild landed after first paint * and pushed the page down (CLS 0.25). Reserving the strip's real height - * 90px at every breakpoint - keeps the swap invisible. */ .logo-section .logo-slider { min-height: 90px; }