.elementor-kit-12{--e-global-color-primary:#000000;--e-global-color-secondary:#FFC400;--e-global-color-text:#171717;--e-global-color-accent:#FFC400;--e-global-color-8c8cf98:#F2A900;--e-global-color-1b04a9f:#FFFFFF;--e-global-color-838747d:#050505;--e-global-color-5eb346d:#2A2A2A;--e-global-color-2c9768a:#E3E3E3;--e-global-color-03ffbbe:#707070;--e-global-color-89e61f4:#666666;--e-global-color-a7fb19f:#F7F7F7;--e-global-color-580cc06:#FAFAFA;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:42px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.4em;--e-global-typography-2f593cd-font-family:"Inter";--e-global-typography-2f593cd-font-size:14px;--e-global-typography-2f593cd-font-weight:600;--e-global-typography-2f593cd-text-transform:uppercase;--e-global-typography-2f593cd-line-height:1.4em;--e-global-typography-2f593cd-letter-spacing:0.5px;background-color:var( --e-global-color-1b04a9f );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-12 a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-12 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-12 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h5{color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;line-height:1.4em;letter-spacing:0.5px;}.elementor-kit-12 h6{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );color:var( --e-global-color-text );border-radius:8px 8px 8px 8px;padding:10px 20px 10px 20px;}.elementor-kit-12 img{border-radius:8px 8px 8px 8px;}.elementor-kit-12 img:hover{border-radius:8px 8px 8px 8px;}.elementor-kit-12 label{color:var( --e-global-color-text );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 input:not([type="button"]):not([type="submit"]),.elementor-kit-12 textarea,.elementor-kit-12 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );accent-color:var( --e-global-color-accent );background-color:var( --e-global-color-1b04a9f );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-2c9768a );border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-12{--e-global-typography-primary-font-size:42px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-12 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-12 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-12 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h3{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h4{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h6{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 label{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 input:not([type="button"]):not([type="submit"]),.elementor-kit-12 textarea,.elementor-kit-12 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-12{--e-global-typography-primary-font-size:32px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-12 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-12 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-12 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h3{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h4{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-12 h6{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 label{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-12 input:not([type="button"]):not([type="submit"]),.elementor-kit-12 textarea,.elementor-kit-12 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== ADVENT SECURITY - FINAL THEME CSS (file 2 of 3) PASTE INTO: Elementor editor > menu (top left) > Site Settings > Custom CSS Replace EVERYTHING that is currently in that box with this file. ========================================================================== */ /* ---------- 1. DARK MODE: Global Color variables ---------- */ html.dark-mode body { /* Default globals */ --e-global-color-primary: #FFFFFF; /* was #000000 */ --e-global-color-secondary: #FFC400; --e-global-color-text: #F1F1F1; /* was #171717 */ --e-global-color-accent: #FFC400; /* Custom globals */ --e-global-color-8c8cf98: #F2A900; /* Advent-Accent */ --e-global-color-1b04a9f: #0E0F11; /* Bg */ --e-global-color-838747d: #0E0F11; /* Color-Black */ --e-global-color-5eb346d: #34353C; /* Border-Dark */ --e-global-color-2c9768a: #2A2B31; /* Border */ --e-global-color-03ffbbe: #B5B5B5; /* Text-Light */ --e-global-color-89e61f4: #A0A0A0; /* Text-Muted */ --e-global-color-a7fb19f: #0E0F11; /* Surface (same as Bg = seamless sections) */ --e-global-color-580cc06: #15161A; /* Surface-Alt (cards) */ background-color: #0E0F11; color: #F1F1F1; } html.dark-mode { color-scheme: dark; } /* ---------- 2. HEADER ---------- */ html.dark-mode .elementor-location-header { background-color: #0E0F11 !important; border: 0 !important; /* no line across the full header */ box-shadow: none !important; backdrop-filter: none !important; /* blur can trap dropdowns */ -webkit-backdrop-filter: none !important; z-index: 9999; overflow: visible !important; } /* Menu links: normal */ html.dark-mode .elementor-location-header .e-n-menu-title, html.dark-mode .elementor-location-header .e-n-menu-title a, html.dark-mode .elementor-location-header .e-n-menu-title .e-n-menu-title-text, html.dark-mode .elementor-location-header .elementor-nav-menu a, html.dark-mode .elementor-location-header .elementor-item { color: #F1F1F1 !important; transition: color .2s ease; } /* Menu links: hover, focus, current page */ html.dark-mode .elementor-location-header .e-n-menu-title:hover, html.dark-mode .elementor-location-header .e-n-menu-title:hover a, html.dark-mode .elementor-location-header .e-n-menu-title:hover .e-n-menu-title-text, html.dark-mode .elementor-location-header .e-n-menu-title:focus-within .e-n-menu-title-text, html.dark-mode .elementor-location-header .e-n-menu-title.e-current .e-n-menu-title-text, html.dark-mode .elementor-location-header .elementor-nav-menu a:hover, html.dark-mode .elementor-location-header .elementor-item:hover, html.dark-mode .elementor-location-header .elementor-item.elementor-item-active { color: #FFC400 !important; } /* Dropdown arrows */ html.dark-mode .elementor-location-header .e-n-menu-dropdown-icon, html.dark-mode .elementor-location-header .e-n-menu-dropdown-icon svg { color: #F1F1F1 !important; fill: #F1F1F1 !important; } html.dark-mode .elementor-location-header .e-n-menu-title:hover .e-n-menu-dropdown-icon, html.dark-mode .elementor-location-header .e-n-menu-title:hover .e-n-menu-dropdown-icon svg { color: #FFC400 !important; fill: #FFC400 !important; } /* Dropdown / mega menu panels */ html.dark-mode .elementor-location-header .e-n-menu-content, html.dark-mode .elementor-location-header .elementor-nav-menu--dropdown { z-index: 10000 !important; background-color: #141518 !important; border: 1px solid #2A2B31; } html.dark-mode .elementor-location-header .e-n-menu-content .e-con, html.dark-mode .elementor-location-header .e-n-menu-content .elementor-widget-container { background-color: transparent !important; } html.dark-mode .elementor-location-header .e-n-menu-content p, html.dark-mode .elementor-location-header .e-n-menu-content h2, html.dark-mode .elementor-location-header .e-n-menu-content h3, html.dark-mode .elementor-location-header .e-n-menu-content a, html.dark-mode .elementor-location-header .elementor-nav-menu--dropdown a { color: #F1F1F1 !important; } html.dark-mode .elementor-location-header .e-n-menu-content a:hover, html.dark-mode .elementor-location-header .elementor-nav-menu--dropdown a:hover { color: #FFC400 !important; } /* ---------- 3. FOOTER ---------- */ html.dark-mode .elementor-location-footer { background-color: #070708 !important; border-top: 1px solid #2A2B31; } html.dark-mode .elementor-location-footer a:not(.elementor-button), html.dark-mode .elementor-location-footer li, html.dark-mode .elementor-location-footer p, html.dark-mode .elementor-location-footer .elementor-icon-list-text { color: #C9C9CE !important; } html.dark-mode .elementor-location-footer a:hover { color: #FFC400 !important; } html.dark-mode .elementor-location-footer .elementor-social-icon { background-color: transparent !important; border: 1px solid #34353C; } html.dark-mode .elementor-location-footer .elementor-social-icon svg { fill: #F1F1F1 !important; } /* "View More" links: add the CSS class view-more to those widgets */ html.dark-mode .elementor-location-footer .view-more a { color: #FFC400 !important; } /* ---------- 4. FORMS ---------- */ html.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark-mode select, html.dark-mode textarea { background-color: #17181B !important; color: #F1F1F1 !important; border: 1px solid #34353C !important; } html.dark-mode ::placeholder { color: #8A8A90; } /* ---------- 5. COMPONENTS ---------- */ html.dark-mode .elementor-accordion-item, html.dark-mode .elementor-toggle-item, html.dark-mode .elementor-tab-content { border-color: #2A2B31 !important; } html.dark-mode .elementor-swiper-button, html.dark-mode .swiper-button-next, html.dark-mode .swiper-button-prev { color: #FFFFFF !important; background: rgba(0, 0, 0, .55); border-radius: 50%; } html.dark-mode .elementor-counter-title { color: #B5B5B5 !important; } /* ---------- 6. HELPER CLASSES USED BY THE SCRIPT ---------- */ /* Freeze transitions while the script works (prevents colour flashes). Carousels (Swiper) are excluded: Swiper waits for the slide wrapper's "transitionend" event, and cancelling that transition leaves the arrow buttons stuck. */ html.theme-switching *:not(.swiper-wrapper):not(.swiper-slide), html.theme-switching *:not(.swiper-wrapper):not(.swiper-slide)::before, html.theme-switching *:not(.swiper-wrapper):not(.swiper-slide)::after { transition: none !important; } /* Contrast guard */ .cg-light { color: #F1F1F1 !important; } .cg-dark { color: #171717 !important; } /* Dark mode: hard-coded white backgrounds turned dark */ html.dark-mode .dm-bg { background-color: #0E0F11 !important; } html.dark-mode .dm-surface { background-color: #0E0F11 !important; } /* Dark mode: softened borders / dividers (one class per side) */ html.dark-mode .bd-t { border-top-color: #2F3037 !important; } html.dark-mode .bd-r { border-right-color: #2F3037 !important; } html.dark-mode .bd-b { border-bottom-color: #2F3037 !important; } html.dark-mode .bd-l { border-left-color: #2F3037 !important; } /* ---------- 7. LIGHT MODE ---------- */ html.light-mode { color-scheme: light; } html.light-mode body { background-color: #FFFFFF; } html.light-mode .lm-bg { background-color: #FFFFFF !important; } html.light-mode .lm-surface { background-color: #F4F4F6 !important; box-shadow: inset 0 0 0 1px #E3E3E8; } html.light-mode .elementor-location-header { border: 0 !important; box-shadow: none !important; } /* no line across the full header */ html.light-mode .elementor-location-header .e-n-menu-title:hover .e-n-menu-title-text, html.light-mode .elementor-location-header .elementor-item:hover, html.light-mode .elementor-location-header .elementor-nav-menu a:hover { color: #B07F00 !important; } /* ---------- 8. TOGGLE BUTTON (sun / moon pill) ---------- */ /* Button reset (beats theme / Elementor button styles) */ .theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Light mode (simple) */ .theme-toggle .tt-track { position: relative; display: inline-block; box-sizing: border-box; width: 62px; height: 32px; border-radius: 999px; background: #F2F2F5; border: 1px solid #D8D8DE; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .theme-toggle .tt-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFC400; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.4, .1, .2, 1), box-shadow .25s ease; } .theme-toggle .tt-ico { position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; z-index: 1; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: color .25s ease; } .theme-toggle .tt-sun { left: 8px; color: #111111; } .theme-toggle .tt-moon { right: 8px; color: #8A8A93; } /* Hover */ .theme-toggle:hover .tt-track { border-color: #FFC400; box-shadow: 0 0 0 3px rgba(255, 196, 0, .28); } .theme-toggle:hover .tt-knob { box-shadow: 0 2px 8px rgba(255, 196, 0, .6); } /* Keyboard focus */ .theme-toggle:focus-visible .tt-track { outline: 2px solid #FFC400; outline-offset: 3px; } /* Dark mode on */ html.dark-mode .theme-toggle .tt-track { background: #17181B; border-color: #34353C; } html.dark-mode .theme-toggle .tt-knob { transform: translateX(30px); } html.dark-mode .theme-toggle .tt-sun { color: #8A8A93; } html.dark-mode .theme-toggle .tt-moon { color: #111111; } html.dark-mode .theme-toggle:hover .tt-track { border-color: #FFC400; } @media (prefers-reduced-motion: reduce) { .theme-toggle .tt-track, .theme-toggle .tt-knob, .theme-toggle .tt-ico { transition: none; } } /* ---------- 9. PARAGRAPH TEXT = 16px SITE-WIDE ---------- Applies to

tags and Text Editor widgets on every page, at every screen size. Headings, buttons, menus and icon text are not changed. To keep one widget at its own size, add the CSS class keep-size to it (Elementor > widget > Advanced > CSS Classes). */ body p:not(.keep-size):not(.keep-size p), body .elementor-widget-text-editor:not(.keep-size), body .elementor-widget-text-editor:not(.keep-size) p, body .elementor-widget-text-editor:not(.keep-size) li { font-size: 16px !important; } /* ---------- 10. DARK MODE: card / grid hover = yellow background, black text ---------- Works on EVERY page. The script tags a box hv-card when you hover a box that sits in a row / grid of similar text boxes, and also tags boxes that already have a hover background in the site CSS. - Add the class hv-card to a container to force the effect on it. - Add the class no-hover to a container to switch the effect off for it. (Elementor > container > Advanced > CSS Classes) */ html.dark-mode .hv-card:hover { background-color: #FFC400 !important; } /* black text on hover; buttons and small dark badges (numbered circles) keep their own colours */ html.dark-mode .hv-card:hover *:not(.elementor-button):not(.elementor-button *):not(.hv-keep):not(.hv-keep *) { color: #111111 !important; } /* ---------- 11. LIGHT MODE: boxes that turn yellow on hover keep ALL text dark ---------- Covers small orange eyebrows / labels that would otherwise vanish on the yellow. Add the class no-hover to a container to switch this off for it. */ html.light-mode .hv-card:not(.no-hover):hover *:not(.elementor-button):not(.elementor-button *):not(.hv-keep):not(.hv-keep *) { color: #111111 !important; } /* ---------- 12. ICONS inside a hovered card: white tile, dark icon (light AND dark mode) ---------- Works for Elementor Icon widgets in "Framed" or "Stacked" view (like the careers cards). Plain icons with no tile just turn dark so they stay visible on the yellow. Add the class no-hover to a card to switch this off for it. */ .hv-card:not(.no-hover):hover .elementor-icon, .hv-card:not(.no-hover):hover .elementor-icon i { color: #111111 !important; } .hv-card:not(.no-hover):hover .elementor-icon svg { fill: #111111 !important; } .hv-card:not(.no-hover):hover .elementor-view-framed .elementor-icon, .hv-card:not(.no-hover):hover .elementor-view-stacked .elementor-icon { background-color: #FFFFFF !important; border-color: #FFFFFF !important; } /* ---------- 13. CONTENTS LISTS (anchor links) ---------- - Browser anchor jumps (links with #something, or pages opened with #something) leave room for the sticky header. The script keeps --anchor-offset up to date; 120px is the fallback. - The link of the section you are reading / just clicked is highlighted (class set by the script). Works on any Elementor Icon List with 3+ links to #ids on the same page. Add the class no-toc to a widget to switch it off for that widget. */ html { scroll-padding-top: var(--anchor-offset, 120px); } .toc-list .elementor-icon-list-item > a { position: relative; transition: padding-left .2s ease; } .toc-list .elementor-icon-list-item.toc-active > a { padding-left: 14px; } /* yellow marker on the left of the active link */ .toc-list .elementor-icon-list-item.toc-active > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1.4em; transform: translateY(-50%); background: #F2A900; border-radius: 2px; } /* light mode: dark bold text (brand yellow text on white is too faint) */ .toc-list .elementor-icon-list-item.toc-active .elementor-icon-list-text { font-weight: 600; color: #111111 !important; } /* dark mode: brand yellow text */ html.dark-mode .toc-list .elementor-icon-list-item.toc-active .elementor-icon-list-text { color: #FFC400 !important; } html.dark-mode .toc-list .elementor-icon-list-item.toc-active > a::before { background: #FFC400; } @media (prefers-reduced-motion: reduce) { .toc-list .elementor-icon-list-item > a { transition: none; } } /* ---------- 14. ZOOM ON HOVER: logos and icons (whole site) ---------- Only on devices that can hover (no stuck hover on phones). If the visitor has "reduce motion" switched on in their system, the zoom still happens but instantly, without the animation. LOGOS : header / footer site logo and any image whose file name or alt text contains "logo" or "tagline". ICONS : Elementor Icon, Icon Box, Icon List and Social icons, plus Bootstrap icons (). Left alone: theme toggle, carousel arrows, menus, accordion / tab icons. Add the class zoom-hover to any widget or image to give it the effect. Add the class no-zoom to any widget, logo or icon to switch it off. Strength: change scale(1.06) for logos and scale(1.15) for icons below. */ @media (any-hover: hover) { /* smooth zoom in and out */ :is( .elementor-widget-theme-site-logo img, .custom-logo, img[src*="logo" i], img[alt*="logo" i], img[src*="tagline" i], img.zoom-hover, .zoom-hover img, .zoom-hover, .elementor-icon, .elementor-social-icon, .elementor-icon-list-icon, i.bi ):not(:is( .theme-toggle, .theme-toggle *, .swiper *, .elementor-menu-toggle, .elementor-menu-toggle *, .e-n-menu *, .elementor-nav-menu *, .elementor-accordion *, .elementor-toggle *, .e-n-accordion *, .elementor-tabs *, .e-n-tabs *, .no-zoom, .no-zoom * )) { transition: transform var(--zoom-speed, .3s) cubic-bezier(.2, .7, .2, 1); } i.bi:not(.elementor-icon *) { display: inline-block; } /* logos: gentle zoom */ :is( .elementor-widget-theme-site-logo img, .custom-logo, img[src*="logo" i], img[alt*="logo" i], img[src*="tagline" i], img.zoom-hover, .zoom-hover img ):not(:is( .theme-toggle *, .swiper *, .e-n-menu *, .elementor-nav-menu *, .no-zoom, .no-zoom * )):hover { transform: scale(1.06); } /* any element given the class zoom-hover */ .zoom-hover:not(img):not(.no-zoom):hover { transform: scale(1.08); } /* icons: stronger zoom (also when the icon box / card it sits in is hovered) */ :is( .elementor-icon, .elementor-social-icon, .elementor-icon-list-icon, i.bi ):not(:is( .theme-toggle *, .swiper *, .elementor-menu-toggle *, .e-n-menu *, .elementor-nav-menu *, .elementor-accordion *, .elementor-toggle *, .e-n-accordion *, .elementor-tabs *, .e-n-tabs *, .no-zoom, .no-zoom * )):hover, .elementor-widget-icon-box:not(.no-zoom):hover .elementor-icon, .hv-card:not(.no-hover):not(.no-zoom):hover .elementor-icon { transform: scale(1.15); } } /* ---------- 15. ZOOM ON HOVER: every photo on the site (logos and icons excluded) ---------- The script (final-3-script.html) finds each photo and the frame that crops it, then adds: zoom-frame the box around the photo (it crops the zoom, so nothing around it moves) zoom-img-el the photo itself zoom-solo a photo with no tight frame (gets a smaller zoom instead) Logos and icons are left out here. They get the gentle zoom from section 14 instead. Switch it off for one image or card: add the class no-zoom (Elementor > Advanced > CSS Classes). Strength and speed: change the two values on the next line. */ :root { --img-zoom: 1.08; --img-zoom-speed: .5s; } @media (any-hover: hover) { .zoom-frame { overflow: hidden; } .zoom-frame .zoom-img-el, .zoom-img-el.zoom-solo { transition: transform var(--img-zoom-speed) cubic-bezier(.2, .7, .2, 1); } .zoom-frame:hover .zoom-img-el { transform: scale(var(--img-zoom)); } .zoom-img-el.zoom-solo:hover { transform: scale(1.04); } /* Elementor Media Carousel slides use a background photo instead of an */ .elementor-widget-media-carousel .swiper-slide { overflow: hidden; } .elementor-widget-media-carousel .swiper-slide .elementor-carousel-image { transition: transform var(--img-zoom-speed) cubic-bezier(.2, .7, .2, 1); } .elementor-widget-media-carousel .swiper-slide:not(.no-zoom):hover .elementor-carousel-image { transform: scale(var(--img-zoom)); } } /* ---------- 17. BUTTONS in dark mode ---------- The script sorts Elementor buttons into two looks (the classes are set automatically): btn-primary : yellow filled buttons -> dark text and arrow, a lighter yellow + glow on hover btn-ghost : transparent buttons, and dark ones that blend into the page -> light text and arrow, a thin visible outline, yellow outline and text on hover Dark buttons that sit on a yellow section are left alone (they already stand out). Add the class no-btn-style to a button widget to leave it exactly as designed. */ /* keyboard focus */ html.dark-mode .elementor-button:focus-visible { outline: 2px solid #FFC400; outline-offset: 3px; } /* primary (yellow) */ html.dark-mode .elementor-button.btn-primary, html.dark-mode .elementor-button.btn-primary .elementor-button-text, html.dark-mode .elementor-button.btn-primary .elementor-button-icon { color: #111111 !important; } html.dark-mode .elementor-button.btn-primary svg { fill: #111111 !important; } html.dark-mode .elementor-button.btn-primary:hover, html.dark-mode .elementor-button.btn-primary:focus-visible { background-color: #FFD34D !important; box-shadow: 0 6px 18px rgba(255, 196, 0, .25) !important; } /* ghost (transparent, or blends into the page) */ html.dark-mode .elementor-button.btn-ghost { background-color: transparent !important; border-color: #4A4B53 !important; } html.dark-mode .elementor-button.btn-ghost:not(.has-border) { box-shadow: inset 0 0 0 1px #4A4B53 !important; } html.dark-mode .elementor-button.btn-ghost, html.dark-mode .elementor-button.btn-ghost .elementor-button-text, html.dark-mode .elementor-button.btn-ghost .elementor-button-icon { color: #F1F1F1 !important; } html.dark-mode .elementor-button.btn-ghost svg { fill: currentColor !important; } html.dark-mode .elementor-button.btn-ghost:hover, html.dark-mode .elementor-button.btn-ghost:focus-visible { border-color: #FFC400 !important; background-color: rgba(255, 196, 0, .10) !important; } html.dark-mode .elementor-button.btn-ghost:not(.has-border):hover { box-shadow: inset 0 0 0 1px #FFC400 !important; } html.dark-mode .elementor-button.btn-ghost:hover, html.dark-mode .elementor-button.btn-ghost:hover .elementor-button-text, html.dark-mode .elementor-button.btn-ghost:hover .elementor-button-icon { color: #FFC400 !important; } /* buttons inside a card that turns yellow on hover */ html.dark-mode .hv-card:hover .elementor-button.btn-ghost, html.dark-mode .hv-card:hover .elementor-button.btn-ghost .elementor-button-text, html.dark-mode .hv-card:hover .elementor-button.btn-ghost .elementor-button-icon { color: #111111 !important; } html.dark-mode .hv-card:hover .elementor-button.btn-ghost { background-color: transparent !important; border-color: #111111 !important; } html.dark-mode .hv-card:hover .elementor-button.btn-ghost:not(.has-border) { box-shadow: inset 0 0 0 1px #111111 !important; } html.dark-mode .hv-card:hover .elementor-button.btn-primary { background-color: #111111 !important; } html.dark-mode .hv-card:hover .elementor-button.btn-primary, html.dark-mode .hv-card:hover .elementor-button.btn-primary .elementor-button-text, html.dark-mode .hv-card:hover .elementor-button.btn-primary .elementor-button-icon { color: #FFC400 !important; } html.dark-mode .hv-card:hover .elementor-button.btn-primary svg { fill: #FFC400 !important; } /* ---------- 16. REDUCED MOTION (must stay at the very end of the file) ---------- Many Windows PCs have "Animation effects" switched off, and the browser then reports "reduce motion". The zoom effects (sections 14 and 15) still work in that case, but they jump instantly instead of animating. */ :root { --zoom-speed: .3s; } @media (prefers-reduced-motion: reduce) { :root { --zoom-speed: 0s; --img-zoom-speed: 0s; } }/* End custom CSS */