/* ================================================================
BANSHIVAIDIK — BRAND OVERRIDE CSS
File: public/assets/website/css/brand.css
USAGE: Link this AFTER web.css in your layout blade:
This file overrides only the CSS custom properties (variables)
defined in web.css — no layout or structural rules are touched.
================================================================
PALETTE — extracted from official BanshiVaidik logo
----------------------------------------------------------------
Deep Crimson Red #8B1A1A BanshiVaidik wordmark & flame drop
Dark Crimson #6E1212 Darker hover shade of the above
Brand Gold #C49A22 Logo frame / border ring
Light Gold #D4A840 Highlights, prices, badges
Deep Gold #A87C18 Gold hover shade
Cream Beige #F5E8C0 Logo background fill
Forest Green #2D5A27 Leaf motif on the torch
Warm Off-White #FAF8F0 Page background (cream tint)
Warm Surface #F5EDD8 Cards / section backgrounds
Warm Border #E2D3AD Borders (golden-beige)
Warm Text Brown #1A0808 Body text (warm near-black)
Muted Taupe #8A6A60 Placeholder / muted text
================================================================ */
:root {
/* ----------------------------------------------------------
1. BACKGROUNDS
---------------------------------------------------------- */
--clr-bg: #FAF8F0; /* warm off-white (echoes logo cream) */
--clr-surface: #FFFFFF;
--clr-surface-2: #F5EDD8; /* soft cream for cards / alternating rows */
/* ----------------------------------------------------------
2. BORDERS
---------------------------------------------------------- */
--clr-border: #E2D3AD; /* warm golden-beige */
--clr-border-hover: #C49A22; /* brand gold on hover */
/* ----------------------------------------------------------
3. TEXT
---------------------------------------------------------- */
--clr-text: #1A0808; /* near-black with warm red undertone */
--clr-text-2: #4A2424; /* dark muted red-brown for subheadings */
--clr-text-muted: #8A6A60; /* warm taupe for placeholders / captions */
--clr-text-inv: #FFFFFF; /* white — text on dark / coloured bg */
/* ----------------------------------------------------------
4. PRIMARY ACCENT — Deep Crimson Red
Used for: CTA buttons, active nav links, headings,
borders on focus, tags, badges
---------------------------------------------------------- */
--clr-accent: #8B1A1A;
--clr-accent-h: #6E1212; /* darker on hover */
/* ----------------------------------------------------------
5. SECONDARY ACCENT — Brand Gold
Used for: prices, star ratings, "New" chips,
underlines, icon accents, section dividers
---------------------------------------------------------- */
--clr-accent-2: #C49A22;
--clr-accent-2-h: #A87C18; /* deeper gold on hover */
/* ----------------------------------------------------------
6. STATUS / SEMANTIC COLORS
---------------------------------------------------------- */
--clr-success: #2D5A27; /* forest green — leaf motif */
--clr-danger: #C41E1E; /* bright alert red */
--clr-new: #8B1A1A; /* "New" badge — brand red */
--clr-organic: #2D5A27; /* "Organic" / "Natural" label — green */
/* ----------------------------------------------------------
7. BRAND TOKENS (extra — for custom components)
---------------------------------------------------------- */
--brand-red: #8B1A1A;
--brand-red-light: #B52424; /* lighter red for gradients / hover */
--brand-gold: #C49A22;
--brand-gold-light: #D4A840; /* lighter gold for highlights */
--brand-cream: #F5E8C0; /* logo cream — hero tints, section fills */
--brand-green: #2D5A27;
--brand-border-gold: #C49A22;
/* ----------------------------------------------------------
8. LEGACY VARIABLE SUPPORT
(older blade templates that used --primary-* names)
---------------------------------------------------------- */
--primary-red: #8B1A1A;
--primary-gold: #C49A22;
--primary-cream: #F5E8C0;
--primary-green: #2D5A27;
}
/* ================================================================
COMPONENT OVERRIDES
Fine-tuned rules for components that rely on hard-coded colours
rather than CSS variables. Add more below as needed.
================================================================ */
/* --- Announcement bar ----------------------------------------- */
.announcement-bar,
.site-announcement {
background-color: var(--brand-red);
color: var(--clr-text-inv);
}
/* --- Navbar active / hover ------------------------------------ */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-link:hover,
.nav-link.active {
color: var(--brand-red) !important;
}
/* --- Primary buttons ------------------------------------------ */
.btn-primary,
.btn-accent {
background-color: var(--brand-red);
border-color: var(--brand-red);
color: #FFFFFF;
}
.btn-primary:hover,
.btn-accent:hover {
background-color: var(--clr-accent-h);
border-color: var(--clr-accent-h);
}
/* --- Gold / secondary buttons --------------------------------- */
.btn-gold,
.btn-secondary-brand {
background-color: var(--brand-gold);
border-color: var(--brand-gold);
color: #FFFFFF;
}
.btn-gold:hover,
.btn-secondary-brand:hover {
background-color: var(--clr-accent-2-h);
border-color: var(--clr-accent-2-h);
}
/* --- Price / highlight text ----------------------------------- */
.price,
.product-price,
.text-price {
color: var(--brand-red);
}
/* --- Star ratings --------------------------------------------- */
.star-rating,
.rating-stars,
.review-stars {
color: var(--brand-gold);
}
/* --- "New" / "Featured" badges -------------------------------- */
.badge-new,
.badge-featured,
.tag-new {
background-color: var(--brand-red);
color: #FFFFFF;
}
/* --- Section dividers / horizontal rules ---------------------- */
.brand-divider,
hr.brand {
border-color: var(--brand-gold);
opacity: 1;
}
/* --- Focus rings (accessibility) ------------------------------ */
*:focus-visible {
outline-color: var(--brand-red);
}