@charset "UTF-8";
/*!
* nxbazar.com — the site design system.
*
* Spec: G:\01-Projects\Project Nxbazar\DESIGN-HOME-2026.md
*
* THE LAYERING. Three stylesheets, loaded in this order on every front-end page:
*
* 1. inc/storefront.css the tokens and the shop: shop and category archives,
* the product card, the cart, the checkout, the theme
* header. Token names --nxb-*.
* 2. inc/nxb-site.css this file. The self-hosted fonts, the page-level type,
* the site footer, WooCommerce's shared furniture
* (buttons, fields, notices, tables, pagination), the
* content pages, the blog and My Account.
* 3. inc/home2.css the home page only, and only on the home page. It
* depends on the two above and defines nothing shared.
*
* Every colour comes from a token. The token values are the DESIGN-HOME-2026 set
* and they live in exactly one place, `:root` in inc/storefront.css.
*
* WHY THE FOOTER CLASSES KEEP AN nxb2- PREFIX. The footer is the home page's own
* component (§3.8 of the spec) and it was named there. It is defined once, in
* section 7 below, and the home page and every other page render the same markup
* from the same PHP function (nxb_site_footer()), so renaming the classes would be
* churn with nothing to show for it. The rules here are the same rules, moved out
* of home2.css so that a page which never loads home2.css still gets them.
*
* @package minimog-child
*/
/* ==========================================================================
1. Web fonts, self-hosted
==========================================================================
Plus Jakarta Sans has no glyph for the Taka sign (U+09F3, verified against the
font's own character map), so Noto Sans Bengali is loaded for the Bengali range
only and supplies ৳ and nothing else. No external request is ever made.
These are declared here rather than in home2.css because the whole site now
renders in this face, not just the home page. */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/pjs-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/pjs-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Noto Sans Bengali";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/nsb-bengali.woff2") format("woff2");
unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2,
U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7,
U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
/* ==========================================================================
2. Page-level type
==========================================================================
The body class `nxb-site` is added to every page except the home page, which
carries `nxb2-page` instead. It exists to give these rules one extra class of
specificity, because Elementor prints its global element styles on the body as
`.elementor-kit-16698 h1` — that is 0,1,1, and a bare `h1` rule is 0,0,1 and
loses. `body.nxb-site h1` is 0,1,2 and wins. See DESIGN-HOME-2026.md §8.1. */
body.nxb-site,
body.nxb2-page {
background-color: var(--nxb2-bg);
font-family: var(--nxb2-font);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--nxb2-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.nxb-site h1,
body.nxb-site h2,
body.nxb-site h3,
body.nxb-site h4,
body.nxb-site h5,
body.nxb-site h6 {
font-family: var(--nxb2-font);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--nxb2-ink);
}
/* The theme paints its own wrapper; keep it transparent so a section background
can run edge to edge on any page, the same as on the home page. */
body.nxb-site #page-content,
body.nxb-site .content-wrapper {
background-color: transparent;
}
/* ==========================================================================
3. Container
==========================================================================
The shop, the cart and the checkout sit in the theme's `.container`, which
measures 1200px. The home page measures 1320px with 24px of padding, so the two
would not line up. Line them up. */
body.nxb-site .container,
body.nxb2-page .container {
max-width: var(--nxb2-wrap);
padding-left: 24px;
padding-right: 24px;
}
body.nxb-site .page-header .container,
body.nxb-site .page-header .header-wrap {
max-width: var(--nxb2-wrap);
}
/* ==========================================================================
4. WooCommerce's shared furniture
==========================================================================
The storefront sheet maps buttons on the shop, the archives, the cart and the
checkout. These are the surfaces it did not reach: My Account, the
order-received page, and anything else WooCommerce drops a button on. */
body.nxb-site .woocommerce a.button,
body.nxb-site .woocommerce button.button,
body.nxb-site .woocommerce input.button,
body.nxb-site .woocommerce input[type="submit"],
body.nxb-site .woocommerce #place_order,
body.nxb-site .woocommerce .woocommerce-Button,
body.nxb-site .woocommerce-form-login button,
body.nxb-site .woocommerce-form-register button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 22px;
border: 1px solid var(--nxb2-indigo);
border-radius: var(--nxb2-r-md);
background: var(--nxb2-indigo);
color: #fff;
font-family: var(--nxb2-font);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
text-decoration: none;
text-transform: none;
box-shadow: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
cursor: pointer;
}
body.nxb-site .woocommerce a.button:hover,
body.nxb-site .woocommerce button.button:hover,
body.nxb-site .woocommerce input.button:hover,
body.nxb-site .woocommerce input[type="submit"]:hover,
body.nxb-site .woocommerce #place_order:hover,
body.nxb-site .woocommerce .woocommerce-Button:hover {
background: var(--nxb2-indigo-dark);
border-color: var(--nxb2-indigo-dark);
color: #fff;
}
/* ---- fields ----
Matched on the input type rather than on `.form-row`, and on two possible
ancestors rather than one:
.woocommerce WooCommerce's own templates: cart, checkout, the fields
on a variable product
.elementor-shortcode how this theme embeds the login and register forms. The
My Account inputs are NOT inside a .woocommerce element
at all, which is why the first pass of these rules
reached nothing and the two fields stayed flat grey
blocks with no border. Verified with a live DOM walk. */
body.nxb-site :is(.woocommerce, .elementor-shortcode) input.input-text,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="text"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="email"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="tel"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="password"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="number"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="url"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="search"],
body.nxb-site :is(.woocommerce, .elementor-shortcode) textarea,
body.nxb-site :is(.woocommerce, .elementor-shortcode) form .form-row select,
body.nxb-site :is(.woocommerce, .elementor-shortcode) select {
height: auto;
padding: 13px 16px;
border: 1px solid var(--nxb2-line-2);
border-radius: var(--nxb2-r-sm);
background-color: var(--nxb2-surface);
font-family: var(--nxb2-font);
font-size: 15.5px;
line-height: 1.5;
color: var(--nxb2-ink);
}
body.nxb-site :is(.woocommerce, .elementor-shortcode) input.input-text:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="text"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="email"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="tel"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="password"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="number"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="url"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) input[type="search"]:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) textarea:focus,
body.nxb-site :is(.woocommerce, .elementor-shortcode) select:focus {
border-color: var(--nxb2-indigo);
outline: 2px solid rgba(89, 62, 247, 0.18);
outline-offset: 0;
}
body.nxb-site :is(.woocommerce, .elementor-shortcode) input::placeholder,
body.nxb-site :is(.woocommerce, .elementor-shortcode) textarea::placeholder {
color: var(--nxb2-muted);
opacity: 1;
}
body.nxb-site :is(.woocommerce, .elementor-shortcode) form .form-row label,
body.nxb-site :is(.woocommerce, .elementor-shortcode) form label {
font-family: var(--nxb2-font);
font-size: 14px;
font-weight: 700;
color: var(--nxb2-ink);
}
/* ---- the cart's Remove link ----
The theme paints it as a filled block with red text on it, which is both
off-token and close to unreadable at 13px. It reads as a quiet outlined button
instead, and only turns red on hover, where red means "this will remove
something" rather than "this is broken". */
body.nxb-site .woocommerce a.remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 7px 14px;
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-sm);
background-color: var(--nxb2-surface) !important;
font-family: var(--nxb2-font);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
color: var(--nxb2-muted) !important;
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease;
}
body.nxb-site .woocommerce a.remove:hover {
background-color: var(--nxb2-surface) !important;
border-color: #c0342f;
color: #c0342f !important;
}
/* ---- notices ---- */
body.nxb-site .woocommerce-message,
body.nxb-site .woocommerce-info,
body.nxb-site .woocommerce-error,
body.nxb-site .woocommerce-noreviews,
body.nxb-site p.no-comments {
border: 1px solid var(--nxb2-line);
border-top: 3px solid var(--nxb2-indigo);
border-radius: var(--nxb2-r-sm);
background-color: var(--nxb2-surface);
font-family: var(--nxb2-font);
font-size: 15px;
line-height: 1.6;
color: var(--nxb2-ink);
}
body.nxb-site .woocommerce-message::before,
body.nxb-site .woocommerce-info::before {
color: var(--nxb2-indigo);
}
body.nxb-site .woocommerce-error {
border-top-color: #c0342f;
}
body.nxb-site .woocommerce-error::before {
color: #c0342f;
}
/* ---- breadcrumb ---- */
body.nxb-site .woocommerce-breadcrumb {
margin: 0 0 10px;
font-family: var(--nxb2-font);
font-size: 13.5px;
line-height: 1.6;
color: var(--nxb2-muted);
}
body.nxb-site .woocommerce-breadcrumb a {
color: var(--nxb2-muted);
text-decoration: none;
}
body.nxb-site .woocommerce-breadcrumb a:hover {
color: var(--nxb2-indigo);
}
/* ---- pagination ---- */
body.nxb-site .woocommerce nav.woocommerce-pagination ul,
body.nxb-site .woocommerce .woocommerce-pagination ul.page-numbers {
border: 0;
display: flex;
gap: 8px;
justify-content: center;
margin: 34px 0 0;
}
body.nxb-site .woocommerce nav.woocommerce-pagination ul li,
body.nxb-site .woocommerce .woocommerce-pagination ul.page-numbers li {
border: 0;
margin: 0;
}
body.nxb-site .woocommerce nav.woocommerce-pagination ul li a,
body.nxb-site .woocommerce nav.woocommerce-pagination ul li span,
body.nxb-site .woocommerce .woocommerce-pagination ul.page-numbers li a,
body.nxb-site .woocommerce .woocommerce-pagination ul.page-numbers li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-sm);
background-color: var(--nxb2-surface);
font-family: var(--nxb2-font);
font-size: 14.5px;
font-weight: 700;
color: var(--nxb2-ink);
}
body.nxb-site .woocommerce nav.woocommerce-pagination ul li span.current,
body.nxb-site .woocommerce nav.woocommerce-pagination ul li a:hover,
body.nxb-site .woocommerce .woocommerce-pagination ul.page-numbers li span.current,
body.nxb-site .woocommerce .woocommerce-pagination ul.page-numbers li a:hover {
background-color: var(--nxb2-indigo);
border-color: var(--nxb2-indigo);
color: #fff;
}
/* ==========================================================================
5. Content pages — About, Contact, the policies, the blog
==========================================================================
These pages are Elementor-built, or plain WordPress-editor content, or both, so
two different wrappers have to be covered:
.entry-content what a theme normally renders a page body into
#page-main-content > article what this theme actually renders one into. The
privacy and terms pages are a bare and a
run of
as direct children of ,
inside #page-main-content, with no
.entry-content anywhere on them. That is why
the first pass of these rules reached neither
page and changed nothing.
The rules are deliberately broad: they are the only thing standing between a
policy page and the browser's default serif list. They sit on `body.nxb-site` so
they also outrank Elementor's global element styles. */
body.nxb-site :is(.entry-content, #page-main-content > article) {
font-family: var(--nxb2-font);
font-size: 16px;
line-height: 1.75;
color: var(--nxb2-body);
}
/* ---- the measure ----
880px is about 90 characters at this size, which is as wide as a run of prose
stays comfortable. Applied to the plain pages only: the Elementor ones are two-
and three-column layouts and narrowing them would break them. */
body.nxb-site.page:not(.elementor-page) #page-main-content {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
body.nxb-site.page:not(.elementor-page) #page-main-content > article {
max-width: 880px;
margin-inline: auto;
padding-block: 54px 76px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) > * + * {
margin-top: 18px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) h1 {
font-size: 40px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.8px;
color: var(--nxb2-ink);
margin: 0 0 22px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) h2 {
font-size: 24px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.4px;
color: var(--nxb2-ink);
margin: 40px 0 12px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) h3 {
font-size: 19px;
font-weight: 800;
line-height: 1.3;
color: var(--nxb2-ink);
margin: 30px 0 10px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) h4 {
font-size: 17px;
font-weight: 800;
margin: 24px 0 8px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) p,
body.nxb-site :is(.entry-content, #page-main-content > article) li {
font-size: 16px;
line-height: 1.75;
color: var(--nxb2-body);
}
body.nxb-site :is(.entry-content, #page-main-content > article) ul,
body.nxb-site :is(.entry-content, #page-main-content > article) ol {
margin: 16px 0;
padding-left: 22px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) ul {
list-style: disc;
}
body.nxb-site :is(.entry-content, #page-main-content > article) ol {
list-style: decimal;
}
body.nxb-site :is(.entry-content, #page-main-content > article) li + li {
margin-top: 6px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) a {
color: var(--nxb2-indigo);
text-decoration: underline;
text-underline-offset: 2px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) a:hover {
color: var(--nxb2-indigo-dark);
}
body.nxb-site :is(.entry-content, #page-main-content > article) blockquote {
margin: 22px 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--nxb2-indigo);
font-size: 17px;
color: var(--nxb2-ink);
}
body.nxb-site :is(.entry-content, #page-main-content > article) img {
border-radius: var(--nxb2-r-md);
}
body.nxb-site :is(.entry-content, #page-main-content > article) table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--nxb2-line);
font-size: 15px;
}
body.nxb-site :is(.entry-content, #page-main-content > article) th,
body.nxb-site :is(.entry-content, #page-main-content > article) td {
padding: 12px 16px;
border-bottom: 1px solid var(--nxb2-line);
text-align: left;
}
body.nxb-site :is(.entry-content, #page-main-content > article) th {
background-color: var(--nxb2-soft);
font-weight: 800;
color: var(--nxb2-ink);
}
/* ---- the page title band ----
A content page whose theme template prints a bare title gets the same heading
treatment the shop's archive head has, so a visitor cannot tell which template
they landed on. */
body.nxb-site .page-title-bar,
body.nxb-site .page-header--title {
background-color: var(--nxb2-surface);
border-bottom: 1px solid var(--nxb2-line);
}
body.nxb-site .page-title-bar h1,
body.nxb-site .page-header--title h1 {
font-size: 40px;
font-weight: 800;
letter-spacing: -0.8px;
color: var(--nxb2-ink);
}
/* ---- blog and archive listings ---- */
body.nxb-site .blog .post-item,
body.nxb-site .archive .post-item {
background-color: var(--nxb2-surface);
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-lg);
box-shadow: var(--nxb2-shadow-1);
overflow: hidden;
}
body.nxb-site .blog .post-item:hover,
body.nxb-site .archive .post-item:hover {
box-shadow: var(--nxb2-shadow-2);
}
body.nxb-site .blog .post-item .post-title,
body.nxb-site .archive .post-item .post-title,
body.nxb-site .blog .post-item .entry-title,
body.nxb-site .archive .post-item .entry-title {
font-size: 19px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.2px;
}
body.nxb-site .blog .post-item .entry-title a,
body.nxb-site .archive .post-item .entry-title a {
color: var(--nxb2-ink);
text-decoration: none;
}
body.nxb-site .blog .post-item .entry-title a:hover,
body.nxb-site .archive .post-item .entry-title a:hover {
color: var(--nxb2-indigo);
}
body.nxb-site .blog .post-item .post-meta,
body.nxb-site .archive .post-item .post-meta {
font-size: 13px;
color: var(--nxb2-muted);
}
/* ==========================================================================
6. My Account
==========================================================================
The login, the register form and the account tabs. The theme renders these
inside its own panel, which is a grey box with no relation to anything else on
the site. Put them on the same white surface with the same hairline as every
other panel here. */
body.nxb-site.woocommerce-account .woocommerce {
max-width: 1180px;
margin-inline: auto;
}
body.nxb-site .woocommerce form.login,
body.nxb-site .woocommerce form.register,
body.nxb-site .woocommerce form.lost_reset_password,
body.nxb-site .woocommerce-account .woocommerce-form-login,
body.nxb-site .woocommerce-account .woocommerce-form-register {
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-lg);
background-color: var(--nxb2-surface);
box-shadow: var(--nxb2-shadow-1);
padding: 30px;
font-family: var(--nxb2-font);
}
body.nxb-site .woocommerce-account .woocommerce-form-login__rememberme {
font-size: 14px;
color: var(--nxb2-body);
}
body.nxb-site .woocommerce-account .woocommerce-LostPassword a {
font-size: 14px;
color: var(--nxb2-indigo);
}
body.nxb-site .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-lg);
background-color: var(--nxb2-surface);
padding: 12px;
box-shadow: var(--nxb2-shadow-1);
}
body.nxb-site .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 11px 14px;
border-radius: var(--nxb2-r-sm);
font-family: var(--nxb2-font);
font-size: 15px;
font-weight: 700;
color: var(--nxb2-ink);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
body.nxb-site .woocommerce-MyAccount-navigation ul li a:hover,
body.nxb-site .woocommerce-MyAccount-navigation ul li.is-active a {
background-color: var(--nxb2-indigo-soft);
color: var(--nxb2-indigo);
}
body.nxb-site .woocommerce-MyAccount-content {
font-family: var(--nxb2-font);
font-size: 15.5px;
line-height: 1.7;
color: var(--nxb2-body);
}
body.nxb-site .woocommerce-MyAccount-content h2,
body.nxb-site .woocommerce-MyAccount-content h3 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.3px;
color: var(--nxb2-ink);
margin-bottom: 12px;
}
body.nxb-site .woocommerce-account .woocommerce-MyAccount-content table,
body.nxb-site .woocommerce-account table.woocommerce-orders-table,
body.nxb-site .woocommerce-account table.shop_table {
width: 100%;
border: 1px solid var(--nxb2-line);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--nxb2-r-md);
overflow: hidden;
background-color: var(--nxb2-surface);
}
body.nxb-site .woocommerce-account table.shop_table thead th {
background-color: var(--nxb2-soft);
font-family: var(--nxb2-font);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--nxb2-muted);
padding: 13px 16px;
}
body.nxb-site .woocommerce-account table.shop_table tbody td {
padding: 14px 16px;
border-top: 1px solid var(--nxb2-line);
font-size: 15px;
color: var(--nxb2-body);
}
body.nxb-site .woocommerce-account .woocommerce-Addresses .woocommerce-Address,
body.nxb-site .woocommerce-account .woocommerce-Address {
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-md);
background-color: var(--nxb2-surface);
padding: 22px;
}
body.nxb-site .woocommerce-info,
body.nxb-site .woocommerce-account .woocommerce-info,
body.nxb-site .woocommerce-account .woocommerce-message {
font-family: var(--nxb2-font);
}
/* ==========================================================================
7. The site footer
==========================================================================
The home page's own footer (§3.8 of the spec), defined once, rendered by
nxb_site_footer() on every page. Moved here from home2.css so that a page which
never loads home2.css still gets it.
The two `body.nxb2-page` selectors below are kept alongside `body.nxb-site`
because the footer on the home page needs exactly the same protection from
Elementor's global link colour that it needs everywhere else. */
/* The footer carries the .nxb2 class names but, on any page that is not the home
page, it is not inside a .nxb2 wrapper — and the shell rules (the container, the
box model, the zeroed margins) live in home2.css, which only the home page loads.
Without the four rules below the footer would run edge to edge with no padding and
its lists would grow bullets. Scoped to the footer so nothing else is affected. */
.nxb2-foot,
.nxb2-foot *,
.nxb2-foot *::before,
.nxb2-foot *::after {
box-sizing: border-box;
}
.nxb2-foot .nxb2-wrap {
width: 100%;
max-width: var(--nxb2-wrap);
margin-inline: auto;
padding-inline: 24px;
}
.nxb2-foot__main,
.nxb2-foot__bar-inner {
width: 100%;
}
.nxb2-foot p,
.nxb2-foot ul,
.nxb2-foot li,
.nxb2-foot span,
.nxb2-foot footer {
margin: 0;
padding: 0;
}
.nxb2-foot {
background-color: var(--nxb2-surface);
border-top: 1px solid var(--nxb2-line);
font-family: var(--nxb2-font);
color: var(--nxb2-body);
}
.nxb2-foot__main {
display: grid;
grid-template-columns: 2fr 1fr 1.15fr 1.35fr;
gap: 40px;
padding-block: 62px 54px;
}
.nxb2-foot__brand-name {
display: inline-flex;
align-items: baseline;
gap: 0;
font-size: 30px;
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
color: var(--nxb2-ink);
}
.nxb2-foot__brand-name i {
font-style: normal;
color: var(--nxb2-indigo);
}
.nxb2-foot__tagline {
display: block;
margin-top: 5px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.3;
color: var(--nxb2-muted);
}
.nxb2-foot__about {
margin-top: 20px;
max-width: 340px;
font-size: 14.5px;
line-height: 1.7;
color: var(--nxb2-muted);
}
.nxb2-socials {
display: flex;
gap: 10px;
margin-top: 20px;
}
body.nxb2-page .nxb2-socials a,
body.nxb-site .nxb2-socials a {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: var(--nxb2-r-sm);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--nxb2-ink);
text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease;
}
.nxb2-socials a:hover,
.nxb2-socials a:focus {
background-color: var(--nxb2-indigo-soft);
color: var(--nxb2-indigo);
}
.nxb2-socials svg {
width: 20px;
height: 20px;
}
.nxb2-foot__head {
display: block;
font-size: 16px;
font-weight: 800;
line-height: 1.3;
color: var(--nxb2-ink);
}
.nxb2-foot__list {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
body.nxb2-page .nxb2-foot__list a,
body.nxb-site .nxb2-foot__list a {
font-size: 15px;
line-height: 1.6;
color: var(--nxb2-muted);
text-decoration: none;
transition: color 0.16s ease;
}
body.nxb2-page .nxb2-foot__list a:hover,
body.nxb2-page .nxb2-foot__list a:focus,
body.nxb-site .nxb2-foot__list a:hover,
body.nxb-site .nxb2-foot__list a:focus {
color: var(--nxb2-indigo);
}
/* ---- 7.1 payment marks ---- */
.nxb2-pays {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
/* The marks are background images, not ![]()
tags, and the URLs live here rather
than in the markup.
W3 Total Cache rewrites every ![]()
on the site into a 1x1 placeholder plus a
data-src that only its own script swaps back in, and only for images already in
view, so these three logos were invisible until the page was scrolled. It does
the same to an inline background-image, moving it to data-bg. A URL inside a
stylesheet is the one form it leaves alone. */
.nxb2-pay {
position: relative;
display: inline-flex;
/* The same flex-shrink trap as the step disc: a fixed-size box in a flex row is
squashed the moment the row is tight. See DESIGN-HOME-2026.md §3.5. */
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 78px;
height: 46px;
padding: 7px;
background-color: var(--nxb2-surface);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-sm);
}
.nxb2-pay--bkash {
background-image: url("../assets/pay-bkash.png");
}
.nxb2-pay--nagad {
background-image: url("../assets/pay-nagad.png");
}
.nxb2-pay--rocket {
background-image: url("../assets/pay-rocket.png");
}
.nxb2-pay--soon::after {
content: "soon";
position: absolute;
right: -5px;
top: -7px;
padding: 2px 6px;
background-color: var(--nxb2-soft);
border: 1px solid var(--nxb2-line);
border-radius: var(--nxb2-r-full);
font-size: 9.5px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--nxb2-muted);
}
.nxb2-pay__note {
margin-top: 12px;
font-size: 13.5px;
line-height: 1.55;
color: var(--nxb2-muted);
}
/* ---- 7.2 bottom bar ---- */
.nxb2-foot__bar {
border-top: 1px solid var(--nxb2-line);
background-color: #f9fbfe;
font-size: 14px;
line-height: 1.5;
color: var(--nxb2-muted);
}
.nxb2-foot__bar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
padding-block: 22px;
}
.nxb2-foot__bar b {
font-weight: 800;
color: var(--nxb2-ink);
}
.nxb2-foot__bar .nxb2-heart {
color: #e8384f;
font-style: normal;
}
/* ==========================================================================
8. Responsive
========================================================================== */
@media (max-width: 1180px) {
.nxb2-foot__main {
grid-template-columns: 1.6fr 1fr 1.2fr;
}
.nxb2-foot__col--pays {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
body.nxb-site .container,
body.nxb2-page .container,
body.nxb-site .page-header .container,
body.nxb-site .page-header .header-wrap {
padding-left: 20px;
padding-right: 20px;
}
body.nxb-site .entry-content h1,
body.nxb-site .page-title-bar h1,
body.nxb-site .page-header--title h1 {
font-size: 32px;
}
body.nxb-site .entry-content h2 {
font-size: 21px;
}
}
@media (max-width: 640px) {
.nxb2-foot__main {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
padding-block: 44px 38px;
}
.nxb2-foot__bar-inner {
justify-content: center;
text-align: center;
}
.nxb2-pay {
width: 70px;
height: 42px;
}
body.nxb-site.woocommerce-account .woocommerce {
padding-inline: 0;
}
body.nxb-site .woocommerce form.login,
body.nxb-site .woocommerce form.register,
body.nxb-site .woocommerce-account .woocommerce-form-login,
body.nxb-site .woocommerce-account .woocommerce-form-register {
padding: 22px;
}
}
/* ==========================================================================
9. Elementor widgets, brought onto the design system
==========================================================================
About us, Contact us, Refund and Returns and My Account are Elementor pages.
Elementor writes a widget's colours into generated CSS keyed to the widget's own
id, so a single heading or button can be red on a site whose only accent is
indigo — the Contact page had a red heading, a red button and a thick red rule
under each of its three columns. Matching that selector shape rule for rule would
mean chasing generated ids; the honest way to pull a third-party widget onto a
design system is to state the system's values once, broadly, and let them win.
`!important` is used deliberately here, and only here. Elementor's generated
rules and its inline widget styles are not something this stylesheet can outrank
by specificity alone, and a widget that ignores the design system is exactly the
problem being fixed. The scope is `body.nxb-site`, so no page that is not
Elementor-built is affected, and the home page (`body.nxb2-page`) is not either.
Verified live 2026-10-12: the Contact page's `.elementor-button` computed to
rgb(246, 40, 1) — a red — before these rules. */
body.nxb-site .elementor-button,
body.nxb-site .elementor-widget-button .elementor-button {
background-color: var(--nxb2-indigo) !important;
background-image: none !important;
border: 1px solid var(--nxb2-indigo) !important;
border-radius: var(--nxb2-r-md) !important;
padding: 14px 26px !important;
font-family: var(--nxb2-font) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #fff !important;
box-shadow: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.nxb-site .elementor-button:hover,
body.nxb-site .elementor-button:focus,
body.nxb-site .elementor-widget-button .elementor-button:hover {
background-color: var(--nxb2-indigo-dark) !important;
border-color: var(--nxb2-indigo-dark) !important;
color: #fff !important;
}
body.nxb-site .elementor-heading-title {
font-family: var(--nxb2-font) !important;
font-weight: 800 !important;
letter-spacing: -0.4px !important;
text-transform: none !important;
color: var(--nxb2-ink) !important;
}
body.nxb-site .elementor-widget-text-editor,
body.nxb-site .elementor-widget-text-editor p,
body.nxb-site .elementor-text-editor {
font-family: var(--nxb2-font) !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: var(--nxb2-body) !important;
}
/* Elementor's divider widget. */
body.nxb-site .elementor-divider-separator {
border-top-color: var(--nxb2-line) !important;
}
body.nxb-site .elementor-widget-divider .elementor-divider-separator {
border-top-width: 1px !important;
}
/*
* The widget wrapper's own border.
*
* This one was the hardest to find. Each of the Contact page's three columns had a
* 5px red rule under it, and it was not a divider widget at all: it was a
* `border-bottom` on `.elementor-widget-container`, the wrapper Elementor puts
* around every widget, set to rgb(246, 40, 1). An accent rule under a column is a
* reasonable thing to want — the colour was the problem, not the 5px — so the
* colour is re-pointed at the accent and the width is left alone.
*
* Found by walking the live DOM for any element whose computed border or background
* was red-dominant, which named the wrapper and its width directly. Two probes that
* guessed at divider classes had found nothing. */
body.nxb-site .elementor-widget-container,
body.nxb-site .elementor-widget .elementor-icon {
border-color: var(--nxb2-indigo) !important;
}
body.nxb-site .elementor-widget-icon .elementor-icon,
body.nxb-site .elementor-widget-icon .elementor-icon i,
body.nxb-site .elementor-widget-icon .elementor-icon svg {
color: var(--nxb2-indigo) !important;
fill: currentColor;
}
body.nxb-site .elementor-widget-social-icons .elementor-social-icon {
background-color: var(--nxb2-indigo) !important;
border-radius: var(--nxb2-r-sm) !important;
}
body.nxb-site .elementor-widget-social-icons .elementor-social-icon:hover {
background-color: var(--nxb2-indigo-dark) !important;
}
/* The plain list and table a widget can print. */
body.nxb-site .elementor-widget-text-editor ul,
body.nxb-site .elementor-text-editor ul {
list-style: disc;
padding-left: 22px;
}
body.nxb-site .elementor-widget-text-editor ol,
body.nxb-site .elementor-text-editor ol {
list-style: decimal;
padding-left: 22px;
}
body.nxb-site .elementor-widget-text-editor a,
body.nxb-site .elementor-text-editor a {
color: var(--nxb2-indigo);
}