/* ==========================================================================
BharatBid.AI Design Tokens — for Elementor Custom CSS
Source: tailwind.config.js, src/index.css, src/auth/LoginPage.jsx
Paste this whole block into:
Elementor > Site Settings > Custom Code > Custom CSS
(Requires Elementor Pro. If on free Elementor, use a child theme's
style.css or the "Simple Custom CSS" plugin instead.)
Also add these two font links via
Site Settings > Custom Code > Head:
========================================================================== */
:root {
/* Brand colors */
--bb-navy-900: #0F2027; /* primary: body text, primary CTA bg, dark shell */
--bb-navy-500: #1A3540; /* hover state on navy surfaces */
--bb-navy-100: #C2C8CB; /* muted text on light */
--bb-navy-50: #E6E9EA; /* tint borders */
--bb-saffron-500: #FF6B35; /* accent CTAs, icons, focus rings, selection */
--bb-saffron-600: #E55A28; /* saffron hover */
--bb-saffron-100: #FFD9C5; /* soft accent surface */
--bb-saffron-50: #FFEFE7; /* softest accent surface */
--bb-dashboard-bg: #FAFAFA; /* body/page background */
--bb-india-green: #138808; /* tricolour hairline only */
--bb-border-gray: #E4E7EC; /* card/input borders */
--bb-muted-text: #6B7280; /* secondary text */
/* Radii */
--bb-radius-sm: 6px;
--bb-radius-md: 8px;
--bb-radius-lg: 10px; /* buttons, inputs */
--bb-radius-2xl: 16px; /* cards */
/* Spacing */
--bb-section-pad-mobile: 48px;
--bb-section-pad-desktop: 64px;
--bb-card-pad: 32px;
}
/* --------------------------------------------------------------------
Typography
-------------------------------------------------------------------- */
body, .elementor-widget-theme-post-content, p, li, a, span,
.entry-title, .entry-content, .post-title, .page-title {
font-family: 'IBM Plex Sans', sans-serif !important;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.elementor-heading-title,
.entry-title, .entry-title a,
.post-title, .post-title a,
[class*="post-grid"] [class*="title"] a,
[class*="post-grid"] [class*="title"] {
font-family: 'Cabinet Grotesk', sans-serif !important;
letter-spacing: -0.01em;
color: var(--bb-navy-900) !important;
}
h1, .bb-h1-hero, .entry-title {
font-weight: 800 !important;
font-size: 36px !important;
line-height: 1.05 !important;
}
@media (min-width: 1024px) {
h1, .bb-h1-hero, .entry-title { font-size: 48px !important; }
}
/* Undo the big-hero H1 sizing specifically inside the header template —
Elementor/Royal Addons often renders the Site Title as an , which
is a header, not an article headline, and shouldn't be huge. */
[data-elementor-type="header"] h1,
.elementor-location-header h1,
header h1 {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
[data-elementor-type="header"] .site-description,
.elementor-location-header .site-description,
header .site-description,
[class*="tagline"] {
font-size: 12px !important;
color: var(--bb-muted-text) !important;
font-weight: 400 !important;
}
[data-elementor-type="header"] img,
.elementor-location-header img,
header img {
max-height: 40px !important;
width: auto !important;
}
h2 {
font-weight: 700 !important;
font-size: 30px !important;
}
@media (min-width: 768px) { h2 { font-size: 32px !important; } }
@media (min-width: 1024px) { h2 { font-size: 36px !important; } }
h3 {
font-weight: 700 !important;
font-size: 18px !important;
}
@media (min-width: 1024px) { h3 { font-size: 22px !important; } }
body, p, li, .entry-content {
font-size: 14px;
line-height: 1.6;
}
@media (min-width: 768px) {
body, p, li, .entry-content { font-size: 16px; }
}
/* Category label (the "BLOG" eyebrow text) */
[class*="post-grid"] [class*="category"],
[class*="post-grid"] [class*="term"] {
color: var(--bb-saffron-500) !important;
font-family: 'IBM Plex Mono', monospace !important;
}
/* Read More / any button-like link inside post cards or single posts,
regardless of the exact widget's class naming */
a[class*="read-more"], a[class*="readmore"], a[class*="more-link"],
.elementor-button, [class*="post-grid"] a[href][class*="button"] {
background: var(--bb-navy-900) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--bb-radius-lg) !important;
padding: 0 20px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
font-family: 'IBM Plex Sans', sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
font-size: 12px !important;
transition: all 200ms ease;
}
a[class*="read-more"]:hover, a[class*="readmore"]:hover,
a[class*="more-link"]:hover, .elementor-button:hover {
background: rgba(15, 32, 39, 0.9) !important;
color: #FFFFFF !important;
}
.bb-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.22em;
}
/* --------------------------------------------------------------------
Buttons
-------------------------------------------------------------------- */
/* Primary (Navy) */
.bb-btn-primary,
.elementor-button.bb-btn-primary {
background: var(--bb-navy-900);
color: #FFFFFF;
height: 44px;
padding: 0 20px;
border-radius: var(--bb-radius-lg);
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.22em;
border: none;
transition: all 200ms ease;
}
.bb-btn-primary:hover {
background: rgba(15, 32, 39, 0.9);
}
/* Accent (Saffron) */
.bb-btn-accent,
.elementor-button.bb-btn-accent {
background: var(--bb-saffron-500);
color: var(--bb-navy-900);
height: 32px;
padding: 0 10px;
border-radius: var(--bb-radius-md);
font-family: 'IBM Plex Mono', monospace;
font-weight: 600;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.22em;
border: none;
transition: filter 200ms;
}
.bb-btn-accent:hover {
filter: brightness(0.95);
}
/* Ghost / outline (blog "Read more" style) */
.bb-btn-ghost,
.elementor-button.bb-btn-ghost {
background: transparent;
color: var(--bb-navy-900);
border: 1px solid var(--bb-border-gray);
border-radius: var(--bb-radius-lg);
transition: all 200ms ease;
}
.bb-btn-ghost:hover {
background: var(--bb-dashboard-bg);
border-color: var(--bb-navy-900);
}
/* --------------------------------------------------------------------
Cards (use on blog post-preview cards, archive grid)
-------------------------------------------------------------------- */
.bb-card,
.elementor-post__card {
background: #FFFFFF;
border: 1px solid var(--bb-border-gray);
border-radius: var(--bb-radius-2xl);
box-shadow: 0 10px 25px -12px rgba(15, 32, 39, 0.08);
padding: var(--bb-card-pad);
}
/* --------------------------------------------------------------------
Selection & focus
-------------------------------------------------------------------- */
::selection {
background: var(--bb-saffron-500);
color: #FFFFFF;
}
:focus {
outline: 2px solid rgba(255, 107, 53, 0.6);
outline-offset: 2px;
}
input:focus {
border-color: rgba(99, 102, 241, 0.6);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* --------------------------------------------------------------------
Signature accents — reproduce at least the hairline on the blog
-------------------------------------------------------------------- */
/* Tricolour hairline strip — drop a
directly under the Elementor header template */
.bb-tricolour {
height: 3px;
width: 100%;
background: linear-gradient(
to right,
var(--bb-saffron-500) 0%, var(--bb-saffron-500) 33.3%,
#FFFFFF 33.3%, #FFFFFF 66.6%,
var(--bb-india-green) 66.6%, var(--bb-india-green) 100%
);
}
/* Grain / dot noise — apply to any full-width dark navy hero section
e.g. add class "bb-hero-grain" to the Elementor section */
.bb-hero-grain {
background-color: var(--bb-navy-900);
background-image:
radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
radial-gradient(rgba(255,107,53,0.05) 1px, transparent 1px);
background-size: 24px 24px, 32px 32px;
background-position: 0 0, 12px 12px;
}
/* --------------------------------------------------------------------
Header layout — targeting the real Elementor data-id hooks directly,
confirmed from the live DOM, instead of guessing at class names.
-------------------------------------------------------------------- */
/* Layout direction/justify/align for the header containers is now set
natively in Elementor's own Style > Layout panel on each container
(data-id 25b80d5, 467aec1, 634daa3) — see instructions. Only a
width safety-net stays here, to prevent the title text from ever
collapsing to zero width and wrapping letter-by-letter again. */
[data-id="d76cc0c"] {
min-width: 180px !important;
overflow: hidden !important;
}
[data-id="d76cc0c"] .ha-site-title,
[data-id="d76cc0c"] .ha-site-tagline {
white-space: nowrap !important;
}
/* Site title text (renders as an h2, not h1 — good, leave article h1s alone) */
.ha-site-title {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin: 0 !important;
color: var(--bb-navy-900) !important;
}
/* Tagline */
.ha-site-tagline span {
font-size: 12px !important;
color: var(--bb-muted-text) !important;
font-weight: 400 !important;
}
/* Nav menu: force it to show as a plain inline link, not a hamburger
icon — with only one menu item, the hamburger toggle is unnecessary
and is likely what's pushing the layout around. */
.ha-nav-humberger-wrapper {
display: none !important;
}
.ha-nav-menu ul.menu {
display: flex !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ha-nav-menu ul.menu li a {
font-family: 'IBM Plex Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
color: var(--bb-navy-900) !important;
text-decoration: none !important;
}
.ha-nav-menu ul.menu li a:hover {
color: var(--bb-saffron-500) !important;
}
/* White, not the app's internal dashboard grey — this is the public
marketing/blog site, not a logged-in app screen. Broad selector +
!important because themes often set a grey content-area background
with higher specificity than a plain "body" rule. */
html, body, .site, #page, .content-area, .site-content, main {
background-color: #FFFFFF !important;
}