/* |-------------------------------------------------------------------------- | bellatechsystems — Premium Corporate Theme | Brand accent taken from the logo: #2AAAE0 | Managed from Admin > Site Custom > CSS. Header intentionally untouched. |-------------------------------------------------------------------------- */ /* 1. Brand tokens --------------------------------------------------------- :root:root outranks the theme's own :root block, which is printed after this stylesheet in . */ :root:root { --primary-color: #2AAAE0; --primary-deep: #1B8CBE; --primary-ink: #0A2540; --primary10: rgba(42, 170, 224, 0.10); --primary06: rgba(42, 170, 224, 0.06); --primary20: rgba(42, 170, 224, 0.20); --secondary-color: #0A2540; --heading-color: #0A2540; --paragraph: #5A6B7B; --span: #5A6B7B; --sub-bg: #F6FAFD; --border: #E6EDF3; --border-1px: 1px solid #E6EDF3; --border-2px: 1px solid #E6EDF3; /* Calmer than the stock blue→black wash */ --gradient-bg: linear-gradient(135deg, #2AAAE0 0%, #1B8CBE 100%); --shadow: 0 1px 2px rgba(10, 37, 64, .04), 0 8px 24px rgba(10, 37, 64, .06); --shadow-lift: 0 2px 4px rgba(10, 37, 64, .04), 0 18px 44px rgba(10, 37, 64, .12); --radius: 16px; --radius-sm: 10px; --transition: all .35s cubic-bezier(.22, .61, .36, 1); } /* 2. Typography ---------------------------------------------------------- */ body { color: var(--paragraph); -webkit-font-smoothing: antialiased; -moz-osx-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); letter-spacing: -.02em; font-weight: 700; } h1 { line-height: 1.08; } h2 { line-height: 1.18; } p { color: var(--paragraph); } /* Eyebrow label above section titles */ .section-header h5, .section-header > h5 { color: var(--primary-color); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .section-header h5 img { width: 18px; height: auto; } .section-header h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 20ch; } /* 3. Buttons ------------------------------------------------------------- */ .btn-one, .btn-two { background: var(--primary-color); border-radius: var(--radius-sm); padding: 15px 30px; font-weight: 600; letter-spacing: .01em; border: 1px solid transparent; box-shadow: 0 6px 18px rgba(42, 170, 224, .28); transition: var(--transition); } .btn-one:hover, .btn-two:hover { background: var(--primary-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(42, 170, 224, .38); } .btn-one:hover i { transform: translateX(4px); } .btn-one i { transition: var(--transition); } /* 4. Product cards ------------------------------------------------------- */ .service-area { position: relative; } .service__item { background-color: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 38px 32px 34px; box-shadow: var(--shadow); height: 100%; overflow: hidden; transition: var(--transition); } .service__item:hover { transform: translateY(-6px); border-color: var(--primary20); box-shadow: var(--shadow-lift); } /* Hairline of brand colour that draws itself across the top on hover */ .service__item::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--gradient-bg); transition: var(--transition); z-index: 2; } .service__item:hover::before { width: 100%; } /* Neutralise the stock full-card gradient fill */ .service__item::after { display: none !important; } .service__item .service-shape { opacity: .10; } .service__item:hover .service-shape { opacity: .18; } .service__icon { width: 74px; height: 74px; border-radius: 14px; background: var(--primary10); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .service__icon img { max-width: 38px; height: auto; transition: var(--transition); } .service__item:hover .service__icon { background: var(--primary-color); transform: rotate(-4deg) scale(1.04); } .service__item:hover .service__icon img { filter: brightness(0) invert(1); } .service__item h4 { margin-top: 26px; margin-bottom: 12px; font-size: 22px; line-height: 1.3; } .service__item h4 a { color: var(--heading-color); transition: var(--transition); } /* All three product names currently fit one line, so titles align without reserving a second line. If a name ever wraps to two lines, restore `min-height: 58px` here to keep the body copy on a shared baseline. */ /* Hovering anywhere on the card highlights the title, not just the link */ .service__item:hover h4 a { color: var(--primary-color); } .service__item p { font-size: 15.5px; line-height: 1.75; color: var(--paragraph); } /* 5. Section rhythm ------------------------------------------------------ */ .service-area.pt-120 { padding-top: 110px; } .service-area.pb-120 { padding-bottom: 110px; } .service-area { background: var(--sub-bg); } .service__shape img { opacity: .5; } /* 6. Global polish ------------------------------------------------------- */ a { transition: var(--transition); } a:hover { color: var(--primary-color); } :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; height: auto; } ::selection { background: var(--primary-color); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #F1F5F9; } ::-webkit-scrollbar-thumb { background: #C7D6E2; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } /* 7. Responsive ---------------------------------------------------------- */ @media (max-width: 991px) { .service-area.pt-120 { padding-top: 70px; } .service-area.pb-120 { padding-bottom: 70px; } .section-header h2 { max-width: 100%; } } @media (max-width: 575px) { .service__item { padding: 30px 24px 28px; } .service__item h4 { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* 8. Header — fully white ------------------------------------------------ The stock theme paints a diagonal wedge over the left 30% of the header using a hardcoded #3c72fc, which ignores the brand colour and leaves the blue logo sitting on a blue block. Removing it gives a clean white header and lets the logo read properly. To restore the wedge, delete this rule. */ .header-area::after { display: none !important; } .header-area { background: #fff; border-bottom: 1px solid var(--border); } .header-area .logo { padding: 6px 0; } /* Nav links pick up the brand colour on hover */ .header__main .main-menu ul li > a { color: var(--heading-color); font-weight: 600; } .header__main .main-menu ul li > a:hover { color: var(--primary-color); } /* Language switcher sits more quietly */ .header-area .nice-select { border: 1px solid var(--border); border-radius: var(--radius-sm); } /* 9. Section shape ------------------------------------------------------- The theme's section blob sits at z-index:-1, so the opaque section background above already hides it. Made explicit so it stays hidden if that background is ever removed. */ .service-area .service__shape { display: none; } /* 10. Banner shapes ------------------------------------------------------ The hero's decorative shapes are PNG assets baked in the old template blue (#3C72FC / #2549A1 / #26489B). Rotating their hue lines them up with the logo blue without touching the uploaded files. Line-art shapes are white/grey, so the filter leaves them untouched. To revert, delete this rule. */ [class*="banner__shape"] img, .banner__shape-left1 img, .banner__shape-left3 img, .banner__shape-right1 img { filter: hue-rotate(-26deg) saturate(.88); } /* 11. Neutralise the theme's .active card state -------------------------- assets/frontend/js/script.js tags the hovered card with .active, and the stock theme styles that state for a dark gradient fill painted by ::after — white title, white body text, white icon tile. This design keeps cards white and disables that fill, so those white-on-white rules made the text invisible, and the class persists after mouseleave so the last-hovered card stayed broken. Here .active is reset to the normal card look; real :hover supplies the feedback, so it clears correctly when the pointer leaves. */ .service__item.active h4 a { color: var(--heading-color); } .service__item.active p { color: var(--paragraph); opacity: 1; } .service__item.active .service__icon { background: var(--primary10); } .service__item.active .service__icon img { filter: none; } .service__item.active .service-shape { opacity: .10; } /* Restore the hover treatment on a card that also carries .active (.active beats :hover on specificity, so these need both). */ .service__item.active:hover h4 a { color: var(--primary-color); } .service__item.active:hover .service__icon { background: var(--primary-color); } .service__item.active:hover .service__icon img { filter: brightness(0) invert(1); } .service__item.active:hover .service-shape { opacity: .18; } /* 12. Breadcrumb + footer shapes ---------------------------------------- These decorations are PNG assets baked in the old template blue (#2C56BE, #16285A, #3970FC, #284EAD, #18326E — all hue ~222deg), so the style.css rebrand could not reach them. Same -26deg shift used on the hero shapes in section 10 brings them to the logo's hue (~198deg). Scoped to decorative wrappers only — no content imagery is touched. To revert, delete this rule. */ .banner__inner-page .shape1 img, .banner__inner-page .shape2 img, .footer__shadow-shape img, .footer__shape-solid-left img, .footer__shape-regular-right img { filter: hue-rotate(-26deg) saturate(.88); } /* 13. Contact information panel ------------------------------------------ The theme sets flex-wrap:wrap on each row, so a long unbreakable value (support@bellatechsystems.com is one 28-character token) pushed the text block underneath its icon while the short phone number stayed inline — the three rows never matched. Locked to a single line each, with the value allowed to shrink and break instead of forcing a wrap. */ .contact__left-item ul { display: flex; flex-direction: column; gap: 26px; } .contact__left-item ul li { flex-wrap: nowrap; align-items: center; gap: 18px; margin-bottom: 0; } /* Icon keeps its size; never shrinks or grows */ .contact__left-item ul li i { flex: 0 0 58px; width: 58px; height: 58px; line-height: 58px; } .contact__left-item ul li i::after { width: 50px; height: 50px; } .contact__left-item ul li i svg { width: 22px; height: auto; } /* Text block may shrink below its content width — this is what stops the wrap */ .contact__left-item ul li > div { flex: 1 1 auto; min-width: 0; } /* Label: quiet, uppercase, tracked */ .contact__left-item ul li > div span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; opacity: .82; line-height: 1.3; } /* Value: sized to sit on one line, breaking mid-token only if it must */ .contact__left-item ul li > div h3 { font-size: 17px; font-weight: 600; line-height: 1.45; margin-top: 5px !important; margin-bottom: 0; overflow-wrap: anywhere; } .contact__left-item ul li > div h3 a { text-decoration: none; } .contact__left-item ul li > div h3 a:hover { opacity: .85; color: #fff; } @media (max-width: 991px) { .contact__left-item { padding: 36px 28px; } .contact__left-item ul li > div h3 { font-size: 16px; } }