/** * AstroAhead theme override — Copper (#b06027) * * Apply by adding class `theme-copper` on (see config static.theme_class). * Remaps Material Kit / site "primary" purple (#9c27b0) to copper without editing vendor CSS. * * Does not recolor success/green CTAs (btn-success) or neutral greys. */ body.theme-copper { --aa-primary: #b06027; --aa-primary-deep: #8f4d1f; --aa-primary-soft: #c47a3f; --aa-primary-rgb: 176, 96, 39; --aa-primary-deep-rgb: 143, 77, 31; } /* * Material Kit globals that leak purple into titles/content: * a { color: #9c27b0 } * a:focus, a:hover { color: #89229b } * Headings use color: inherit — so purple usually arrives via nested in .card-title etc. */ body.theme-copper a { color: var(--aa-primary); } body.theme-copper a:focus, body.theme-copper a:hover { color: var(--aa-primary-deep); text-decoration: none; } /* Keep white nav / inverse surfaces readable */ body.theme-copper .navbar.bg-primary a, body.theme-copper .navbar.bg-primary .nav-link, body.theme-copper .navbar.bg-primary .navbar-brand, body.theme-copper .navbar.bg-primary .nav-link:hover, body.theme-copper .navbar.bg-primary .nav-link:focus, body.theme-copper .page-header a, body.theme-copper .page-header .title, body.theme-copper .page-header h1, body.theme-copper .page-header h2, body.theme-copper .page-header h3, body.theme-copper .page-header h4, body.theme-copper .card[class*="bg-"] a, body.theme-copper .card[class*="bg-"] .card-title, body.theme-copper .card[class*="bg-"] .card-title a { color: #fff; } body.theme-copper .navbar.bg-primary .nav-link:hover, body.theme-copper .navbar.bg-primary .nav-link:focus { color: #fff; background-color: hsla(0, 0%, 100%, 0.1); } body.theme-copper .dropdown-menu a:hover, body.theme-copper .dropdown-menu a:focus { background-color: var(--aa-primary) !important; color: #fff !important; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(var(--aa-primary-rgb), 0.4) !important; } /* Explicit title/heading link targets (inherit alone is not enough when paints purple) */ body.theme-copper .card-title, body.theme-copper .card-title a, body.theme-copper .title a, body.theme-copper .info-title, body.theme-copper .info-title a, body.theme-copper .media-heading, body.theme-copper .media-heading a, body.theme-copper h1 a, body.theme-copper h2 a, body.theme-copper h3 a, body.theme-copper h4 a, body.theme-copper h5 a, body.theme-copper h6 a, body.theme-copper .h1 a, body.theme-copper .h2 a, body.theme-copper .h3 a, body.theme-copper .h4 a, body.theme-copper .h5 a, body.theme-copper .h6 a { color: var(--aa-primary); } body.theme-copper .card-title a:hover, body.theme-copper .title a:hover, body.theme-copper h1 a:hover, body.theme-copper h2 a:hover, body.theme-copper h3 a:hover, body.theme-copper h4 a:hover, body.theme-copper h5 a:hover, body.theme-copper h6 a:hover { color: var(--aa-primary-deep); } /* ---------- Material Kit: solid primary surfaces ---------- */ body.theme-copper .bg-primary, body.theme-copper .navbar.bg-primary, body.theme-copper .btn.btn-primary, body.theme-copper .btn-primary, body.theme-copper .badge-primary, body.theme-copper .progress-bar.bg-primary, body.theme-copper .nav-pills .nav-item .nav-link.active, body.theme-copper .nav-pills .nav-item .nav-link.active:hover, body.theme-copper .nav-pills .nav-item .nav-link.active:focus { background-color: var(--aa-primary) !important; background: var(--aa-primary) !important; border-color: var(--aa-primary) !important; } body.theme-copper .navbar.bg-primary { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(var(--aa-primary-rgb), 0.46) !important; } body.theme-copper .btn.btn-primary, body.theme-copper .btn-primary { color: #fff !important; box-shadow: 0 2px 2px 0 rgba(var(--aa-primary-rgb), 0.14), 0 3px 1px -2px rgba(var(--aa-primary-rgb), 0.2), 0 1px 5px 0 rgba(var(--aa-primary-rgb), 0.12); } body.theme-copper .btn.btn-primary:hover, body.theme-copper .btn.btn-primary:focus, body.theme-copper .btn.btn-primary:active, body.theme-copper .btn.btn-primary.active, body.theme-copper .btn-primary:hover, body.theme-copper .btn-primary:focus, body.theme-copper .btn-primary:active, body.theme-copper .show > .btn.btn-primary.dropdown-toggle { background-color: var(--aa-primary-deep) !important; background: var(--aa-primary-deep) !important; border-color: var(--aa-primary-deep) !important; color: #fff !important; } body.theme-copper .btn.btn-primary:disabled, body.theme-copper .btn.btn-primary.disabled, body.theme-copper .btn.btn-primary:disabled:hover { background-color: var(--aa-primary) !important; border-color: var(--aa-primary) !important; } /* Outline / link primary */ body.theme-copper .btn.btn-outline-primary, body.theme-copper .btn-outline-primary { color: var(--aa-primary) !important; border-color: var(--aa-primary) !important; background-color: transparent !important; } body.theme-copper .btn.btn-outline-primary:hover, body.theme-copper .btn.btn-outline-primary:focus, body.theme-copper .btn.btn-outline-primary.active { color: var(--aa-primary) !important; border-color: var(--aa-primary) !important; background-color: rgba(var(--aa-primary-rgb), 0.12) !important; } body.theme-copper .btn.btn-primary.btn-link, body.theme-copper .btn.btn-primary.btn-link:hover, body.theme-copper .btn.btn-primary.btn-link:focus { color: var(--aa-primary) !important; background-color: transparent !important; } /* Text / links */ body.theme-copper .text-primary, body.theme-copper a.text-primary, body.theme-copper .card .card-header-primary .card-icon, body.theme-copper .card .card-header-primary .card-text, body.theme-copper .card .card-header-primary:not([data-background-color]), body.theme-copper .info .icon.icon-primary { color: var(--aa-primary) !important; } body.theme-copper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover { /* leave content links alone; brand icons/titles covered below */ } /* Form focus underline (Material Kit bmd) */ body.theme-copper .form-control, body.theme-copper .is-focused .form-control, body.theme-copper .is-focused .form-control.form-control-success { background-image: linear-gradient(0deg, var(--aa-primary) 2px, rgba(var(--aa-primary-rgb), 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0) !important; } body.theme-copper .is-focused [class^="bmd-label"], body.theme-copper .is-focused [class*=" bmd-label"], body.theme-copper .bmd-form-group.is-focused .bmd-label-floating, body.theme-copper .bmd-form-group.is-focused .bmd-label-static { color: var(--aa-primary) !important; } body.theme-copper .switch label input:checked + .bmd-switch-track:after { background-color: var(--aa-primary) !important; } /* Page header primary/purple veil */ body.theme-copper [filter-color="primary"]:after, body.theme-copper .header-filter[filter-color="purple"]:after { background: rgba(255, 214, 170, 0.4) !important; background: linear-gradient( 60deg, rgba(255, 214, 170, 0.45), rgba(var(--aa-primary-rgb), 0.88) ) !important; } /* ---------- Site main-web / main-wap hardcoded purple ---------- */ body.theme-copper .pagination .page-link { color: var(--aa-primary); } body.theme-copper .pagination .page-item.active .page-link { color: #fff; background-color: var(--aa-primary); border-color: var(--aa-primary); } body.theme-copper .puja-desc ul li::before, body.theme-copper .puja-detail li::before { color: var(--aa-primary); } body.theme-copper .wizard-card .active-tab { background-color: var(--aa-primary); box-shadow: 0 16px 26px -10px rgba(var(--aa-primary-rgb), 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(var(--aa-primary-rgb), 0.2); } body.theme-copper .checkout .selectize-input.focus, body.theme-copper .checkout .selectize-control.single .selectize-input.input-active, body.theme-copper .selectize-input.focus { border-bottom-color: var(--aa-primary) !important; } body.theme-copper .carousel .star-rating i, body.theme-copper .rating, body.theme-copper .puja-rating .rating, body.theme-copper .article-props i, body.theme-copper .read-more-trigger { color: var(--aa-primary) !important; } body.theme-copper .carousel-indicators li.active { background: var(--aa-primary); } body.theme-copper ul.stepper li.active a .circle, body.theme-copper ul.stepper li.completed a .circle { background-color: var(--aa-primary) !important; } body.theme-copper .navbar .badge-cart-count, body.theme-copper .navbar.bg-primary .badge-cart-count { color: var(--aa-primary) !important; } body.theme-copper .card-collapse .card-header a:active, body.theme-copper .card-collapse .card-header a:hover, body.theme-copper .card-collapse .card-header a[aria-expanded="true"] { color: var(--aa-primary-deep); } /* WAP side nav + buttons */ body.theme-copper .sn-bg-4 { background-color: var(--aa-primary) !important; background-image: none !important; } body.theme-copper .btn-primary { background: var(--aa-primary) !important; } body.theme-copper .carousel .carousel-control-prev-icon, body.theme-copper .carousel .carousel-control-next-icon { background-color: var(--aa-primary); } /* Material icons / FA often inherit color from parents — force common brand spots */ body.theme-copper .info-horizontal .icon.icon-primary i, body.theme-copper i.material-icons.text-primary, body.theme-copper .fa.text-primary { color: var(--aa-primary) !important; } /* ---------- Affordable campaign portal tokens ---------- */ body.theme-copper .ap-landing, body.theme-copper.ap-landing-page .ap-landing { --ap-primary: #b06027; --ap-primary-deep: #8f4d1f; --ap-line: rgba(176, 96, 39, 0.16); } body.theme-copper .ap-landing .ap-btn, body.theme-copper .ap-landing .ap-chip.is-active { background: var(--aa-primary); } body.theme-copper .ap-landing .ap-btn:hover { background: var(--aa-primary-deep); } body.theme-copper .ap-landing .ap-price, body.theme-copper .ap-landing .ap-kicker, body.theme-copper .ap-landing .ap-btn-outline { color: var(--aa-primary) !important; } body.theme-copper .ap-landing .ap-btn-outline { border-color: var(--aa-primary); } body.theme-copper .ap-landing .ap-sticky { background: var(--aa-primary-deep); } body.theme-copper.ap-landing-page .breadcrumb-div a { color: var(--aa-primary); } /* ========== Mobile (WAP) — MDB mdb-skin + Bootstrap ========== * Mobile layout does not load Material Kit; purple comes from * .mdb-skin chrome and main-wap.css. Titles often use .green-text. */ body.theme-copper.mdb-skin a, body.mdb-skin.theme-copper a { color: var(--aa-primary); } body.theme-copper.mdb-skin a:focus, body.theme-copper.mdb-skin a:hover, body.mdb-skin.theme-copper a:focus, body.mdb-skin.theme-copper a:hover { color: var(--aa-primary-deep); text-decoration: none; } /* MDB title accent used across WAP cards/listings */ body.theme-copper .green-text, body.theme-copper.mdb-skin .green-text, body.theme-copper .purple-text, body.theme-copper.mdb-skin .purple-text { color: var(--aa-primary) !important; } body.theme-copper .purple { background-color: var(--aa-primary) !important; } /* mdb-skin chrome (navbar / footer / drawer) */ body.theme-copper.mdb-skin .navbar, body.theme-copper.mdb-skin .page-footer, body.theme-copper.mdb-skin .side-nav, body.theme-copper.mdb-skin .top-nav-collapse, body.mdb-skin.theme-copper .navbar, body.mdb-skin.theme-copper .page-footer, body.mdb-skin.theme-copper .side-nav, body.mdb-skin.theme-copper .top-nav-collapse { background-color: var(--aa-primary) !important; color: #fff; } body.theme-copper.mdb-skin .side-nav .collapsible li .collapsible-header.active, body.theme-copper.mdb-skin .side-nav .collapsible li .collapsible-header:hover, body.mdb-skin.theme-copper .side-nav .collapsible li .collapsible-header.active, body.mdb-skin.theme-copper .side-nav .collapsible li .collapsible-header:hover { background-color: var(--aa-primary-deep) !important; } body.theme-copper.mdb-skin .side-nav .sidenav-bg:after, body.theme-copper.mdb-skin .side-nav .sidenav-bg.mask-strong:after, body.theme-copper.mdb-skin .side-nav .sidenav-bg.mask-light:after, body.theme-copper.mdb-skin .side-nav .sidenav-bg.mask-slight:after, body.mdb-skin.theme-copper .side-nav .sidenav-bg:after, body.mdb-skin.theme-copper .side-nav .sidenav-bg.mask-strong:after, body.mdb-skin.theme-copper .side-nav .sidenav-bg.mask-light:after, body.mdb-skin.theme-copper .side-nav .sidenav-bg.mask-slight:after { background: var(--aa-primary) !important; } /* White links on purple/copper chrome */ body.theme-copper.mdb-skin .navbar a, body.theme-copper.mdb-skin .navbar .nav-link, body.theme-copper.mdb-skin .page-footer a, body.theme-copper.mdb-skin .side-nav a, body.theme-copper.mdb-skin .side-nav .collapsible-header, body.mdb-skin.theme-copper .navbar a, body.mdb-skin.theme-copper .page-footer a, body.mdb-skin.theme-copper .side-nav a { color: #fff !important; } body.theme-copper.mdb-skin .navbar a:hover, body.theme-copper.mdb-skin .side-nav a:hover, body.mdb-skin.theme-copper .navbar a:hover, body.mdb-skin.theme-copper .side-nav a:hover { color: #fff !important; } /* main-wap hardcoded purple accents */ body.theme-copper .sn-bg-4 { background-color: var(--aa-primary) !important; background-image: none !important; } body.theme-copper.mdb-skin .btn-primary, body.theme-copper .btn-primary { background: var(--aa-primary) !important; background-color: var(--aa-primary) !important; color: #fff !important; } body.theme-copper.mdb-skin .btn-primary:hover, body.theme-copper.mdb-skin .btn-primary:focus, body.theme-copper.mdb-skin .btn-primary:active { background-color: var(--aa-primary-deep) !important; color: #fff !important; } body.theme-copper .puja-rating .rating, body.theme-copper .article-props i, body.theme-copper .read-more-trigger, body.theme-copper .puja-detail li::before { color: var(--aa-primary) !important; } body.theme-copper .selectize-input.focus, body.theme-copper .selectize-control.single .selectize-input.input-active { border-bottom-color: var(--aa-primary) !important; } body.theme-copper .carousel .carousel-control-prev-icon, body.theme-copper .carousel .carousel-control-next-icon { background-color: var(--aa-primary) !important; } /* WAP card / section titles that wrap links */ body.theme-copper.mdb-skin .card-title, body.theme-copper.mdb-skin .card-title a, body.theme-copper.mdb-skin h1 a, body.theme-copper.mdb-skin h2 a, body.theme-copper.mdb-skin h3 a, body.theme-copper.mdb-skin h4 a, body.theme-copper.mdb-skin h5 a, body.theme-copper.mdb-skin h6 a, body.theme-copper.mdb-skin .fixed-title, body.theme-copper.mdb-skin .fixed-title a { color: var(--aa-primary); } body.theme-copper.mdb-skin .card-title a:hover, body.theme-copper.mdb-skin h5 a:hover, body.theme-copper.mdb-skin .fixed-title a:hover { color: var(--aa-primary-deep); } /* Banner footer text stays light on dark overlay */ body.theme-copper.mdb-skin .img-container .img-footer, body.theme-copper.mdb-skin .img-container .img-footer a, body.theme-copper.mdb-skin .img-container .img-footer p { color: #fff !important; }