/* ============================================================ Narrow Gate ("НАРИЙН ГАРЦ") — Modern Header & Footer Global override layer. Loaded LAST in the layout so it wins over style.css / color.css by source order. No markup-dependent JS hooks are changed (search popup, dropdowns, mobile menu, login modal all keep their classes). ============================================================ */ /* ===================== TOP BAR ===================== */ .top-bar { background: linear-gradient(90deg, #2c3a91 0%, #3f51b5 100%); padding: 11px 0; } .address-list-top ul { margin: 0; padding: 0; list-style: none; } .address-list-top ul li { color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.4; } .address-list-top ul li i { color: #c5cae9; margin-right: 7px; opacity: .95; } .address-list-top ul li a { color: rgba(255, 255, 255, .82) !important; transition: color .2s ease; } .address-list-top ul li a:hover { color: #fff !important; } .address-list-top ul li::before { color: rgba(255, 255, 255, .28); margin: 0 14px; } .login-option a { color: rgba(255, 255, 255, .85); font-size: 13px; transition: color .2s ease; } .login-option a:hover { color: #fff; } .login-option a i { color: #c5cae9; } /* ===================== NAV / HEADER ===================== */ .nav-holder { background: #fff; box-shadow: 0 4px 22px -10px rgba(22, 27, 51, .18); transition: box-shadow .3s ease; } @media (min-width: 992px) { .nav-holder { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; } } .logo { padding: 18px 0; } /* Top-level links */ .nav-list > ul > li > a { font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #2a2f45; padding: 31px 14px; transition: color .2s ease; } .nav-list > ul > li > a:hover, .nav-list > ul > li.active > a { color: #3f51b5; } /* Underline that grows from the centre */ .nav-list > ul > li > a::before { left: 50%; transform: translateX(-50%); width: 0; border-bottom-width: 2px; border-radius: 2px; transition: width .28s ease, opacity .28s ease; } .nav-list > ul > li.active > a::before, .nav-list > ul > li > a:hover::before { width: calc(100% - 28px); } /* Dropdowns — soft, rounded, floating */ .nav-list ul li > ul { top: calc(100% + 14px); width: 270px; padding: 8px; border-radius: 14px; border-bottom: 0; background: #fff; box-shadow: 0 24px 48px -18px rgba(22, 27, 51, .32); -webkit-box-shadow: 0 24px 48px -18px rgba(22, 27, 51, .32); } .nav-list ul li:hover > ul { top: calc(100% + 6px); } .nav-list ul li ul li { border-bottom: 0; } .nav-list ul li ul li a { padding: 11px 16px; border-radius: 9px; font-size: 13px; text-transform: none; font-weight: 500; color: #3a4060; transition: background .2s ease, color .2s ease, padding-left .2s ease; } .nav-list ul li ul li a:hover { background: rgba(63, 81, 181, .08); color: #3f51b5; padding-left: 20px; } /* nested submenu offset */ .nav-list ul li > ul li ul { border-radius: 14px; } /* Dictionary search button → pill CTA */ .search-nd-cart { padding: 25px 0; } .search-nd-cart li { margin: 0; padding: 0; border-left: 0; } .search-nd-cart li a { display: inline-flex; align-items: center; gap: 9px; font-size: 13px !important; color: #fff !important; background: linear-gradient(135deg, #5c6bc0, #3f51b5); padding: 11px 20px; border-radius: 999px; box-shadow: 0 10px 22px -12px rgba(63, 81, 181, .8); transition: transform .22s ease, box-shadow .22s ease; } .search-nd-cart li a:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(63, 81, 181, .9); } .search-nd-cart li a span { font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 600; font-size: 12.5px !important; letter-spacing: .02em; } /* ===================== FOOTER ===================== */ .footer { background: linear-gradient(180deg, #1a1f3a 0%, #141831 100%); } .footer-column { padding: 66px 0 46px; } .f-column-widget { position: relative; } .f-column-widget h4 { font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 17px; font-weight: 700; color: #fff; padding: 0 0 14px; margin: 0 0 24px; } .f-column-widget h4::before { content: ""; position: absolute; left: 0; top: auto; bottom: 0; width: 42px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5c6bc0, #ff7a59); } /* Brand column */ .f-brand .f-logo { height: 50px; width: auto; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .95; } .f-brand p { color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.75; margin: 0 0 22px; max-width: 320px; } /* Address / contact text */ .address-widget, .address-widget p { color: rgba(255, 255, 255, .62); } .address-widget p { margin: 0 0 18px; line-height: 1.7; } .address-list li { color: rgba(255, 255, 255, .62); margin-bottom: 12px; font-size: 14px; } .address-list li i { color: #7986cb; margin-right: 10px; width: 16px; text-align: center; } /* Quick-link lists */ .f-links { list-style: none; margin: 0; padding: 0; } .f-links li { margin-bottom: 12px; } .f-links li a { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .62); font-size: 14px; transition: color .2s ease, transform .2s ease; } .f-links li a::before { content: "\f105"; font-family: 'FontAwesome'; color: #7986cb; font-size: 12px; transition: transform .2s ease, color .2s ease; } .f-links li a:hover { color: #fff; transform: translateX(3px); } .f-links li a:hover::before { color: #ff7a59; } /* Social icons (inline SVG so they render even if the icon font fails) */ .footer .social-icons { margin-top: 4px; overflow: visible; } .footer .social-icons li a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cfd3e6; transition: background .25s ease, color .25s ease, transform .25s ease; } .footer .social-icons li a svg { width: 18px; height: 18px; fill: currentColor; display: block; } .footer .social-icons li a:hover { color: #fff; transform: translateY(-3px); } .footer .social-icons li a[aria-label="Facebook"]:hover { background: #1877f2; } .footer .social-icons li a[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); } /* Sub footer — match the dark footer instead of the old white bar */ .sub-footer { background: #0f1430; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .07); } .sub-footer p { color: rgba(255, 255, 255, .5); font-size: 12.5px; text-transform: none; } .sub-footer-nav li a { color: rgba(255, 255, 255, .5); text-transform: none; } .sub-footer-nav li a:hover { color: #fff; } .sub-footer-nav li::before { color: rgba(255, 255, 255, .2); } /* ===================== RESPONSIVE ===================== */ @media (max-width: 991px) { .nav-holder { box-shadow: 0 2px 14px -8px rgba(22, 27, 51, .25); } .search-nd-cart { padding: 20px 0; } .footer-column { padding: 50px 0 30px; } .f-column-widget { margin-bottom: 8px; } } @media (max-width: 767px) { .address-list-top { text-align: center; } .address-list-top ul li { float: none; display: inline-block; } .f-column-widget { margin-bottom: 34px; } .sub-footer p { float: none; text-align: center; } }