/* ========================================================================== Auer Networks - theme styles Dark surface, lime accent, Montserrat. Kept intentionally small. ========================================================================== */ :root { --an-accent: #e5ff00; --an-bg: #1c1c1c; --an-bg-soft: #252525; --an-bg-card: #2a2a2a; --an-text: #f2f2f2; --an-text-muted: #a8a8a8; --an-border: rgba(255, 255, 255, 0.12); --an-container: 1240px; --an-gutter: 24px; --an-radius: 14px; --an-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --an-header-h: 84px; } /* --------------------------------------------------------------- Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchor targets clear the sticky header. */ scroll-padding-top: calc(var(--an-header-h) + 16px); /* "clip" rather than "hidden": hidden would turn into a scroll container and break the scroll-snap used by the one-page slides. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--an-bg); color: var(--an-text); font-family: var(--an-font); font-size: 16px; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--an-accent); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #fff; } h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); } h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); } h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } p { margin: 0 0 1.2em; } :focus-visible { outline: 3px solid var(--an-accent); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--an-accent); color: #111; font-weight: 700; border-radius: 8px; } /* ---------------------------------------------------------- Container */ .an-container { width: 100%; max-width: var(--an-container); margin-inline: auto; padding-inline: var(--an-gutter); } /* ------------------------------------------------------------- Header */ .an-header { position: sticky; top: 0; z-index: 500; background: rgba(28, 28, 28, 0.88); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--an-border); } .an-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--an-header-h); } .an-header__brand { flex: 0 0 auto; } .an-header__brand img, .custom-logo { max-height: 48px; width: auto; } .an-logo--text { font-weight: 900; font-size: 1.25rem; color: #fff; letter-spacing: -0.02em; } .an-header__contact { display: flex; gap: 22px; margin-inline-start: auto; flex-wrap: wrap; } .an-contact__item { display: inline-flex; align-items: center; gap: 8px; color: var(--an-text-muted); font-size: 0.9rem; white-space: nowrap; } .an-contact__item:hover { color: var(--an-accent); text-decoration: none; } .an-contact__icon { color: var(--an-accent); } .an-contact--stacked { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* ------------------------------------------------- Slide-in navigation */ /* The previous theme used an off-canvas panel rather than a top menu bar, so the burger is shown at every width and the menu slides in from the right. */ .an-burger { display: inline-flex; align-items: center; gap: 12px; margin-inline-start: 26px; padding: 10px 16px; background: none; border: 1px solid var(--an-border); border-radius: 999px; color: var(--an-text); font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .an-burger:hover { border-color: var(--an-accent); color: var(--an-accent); } .an-burger__box { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; } .an-burger__line { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: width 0.2s ease; } .an-burger__line:nth-child(1) { width: 20px; } .an-burger__line:nth-child(2) { width: 14px; } .an-burger__line:nth-child(3) { width: 17px; } .an-burger:hover .an-burger__line { width: 20px; } /* ---- Panel */ .an-navwrap { position: fixed; inset: 0; z-index: 900; } .an-navwrap[hidden] { display: none; } .an-navwrap__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.35s ease; } .an-navwrap.is-open .an-navwrap__backdrop { opacity: 1; } .an-nav { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--an-bg-soft); border-left: 1px solid var(--an-border); box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.6, 0, 0.2, 1); overflow-y: auto; overscroll-behavior: contain; } .an-navwrap.is-open .an-nav { transform: translateX(0); } .an-nav__close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; background: none; border: 1px solid var(--an-border); border-radius: 50%; color: var(--an-text); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .an-nav__close:hover { border-color: var(--an-accent); color: var(--an-accent); transform: rotate(90deg); } .an-nav__inner { display: flex; flex-direction: column; justify-content: center; gap: 40px; min-height: 100%; padding: 96px 48px 48px; } .an-menu { margin: 0; padding: 0; list-style: none; } .an-menu li { position: relative; } .an-menu > li + li { margin-top: 4px; } .an-menu a { display: inline-block; padding: 7px 0; color: var(--an-text); font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; transition: color 0.2s ease, transform 0.2s ease; } .an-menu a:hover, .an-menu .current-menu-item > a, .an-menu .current_page_item > a { color: var(--an-accent); text-decoration: none; transform: translateX(8px); } .an-menu .sub-menu { margin: 4px 0 10px; padding-inline-start: 18px; list-style: none; border-inline-start: 1px solid var(--an-border); } .an-menu .sub-menu a { font-size: 1rem; font-weight: 600; } .an-nav__foot { padding-top: 28px; border-top: 1px solid var(--an-border); } .an-nav__foot .an-social { margin-top: 18px; } /* Staggered entrance for the menu items. */ .an-navwrap.is-open .an-menu > li { animation: an-nav-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } .an-navwrap.is-open .an-menu > li:nth-child(1) { animation-delay: 0.08s; } .an-navwrap.is-open .an-menu > li:nth-child(2) { animation-delay: 0.13s; } .an-navwrap.is-open .an-menu > li:nth-child(3) { animation-delay: 0.18s; } .an-navwrap.is-open .an-menu > li:nth-child(4) { animation-delay: 0.23s; } .an-navwrap.is-open .an-menu > li:nth-child(5) { animation-delay: 0.28s; } .an-navwrap.is-open .an-menu > li:nth-child(6) { animation-delay: 0.33s; } .an-navwrap.is-open .an-menu > li:nth-child(7) { animation-delay: 0.38s; } .an-navwrap.is-open .an-menu > li:nth-child(8) { animation-delay: 0.43s; } @keyframes an-nav-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .an-nav { transition: transform 0.001s linear; } .an-navwrap.is-open .an-menu > li { animation: none; } } @media (max-width: 560px) { .an-nav__inner { padding: 88px 28px 36px; gap: 28px; } .an-burger__label { display: none; } .an-burger { padding: 11px 13px; } } /* --------------------------------------------------------------- Main */ .an-main { display: block; min-height: 50vh; } .an-page__header { padding: 64px 0 28px; } .an-page__title { margin: 0; } .an-page__desc { color: var(--an-text-muted); } .an-prose { padding-bottom: 72px; max-width: 820px; } .an-prose h2, .an-prose h3 { margin-top: 1.6em; } .an-prose ul, .an-prose ol { padding-inline-start: 1.3em; } .an-prose li { margin-bottom: 0.4em; } .an-prose a { text-decoration: underline; } /* -------------------------------------------------------------- Button */ .an-button { display: inline-block; padding: 14px 30px; background: var(--an-accent); color: #111; font-weight: 700; font-size: 0.95rem; border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } .an-button:hover { filter: brightness(1.08); transform: translateY(-2px); text-decoration: none; color: #111; } /* ------------------------------------------------------- Posts / cards */ .an-posts { display: grid; gap: 28px; padding-bottom: 72px; } .an-posts--cols-2 { grid-template-columns: repeat(2, 1fr); } .an-posts--cols-3 { grid-template-columns: repeat(3, 1fr); } .an-posts--cols-4 { grid-template-columns: repeat(4, 1fr); } .an-post-card { background: var(--an-bg-card); border: 1px solid var(--an-border); border-radius: var(--an-radius); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; } .an-post-card:hover { transform: translateY(-4px); border-color: var(--an-accent); } .an-post-card__link { color: inherit; display: block; height: 100%; } .an-post-card__link:hover { text-decoration: none; } .an-post-card__media { aspect-ratio: 16 / 10; overflow: hidden; } .an-post-card__media img { width: 100%; height: 100%; object-fit: cover; } .an-post-card__body { padding: 22px; } .an-post-card__date { display: block; margin-bottom: 8px; color: var(--an-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .an-post-card__title { font-size: 1.15rem; margin-bottom: 0.5em; } .an-post-card__excerpt { color: var(--an-text-muted); font-size: 0.94rem; margin: 0; } .an-posts__empty { padding: 20px 24px; border: 1px dashed var(--an-border); border-radius: var(--an-radius); color: var(--an-text-muted); } /* ---------------------------------------------------------- Pagination */ .pagination, .an-postnav { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 72px; } .an-postnav { justify-content: space-between; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--an-border); border-radius: 10px; color: var(--an-text); } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--an-accent); border-color: var(--an-accent); color: #111; text-decoration: none; } /* -------------------------------------------------------------- Search */ .an-search { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .an-search__input { flex: 1 1 220px; padding: 13px 18px; background: var(--an-bg-card); border: 1px solid var(--an-border); border-radius: 999px; color: var(--an-text); font-family: inherit; font-size: 0.95rem; } /* ----------------------------------------------------------------- 404 */ .an-404 { padding: 90px 0 110px; text-align: center; max-width: 640px; } .an-404__code { font-size: clamp(4rem, 16vw, 9rem); font-weight: 900; line-height: 1; margin: 0; color: var(--an-accent); } .an-404 .an-search { justify-content: center; } /* -------------------------------------------------------------- Footer */ .an-footer { margin-top: 40px; background: var(--an-bg-soft); border-top: 1px solid var(--an-border); } .an-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-block: 64px 48px; } .an-footer__heading { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--an-text-muted); margin-bottom: 18px; } .an-footer__text { color: var(--an-text-muted); font-size: 0.94rem; margin-top: 16px; } .an-footer__address { color: var(--an-text-muted); font-size: 0.9rem; } .an-footer__menu { list-style: none; margin: 0; padding: 0; } .an-footer__menu li { margin-bottom: 10px; } .an-footer__menu a { color: var(--an-text-muted); font-size: 0.94rem; } .an-footer__menu a:hover { color: var(--an-accent); } .an-social { display: flex; gap: 10px; margin-top: 20px; } .an-social__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--an-border); border-radius: 50%; color: var(--an-text); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .an-social__link svg { display: block; } .an-social__link:hover { background: var(--an-accent); border-color: var(--an-accent); color: #111; text-decoration: none; } .an-footer__bottom { border-top: 1px solid var(--an-border); padding-block: 20px; font-size: 0.85rem; color: var(--an-text-muted); } .an-footer__bottom p { margin: 0; } /* ------------------------------------------------------------- To top */ .an-totop { position: fixed; right: 20px; bottom: 20px; z-index: 400; width: 46px; height: 46px; background: var(--an-accent); color: #111; border: 0; border-radius: 50%; font-size: 1.1rem; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s; } .an-totop.is-visible { opacity: 1; visibility: visible; } /* Keep clear of the accessibility widget button. */ @media (min-width: 768px) { .an-totop { right: 84px; } } /* ---------------------------------------------------- Elementor bridge */ /* Elementor supplies its own section padding; make sure our dark surface and typography win where the builder does not set anything explicitly. */ .an-page--builder { padding: 0; } .elementor-widget-text-editor, .elementor-widget-heading { color: inherit; } .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--an-container); } /* Accent spans inside headings, carried over from the old theme's markup. */ .has-color-accent { color: var(--an-accent); } /* ================================================== One-page slide mode === Replaces the old theme's pagePiling slider. Each slide fills the viewport and snaps into place, but a slide taller than the screen simply scrolls through instead of being clipped - which is what the old slider got wrong. Pure CSS: no library, no layout thrash, works on touch. */ .an-onepage [id^="an-slide-"] { min-height: 100dvh; /* "safe" matters: with plain `center`, content taller than the slide overflows past the top edge where it cannot be scrolled to. */ justify-content: safe center; padding-block: 40px; } /* ---- Stacked pager (replaces the old theme's pagePiling.js). Slides are absolutely stacked in ascending z-order. Every slide up to the current one rests at translateY(0); later ones wait just below the fold. Advancing simply moves the next slide to 0, so it rises up and covers the one before it - the "piling" effect. Going back sends it down again. */ .an-pile, .an-pile body { overflow: hidden; height: 100%; } .an-pile .an-header { position: fixed; top: 0; left: 0; right: 0; z-index: 600; } .an-pile .an-main { position: fixed; inset: 0; overflow: hidden; min-height: 0; } .an-pile [id^="an-slide-"] { position: absolute; inset: 0; min-height: 0; height: 100dvh; /* Essential: stacked slides must be opaque, or the slide underneath shows through and the two read as one jumbled screen. */ background-color: var(--an-bg); /* Tall slides scroll inside themselves before the pager moves on. */ overflow-y: auto; overscroll-behavior: contain; padding-top: calc(var(--an-header-h) + 24px); padding-bottom: 40px; transform: translateY(100%); transition: transform 0.9s cubic-bezier(0.86, 0, 0.07, 1); will-change: transform; backface-visibility: hidden; } .an-pile [id^="an-slide-"].is-current, .an-pile [id^="an-slide-"].is-past { transform: translateY(0); } /* The slide carrying the footer needs to sit at the top so the footer can be scrolled to, rather than being vertically centred. */ .an-pile [id^="an-slide-"]:last-of-type { justify-content: flex-start; } /* Older engines without `safe` alignment: fall back to top-aligning anything that overflows, which JS flags. */ .an-pile [id^="an-slide-"].is-tall { justify-content: flex-start; } .an-pile .an-footer { margin-top: 60px; } /* ---- Compact scale for pager mode. The content was authored for a free-scrolling page, so most slides were 1.5-2 screens tall - which meant the reader spent most of the time scrolling inside a slide rather than paging between them. Tightening type and spacing here lets the shorter slides land on exactly one screen. Genuinely long slides (Services, Kundenstimmen) still scroll internally, by design. */ .an-pile .elementor-widget-spacer { --spacer-size: 20px !important; } .an-pile .elementor-widget-spacer .elementor-spacer { height: var(--spacer-size); } .an-pile h1, .an-pile .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; } /* Several "headings" here are really body copy set large, so they dominate the slide height. Tightened leading buys back most of a screen. */ .an-pile h2, .an-pile .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.14; } .an-pile .elementor-widget-text-editor { font-size: 0.95rem; } .an-pile .elementor-counter .elementor-counter-number-wrapper { font-size: clamp(2.2rem, 4vw, 3.4rem); } .an-pile .elementor-widget-icon-box .elementor-icon-box-wrapper { padding: 20px 18px; } .an-pile .elementor-testimonial-wrapper { padding: 22px 20px; } .an-pile .elementor-widget-icon-box .elementor-icon img { width: 36px; height: 36px; } /* Content images scale to the slide rather than dictating its height. */ .an-pile .elementor-widget-image img { max-height: 46vh; width: auto; margin-inline: auto; } /* The contact form is the tallest single block on the page. */ .an-pile .wpcf7 .vlt-form-group { margin-bottom: 11px; } .an-pile .wpcf7 textarea { min-height: 92px; } .an-pile .wpcf7 input[type="text"], .an-pile .wpcf7 input[type="email"], .an-pile .wpcf7 input[type="tel"], .an-pile .wpcf7 select, .an-pile .wpcf7 .vlt-form-control, .an-pile .wpcf7 textarea { padding: 10px 15px; } .an-pile .wpcf7 input[type="submit"] { padding: 12px 30px; } /* Slim scrollbar inside slides so the internal scroll is discoverable. */ .an-pile [id^="an-slide-"]::-webkit-scrollbar { width: 8px; } .an-pile [id^="an-slide-"]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { /* Still pages - just without the long travel animation. */ .an-pile [id^="an-slide-"] { transition: transform 0.001s linear; } } @media (max-width: 900px) { /* Below this width the pager is switched off in JS and content flows normally; hijacking touch scroll on a phone is more annoying than impressive. */ .an-onepage [id^="an-slide-"] { min-height: 0; padding-block: 56px; } } /* ============================================== Slide decorative layer === Rebuilds what the old theme drew from ACF: a slowly zooming background photo ("Ken Burns"), a dark scrim for legibility, the hero portrait panel, and the outlined rings. All of it is decorative and sits behind the content. */ [id^="an-slide-"] { position: relative; isolation: isolate; } /* Content must sit above the artwork. Elementor's own children get z-index 1. */ [id^="an-slide-"] > .e-con-inner, [id^="an-slide-"] > .e-con, [id^="an-slide-"] > .elementor-element { position: relative; z-index: 2; } .an-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } /* ---- Background photo + Ken Burns zoom */ .an-decor__bg { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; transform: scale(1.02); animation: an-kenburns 26s ease-in-out infinite alternate; will-change: transform; } @keyframes an-kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(0, -1.5%, 0); } } /* Dark scrim: opacity comes from the decor map via a custom property. */ .an-decor__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 18, 18, 0.55) 0%, rgba(18, 18, 18, var(--an-scrim, 0.8)) 55%, rgba(18, 18, 18, 0.95) 100%); } /* ---- Hero portrait panel (was the theme's "particle" on the home slide) */ .an-decor__portrait { position: absolute; top: 0; right: 0; bottom: 0; width: 45vw; background-position: top left; background-size: cover; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); } @media (max-width: 991px) { .an-decor__portrait { width: 46vw; opacity: 0.5; } } @media (max-width: 767px) { .an-decor__portrait { width: 92vw; right: -34vw; opacity: 0.28; } } /* ---- Outlined rings */ .an-decor__circle { position: absolute; border: 1px solid rgba(229, 255, 0, 0.28); border-radius: 50%; } .an-decor__circle--small { width: 220px; height: 220px; } .an-decor__circle--large { width: 520px; height: 520px; } .an-decor__circle--top-right { top: -90px; right: -90px; } .an-decor__circle--bottom-left { bottom: -90px; left: -90px; } .an-decor__circle--bottom-right { bottom: -90px; right: -90px; } .an-decor__circle--top-left { top: -90px; left: -90px; } /* The hero ring sat behind the portrait, vertically centred on the right. */ .an-decor__circle--hero { width: 40vw; height: 40vw; right: 5vw; top: 50%; transform: translateY(-50%); border-color: rgba(229, 255, 0, 0.22); } @media (max-width: 767px) { .an-decor__circle--large { width: 300px; height: 300px; } .an-decor__circle--hero { width: 78vw; height: 78vw; right: -18vw; } } @media (prefers-reduced-motion: reduce) { .an-decor__bg { animation: none; transform: scale(1.02); } } /* ------------------------------------------------------- Reveal on scroll */ .an-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } .an-reveal.is-visible { opacity: 1; transform: none; } /* If the observer never runs (JS disabled/failed), content must still show. */ .no-js .an-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .an-reveal { opacity: 1 !important; transform: none !important; transition: none; } .an-onepage { scroll-snap-type: none; } } /* --------------------------------------------------------- Slide dot nav */ .an-dots { position: fixed; top: 50%; right: 22px; z-index: 450; display: flex; flex-direction: column; gap: 14px; transform: translateY(-50%); } .an-dots__dot { position: relative; width: 11px; height: 11px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .an-dots__dot:hover { border-color: var(--an-accent); transform: scale(1.25); } .an-dots__dot.is-active { background: var(--an-accent); border-color: var(--an-accent); } /* Label on hover */ .an-dots__dot::after { content: attr(data-label); position: absolute; right: 22px; top: 50%; transform: translateY(-50%); padding: 4px 10px; background: var(--an-bg-card); border: 1px solid var(--an-border); border-radius: 6px; color: var(--an-text); font-size: 0.72rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .an-dots__dot:hover::after, .an-dots__dot:focus-visible::after { opacity: 1; } /* Hide on small screens and when the accessibility widget would overlap. */ @media (max-width: 900px) { .an-dots { display: none; } } /* Elementor core widgets default to dark text; make them legible on the dark surface. Anything set explicitly in the builder still wins over these. */ .elementor-widget-heading .elementor-heading-title { color: #fff; } .elementor-widget-text-editor { color: var(--an-text-muted); } /* Some copy was pasted into the editor as 
, which rendered in a monospace
   face unlike the rest of the site. Keep the author's line breaks, drop the
   monospace look and let it wrap on narrow screens. */
.elementor-widget-text-editor pre,
.an-prose pre {
	margin: 0 0 1.2em;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Real code blocks keep their monospace treatment. */
.an-prose pre code,
.an-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--an-bg-card);
	padding: 0.15em 0.4em;
	border-radius: 5px;
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title { color: #fff; }

.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description { color: var(--an-text-muted); }

.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon-box .elementor-icon img { color: var(--an-accent); fill: var(--an-accent); }

.elementor-widget-icon-box .elementor-icon img { width: 44px; height: 44px; }

/* Service / contact cards */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	height: 100%;
	padding: 28px 24px;
	background: var(--an-bg-card);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	border-color: var(--an-accent);
	transform: translateY(-3px);
}

/* Counter */
.elementor-counter .elementor-counter-number-wrapper {
	color: var(--an-accent);
	font-weight: 900;
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	line-height: 1;
}

.elementor-counter .elementor-counter-title {
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	text-align: inherit;
	margin-top: 10px;
}

/* Testimonials.
   The old theme showed these in a carousel (an Elementor Pro feature). Free
   Elementor stacks them, which made the section enormously tall, so they are
   laid out as a grid instead. Any non-testimonial sibling (the decorative
   image) spans the full width so it is not pulled into a grid cell. */
/* The container that holds them was a shrink-to-fit flex item (it used to hold
   a single full-width slider widget). With plain widgets inside it collapsed to
   ~20px, which squeezed every quote into a one-character-wide column. Force it
   back to full width.
   Note the `.e-con >` prefix: Elementor's own `.e-con > .e-con-inner` rule has
   equal specificity and loads after the theme, so it would otherwise win. */
/* The original row was "heading column 42%" + "slider column 100%". That only
   worked because the slider showed one quote at a time. Those widths
   over-subscribe the row, and flex-shrink crushed the quote column to ~20px.
   Let the row wrap and give the quotes their own full-width line instead. */
.e-con-inner:has(> .e-con > .e-con-inner > .elementor-widget-testimonial) {
	flex-wrap: wrap;
}

.e-con:has(> .e-con-inner > .elementor-widget-testimonial) {
	flex: 1 0 100%;   /* no shrink: this is what collapsed before */
	width: 100%;
	max-width: 100%;
}

.e-con > .e-con-inner:has(> .elementor-widget-testimonial),
.elementor-widget-wrap:has(> .elementor-widget-testimonial) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

.e-con > .e-con-inner:has(> .elementor-widget-testimonial) > :not(.elementor-widget-testimonial),
.elementor-widget-wrap:has(> .elementor-widget-testimonial) > :not(.elementor-widget-testimonial) {
	grid-column: 1 / -1;
}

/* Grid items default to min-width:auto, which would let a long unbroken word
   blow the column out again. */
.elementor-widget-testimonial { min-width: 0; }

@media (max-width: 780px) {
	.e-con > .e-con-inner:has(> .elementor-widget-testimonial),
	.elementor-widget-wrap:has(> .elementor-widget-testimonial) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Testimonial */
.elementor-testimonial-wrapper {
	height: 100%;
	padding: 30px 28px;
	background: var(--an-bg-card);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius);
}

/* Where no image was ever set, Elementor falls back to its grey placeholder.png
   (testimonial avatars, and the team photos which were empty in the old theme
   too). Hide only that placeholder - a real photo added later still displays. */
.elementor-testimonial-image:has(img[src*="elementor/assets/images/placeholder"]),
.elementor-image-box-img:has(img[src*="elementor/assets/images/placeholder"]) { display: none; }

.elementor-testimonial-wrapper .elementor-testimonial-content { color: var(--an-text); font-size: 0.98rem; }
.elementor-testimonial-wrapper .elementor-testimonial-name { color: var(--an-accent); font-weight: 700; }
.elementor-testimonial-wrapper .elementor-testimonial-job { color: var(--an-text-muted); font-size: 0.85rem; }

/* Buttons.
   Elementor ships its own button stylesheet that can be enqueued after the
   theme's, so these few properties are forced rather than relying on order.
   Anything set explicitly per-widget in the builder still produces inline CSS,
   which continues to win over this. */
.elementor-widget-button .elementor-button,
.elementor-button {
	background-color: var(--an-accent) !important;
	color: #111 !important;
	border-radius: 999px;
	font-weight: 700;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.elementor-widget-button .elementor-button:hover,
.elementor-button:hover,
.elementor-button:focus { filter: brightness(1.08); transform: translateY(-2px); }

/* Divider */
.elementor-divider-separator { border-top-color: var(--an-border) !important; }

/* ---- Partner logo carousel.
   The logo set is mixed: some are dark artwork meant for a light page
   (SentinelOne, HP, Dell, Ubiquiti), others are white "negative" versions
   (Sophos, Keeper, Hornetsecurity, Microsoft). No single backdrop can show
   both, so every logo is normalised to a white silhouette - consistent, and it
   keeps the dark theme intact. Hovering restores the real brand colours. */

/* Every logo sits in an identically sized rounded chip, so the row reads as one
   deliberate set. Only the chip's fill differs, chosen per logo by JS from the
   artwork's own brightness:
     - dark artwork  -> white chip   (what it was drawn for)
     - light artwork -> faint chip on the dark page
   Nothing is recoloured, so each brand keeps its exact colours. */

.elementor-widget-image-carousel .swiper-slide img {
	box-sizing: content-box;
	height: 44px;
	max-height: 44px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	padding: 12px 18px;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.elementor-widget-image-carousel .swiper-slide img:hover { transform: translateY(-3px); }

/* Light / "negative" artwork (Sophos, Keeper, Hornetsecurity, Microsoft). */
.elementor-widget-image-carousel .swiper-slide img.an-logo--light {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.10);
}

.elementor-widget-image-carousel .swiper-slide img.an-logo--light:hover {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(229, 255, 0, 0.35);
}

/* Dark artwork (SentinelOne, HP, Dell, Ubiquiti) plus anything with its own
   opaque background (Lenovo) - these need a light chip to be readable. */
.elementor-widget-image-carousel .swiper-slide img.an-logo--dark {
	background: #fff;
	border-color: rgba(255, 255, 255, 0.9);
}

.elementor-widget-image-carousel .swiper-slide img.an-logo--dark:hover {
	border-color: var(--an-accent);
}

/* Icon boxes that intentionally have no icon should not reserve the space. */
.elementor-widget-icon-box .elementor-icon-box-icon:empty { display: none; }
.elementor-widget-icon-box .elementor-icon-box-icon:has(.elementor-icon:empty) { display: none; }

/* Contact Form 7.
   The form markup still carries the old theme's vlt-* class names, so those
   are styled here rather than rewriting the form itself. */
.wpcf7 .vlt-form-group { margin-bottom: 18px; }

.wpcf7 .vlt-form-group--with-label > label,
.wpcf7 > form > p > label { display: block; margin-bottom: 8px; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 .vlt-form-control,
.wpcf7 textarea {
	width: 100%;
	padding: 14px 18px;
	background: var(--an-bg-card);
	border: 1px solid var(--an-border);
	border-radius: 10px;
	color: var(--an-text);
	font-family: inherit;
	font-size: 0.95rem;
}

.wpcf7 textarea { min-height: 150px; resize: vertical; }

.wpcf7 select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--an-accent) 50%),
	                  linear-gradient(135deg, var(--an-accent) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.wpcf7 select option { background: var(--an-bg-card); color: var(--an-text); }

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--an-text-muted); opacity: 0.8; }

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit,
.wpcf7 .vlt-btn {
	padding: 15px 36px;
	background: var(--an-accent);
	border: 0;
	border-radius: 999px;
	color: #111;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover { filter: brightness(1.08); transform: translateY(-2px); }

.wpcf7 label { font-size: 0.9rem; }

/* Consent checkbox row */
.wpcf7 .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; }
.wpcf7 .wpcf7-list-item { margin: 0; }

/* Validation + response messages */
.wpcf7 .wpcf7-not-valid-tip { color: #ff6b6b; font-size: 0.85rem; margin-top: 6px; }

.wpcf7 .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid var(--an-border);
	font-size: 0.92rem;
}

.wpcf7 form.sent .wpcf7-response-output { border-color: var(--an-accent); color: var(--an-accent); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #ff6b6b; color: #ff6b6b; }

/* -------------------------------------------------------- Breakpoints */

@media (max-width: 1024px) {
	.an-posts--cols-3,
	.an-posts--cols-4 { grid-template-columns: repeat(2, 1fr); }

	.an-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.an-header__contact { display: none; }
}

@media (max-width: 640px) {
	:root { --an-gutter: 18px; --an-header-h: 72px; }

	.an-posts--cols-2,
	.an-posts--cols-3,
	.an-posts--cols-4 { grid-template-columns: 1fr; }

	.an-footer__inner { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 32px; }

	.an-page__header { padding: 40px 0 20px; }
}