/* ========================================================================== Balakrishna & Co — Homepage Design Layer (CSS-only, homepage scope only) -------------------------------------------------------------------------- Source of visual language: _homepage_redesign_preview.html (approved design). Applied to: site-final/index.html ONLY (homepage). Targets: the existing Joomla DOM selectors that already render on the page. HARD GUARANTEES of this file: - Does NOT inject content. Does NOT change DOM. - Does NOT change meta tags, headings, links, hrefs, alt text, or text content. - Style applies via :root variables and existing-element selectors only. - Removing the one in reverts to plain Joomla styling. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300&family=Open+Sans+Condensed:wght@700&family=Playfair+Display:ital,wght@0,700;0,800;1,400;1,700&display=swap'); :root{ --bk-navy: #00205B; --bk-navy-deep: #001740; --bk-blue: #0057B8; --bk-cobalt: #1E49E2; --bk-grey: #F4F4F4; --bk-line: #E5E5E5; --bk-text: #1A1A1A; --bk-muted: #5A5A5A; --bk-gold: #C9941A; --bk-gold2: #E8B84B; --bk-teal: #006B8F; --bk-green: #006B3C; --bk-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bk-cond: 'Open Sans Condensed', 'Open Sans', sans-serif; --bk-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; } /* ---------- Body baseline ---------- */ body.itemid-101, body{ font-family: var(--bk-sans); color: var(--bk-text); line-height: 1.65; background: #ffffff; } /* ---------- Topbar (Joomla .top_links / .top_contacts) ---------- */ .top_links{ background: #050A1A !important; padding: 7px 5vw !important; } .top_links .top_contacts{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; } .top_links .top_contacts li{ display: inline-flex; align-items: center; margin: 0; padding: 0 12px; font-size: 11.5px; color: rgba(255,255,255,.6); letter-spacing: .2px; position: relative; } .top_links .top_contacts li + li::before{ content: "|"; position: absolute; left: -2px; color: rgba(255,255,255,.2); pointer-events: none; } .top_links .top_contacts li a{ color: rgba(255,255,255,.6) !important; transition: color .2s ease; } .top_links .top_contacts li a:hover{ color: #ffffff !important; } /* ---------- Header (Joomla #sp-header) ---------- */ #sp-header{ background: rgba(255,255,255,.97) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--bk-line); box-shadow: 0 1px 0 rgba(0,32,91,.04); transition: box-shadow .3s ease; } #sp-header.menu-fixed{ box-shadow: 0 4px 20px rgba(0,32,91,.1); } #sp-header .container, #sp-header > .container{ min-height: 66px; } #sp-logo .logo a{ display: inline-flex; align-items: center; } /* ---------- Main nav (Joomla mega-menu) ---------- */ .sp-megamenu-parent{ font-family: var(--bk-sans); } .sp-megamenu-parent > li > a{ font-size: 13.5px !important; font-weight: 600 !important; color: var(--bk-text) !important; padding: 0 17px !important; height: 66px; display: flex !important; align-items: center; border-bottom: 3px solid transparent !important; letter-spacing: .2px; transition: color .2s ease, border-color .2s ease; white-space: nowrap; } .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li.current-item > a, .sp-megamenu-parent > li.active > a{ color: var(--bk-blue) !important; border-bottom-color: var(--bk-blue) !important; } /* Dropdown panels */ .sp-megamenu-parent .sp-dropdown, .sp-megamenu-parent .sp-dropdown-inner{ background: #ffffff !important; border-top: 3px solid var(--bk-blue) !important; box-shadow: 0 12px 32px rgba(0,32,91,.14) !important; padding: 14px 0 !important; } .sp-megamenu-parent .sp-dropdown a{ color: var(--bk-text) !important; font-size: 13px !important; font-weight: 500; transition: color .2s ease, background .2s ease; padding: 7px 18px !important; } .sp-megamenu-parent .sp-dropdown a:hover{ color: var(--bk-blue) !important; background: var(--bk-grey); } .sp-megamenu-parent .sp-dropdown .submenu b, .sp-megamenu-parent .sp-dropdown .submenu strong, .sp-megamenu-parent .sp-dropdown a b{ color: var(--bk-navy) !important; font-family: var(--bk-cond); font-size: 11px !important; letter-spacing: 1.5px; text-transform: uppercase; } /* Mobile menu toggle */ #offcanvas-toggler{ color: var(--bk-navy) !important; font-size: 22px; } /* ---------- Page-builder hero/sections (existing DOM only) ---------- */ #sp-page-builder, #sp-main-body{ background: #ffffff; } /* Service cards / addons (existing .sppb-addon-content) */ .sppb-addon-content h3, .sppb-addon-content h4{ font-family: var(--bk-cond); font-weight: 700; color: var(--bk-navy); letter-spacing: -.005em; line-height: 1.2; text-transform: none; } .sppb-addon-content p, #sp-component .sppb-addon p{ color: var(--bk-muted); font-size: 14px; line-height: 1.7; } /* Headings inside content */ #sp-component h1, #sp-component .h1, #sp-main-body h1{ font-family: var(--bk-cond); font-weight: 700; color: var(--bk-navy); font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.5px; } #sp-component h2, #sp-main-body h2{ font-family: var(--bk-cond); font-weight: 700; color: var(--bk-navy); font-size: clamp(26px, 3vw, 40px); line-height: 1.05; } #sp-component h3, #sp-main-body h3{ font-family: var(--bk-cond); font-weight: 700; color: var(--bk-navy); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -.2px; } /* Body links — editorial blue with hover underline */ #sp-component a, #sp-main-body a{ color: var(--bk-blue); text-decoration: none; transition: color .2s ease; } #sp-component a:hover, #sp-main-body a:hover{ color: var(--bk-cobalt); text-decoration: underline; text-underline-offset: 2px; } /* Buttons — Joomla SPPB */ .sppb-btn, .sppb-btn-default, .sppb-btn-primary, .sppb-btn-info, .sppb-btn-success{ background: var(--bk-blue) !important; color: #fff !important; border: none !important; padding: 13px 30px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px; text-transform: uppercase; border-radius: 0 !important; box-shadow: 0 4px 16px rgba(0,87,184,.25); transition: background .25s ease, transform .15s ease, box-shadow .25s ease; text-decoration: none !important; display: inline-flex !important; align-items: center; gap: 8px; } .sppb-btn:hover, .sppb-btn-default:hover, .sppb-btn-primary:hover, .sppb-btn-info:hover, .sppb-btn-success:hover{ background: var(--bk-cobalt) !important; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(30,73,226,.32); } /* ---------- Pre-footer (Joomla #sp-section-5 .row.footer) ---------- */ #sp-section-5{ background: var(--bk-navy) !important; color: rgba(255,255,255,.85); padding: 56px 0 !important; } #sp-section-5 .row.footer{ display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: 48px; padding: 0 8vw; } #sp-section-5 .row.footer > .col-sm-4, #sp-section-5 .row.footer > .col-md-3{ width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; } #sp-section-5 .footer1{ color: rgba(255,255,255,.7); } #sp-section-5 .footer1 .addrweb{ font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.45); } #sp-section-5 .footer1 .addrweb a{ color: rgba(255,255,255,.7) !important; border-bottom: 1px solid rgba(255,255,255,.15); transition: color .2s ease, border-color .2s ease; } #sp-section-5 .footer1 .addrweb a:hover{ color: var(--bk-gold2) !important; border-bottom-color: var(--bk-gold); } #sp-section-5 .footer1 h4{ margin: 0 0 16px; padding: 0; } #sp-section-5 .footer1 h4 span, #sp-section-5 .footer1 h4{ font-family: var(--bk-sans); font-size: 10px !important; font-weight: 700; color: rgba(255,255,255,.38) !important; letter-spacing: 2px; text-transform: uppercase; } #sp-section-5 .footer1 .headbar{ display: none; } #sp-section-5 .footer1 ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #sp-section-5 .footer1 ul li{ margin: 0; } #sp-section-5 .footer1 ul li a{ font-size: 13px !important; color: rgba(255,255,255,.4) !important; text-decoration: none !important; border-bottom: none !important; transition: color .2s ease; } #sp-section-5 .footer1 ul li a:hover{ color: #ffffff !important; } #sp-section-5 .social_links{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; } #sp-section-5 .social_links li{ display: inline-flex; } #sp-section-5 .social_links a{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.7) !important; border: 1px solid rgba(255,255,255,.08); transition: all .25s ease; border-bottom: 1px solid rgba(255,255,255,.08) !important; } #sp-section-5 .social_links a:hover{ background: var(--bk-blue); border-color: var(--bk-blue); color: #ffffff !important; } /* ---------- "Want to consult us" widget (.consult / .mydiv) ---------- */ .consult{ background: var(--bk-blue) !important; border-radius: 2px 2px 0 0 !important; box-shadow: 0 -6px 22px rgba(0,32,91,.18); padding: 0 !important; } .consult h4{ color: #ffffff !important; margin: 0 !important; padding: 12px 20px !important; font-family: var(--bk-sans); font-size: 13px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .mydiv{ background: #ffffff !important; border: 1px solid var(--bk-line); border-radius: 2px; box-shadow: 0 18px 40px rgba(0,32,91,.18); overflow: hidden; } .mydiv_title{ background: var(--bk-navy) !important; color: #fff !important; } .mydiv_title h4{ color: #ffffff !important; font-family: var(--bk-cond); font-size: 15px; font-weight: 700; letter-spacing: .5px; padding: 14px 18px !important; margin: 0 !important; } .mydiv .form-control{ border: 1px solid var(--bk-line) !important; border-radius: 2px !important; font-family: var(--bk-sans); font-size: 14px; padding: 10px 12px !important; } .mydiv .form-control:focus{ border-color: var(--bk-blue) !important; box-shadow: 0 0 0 3px rgba(0,87,184,.08) !important; outline: none; } .mydiv label.col-form-label{ font-size: 12px; font-weight: 700; color: var(--bk-navy); letter-spacing: .5px; text-transform: uppercase; } .mydiv .re_label{ color: var(--bk-blue); } .mydiv .slide_btn, .mydiv .btn-primary{ background: var(--bk-navy) !important; color: #ffffff !important; border: none !important; border-radius: 2px !important; font-family: var(--bk-sans); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 13px 26px !important; transition: background .25s ease; cursor: pointer; } .mydiv .slide_btn:hover, .mydiv .btn-primary:hover{ background: var(--bk-blue) !important; } .mydiv .address_data{ background: var(--bk-grey); padding: 14px 18px; margin-top: 16px; font-size: 12px; color: var(--bk-muted); } .mydiv .address_data li{ list-style: none; padding: 2px 0; font-size: 12px; color: var(--bk-muted); } .mydiv .address_data a{ color: var(--bk-blue) !important; } /* ---------- Footer copyright (#sp-footer .copy) ---------- */ #sp-footer{ background: #03061A !important; border-top: 3px solid var(--bk-blue) !important; padding: 16px 0 !important; } #sp-footer .row.copy{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0 8vw; gap: 12px; } #sp-footer .copy1 p, #sp-footer p{ font-size: 12px !important; color: rgba(255,255,255,.22) !important; margin: 0 !important; } #sp-footer a{ color: rgba(255,255,255,.45) !important; transition: color .2s ease; } #sp-footer a:hover{ color: #ffffff !important; } /* ---------- General tables in homepage content ---------- */ #sp-component table{ width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; } #sp-component table th{ background: var(--bk-grey); color: var(--bk-navy); font-family: var(--bk-cond); text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--bk-blue); font-weight: 700; letter-spacing: .5px; } #sp-component table td{ padding: 9px 14px; border-bottom: 1px solid var(--bk-line); } /* ---------- Image hero polish (existing slider/banner only) ---------- */ .sppb-image-holder img, #sp-component img{ max-width: 100%; height: auto; } /* ---------- Responsive ---------- */ @media (max-width: 1100px){ #sp-section-5 .row.footer{ grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 767px){ .top_links{ padding: 7px 4vw !important; } .top_links .top_contacts{ flex-wrap: wrap; justify-content: center; gap: 0; } .top_links .top_contacts li{ font-size: 11px; padding: 2px 8px; } .top_links .top_contacts li + li::before{ display: none; } .sp-megamenu-parent > li > a{ height: auto; padding: 14px 16px !important; } #sp-section-5 .row.footer{ grid-template-columns: 1fr; gap: 28px; padding: 0 6vw; } #sp-footer .row.copy{ flex-direction: column; padding: 0 6vw; } } /* Static parity safety: force existing Joomla/SP Page Builder content visible. This does not add/remove DOM, text, headings, links, metadata, or SEO content. It only prevents WOW/SPPB animation hide-state from leaving real content invisible. */ .sp-page-builder .sppb-wow, .sp-page-builder .sppb-section, .sp-page-builder .sppb-row, .sp-page-builder .sppb-column, .sp-page-builder .sppb-addon { visibility: visible !important; opacity: 1 !important; animation: none !important; } /* ---------- Print ---------- */ @media print{ .top_links, #sp-top-bar, .sp-megamenu-wrapper, #offcanvas-toggler, .consult, .mydiv, .g-recaptcha, #sp-section-5 .social_links{ display: none !important; } body{ color: #000; background: #fff; } a{ color: #000 !important; text-decoration: none !important; } }