/* ========================================================================== Faranetwork — "Fara Glass" · CHROME (promo bar · header · menu · footer) -------------------------------------------------------------------------- faranetworks.com does not use WoodMart's Header Builder: the header and footer are Elementor Pro / ElementsKit templates (.ekit-template-content-header / -footer). So everything here targets those wrappers and the Elementor / ElementsKit / Ajax-Search-Lite widget classes, and uses :has() to find rows by the widget they contain instead of by element id (ids change when the template is re-saved). Elementor prints its per-widget CSS late, so selectors start with `body.fn-theme .ekit-template-…` and key declarations use !important. ========================================================================== */ /* ---------- 0. One font everywhere in the chrome (Elementor Pro custom fonts set their own per widget) ---------- */ body.fn-theme .ekit-template-content-header :is(.elementor-heading-title, .elementor-button, .ekit-header-info a, .elementskit-navbar-nav a, .elementskit-section-title, .ekit-heading--title, .asl_w .probox input, .elementor-menu-cart__product-name a, .elementor-menu-cart__subtotal, .elementor-menu-cart__footer-buttons a), body.fn-theme .ekit-template-content-footer :is(.elementor-heading-title, .elementor-icon-list-text, .elementor-icon-list-item > a, .elementor-image-box-title, .elementor-image-box-description, .elementskit-section-title, .ekit-heading--title, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-button) { font-family: var(--fn-font) !important; } /* ---------- 1. Promo bar (discount-code strip) ---------- */ body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) { position: relative; overflow: hidden; padding-block: 7px !important; background: linear-gradient(100deg, #0b1e3a 0%, #0c3a63 52%, #0369a1 100%) #0b1e3a !important; } body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) > .elementor-background-overlay, body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) > .elementor-motion-effects-container > .elementor-motion-effects-layer { background: none !important; } body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info)::before { /* dotted grid */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info)::after { /* travelling shine */ content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(125, 211, 252, .28), transparent); animation: fnShine 6s ease-in-out infinite; pointer-events: none; } body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) .elementor-widget-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; position: relative; z-index: 1; } body.fn-theme .ekit-template-content-header .ekit-header-info { margin: 0; padding: 0; } body.fn-theme .ekit-template-content-header .ekit-header-info > li > a { color: rgba(255, 255, 255, .92) !important; font-size: .86rem !important; font-weight: 500 !important; line-height: 1.9 !important; text-decoration: none; } body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) .elementor-widget-heading > .elementor-widget-container { margin: 0 !important; } body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) .elementor-widget-heading .elementor-heading-title { display: inline-block; padding: 1px 16px; border-radius: 999px; border: 1px dashed rgba(253, 230, 138, .75); background: rgba(255, 255, 255, .09); color: #fde68a !important; font-size: .86rem !important; font-weight: 800 !important; letter-spacing: 0; line-height: 1.9; text-shadow: none !important; -webkit-text-stroke: 0 !important; direction: ltr; } /* ---------- 2. Logo / search / account row → white glass ---------- */ body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) { position: relative; z-index: 60; /* backdrop-filter makes this row its own stacking context — without a z-index the live-search dropdown slid UNDER the menu bar and the page */ padding-block: 10px !important; /* NO backdrop-filter/transform/filter here: any of them turns this row into the containing block of every position:fixed descendant — the Elementor mini-cart panel (a full-screen fixed overlay) then opened squeezed and clipped inside the row. */ background: rgba(255, 255, 255, .97) !important; border: 0 !important; border-bottom: 1px solid rgba(56, 189, 248, .2) !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo)::after { /* glow line */ content: ''; position: absolute; bottom: -1px; inset-inline: 24%; height: 2px; background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, #0ea5e9, #38bdf8, transparent); background-size: 200% 100%; animation: fnLine 5s ease-in-out infinite; pointer-events: none; } body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img { width: auto !important; max-width: 100% !important; height: 58px !important; object-fit: contain; transition: transform .5s var(--fn-ease), filter .4s; } body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo a:hover img { transform: scale(1.04); filter: drop-shadow(0 10px 16px rgba(14, 165, 233, .35)); } /* Ajax Search Lite → glass pill with a gradient magnifier */ body.fn-theme .ekit-template-content-header .asl_w_container .probox { height: 50px !important; border-radius: 999px !important; border: 1.5px solid rgba(56, 189, 248, .45) !important; background: rgba(255, 255, 255, .96) !important; box-shadow: 0 10px 30px rgba(56, 189, 248, .14) !important; overflow: hidden; transition: border-color .3s, box-shadow .3s; } body.fn-theme .ekit-template-content-header .asl_w_container .probox:focus-within { border-color: var(--fn-sky-400) !important; box-shadow: 0 0 0 4px rgba(56, 189, 248, .18), 0 10px 30px rgba(56, 189, 248, .18) !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .proinput input.orig { font-size: .95rem !important; font-weight: 500 !important; color: var(--fn-text) !important; background: transparent !important; box-shadow: none !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .promagnifier { width: 42px !important; height: 42px !important; margin: 3px !important; border-radius: 50% !important; background: var(--fn-grad) var(--fn-sky-500) !important; box-shadow: 0 8px 18px rgba(14, 165, 233, .4); } body.fn-theme .ekit-template-content-header .asl_w_container .probox .promagnifier .innericon svg { fill: #fff !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .prosettings { background: transparent !important; } /* round glass icon buttons: wishlist heart + mini-cart */ body.fn-theme .ekit-template-content-header .elementor-widget-icon .elementor-icon, body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button { display: inline-grid !important; place-items: center; width: 46px; height: 46px; padding: 0 !important; border-radius: 50% !important; background: #fff !important; border: 1px solid rgba(56, 189, 248, .3) !important; box-shadow: 0 8px 22px rgba(56, 189, 248, .16); color: var(--fn-sky-600) !important; transition: transform .35s var(--fn-ease), box-shadow .35s, border-color .3s; } body.fn-theme .ekit-template-content-header .elementor-widget-icon .elementor-icon:hover, body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button:hover { transform: translateY(-3px); border-color: var(--fn-sky-400) !important; box-shadow: var(--fn-shadow-hover); } body.fn-theme .ekit-template-content-header .elementor-widget-icon .elementor-icon svg { height: 22px !important; width: 22px; fill: var(--fn-sky-600) !important; } body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button .elementor-button-text { display: none; } body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button .elementor-button-icon { position: relative; font-size: 20px; color: var(--fn-sky-600); } body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button .elementor-button-icon svg { fill: var(--fn-sky-600); } body.fn-theme .ekit-template-content-header .elementor-button-icon-qty { position: absolute !important; top: -12px !important; inset-inline-end: -12px !important; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--fn-grad) var(--fn-sky-500) !important; color: #fff !important; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 6px 14px rgba(14, 165, 233, .45); } /* login / register button */ body.fn-theme .ekit-template-content-header .elementor-widget-button .elementor-button { position: relative; overflow: hidden; padding: 12px 26px !important; border: 0 !important; border-radius: 999px !important; background: var(--fn-grad) var(--fn-sky-500) !important; color: #fff !important; font-size: .92rem !important; font-weight: 800 !important; box-shadow: var(--fn-glow); transition: transform .35s var(--fn-ease), box-shadow .35s; } body.fn-theme .ekit-template-content-header .elementor-widget-button .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(14, 165, 233, .45); } /* same 46px height for all three controls; the login label sat at the top of its pill (inline-block + padding) → centre it */ body.fn-theme .ekit-template-content-header .elementor-widget-button .elementor-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px !important; line-height: 1.2 !important; text-align: center; } /* cart: Elementor sized the button 46×44 and pinned the count bubble to the 20px icon (so it floated off the circle, squashed) → square button, bubble anchored to the button's corner */ body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button { position: relative; width: 46px; height: 46px; min-height: 46px; line-height: 1; } body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button .elementor-button-icon { position: static; width: 22px; height: 22px; font-size: 22px; } body.fn-theme .ekit-template-content-header .elementor-menu-cart__toggle_button .elementor-button-icon svg { width: 22px; height: 22px; } body.fn-theme .ekit-template-content-header .elementor-button-icon-qty { display: grid !important; top: -4px !important; inset-inline-end: -4px !important; width: auto; min-width: 20px; height: 20px; box-sizing: content-box; border: 2px solid #fff; } body.fn-theme .ekit-template-content-header .elementor-widget-button .elementor-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s var(--fn-ease); } body.fn-theme .ekit-template-content-header .elementor-widget-button .elementor-button:hover::after { transform: translateX(130%); } /* signed-in visitors: account pill + dropdown instead of the login button (markup from inc/account.php, toggle in fn.js) */ body.fn-theme .ekit-template-content-header .fn-user { position: relative; } body.fn-theme .ekit-template-content-header .fn-user__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; margin: 0; padding: 5px 8px 5px 14px; border: 1px solid rgba(56, 189, 248, .3); border-radius: 999px; background: #fff; color: var(--fn-ink); font-family: inherit; font-size: .9rem; font-weight: 800; line-height: 1.3; cursor: pointer; box-shadow: 0 8px 22px rgba(56, 189, 248, .16); transition: transform .35s var(--fn-ease), box-shadow .35s, border-color .3s; } body.fn-theme .ekit-template-content-header .fn-user__btn:hover, body.fn-theme .ekit-template-content-header .fn-user.is-open .fn-user__btn { transform: translateY(-2px); border-color: var(--fn-sky-400); box-shadow: var(--fn-shadow-hover); } body.fn-theme .ekit-template-content-header .fn-user__av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--fn-grad) var(--fn-sky-500); box-shadow: 0 6px 14px rgba(14, 165, 233, .4); } body.fn-theme .ekit-template-content-header .fn-user__av svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } body.fn-theme .ekit-template-content-header .fn-user__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.fn-theme .ekit-template-content-header .fn-user__chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--fn-sky-600); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; } body.fn-theme .ekit-template-content-header .fn-user.is-open .fn-user__chev { transform: rotate(180deg); } body.fn-theme .ekit-template-content-header .fn-user__menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 80; width: 260px; padding: 10px; border: 1px solid var(--fn-glass-brd); border-radius: 22px; background: rgba(255, 255, 255, .98); box-shadow: var(--fn-shadow-hover); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .35s var(--fn-ease), visibility .25s; } body.fn-theme .ekit-template-content-header .fn-user__menu::before { content: ''; position: absolute; inset-inline: 0; top: -12px; height: 12px; } /* hover bridge */ body.fn-theme .ekit-template-content-header .fn-user:hover .fn-user__menu, body.fn-theme .ekit-template-content-header .fn-user.is-open .fn-user__menu { opacity: 1; visibility: visible; transform: none; } body.fn-theme .ekit-template-content-header .fn-user__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 8px 10px 12px; border-bottom: 1px solid rgba(56, 189, 248, .18); } body.fn-theme .ekit-template-content-header .fn-user__head small { display: block; color: var(--fn-mute); font-size: .74rem; font-weight: 600; } body.fn-theme .ekit-template-content-header .fn-user__head strong { display: block; color: var(--fn-ink); font-size: .95rem; font-weight: 900; line-height: 1.6; } body.fn-theme .ekit-template-content-header .fn-user__menu > a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--fn-text); font-size: .9rem; font-weight: 700; text-decoration: none; transition: background .25s, color .25s; } body.fn-theme .ekit-template-content-header .fn-user__menu > a:hover { background: rgba(56, 189, 248, .12); color: var(--fn-sky-600); } body.fn-theme .ekit-template-content-header .fn-user__menu > a.fn-user__out { margin-top: 4px; color: var(--fn-err); } body.fn-theme .ekit-template-content-header .fn-user__menu > a.fn-user__out:hover { background: rgba(239, 68, 68, .1); color: var(--fn-err); } @media (max-width: 767px) { body.fn-theme .ekit-template-content-header .fn-user__name { display: none; } body.fn-theme .ekit-template-content-header .fn-user__btn { padding: 5px 10px 5px 8px; } } /* ---------- 3. Menu row → deep-ocean bar with pill items ---------- */ body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-ekit-nav-menu) { position: relative; z-index: 30; background: linear-gradient(100deg, #0b1e3a 0%, #0c3a63 52%, #0369a1 100%) #0b1e3a !important; border: 0 !important; box-shadow: 0 16px 36px rgba(3, 105, 161, .24); } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-ekit-nav-menu) > .elementor-motion-effects-container > .elementor-motion-effects-layer, body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-ekit-nav-menu) > .elementor-background-overlay { background: none !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-ekit-nav-menu)::before { content: ''; position: absolute; top: 0; inset-inline: 18%; height: 2px; background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, #38bdf8, transparent); background-size: 200% 100%; animation: fnLine 5s ease-in-out infinite; pointer-events: none; } body.fn-theme .ekit-template-content-header .elementskit-menu-container { background: transparent !important; height: 58px !important; } /* centred on one line (the list hugged the right edge and wrapped its last items onto a second row below ~1300px) */ body.fn-theme .ekit-template-content-header .elementskit-navbar-nav { align-items: stretch; justify-content: center !important; flex-wrap: nowrap !important; margin-inline: auto !important; height: 58px; } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li { display: flex; align-items: center; height: 100%; } /* invisible bridge under every pill: the cursor never leaves the
  • on its way to the sub-menu */ body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li.elementskit-dropdown-has::after { content: ''; position: absolute; inset-inline: 0; top: 100%; height: 14px; } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link { height: auto !important; margin: 0 2px; padding: 7px 16px !important; border-radius: 999px !important; background: transparent; color: #fff !important; font-size: .94rem !important; font-weight: 700 !important; line-height: 1.9 !important; transition: background .3s, color .3s, transform .35s var(--fn-ease), box-shadow .3s !important; } @media (max-width: 1280px) { /* 11 items must still fit on one row */ body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link { padding: 7px clamp(7px, .9vw, 12px) !important; font-size: .86rem !important; } } @media (max-width: 1100px) { /* smallest desktop layout (1025–1100px) */ body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link { padding: 6px !important; margin: 0 1px; font-size: .8rem !important; } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a .elementskit-submenu-indicator, body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon { margin-inline-start: 3px !important; } } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li:hover > a.ekit-menu-nav-link { background: rgba(255, 255, 255, .15) !important; transform: translateY(-1px); } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link, body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li.current-menu-ancestor > a.ekit-menu-nav-link, body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link.active { background: var(--fn-grad) var(--fn-sky-500) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(14, 165, 233, .35); } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a .elementskit-submenu-indicator, body.fn-theme .ekit-template-content-header .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon { color: #fff !important; fill: #fff !important; opacity: .9; padding: 0 !important; margin-inline-start: 8px; } /* dropdowns + mega-menu panels → light glass, dark text */ body.fn-theme .ekit-template-content-header .elementskit-navbar-nav .elementskit-submenu-panel, body.fn-theme .ekit-template-content-header .elementskit-navbar-nav .elementskit-dropdown { margin-top: 0 !important; /* no gap: any gap between the item and its panel drops :hover and closes the menu mid-move */ padding: 10px !important; border: 1px solid var(--fn-glass-brd) !important; border-radius: 0 0 22px 22px !important; background: rgba(255, 255, 255, .97) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--fn-shadow-hover) !important; min-width: 240px; } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav .elementskit-submenu-panel > li > a { padding: 10px 14px !important; border-radius: 14px; color: var(--fn-text) !important; font-weight: 600; background: transparent !important; transition: background .25s, color .25s, padding .3s var(--fn-ease); } body.fn-theme .ekit-template-content-header .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a { background: rgba(56, 189, 248, .12) !important; color: var(--fn-sky-600) !important; padding-inline-start: 20px !important; } body.fn-theme .ekit-template-content-header .elementskit-megamenu-panel { margin-top: 0 !important; border-radius: 0 0 26px 26px; overflow: hidden; box-shadow: var(--fn-shadow-hover); border: 1px solid var(--fn-glass-brd); background: rgba(255, 255, 255, .98); } body.fn-theme .ekit-template-content-header .elementskit-megamenu-panel .ekit-heading--title, body.fn-theme .ekit-template-content-header .elementskit-megamenu-panel .elementskit-section-title { color: var(--fn-ink) !important; font-weight: 800 !important; } body.fn-theme .ekit-template-content-header .elementskit-megamenu-panel a { transition: color .25s, padding .3s var(--fn-ease); } body.fn-theme .ekit-template-content-header .elementskit-megamenu-panel a:hover { color: var(--fn-sky-600) !important; } /* tablet header: the desktop mega menu is swapped for a plain Elementor Pro menu (4 items) in its own container */ body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-nav-menu) { position: relative; z-index: 30; background: linear-gradient(100deg, #0b1e3a 0%, #0c3a63 52%, #0369a1 100%) #0b1e3a !important; border: 0 !important; box-shadow: 0 16px 36px rgba(3, 105, 161, .24); } body.fn-theme .ekit-template-content-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item { margin: 0 2px; padding: 7px 18px !important; border-radius: 999px !important; background: transparent; color: #fff !important; font-size: .94rem !important; font-weight: 700 !important; line-height: 1.9 !important; transition: background .3s, transform .35s var(--fn-ease), box-shadow .3s; } body.fn-theme .ekit-template-content-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item::before, body.fn-theme .ekit-template-content-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item::after { display: none !important; } body.fn-theme .ekit-template-content-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover { background: rgba(255, 255, 255, .15); transform: translateY(-1px); } body.fn-theme .ekit-template-content-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active { background: var(--fn-grad) var(--fn-sky-500); box-shadow: 0 8px 22px rgba(14, 165, 233, .35); } /* tablet / mobile header */ body.fn-theme .ekit-template-content-header .elementor-widget-nav-menu .elementor-menu-toggle { border-radius: 14px; background: rgba(56, 189, 248, .12); color: var(--fn-sky-700); } body.fn-theme .ekit-template-content-header .elementor-nav-menu--dropdown { border-radius: 0 0 22px 22px; background: rgba(255, 255, 255, .98); box-shadow: var(--fn-shadow-hover); } body.fn-theme .ekit-template-content-header .elementor-nav-menu--dropdown a { font-weight: 700; } @media (max-width: 1024px) { body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) { padding-block: 8px !important; } body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img { height: 46px !important; } } /* ---------- 4. Footer ---------- */ /* USP strip (delivery / guarantee / support / shipping) → floating glass cards on the page background */ body.fn-theme .ekit-template-content-footer .e-con.e-parent:has(.elementor-widget-image-box) { position: relative; z-index: 2; background: transparent !important; padding-block: clamp(24px, 4vw, 48px) !important; } body.fn-theme .ekit-template-content-footer .e-con.e-parent:has(.elementor-widget-image-box) > .elementor-motion-effects-container > .elementor-motion-effects-layer, body.fn-theme .ekit-template-content-footer .e-con.e-parent:has(.elementor-widget-image-box)::before { background: none !important; } body.fn-theme .ekit-template-content-footer .e-con.e-parent:has(.elementor-widget-image-box) > .e-con-inner { gap: clamp(12px, 2vw, 22px); } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box { position: relative; padding: 18px 14px; border-radius: 24px; background: var(--fn-glass); -webkit-backdrop-filter: blur(var(--fn-blur)); backdrop-filter: blur(var(--fn-blur)); border: 1px solid var(--fn-glass-brd); box-shadow: var(--fn-shadow-card); text-align: center; transition: transform .5s var(--fn-ease), box-shadow .5s var(--fn-ease); } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box:hover { transform: translateY(-6px); box-shadow: var(--fn-shadow-hover); } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box .elementor-image-box-img { margin: 0 auto 8px !important; width: 58px !important; height: 58px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, #fff, #e0f2fe); box-shadow: 0 10px 24px rgba(56, 189, 248, .22), inset 0 1px 0 #fff; } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box .elementor-image-box-img img { width: 34px !important; height: 34px; object-fit: contain; } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box .elementor-image-box-title { margin: 0; color: var(--fn-ink) !important; font-size: .95rem !important; font-weight: 800 !important; } /* the three dark sections */ body.fn-theme .ekit-template-content-footer .elementor-top-section { position: relative; color: rgba(255, 255, 255, .78); background: radial-gradient(50% 70% at 90% 0%, rgba(56, 189, 248, .22), transparent 62%), radial-gradient(40% 60% at 4% 100%, rgba(99, 102, 241, .2), transparent 62%), linear-gradient(180deg, #0b1e3a, #08162b) #0b1e3a !important; } body.fn-theme .ekit-template-content-footer .elementor-top-section > .elementor-background-overlay, body.fn-theme .ekit-template-content-footer .elementor-top-section > .elementor-motion-effects-container > .elementor-motion-effects-layer { background: none !important; } body.fn-theme .ekit-template-content-footer .elementor-top-section:first-of-type::before { /* glow line on the dark slab */ content: ''; position: absolute; top: 0; inset-inline: 18%; height: 3px; background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, #38bdf8, transparent); background-size: 200% 100%; animation: fnLine 5s ease-in-out infinite; } /* contact bar (phone / address / email) */ body.fn-theme .ekit-template-content-footer .elementor-widget-icon-list.elementor-icon-list--layout-inline > .elementor-widget-container { margin: 18px 0 0 !important; padding: 14px 24px !important; border-radius: 22px !important; background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } body.fn-theme .ekit-template-content-footer .elementor-icon-list-icon i { color: var(--fn-sky-300) !important; } body.fn-theme .ekit-template-content-footer .elementor-icon-list-icon svg { fill: var(--fn-sky-300) !important; } body.fn-theme .ekit-template-content-footer .elementor-icon-list-text { color: rgba(255, 255, 255, .86) !important; font-size: .92rem; transition: color .25s; } body.fn-theme .ekit-template-content-footer .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--fn-sky-300) !important; } /* column titles + about text */ body.fn-theme .ekit-template-content-footer .elementskit-section-title, body.fn-theme .ekit-template-content-footer .ekit-heading--title { position: relative; color: #fff !important; font-weight: 800 !important; font-size: 1.02rem !important; padding-bottom: 14px; } body.fn-theme .ekit-template-content-footer .elementskit-section-title > span { color: var(--fn-sky-300) !important; } body.fn-theme .ekit-template-content-footer .elementor-top-section .elementskit-section-title-wraper.text_right .elementskit-section-title::after, body.fn-theme .ekit-template-content-footer .elementor-top-section .elementskit-section-title-wraper.text_center .elementskit-section-title::after { content: ''; position: absolute; bottom: 0; inset-inline: 0 auto; margin-inline: auto; width: 36px; height: 3px; border-radius: 3px; background: var(--fn-grad) var(--fn-sky-500); } body.fn-theme .ekit-template-content-footer .elementor-top-section .elementskit-section-title-wraper.text_right .elementskit-section-title::after { margin-inline: 0; inset-inline-start: 0; } body.fn-theme .ekit-template-content-footer .elementor-widget-text-editor, body.fn-theme .ekit-template-content-footer .elementor-widget-text-editor p { color: rgba(255, 255, 255, .72) !important; font-size: .92rem !important; line-height: 2.1 !important; text-align: justify; } body.fn-theme .ekit-template-content-footer .elementor-top-section a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .25s, padding .3s var(--fn-ease); } body.fn-theme .ekit-template-content-footer .elementor-top-section a:hover { color: var(--fn-sky-300); } body.fn-theme .ekit-template-content-footer .elementor-widget-icon-list.elementor-icon-list--layout-traditional .elementor-icon-list-item:hover { transform: translateX(-4px); } body.fn-theme .ekit-template-content-footer .elementor-widget-icon-list.elementor-icon-list--layout-traditional .elementor-icon-list-text { color: rgba(255, 255, 255, .8) !important; } /* social icons → round glass */ body.fn-theme .ekit-template-content-footer .elementor-social-icon { width: 44px; height: 44px; border-radius: 16px !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16); transition: transform .35s var(--fn-ease), background .3s, box-shadow .3s; } body.fn-theme .ekit-template-content-footer .elementor-social-icon:hover { background: var(--fn-grad) var(--fn-sky-500) !important; transform: translateY(-4px); box-shadow: var(--fn-glow); } body.fn-theme .ekit-template-content-footer .elementor-social-icon i { color: #fff !important; } body.fn-theme .ekit-template-content-footer .elementor-social-icon svg { fill: #fff !important; } /* bottom bar */ body.fn-theme .ekit-template-content-footer .elementor-top-section:last-of-type { border-top: 1px solid rgba(255, 255, 255, .1) !important; } body.fn-theme .ekit-template-content-footer .elementor-top-section:last-of-type .elementskit-section-title { color: rgba(255, 255, 255, .62) !important; font-weight: 500 !important; font-size: .82rem !important; padding: 0; } body.fn-theme .ekit-template-content-footer .elementor-top-section:last-of-type .elementskit-section-title > span { color: var(--fn-sky-300) !important; } /* header icons: Elementor gave the heart a -73% margin and the cart -4%; reset so they sit side by side */ body.fn-theme .ekit-template-content-header .elementor-widget-icon > .elementor-widget-container, body.fn-theme .ekit-template-content-header .elementor-widget-woocommerce-menu-cart > .elementor-widget-container { margin: 0 !important; padding: 0 !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner { align-items: center; gap: 12px; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:not(:has(.asl_w_container)) { align-items: center; justify-content: center; } body.fn-theme .ekit-template-content-header .e-con:has(.asl_w_container) { align-items: stretch !important; } body.fn-theme .ekit-template-content-header .elementor-widget-shortcode:has(.asl_w_container) { width: 100%; } /* footer: the three "rows" are inner sections of one top section; the last one is the blue copyright bar */ body.fn-theme .ekit-template-content-footer .elementor-inner-section, body.fn-theme .ekit-template-content-footer .elementor-inner-section > .elementor-background-overlay, body.fn-theme .ekit-template-content-footer .elementor-inner-section > .elementor-motion-effects-container > .elementor-motion-effects-layer { background: transparent !important; background-image: none !important; } body.fn-theme .ekit-template-content-footer .elementor-inner-section:last-of-type { background: rgba(0, 0, 0, .22) !important; border-top: 1px solid rgba(255, 255, 255, .1) !important; } /* newsletter band (archive template) -> deep-ocean slab with a glass pill field */ body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) { position: relative; overflow: hidden; width: calc(100% - 2 * var(--fn-gutter)) !important; max-width: 1240px; margin: clamp(24px, 4vw, 56px) auto !important; padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px) !important; border-radius: var(--fn-r-xl); background: radial-gradient(60% 90% at 90% 0%, rgba(56, 189, 248, .34), transparent 62%), radial-gradient(50% 80% at 4% 100%, rgba(99, 102, 241, .28), transparent 62%), linear-gradient(155deg, #0b1e3a, #0c3a63 55%, #0369a1) #0b1e3a !important; box-shadow: 0 40px 90px rgba(3, 105, 161, .28); } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) > .elementor-motion-effects-container > .elementor-motion-effects-layer { background: none !important; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form)::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) > * { position: relative; z-index: 1; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) .elementor-heading-title { color: #fff !important; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem) !important; font-weight: 900 !important; line-height: 1.6 !important; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) .elementor-field-group .elementor-field:not(.elementor-select-wrapper) { height: 54px; padding: 0 24px !important; border: 1px solid rgba(255, 255, 255, .3) !important; border-radius: 999px !important; background: rgba(255, 255, 255, .1) !important; color: #fff !important; font-family: var(--fn-font); transition: border-color .3s, box-shadow .3s, background .3s; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) .elementor-field-group .elementor-field::placeholder { color: rgba(255, 255, 255, .6) !important; letter-spacing: 0 !important; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) .elementor-field-group .elementor-field:focus { border-color: var(--fn-sky-300) !important; background: rgba(255, 255, 255, .16) !important; box-shadow: 0 0 0 4px rgba(125, 211, 252, .22); outline: none; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) .elementor-button[type="submit"] { height: 54px; padding: 0 34px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #fde68a, #f59e0b) #f59e0b !important; color: #0b1e3a !important; font-family: var(--fn-font) !important; font-size: 1rem !important; font-weight: 900 !important; box-shadow: 0 14px 34px rgba(245, 158, 11, .4); transition: transform .35s var(--fn-ease), box-shadow .35s; } body.fn-theme .e-con.e-parent:has(> .elementor-widget-form) .elementor-button[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(245, 158, 11, .5); } /* thin blue divider container between the newsletter and the USP strip */ body.fn-theme .ekit-template-content-footer .elementor-element-97634de { background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, #38bdf8, transparent) !important; opacity: .65; } /* vector logo in the header (lockup is ~2.4:1) and above the footer about-text */ body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img.fn-logo-img { height: 56px !important; width: auto !important; max-width: 100% !important; } body.fn-theme .ekit-template-content-footer .elementor-widget-text-editor::before { content: ""; display: block; height: 58px; margin-bottom: 14px; background: url("../img/logo-white.svg") no-repeat right center / contain; } /* ---------- 5. Phones ---------- */ @media (max-width: 767px) { /* promo strip: smaller text, tighter */ body.fn-theme .ekit-template-content-header .elementor-top-section:has(.ekit-header-info) { padding-block: 6px !important; } body.fn-theme .ekit-template-content-header .ekit-header-info, body.fn-theme .ekit-template-content-header .ekit-header-info a { font-size: .78rem !important; line-height: 1.9 !important; } /* logo row: logo + wishlist + cart + login on one line, search under it (the template stacks everything in a column) */ body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "logo heart cart btn" "search search search search"; align-items: center; gap: 10px 8px; padding-inline: 14px !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con { --width: auto; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:nth-child(1) { grid-area: logo; align-items: flex-start; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:nth-child(2) { grid-area: search; width: 100% !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:nth-child(3) { grid-area: heart; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:nth-child(4) { grid-area: cart; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:nth-child(5) { grid-area: btn; } body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img.fn-logo-img { height: 42px !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) .elementor-button { display: inline-flex !important; align-items: center; justify-content: center; height: 44px !important; min-height: 0 !important; padding: 0 16px !important; font-size: .82rem !important; line-height: 1 !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) .elementor-button .elementor-button-content-wrapper { align-items: center; } /* floating WhatsApp sits above the bottom bar of the features plugin */ body.fn-theme:has(.fnf-mnav) .fn-wa { bottom: calc(86px + env(safe-area-inset-bottom)); } body.fn-theme { padding-bottom: 0; } } /* bottom bar from faranetwork-features → glass */ @media (max-width: 782px) { body.fn-theme .fnf-mnav { background: rgba(255, 255, 255, .92) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-top: 1px solid var(--fn-glass-brd) !important; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 40px rgba(14, 165, 233, .16) !important; } body.fn-theme .fnf-mnav a { font-family: var(--fn-font); font-weight: 700; color: var(--fn-slate) !important; } body.fn-theme .fnf-mnav a:hover, body.fn-theme .fnf-mnav a:focus-visible { color: var(--fn-sky-600) !important; } body.fn-theme .fnf-mnav-count { background: var(--fn-grad) var(--fn-sky-500) !important; } } /* phones: the 4 footer feature cards as a compact 2×2 grid instead of four tall rows */ @media (max-width: 767px) { body.fn-theme .ekit-template-content-footer .e-con.e-parent:has(.elementor-widget-image-box) > .e-con-inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.fn-theme .ekit-template-content-footer .e-con.e-parent:has(.elementor-widget-image-box) > .e-con-inner > .e-con { width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box { padding: 16px 10px !important; } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box .elementor-image-box-img { width: 48px !important; height: 48px; border-radius: 16px; } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box .elementor-image-box-img img { width: 28px !important; height: 28px; } body.fn-theme .ekit-template-content-footer .elementor-widget-image-box .elementor-image-box-title { font-size: .82rem !important; } } @media (max-width: 782px) { body.fn-theme:has(.fnf-mnav) .ekit-template-content-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } } /* live search (Ajax Search Lite): transparent wrapper (no white box around the pill) + glass results dropdown above everything */ body.fn-theme .ekit-template-content-header .asl_w_container, body.fn-theme .ekit-template-content-header .asl_w_container .asl_m { background: transparent !important; box-shadow: none !important; } body.fn-theme .asl_r.asl_w { margin-top: 10px !important; border: 1px solid var(--fn-glass-brd) !important; border-radius: 22px !important; background: rgba(255, 255, 255, .98) !important; box-shadow: var(--fn-shadow-hover) !important; font-family: var(--fn-font) !important; z-index: 100000 !important; } body.fn-theme .asl_r .item { border-radius: 14px; transition: background .25s; } body.fn-theme .asl_r .item:hover { background: rgba(56, 189, 248, .1) !important; } body.fn-theme .asl_r .item h3 a, body.fn-theme .asl_r .asl_content h3 a { color: var(--fn-ink) !important; font-family: var(--fn-font) !important; font-weight: 700 !important; } /* ---------- 2b. Compact header row: bigger logo, slim search, no dead space ---------- */ /* The template padded the row, its inner box AND every cell by 10px, gave the search 56% of the width and the cells fixed percentage widths (the row was 129px tall for a 56px logo). Now: logo | search (capped, centred) | heart · cart · login. */ @media (min-width: 768px) { body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) { padding-block: 6px !important; min-height: 0 !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner { flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 14px !important; padding-block: 0 !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con { --width: auto; flex: 0 0 auto; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* search cell: takes the free space but never more than 440px, sits in the middle */ body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:has(.asl_w_container) { flex: 1 1 280px; max-width: 440px; margin-inline: auto !important; } body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img.fn-logo-img, body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img { height: 68px !important; width: auto !important; } } /* desktop: centred between the logo and the buttons it was NOT centred on the page (the two sides differ: logo 169px, buttons ~230px). Pin the search to the true middle of the row; the heart · cart · login group is pushed to the far edge by an auto margin. */ @media (min-width: 1025px) { body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner { position: relative; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:has(.asl_w_container) { position: absolute; top: 50%; left: 50%; inset-inline-start: auto; z-index: 2; width: clamp(280px, 30vw, 440px) !important; max-width: none; margin: 0 !important; transform: translate(-50%, -50%); } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) > .e-con-inner > .e-con:has(> .elementor-widget-icon) { margin-inline-start: auto !important; } } @media (min-width: 768px) { body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo > .elementor-widget-container { padding: 0 !important; margin: 0 !important; } /* slimmer search */ body.fn-theme .ekit-template-content-header .asl_w_container .probox { height: 44px !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .promagnifier { width: 34px !important; height: 34px !important; margin: 3px !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .proinput input.orig { font-size: .88rem !important; } /* cart / login: no extra padding cells */ body.fn-theme .ekit-template-content-header .elementor-widget-woocommerce-menu-cart, body.fn-theme .ekit-template-content-header .elementor-widget-icon { margin: 0 !important; } body.fn-theme .ekit-template-content-header .e-con.e-parent:has(.elementor-widget-theme-site-logo) .elementor-button { height: 44px !important; min-height: 0 !important; padding: 0 20px !important; font-size: .88rem !important; } } @media (min-width: 768px) and (max-width: 1024px) { body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img.fn-logo-img, body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img { height: 56px !important; } } @media (max-width: 767px) { body.fn-theme .ekit-template-content-header .elementor-widget-theme-site-logo img.fn-logo-img { height: 50px !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox { height: 42px !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .promagnifier { width: 32px !important; height: 32px !important; } } /* the search box is content-box with 8px padding + 1px border, so "height: 44px" really drew 62px — size it as a border-box */ body.fn-theme .ekit-template-content-header .asl_w_container .probox { box-sizing: border-box !important; padding: 0 !important; } @media (min-width: 768px) { body.fn-theme .ekit-template-content-header .asl_w_container .probox { height: 44px !important; } body.fn-theme .ekit-template-content-header .asl_w_container .probox .promagnifier { width: 34px !important; height: 34px !important; margin: 4px !important; } } @media (max-width: 767px) { body.fn-theme .ekit-template-content-header .asl_w_container .probox .promagnifier { width: 32px !important; height: 32px !important; margin: 4px !important; } } /* WoodMart gives every