Bentheomega
یک سایت دیگر با وردپرس فارسی
/* =========================================
01. THEME CONFIGURATION
========================================= */
#bto-navigation {
--bto-green: #c9f64b;
--bto-red: #ff525d;
--bto-black: #090d10;
--bto-white: #ffffff;
--bto-muted: #b9c4c9;
/* Requested transparency */
--bto-opacity: .25;
--bto-blur: 24px;
--bto-header-height: 76px;
--bto-max-width: 1360px;
font-family: Tahoma, "Vazirmatn", Arial, sans-serif;
color: var(--bto-white);
position: relative;
z-index: 999999;
-webkit-font-smoothing: antialiased;
}
#bto-navigation[lang="en"] {
font-family: Inter, Arial, sans-serif;
}
#bto-navigation *,
#bto-navigation *::before,
#bto-navigation *::after {
box-sizing: border-box;
}
#bto-navigation a {
text-decoration: none;
color: inherit;
}
#bto-navigation button {
font: inherit;
cursor: pointer;
}
#bto-navigation button:focus-visible,
#bto-navigation a:focus-visible,
#bto-navigation summary:focus-visible {
outline: 2px solid var(--bto-green);
outline-offset: 3px;
}
/* =========================================
02. FIXED NAVIGATION ROOT
IMPORTANT: Dropdowns are NOT inside header
========================================= */
#bto-navigation .bto-fixed {
position: fixed;
top: 15px;
left: 0;
right: 0;
width: 100%;
height: var(--bto-header-height);
z-index: 999999;
pointer-events: none;
}
/* =========================================
03. FLOATING LIQUID GLASS HEADER
========================================= */
#bto-navigation .bto-header {
--mouse-x: 50%;
--mouse-y: 50%;
position: relative;
isolation: isolate;
width: min(
var(--bto-max-width),
calc(100% - 28px)
);
height: var(--bto-header-height);
min-height: 0;
max-height: var(--bto-header-height);
margin: 0 auto;
padding: 8px 12px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
/* Physical layout always LTR */
direction: ltr;
border-radius: 999px;
background: rgba(
9,13,16,
var(--bto-opacity)
);
border: 1px solid rgba(255,255,255,.29);
backdrop-filter:
blur(var(--bto-blur))
saturate(175%);
-webkit-backdrop-filter:
blur(var(--bto-blur))
saturate(175%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
inset 0 -1px 0 rgba(255,255,255,.055),
0 15px 42px rgba(0,0,0,.14);
pointer-events: auto;
transition:
box-shadow .35s ease,
border-color .35s ease;
/* Only the header is rounded, not dropdowns */
}
/* Liquid light overlay */
#bto-navigation .bto-header-light {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
#bto-navigation .bto-header-light::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
230px circle at var(--mouse-x) var(--mouse-y),
rgba(255,255,255,.37) 0%,
rgba(255,255,255,.14) 26%,
rgba(255,255,255,.035) 52%,
transparent 76%
);
opacity: 0;
transition: opacity .25s ease;
}
#bto-navigation .bto-header:hover
.bto-header-light::before {
opacity: 1;
}
/* Upper glass refraction */
#bto-navigation .bto-header-light::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(255,255,255,.14),
rgba(255,255,255,.025) 45%,
transparent 72%
);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.18),
inset 0 -1px 1px rgba(0,0,0,.1);
}
/* Red/green optical edge */
#bto-navigation .bto-header::after {
content: "";
position: absolute;
bottom: -1px;
left: 13%;
right: 13%;
height: 2px;
border-radius: 100%;
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
rgba(255,82,93,.6) 27%,
rgba(201,246,75,.75) 70%,
transparent
);
opacity: .75;
}
/* Important: only these direct elements
participate in flex layout */
#bto-navigation .bto-brand,
#bto-navigation .bto-desktop,
#bto-navigation .bto-actions {
position: relative;
z-index: 2;
}
/* =========================================
04. BRAND / ORIGINAL LOGO
========================================= */
#bto-navigation .bto-brand {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
background: rgba(8,12,16,.53);
border: 1px solid rgba(255,255,255,.13);
direction: ltr;
transition:
transform .3s ease,
background .3s ease;
}
#bto-navigation .bto-brand:hover {
transform: translateY(-2px);
background: rgba(8,12,16,.67);
}
#bto-navigation .bto-logo {
width: 45px;
height: 45px;
flex-shrink: 0;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
transition: transform .35s ease;
}
#bto-navigation .bto-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#bto-navigation .bto-brand:hover .bto-logo {
transform: rotate(-5deg) scale(1.05);
}
#bto-navigation .bto-brand-copy {
display: flex;
flex-direction: column;
text-align: left;
gap: 3px;
}
#bto-navigation .bto-brand-name {
font-family: Inter, Arial, sans-serif;
font-size: 16px;
line-height: 1.15;
font-weight: 850;
color: #fff;
letter-spacing: -.4px;
white-space: nowrap;
}
#bto-navigation .bto-brand-name span {
color: var(--bto-green);
}
#bto-navigation .bto-brand-sub {
font-family: Arial, sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: .9px;
color: rgba(255,255,255,.66);
white-space: nowrap;
}
/* =========================================
05. DESKTOP NAVIGATION
========================================= */
#bto-navigation .bto-desktop {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
}
#bto-navigation .bto-nav-surface {
position: relative;
display: flex;
align-items: center;
padding: 5px;
border-radius: 999px;
background: rgba(8,12,16,.61);
border: 1px solid rgba(255,255,255,.15);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.09);
max-width: 100%;
}
#bto-navigation .bto-nav-list {
position: relative;
z-index: 2;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
#bto-navigation .bto-nav-list li {
margin: 0;
padding: 0;
list-style: none;
}
/* Sliding liquid glass indicator */
#bto-navigation .bto-liquid-pill {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 42px;
border-radius: 999px;
pointer-events: none;
opacity: 0;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(255,255,255,.3),
transparent 75%
),
rgba(255,255,255,.13);
border: 1px solid rgba(255,255,255,.26);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.38),
0 5px 15px rgba(0,0,0,.13);
transform: translate3d(0,0,0);
transition:
transform .44s cubic-bezier(.22,1.12,.3,1),
width .37s cubic-bezier(.22,1.12,.3,1),
height .3s,
opacity .18s;
}
#bto-navigation .bto-liquid-pill.visible {
opacity: 1;
}
#bto-navigation .bto-link,
#bto-navigation .bto-trigger {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 6px;
min-height: 42px;
padding: 0 11px;
border: 0;
border-radius: 999px;
background: transparent;
color: #fff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
position: relative;
z-index: 2;
transition: color .22s;
}
#bto-navigation .bto-link:hover,
#bto-navigation .bto-trigger:hover,
#bto-navigation .bto-trigger[aria-expanded="true"] {
color: var(--bto-green);
}
#bto-navigation .bto-link[aria-current="page"] {
color: var(--bto-green);
}
#bto-navigation .bto-link[aria-current="page"]::after {
content: "";
position: absolute;
width: 16px;
height: 2px;
bottom: 4px;
border-radius: 5px;
background: var(--bto-green);
}
/* Magnetic label */
#bto-navigation .bto-label {
display: inline-block;
transform: translate3d(
var(--tx,0px),
var(--ty,0px),
0
);
transition: transform .18s ease-out;
}
#bto-navigation .bto-chevron {
display: block;
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform .25s;
}
#bto-navigation
.bto-trigger[aria-expanded="true"]
.bto-chevron {
transform: rotate(180deg);
}
/* =========================================
06. LANGUAGE & AUTHENTICATION
========================================= */
#bto-navigation .bto-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
direction: ltr;
}
#bto-navigation .bto-language {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 43px;
min-width: 52px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(8,12,16,.57);
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 800;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform .25s,
background .25s;
}
#bto-navigation .bto-language:hover {
transform: translateY(-2px);
background: rgba(8,12,16,.76);
}
#bto-navigation .bto-globe {
color: var(--bto-green);
font-size: 16px;
}
#bto-navigation .bto-login {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
min-height: 51px;
padding: 6px 6px 6px 17px;
border-radius: 999px;
background:
linear-gradient(180deg,#dfff7b,#b9ed35);
color: #101410;
font-size: 12px;
font-weight: 850;
white-space: nowrap;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 8px 24px rgba(201,246,75,.2);
transition:
transform .28s,
box-shadow .28s;
}
#bto-navigation .bto-login:hover {
transform: translateY(-2px);
box-shadow:
0 12px 28px rgba(201,246,75,.33);
}
#bto-navigation .bto-login-arrow {
width: 39px;
height: 39px;
flex-shrink: 0;
display: grid;
place-items: center;
background: var(--bto-black);
color: var(--bto-green);
border-radius: 50%;
font-size: 21px;
transition: transform .3s;
}
#bto-navigation .bto-login:hover .bto-login-arrow {
transform: rotate(-35deg);
}
/* =========================================
07. DROPDOWN POSITIONING
ISOLATED OUTSIDE FLEX HEADER
========================================= */
#bto-navigation .bto-dropdown {
--px: 50%;
--py: 40%;
position: absolute !important;
top: calc(
var(--bto-header-height) + 11px
) !important;
left: 50% !important;
right: auto !important;
width: min(920px, calc(100vw - 30px));
height: auto;
max-height: calc(100dvh - 120px);
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateX(-50%)
translateY(9px)
scale(.985);
transform-origin: top center;
transition:
opacity .23s,
transform .32s cubic-bezier(.22,.9,.28,1),
visibility .23s;
border-radius: 27px;
}
#bto-navigation .bto-dropdown.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0)
scale(1);
}
/* Menu contents */
#bto-navigation .bto-dropdown-inner {
position: relative;
width: 100%;
padding: 21px;
border-radius: 27px;
background:
radial-gradient(
280px circle at var(--px) var(--py),
rgba(255,255,255,.12),
transparent 80%
),
radial-gradient(
ellipse at 95% 0%,
rgba(201,246,75,.1),
transparent 35%
),
radial-gradient(
ellipse at 5% 100%,
rgba(255,82,93,.08),
transparent 35%
),
rgba(9,13,17,.91);
backdrop-filter: blur(27px) saturate(160%);
-webkit-backdrop-filter: blur(27px) saturate(160%);
border: 1px solid rgba(255,255,255,.19);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.21),
0 22px 60px rgba(0,0,0,.35);
}
#bto-navigation .bto-dropdown-heading {
margin: 3px 4px 16px;
color: var(--bto-green);
font-size: 11px;
font-weight: 800;
letter-spacing: .3px;
}
/* =========================================
08. SERVICES CARDS
========================================= */
#bto-navigation .bto-service-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 10px;
}
#bto-navigation .bto-service {
--cx: 50%;
--cy: 50%;
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 112px;
padding: 15px 13px;
border-radius: 18px;
background:
radial-gradient(
120px circle at var(--cx) var(--cy),
rgba(255,255,255,.12),
transparent 75%
),
rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.1);
transition:
transform .28s,
background-color .28s,
border-color .28s;
}
#bto-navigation .bto-service:hover {
transform: translateY(-3px);
background-color: rgba(255,255,255,.105);
border-color: rgba(201,246,75,.38);
}
#bto-navigation .bto-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 13px;
background: rgba(201,246,75,.11);
border: 1px solid rgba(201,246,75,.19);
color: var(--bto-green);
font: 800 16px Arial, sans-serif;
}
#bto-navigation .bto-icon.red {
background: rgba(255,82,93,.12);
border-color: rgba(255,82,93,.19);
color: #ff9299;
}
#bto-navigation .bto-service-text {
min-width: 0;
}
#bto-navigation .bto-service strong {
display: block;
color: #fff;
font-size: 12.5px;
font-weight: 800;
line-height: 1.6;
margin-bottom: 5px;
}
#bto-navigation .bto-service small {
display: block;
color: var(--bto-muted);
font-size: 11px;
line-height: 1.75;
font-weight: 400;
}
/* =========================================
09. MEGA MENU FOOTER
========================================= */
#bto-navigation .bto-dropdown-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 13px;
padding: 15px;
border-radius: 16px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.085);
}
#bto-navigation .bto-dropdown-footer strong {
display: block;
color: #fff;
font-size: 12.5px;
}
#bto-navigation .bto-dropdown-footer p {
margin: 6px 0 0;
color: var(--bto-muted);
font-size: 11px;
line-height: 1.6;
}
#bto-navigation .bto-footer-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 11px 15px;
border-radius: 999px;
background: rgba(255,82,93,.16);
border: 1px solid rgba(255,82,93,.3);
color: #ff9ba2;
font-size: 12px;
font-weight: 800;
transition: background .25s;
}
#bto-navigation .bto-footer-button:hover {
background: rgba(255,82,93,.28);
}
/* =========================================
10. SOLUTIONS
========================================= */
#bto-navigation .bto-solutions {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
}
#bto-navigation .bto-solution {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 18px;
border-radius: 17px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.1);
transition:
transform .28s,
background .28s;
}
#bto-navigation .bto-solution:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.105);
}
#bto-navigation .bto-solution-number {
color: var(--bto-red);
font: 800 15px Arial, sans-serif;
}
#bto-navigation .bto-solution strong {
display: block;
font-size: 12.5px;
color: #fff;
margin-bottom: 7px;
}
#bto-navigation .bto-solution small {
color: var(--bto-muted);
font-size: 11px;
line-height: 1.8;
}
/* =========================================
11. MOBILE MENU
========================================= */
#bto-navigation .bto-hamburger {
display: none;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
background: rgba(8,12,16,.55);
border: 1px solid rgba(255,255,255,.19);
border-radius: 14px;
color: #fff;
}
#bto-navigation .bto-hamburger svg {
width: 22px;
height: 22px;
}
#bto-navigation .bto-mobile {
position: absolute;
top: calc(var(--bto-header-height) + 11px);
left: 50%;
width: min(570px,calc(100% - 24px));
max-height: calc(100dvh - 116px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 12px;
border-radius: 23px;
background: rgba(9,13,17,.92);
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px);
border: 1px solid rgba(255,255,255,.21);
box-shadow: 0 24px 60px rgba(0,0,0,.32);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translate(-50%,-8px);
transition:
opacity .25s,
transform .3s,
visibility .25s;
}
#bto-navigation.bto-mobile-open .bto-mobile {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%,0);
}
#bto-navigation .bto-mobile nav > a,
#bto-navigation .bto-mobile summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 51px;
padding: 14px;
border-radius: 13px;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
list-style: none;
}
#bto-navigation
.bto-mobile summary::-webkit-details-marker {
display: none;
}
#bto-navigation .bto-mobile summary::after {
content: "+";
color: var(--bto-green);
font: 21px Arial, sans-serif;
}
#bto-navigation
.bto-mobile details[open] summary::after {
content: "-";
}
#bto-navigation .bto-mobile nav > a:hover,
#bto-navigation .bto-mobile summary:hover {
background: rgba(255,255,255,.08);
}
#bto-navigation .bto-mobile-sub {
display: grid;
gap: 3px;
padding: 6px;
margin-bottom: 8px;
border-radius: 13px;
background: rgba(255,255,255,.055);
}
#bto-navigation .bto-mobile-sub a {
display: block;
padding: 12px;
border-radius: 9px;
font-size: 12px;
color: #d0d7da;
}
#bto-navigation .bto-mobile-sub a:hover {
background: rgba(255,255,255,.065);
color: var(--bto-green);
}
#bto-navigation .bto-mobile-login {
display: block;
text-align: center;
margin-top: 10px;
padding: 14px;
border-radius: 14px;
background: var(--bto-green);
color: #101410;
font-size: 13px;
font-weight: 850;
}
/* =========================================
12. RESPONSIVE
========================================= */
@media (max-width: 1260px) {
#bto-navigation .bto-brand-sub {
display: none;
}
#bto-navigation .bto-link,
#bto-navigation .bto-trigger {
padding: 0 9px;
font-size: 11.5px;
}
#bto-navigation .bto-brand-name {
font-size: 14px;
}
}
@media (max-width: 1100px) {
#bto-navigation .bto-desktop {
display: none;
}
#bto-navigation .bto-hamburger {
display: grid;
}
#bto-navigation .bto-dropdown {
display: none !important;
}
}
@media (max-width: 550px) {
#bto-navigation {
--bto-header-height: 68px;
}
#bto-navigation .bto-header {
width: calc(100% - 18px);
padding: 7px 9px;
gap: 6px;
}
#bto-navigation .bto-brand {
gap: 6px;
padding: 3px;
}
#bto-navigation .bto-logo {
width: 41px;
height: 41px;
border-radius: 12px;
}
#bto-navigation .bto-brand-name {
font-size: 13px;
}
#bto-navigation .bto-actions {
gap: 5px;
}
#bto-navigation .bto-language {
height: 39px;
min-width: 42px;
padding: 0 7px;
}
#bto-navigation .bto-login {
min-height: 41px;
padding: 4px;
}
#bto-navigation .bto-login-text {
display: none;
}
#bto-navigation .bto-login-arrow {
width: 33px;
height: 33px;
}
#bto-navigation .bto-hamburger {
width: 41px;
height: 41px;
}
}
@supports not (backdrop-filter: blur(1px)) {
#bto-navigation .bto-header {
background-color: rgba(9,13,17,.86);
}
#bto-navigation .bto-dropdown-inner,
#bto-navigation .bto-mobile {
background-color: rgba(9,13,17,.97);
}
}
@media (prefers-reduced-motion: reduce) {
#bto-navigation *,
#bto-navigation *::before,
#bto-navigation *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
Bentheomega
AI • AUTOMATION • DIGITAL
(function() {
"use strict";
const root = document.getElementById("bto-navigation");
if (!root || root.dataset.initialized === "true") {
return;
}
root.dataset.initialized = "true";
/* =======================================
ELEMENTS
======================================= */
const header = root.querySelector("#bto-glass-header");
const navSurface = root.querySelector("#bto-nav-surface");
const liquidPill = root.querySelector(".bto-liquid-pill");
const navControls = [
...root.querySelectorAll(
".bto-nav-list .bto-link, .bto-nav-list .bto-trigger"
)
];
const triggers = [
...root.querySelectorAll(".bto-trigger")
];
const panels = [
...root.querySelectorAll(".bto-dropdown")
];
const languageButton =
root.querySelector("#bto-language-switch");
const languageText =
root.querySelector("#bto-lang-text");
const mobileButton =
root.querySelector(".bto-hamburger");
const mobileMenu =
root.querySelector("#bto-mobile-menu");
const desktopMedia =
window.matchMedia("(min-width:1101px)");
const reducedMotion =
window.matchMedia("(prefers-reduced-motion:reduce)");
let currentMenu = null;
let closeTimer = null;
/* =======================================
TRANSLATIONS
======================================= */
const translations = {
fa: {
home: "خانه",
services: "خدمات",
solutions: "راهکارها",
portfolio: "نمونهکارها",
about: "درباره من",
blog: "مقالات",
contact: "ارتباط",
login: "ورود / ثبتنام",
servicesHeading: "خدمات تخصصی Bentheomega",
solutionsHeading: "راهکارهای هوشمند کسبوکار",
s1: "هوش مصنوعی و AI Agents",
s1d: "طراحی ایجنتهای هوشمند و سیستمهای AI",
s2: "اتوماسیون کسبوکار",
s2d: "خودکارسازی فرایندهای تکراری با n8n",
s3: "طراحی و توسعه وبسایت",
s3d: "سایتهای مدرن، سریع و اختصاصی",
s4: "سئو و رشد دیجیتال",
s4d: "سئوی فنی، محتوا و افزایش دیدهشدن",
s5: "توسعه اپلیکیشن و داشبورد",
s5d: "پنل مدیریتی، اپلیکیشن و پورتال مشتری",
s6: "اتصال API و سیستمها",
s6d: "یکپارچهسازی CRM، دیتابیس و ابزارها",
footerTitle:
"آمادهای کسبوکارت رو هوشمندتر کنی؟",
footerDescription:
"ایدهات را مطرح کن تا راهکار مناسب را بررسی کنیم.",
footerButton: "بررسی پروژه",
r1: "جذب و پیگیری مشتریان",
r1d: "مدیریت سرنخها و پیگیری خودکار",
r2: "پشتیبانی هوشمند",
r2d: "دستیارهای AI برای پاسخگویی به مشتری",
r3: "اتوماسیون عملیات داخلی",
r3d: "کاهش فعالیتهای تکراری تیم",
r4: "رشد دیجیتال و فروش",
r4d: "سئو، تجربه کاربری و افزایش تبدیل"
},
en: {
home: "Home",
services: "Services",
solutions: "Solutions",
portfolio: "Portfolio",
about: "About Me",
blog: "Insights",
contact: "Contact",
login: "Login / Sign Up",
servicesHeading: "OUR EXPERTISE",
solutionsHeading: "SMART BUSINESS SOLUTIONS",
s1: "AI Agents & Intelligence",
s1d: "Intelligent agents and AI-powered systems",
s2: "Business Automation",
s2d: "Automate repetitive workflows with n8n",
s3: "Web Design & Development",
s3d: "Modern, fast and custom websites",
s4: "SEO & Digital Growth",
s4d: "Technical SEO, content and visibility",
s5: "App & Dashboard Development",
s5d: "Dashboards, applications and client platforms",
s6: "API & System Integration",
s6d: "Connect CRMs, databases and business tools",
footerTitle:
"Ready to make your business smarter?",
footerDescription:
"Tell us about your idea and explore the right solution.",
footerButton: "Discuss Project",
r1: "Lead Generation & Follow-Up",
r1d: "Lead management and automated follow-ups",
r2: "AI Customer Support",
r2d: "AI assistants for customer communication",
r3: "Internal Process Automation",
r3d: "Reduce repetitive work across your team",
r4: "Digital Growth & Sales",
r4d: "SEO, user experience and conversion growth"
}
};
/* =======================================
LANGUAGE SYSTEM
======================================= */
let language = "fa";
try {
const saved = localStorage.getItem(
"bto-navigation-language"
);
if (saved === "en") language = "en";
} catch(error) {}
function setLanguage(lang) {
language = lang;
root.setAttribute("lang", lang);
root.setAttribute(
"dir",
lang === "fa" ? "rtl" : "ltr"
);
root.querySelector("#bto-desktop-nav").setAttribute(
"dir",
lang === "fa" ? "rtl" : "ltr"
);
mobileMenu.setAttribute(
"dir",
lang === "fa" ? "rtl" : "ltr"
);
panels.forEach(panel => {
panel.setAttribute(
"dir",
lang === "fa" ? "rtl" : "ltr"
);
});
root.querySelectorAll("[data-bto]").forEach(element => {
const key = element.dataset.bto;
if (
Object.prototype.hasOwnProperty.call(
translations[lang],
key
)
) {
element.textContent = translations[lang][key];
}
});
languageText.textContent =
lang === "fa" ? "EN" : "FA";
languageButton.setAttribute(
"aria-label",
lang === "fa"
? "Switch to English"
: "تغییر منو به فارسی"
);
const login = root.querySelector(".bto-login");
login.setAttribute(
"aria-label",
translations[lang].login
);
try {
localStorage.setItem(
"bto-navigation-language",
lang
);
} catch(error) {}
closePanels();
hidePill();
}
languageButton.addEventListener("click", () => {
setLanguage(
language === "fa" ? "en" : "fa"
);
});
/* =======================================
LIQUID GLASS LIGHT
======================================= */
function attachLiquidLight(element, xVar, yVar) {
if (reducedMotion.matches) return;
let frame = null;
let lastEvent = null;
element.addEventListener("pointermove", event => {
if (event.pointerType === "touch") return;
lastEvent = {
x: event.clientX,
y: event.clientY
};
if (frame !== null) return;
frame = requestAnimationFrame(() => {
const rect = element.getBoundingClientRect();
const x =
(lastEvent.x - rect.left) / rect.width * 100;
const y =
(lastEvent.y - rect.top) / rect.height * 100;
element.style.setProperty(
xVar,
x.toFixed(2) + "%"
);
element.style.setProperty(
yVar,
y.toFixed(2) + "%"
);
frame = null;
});
});
element.addEventListener("pointerleave", () => {
element.style.setProperty(xVar, "50%");
element.style.setProperty(yVar, "50%");
});
}
attachLiquidLight(
header,
"--mouse-x",
"--mouse-y"
);
panels.forEach(panel => {
attachLiquidLight(panel, "--px", "--py");
});
root.querySelectorAll(".bto-service").forEach(card => {
attachLiquidLight(card, "--cx", "--cy");
});
/* =======================================
SLIDING LIQUID PILL
======================================= */
function positionPill(element) {
if (!element || !desktopMedia.matches) return;
const surfaceRect =
navSurface.getBoundingClientRect();
const rect =
element.getBoundingClientRect();
const x =
rect.left - surfaceRect.left;
const y =
rect.top - surfaceRect.top;
liquidPill.style.width =
rect.width + "px";
liquidPill.style.height =
rect.height + "px";
liquidPill.style.transform =
"translate3d(" +
x + "px," +
y + "px,0)";
liquidPill.classList.add("visible");
}
function hidePill() {
liquidPill.classList.remove("visible");
}
navControls.forEach(control => {
control.addEventListener("pointerenter", event => {
if (event.pointerType !== "touch") {
positionPill(control);
}
});
control.addEventListener("pointermove", event => {
if (
reducedMotion.matches ||
event.pointerType === "touch"
) return;
const rect = control.getBoundingClientRect();
const dx =
event.clientX - rect.left - rect.width / 2;
const dy =
event.clientY - rect.top - rect.height / 2;
control.style.setProperty(
"--tx",
(dx * .055).toFixed(2) + "px"
);
control.style.setProperty(
"--ty",
(dy * .08).toFixed(2) + "px"
);
});
control.addEventListener("pointerleave", () => {
control.style.setProperty("--tx", "0px");
control.style.setProperty("--ty", "0px");
});
control.addEventListener("focus", () => {
positionPill(control);
});
});
navSurface.addEventListener("pointerleave", () => {
if (currentMenu) {
const trigger = triggers.find(
item => item.dataset.menu === currentMenu
);
positionPill(trigger);
} else {
hidePill();
}
});
/* =======================================
DROPDOWNS
======================================= */
function cancelClosing() {
if (closeTimer !== null) {
clearTimeout(closeTimer);
closeTimer = null;
}
}
function closePanels() {
cancelClosing();
currentMenu = null;
panels.forEach(panel => {
panel.classList.remove("is-open");
});
triggers.forEach(trigger => {
trigger.setAttribute(
"aria-expanded",
"false"
);
});
}
function openPanel(name) {
cancelClosing();
currentMenu = name;
panels.forEach(panel => {
panel.classList.toggle(
"is-open",
panel.dataset.panel === name
);
});
triggers.forEach(trigger => {
trigger.setAttribute(
"aria-expanded",
String(trigger.dataset.menu === name)
);
});
}
function delayedClose() {
cancelClosing();
closeTimer = setTimeout(() => {
closePanels();
hidePill();
}, 300);
}
triggers.forEach(trigger => {
const name = trigger.dataset.menu;
trigger.addEventListener("click", () => {
if (currentMenu === name) {
closePanels();
} else {
openPanel(name);
positionPill(trigger);
}
});
trigger.addEventListener("pointerenter", event => {
if (
desktopMedia.matches &&
event.pointerType !== "touch"
) {
openPanel(name);
}
});
trigger.addEventListener("pointerleave", () => {
delayedClose();
});
});
panels.forEach(panel => {
panel.addEventListener(
"pointerenter",
cancelClosing
);
panel.addEventListener(
"pointerleave",
delayedClose
);
panel.addEventListener(
"focusin",
cancelClosing
);
panel.addEventListener("focusout", event => {
if (
!panel.contains(event.relatedTarget) &&
!header.contains(event.relatedTarget)
) {
delayedClose();
}
});
});
root.querySelectorAll(".bto-link").forEach(link => {
link.addEventListener("pointerenter", event => {
if (event.pointerType !== "touch") {
closePanels();
}
});
});
/* =======================================
MOBILE MENU
======================================= */
function closeMobile() {
root.classList.remove("bto-mobile-open");
mobileButton.setAttribute(
"aria-expanded",
"false"
);
mobileMenu
.querySelectorAll("details")
.forEach(details => {
details.open = false;
});
}
mobileButton.addEventListener("click", () => {
closePanels();
const open = root.classList.toggle(
"bto-mobile-open"
);
mobileButton.setAttribute(
"aria-expanded",
String(open)
);
});
mobileMenu.querySelectorAll("a").forEach(link => {
link.addEventListener("click", closeMobile);
});
/* =======================================
OUTSIDE CLICK
======================================= */
document.addEventListener("pointerdown", event => {
if (!root.contains(event.target)) {
closePanels();
closeMobile();
hidePill();
}
});
/* =======================================
KEYBOARD SUPPORT
======================================= */
root.addEventListener("keydown", event => {
if (event.key !== "Escape") return;
const hadMobile =
root.classList.contains("bto-mobile-open");
const previouslyOpen = currentMenu;
closePanels();
closeMobile();
hidePill();
if (hadMobile) {
mobileButton.focus();
} else if (previouslyOpen) {
const trigger = triggers.find(
item => item.dataset.menu === previouslyOpen
);
if (trigger) trigger.focus();
}
});
/* =======================================
ACTIVE PAGE
======================================= */
const currentPath =
window.location.pathname.replace(/\/+$/, "") || "/";
root.querySelectorAll(
".bto-nav-list .bto-link"
).forEach(link => {
try {
const url = new URL(
link.href,
window.location.href
);
const path =
url.pathname.replace(/\/+$/, "") || "/";
if (
url.origin === window.location.origin &&
path === currentPath
) {
link.setAttribute(
"aria-current",
"page"
);
}
} catch(error) {}
});
/* =======================================
RESIZE SAFETY
======================================= */
window.addEventListener("resize", () => {
closePanels();
hidePill();
if (desktopMedia.matches) {
closeMobile();
}
});
/* =======================================
INITIALIZATION
======================================= */
setLanguage(language);
})();
Bentheomega
AI • AUTOMATION • DIGITAL
خدمات تخصصی Bentheomega
هوش مصنوعی و AI Agents
طراحی ایجنتهای هوشمند و سیستمهای AI
اتوماسیون کسبوکار
خودکارسازی فرایندهای تکراری با n8n
طراحی و توسعه وبسایت
سایتهای مدرن، سریع و اختصاصی
سئو و رشد دیجیتال
سئوی فنی، محتوا و افزایش دیدهشدن
توسعه اپلیکیشن و داشبورد
پنل مدیریتی، اپلیکیشن و پورتال مشتری
اتصال API و سیستمها
یکپارچهسازی CRM، دیتابیس و ابزارها
BENTHEOMEGA
CONTACT BENTHEOMEGA
ایدهات رو به واقعیت تبدیل کنیم.
برای طراحی وبسایت، اتوماسیون هوشمند، توسعه اپلیکیشن یا رشد دیجیتال آمادهای؟ از همینجا شروع کنیم.
شیراز، ایران
نمایش شهر شیراز در Google Maps
این نقشه موقعیت عمومی شهر را نشان میدهد، نه آدرس دقیق یک دفتر.
مشاهده در Google Maps
© BENTHEOMEGA
INTELLIGENCE · DESIGN · AUTOMATION