/* ========================================================================== vishnufy.com — repair layer -------------------------------------------------------------------------- vendor.css carries the recovered Astra and Elementor stylesheets. This file only covers what could NOT be recovered: the per-widget Elementor stylesheets that were never archived, and the handful of behaviours that used to be done in JavaScript. Section list 1 Tokens 2 Never hide content behind JavaScript 3 Entrance animations 4 Header, logo and navigation 5 Elementor widgets with no recovered stylesheet 6 The certifications carousel 7 Credential cards 8 Testimonials 9 The contact form and map 10 Accessibility and focus 11 Print ========================================================================== */ /* ----------------------------------------------------------- 1 Tokens - */ :root { --vf-teal-dk: #1a363c; --vf-teal: #2d525a; --vf-gold: #d6a858; --vf-gold-dk: #8a6317; /* 4.83:1 on white — the gold itself is 2.1:1 */ --vf-ink: #22303a; --vf-ink-soft: #4a5a66; /* 7.2:1 on white */ --vf-line: #e2e6ea; --vf-cream: #f7f3eb; --vf-shadow: 0 2px 4px rgba(26, 54, 60, .05), 0 12px 32px rgba(26, 54, 60, .08); } /* ------------------------------ 2 Never hide content behind JavaScript - */ /* The site rendered blank in production because three separate optimisers each hid things until a script they no longer ship put them back. */ .elementor-invisible { visibility: visible !important; } /* LiteSpeed and Seraphinite placeholders, in case any survived the rewrite */ img[src^="data:image/svg+xml"][data-src], img[src^="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAALK"] { visibility: hidden; } .lzl, img.lzl, img.lzl-ing { display: initial !important; opacity: 1 !important; } #preloader, .seraph-accel-bg { display: none !important; } html, body { display: block !important; opacity: 1 !important; } /* Elementor's own guard: a swiper with no JS collapses to zero height */ .swiper:not(.swiper-initialized) .swiper-wrapper { transform: none !important; } /* --------------------------------------------------- 3 Entrance animations */ /* Content is visible by default. site.js adds .vf-reveal-armed to only once it is running, and only then is anything moved. */ .vf-reveal { opacity: 1; } html.vf-reveal-armed .vf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); will-change: opacity, transform; } html.vf-reveal-armed .vf-reveal.vf-shown { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.vf-reveal-armed .vf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ------------------------------------- 4 Header, logo and navigation - */ .site-header { position: relative; z-index: 500; } .ast-main-header-wrap { background: #fff; transition: box-shadow .25s ease, background-color .25s ease; } body:not(.ast-theme-transparent-header) .ast-main-header-wrap { position: sticky; top: 0; } .ast-main-header-wrap.vf-stuck { box-shadow: 0 1px 0 var(--vf-line), var(--vf-shadow); } .site-logo-img img, img.custom-logo { width: auto; height: auto; max-height: 62px; max-width: 150px; /* Astra's recovered setting */ display: block; } .main-header-menu, .main-header-menu ul { list-style: none; margin: 0; padding: 0; } .main-header-menu { display: flex; align-items: center; gap: .35rem; } .main-header-menu > li > a, .main-header-menu .menu-link { display: block; padding: .7rem .95rem; color: var(--vf-ink); font-weight: 600; font-size: .84rem; letter-spacing: .06em; text-decoration: none; border-radius: 6px; transition: color .18s ease, background-color .18s ease; } .main-header-menu > li > a:hover, .main-header-menu > li > a:focus-visible, .main-header-menu > li.current-menu-item > a { color: var(--vf-teal-dk); background: var(--vf-cream); } .main-header-menu > li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--vf-gold); } /* The mobile trigger. Astra's own script is gone; this is the fallback. */ .menu-toggle, .main-header-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--vf-line); border-radius: 8px; background: #fff; color: var(--vf-ink); cursor: pointer; } .menu-toggle:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 2px; } @media (max-width: 921px) { .menu-toggle, .main-header-menu-toggle { display: inline-flex; } .main-header-bar-navigation { display: none; } .main-header-bar-navigation.vf-nav-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--vf-line); box-shadow: var(--vf-shadow); padding: .5rem .75rem 1rem; max-height: calc(100vh - 80px); overflow-y: auto; } .main-header-bar-navigation.vf-nav-open .main-header-menu { flex-direction: column; align-items: stretch; gap: 0; } .main-header-bar-navigation.vf-nav-open .main-header-menu > li > a { padding: .85rem .5rem; border-bottom: 1px solid var(--vf-line); } body.vf-nav-locked { overflow: hidden; } /* with no JavaScript at all the menu is simply always open */ html:not(.vf-js) .main-header-bar-navigation { display: block; } html:not(.vf-js) .menu-toggle { display: none; } } /* --------------------- 5 Elementor widgets with no recovered stylesheet - Only widget-heading and widget-text-editor were ever archived. These are the structural rules for the rest of the widgets the pages actually use; all the colour and spacing still comes from the page's own inline CSS. */ .elementor-widget-image { text-align: center; } .elementor-widget-image img { display: inline-block; max-width: 100%; height: auto; } .elementor-widget-image a { display: inline-block; } .elementor-image-box-wrapper { display: flex; gap: 1rem; align-items: flex-start; } .elementor-image-box-img { flex: none; } .elementor-image-box-img img { max-width: 100%; height: auto; display: block; } .elementor-image-box-content { min-width: 0; } .elementor-image-box-title { margin: 0 0 .4rem; } .elementor-image-box-description { margin: 0; } .elementor-widget-image-box.elementor-position-top .elementor-image-box-wrapper, .elementor-widget-image-box.elementor-vertical-align-top .elementor-image-box-wrapper { flex-direction: column; align-items: center; text-align: center; } .elementor-icon-box-wrapper { display: flex; gap: 1rem; align-items: flex-start; } .elementor-icon-box-icon { flex: none; } .elementor-icon-box-title { margin: 0 0 .35rem; } .elementor-icon-box-description { margin: 0; } .elementor-widget-icon-box.elementor-position-top .elementor-icon-box-wrapper { flex-direction: column; align-items: center; text-align: center; } .elementor-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--vf-teal); } .elementor-icon svg { width: 1em; height: 1em; fill: currentColor; } .elementor-icon i { font-style: normal; } .elementor-widget-divider { --divider-pattern-height: 1px; } .elementor-divider { display: flex; } .elementor-divider-separator { display: block; width: 100%; border-top: 1px solid var(--vf-line); margin: 0 auto; } .elementor-widget-divider--element-align-left .elementor-divider { justify-content: flex-start; } .elementor-widget-divider--element-align-right .elementor-divider { justify-content: flex-end; } .elementor-widget-divider--element-align-start .elementor-divider { justify-content: flex-start; } .elementor-widget-divider--element-align-end .elementor-divider { justify-content: flex-end; } .elementor-widget-divider .elementor-divider__text { padding: 0 .75rem; white-space: nowrap; } /* skill bars */ .elementor-progress-wrapper { background: #eef1f3; border-radius: 999px; overflow: hidden; height: 100%; min-height: 12px; } .elementor-progress-bar { display: flex; align-items: center; justify-content: flex-end; height: 100%; min-height: 12px; background: var(--vf-teal); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding-right: .55rem; border-radius: 999px; /* Elementor animated this from 0; with no JS it must start at full width, which the inline style already carries */ } .elementor-title { margin: 0 0 .35rem; font-weight: 700; } .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; border: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .elementor-button:hover { transform: translateY(-1px); } .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: .5rem; } /* FAQ accordion */ .elementor-toggle .elementor-tab-title { cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: 1rem 0; border-bottom: 1px solid var(--vf-line); } .elementor-toggle .elementor-tab-title:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 2px; } .elementor-toggle .elementor-toggle-icon { flex: none; transition: transform .2s ease; } .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon { transform: rotate(90deg); } .elementor-toggle .elementor-toggle-icon-closed { display: inline-block; } .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon-closed { display: none; } .elementor-toggle .elementor-toggle-icon-opened { display: none; } .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon-opened { display: inline-block; } .elementor-toggle .elementor-tab-content { padding: .25rem 0 1.1rem; } /* with no JavaScript every answer is simply shown */ html:not(.vf-js) .elementor-toggle .elementor-tab-content { display: block !important; } /* Unlimited Elements image card — its own stylesheet is inline in the page, this only stops the container collapsing */ .uc_classic_content_container_holder { position: relative; } .uc_classic_content img { max-width: 100%; height: auto; } /* ---------------------------------------- 6 The certifications carousel - Swiper's script is gone. The markup stays; it becomes a scroll-snap track that works with a finger, a trackpad, the arrows or the keyboard. */ .elementor-main-swiper .swiper-wrapper { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; transform: none !important; } .elementor-main-swiper .swiper-slide { flex: 0 0 clamp(240px, 30%, 340px); scroll-snap-align: start; width: auto !important; height: auto !important; margin: 0 !important; } .elementor-main-swiper .swiper-slide > a { display: block; height: 100%; text-decoration: none; } .elementor-swiper { position: relative; } .elementor-swiper-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--vf-teal-dk); border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow); } .elementor-swiper-button-prev { left: -8px; } .elementor-swiper-button-next { right: -8px; } .elementor-swiper-button:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 2px; } html:not(.vf-js) .elementor-swiper-button { display: none; } .swiper-pagination { position: static; display: flex; gap: .4rem; justify-content: center; margin-top: 1rem; } .swiper-pagination-bullet { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: #c8d0d6; opacity: 1; cursor: pointer; } .swiper-pagination-bullet-active { background: var(--vf-teal); width: 22px; border-radius: 999px; } html:not(.vf-js) .swiper-pagination { display: none; } /* --------------------------------------------------- 7 Credential cards - The seven certificate images did not survive anywhere. Rather than invent a picture of a certificate, each slide now states the credential and links to the issuer's own verification page. */ .vf-cert { display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; height: 100%; min-height: 190px; padding: 1.4rem 1.3rem; border-radius: 14px; background: linear-gradient(150deg, rgba(214, 168, 88, .10), rgba(45, 82, 90, .05)), #fff; border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a:hover .vf-cert, a:focus-visible .vf-cert { transform: translateY(-3px); border-color: var(--vf-gold); box-shadow: 0 6px 12px rgba(26, 54, 60, .07), 0 20px 44px rgba(26, 54, 60, .13); } .vf-cert-issuer { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--vf-gold-dk); } .vf-cert-name { font-size: 1.12rem; line-height: 1.3; font-weight: 700; color: var(--vf-teal-dk); } .vf-cert-verify { font-size: .78rem; font-weight: 600; color: var(--vf-teal); display: inline-flex; align-items: center; gap: .4rem; } .vf-cert-verify::after { content: ""; width: .5em; height: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; } a:hover .vf-cert-verify::after { transform: rotate(45deg) translate(2px, -2px); } .vf-cert::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--vf-gold); } /* ------------------------------------------------------- 8 Testimonials */ .elementor-testimonial-wrapper img, .uc_classic_content img[width="130"] { border-radius: 50%; object-fit: cover; } /* ------------------------------------------- 9 The contact form and map */ /* Contact Form 7 posted to the WordPress REST API, which no longer exists. The form is left in place and visually intact but cannot submit, so it is marked up honestly rather than silently failing. */ .wpcf7 form.vf-dead .wpcf7-submit { cursor: not-allowed; opacity: .6; } .vf-form-note { margin: .9rem 0 0; padding: .85rem 1rem; border-left: 3px solid var(--vf-gold); background: var(--vf-cream); color: var(--vf-ink); font-size: .9rem; line-height: 1.5; border-radius: 0 8px 8px 0; } .vf-form-note a { color: var(--vf-teal-dk); font-weight: 700; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; max-width: 100%; padding: .8rem .9rem; border: 1px solid var(--vf-line); border-radius: 8px; font: inherit; color: var(--vf-ink); background: #fff; } .wpcf7 textarea { min-height: 130px; resize: vertical; } .wpcf7 input:focus-visible, .wpcf7 textarea:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 1px; border-color: var(--vf-teal); } iframe { max-width: 100%; border: 0; } .elementor-widget-google_maps iframe, .elementor-custom-embed iframe { width: 100%; display: block; border-radius: 10px; } /* ------------------------------------ 10 Accessibility and focus states */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 2px; border-radius: 3px; } .skip-link:focus, .screen-reader-text:focus { position: fixed !important; left: 1rem; top: 1rem; z-index: 9999; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; padding: .75rem 1.1rem; background: var(--vf-teal-dk); color: #fff; border-radius: 8px; text-decoration: none; } img { max-width: 100%; height: auto; } img[width][height] { height: auto; } /* nothing may push the page sideways */ html, body { overflow-x: hidden; } .elementor-section, .elementor-container, .elementor-widget-wrap { min-width: 0; } /* ------------------------------------------------------------ 11 Print */ @media print { .ast-main-header-wrap, .elementor-swiper-button, .swiper-pagination, .menu-toggle, #chaty-widget { display: none !important; } .elementor-main-swiper .swiper-wrapper { display: block; overflow: visible; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; } }