*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,body {
background:#913adb;
background-size: cover;
width:100%;
height:100%;
}
body {
/* 5. Improve text rendering */
-webkit-font-smoothing: antialiased;
color: #fff;
font:1em/140% Inter, Arial, sans-serif;
width:100%;
height:auto;
}
body::before {
content: '';
mix-blend-mode: overlay;
opacity: 0.5;
position: fixed;
inset:0;
background-image:url('../images/noise.svg');
-webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);
z-index: auto;
pointer-events: none;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/* Position the entire cart icon container */
.header-cart {
position: fixed; /* fixes it to the viewport */
top: 20px; /* distance from top */
right: 30px; /* distance from right edge */
z-index: 1000; /* stay above other elements */
display: inline-flex;
align-items: center;
justify-content: center;
background:rgb(48,164,236); /* optional background bubble */
border-radius:8px;
/* border-radius: 50%; */
padding: 0.5rem;
transition: background 0.2s ease-in-out;
}
/* when WP admin bar is visible on logged-in users */
body.admin-bar .header-cart { top: calc(20px + 32px); }
/* WP switches the bar to 46px on small screens */
@media (max-width: 782px) {
body.admin-bar .header-cart { top: calc(20px + 46px); }
}
.header-cart:hover {
background: rgb(26,105,153);
}
/* Style for the link and icon */
.header-cart .cart-link {
display: inline-flex;
align-items: center;
color: #fff;
text-decoration: none;
position: relative;
}
.header-cart .cart-icon {
width: 28px;
height: 28px;
fill: currentColor;
}
/* Badge for number of items */
.header-cart .cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #ff3b3f;
color: #fff;
font-size: 0.75rem;
font-weight: bold;
border-radius: 50%;
padding: 0.2rem 0.5rem;
min-width: 18px;
text-align: center;
line-height: 1;
box-shadow: 0 0 0 2px #000;
}
hr.corner {
background:url(../images/hr_spray_corner_yellow.png) no-repeat 0 0;
background-size: contain;
/* display: block; */
width:100%;
min-height:200px;
max-height:426px;
border: 0;
padding: 0;
margin:-80px 0 0 -80px;
/* margin:-12% 0 0 -12%; */
}
hr.corner_right {
background:url(../images/hr_spray_corner_right.png) no-repeat 0 0;
background-size: contain;
/* display: block; */
width:100%;
min-height:400px;
max-height:400px;
border: 0;
padding: 0;
margin:-50% 0 0 50%;
}
hr.corner_left {
background:url(../images/hr_spray_corner.png) no-repeat 0 0;
background-size: contain;
/* display: block; */
width:100%;
min-height:300px;
max-height:300px;
border: 0;
padding: 0;
margin:-180px 0 0 -150px;
}
hr.edge01 {
background:url(../images/hr_spray_edge_01.png) no-repeat center 0;
background-size: contain;
display: block;
width:100%;
min-height:200px;
max-height:509px;
border: 0;
padding: 0;
margin:0;
/* margin:-255px 0 0 -150px; */
}
hr.edge02 {
background:url(../images/hr_spray_edge_02.png) no-repeat center 0;
background-size: contain;
display: block;
width:100%;
min-height:200px;
max-height:509px;
border: 0;
padding: 0;
margin:0;
/* margin:-255px 0 0 -150px; */
}
hr.edge03 {
background:url(../images/hr_spray_edge.png) no-repeat center 0;
background-size: contain;
display: block;
width:100%;
min-height:146px;
max-height:509px;
border: 0;
padding: 0;
margin:0;
/* margin:-255px 0 0 -150px; */
}
/* #root, #__next { */
/* isolation: isolate; */
/* } */
h1 {
color:white;
font:700 3.2vw/100% Belanosima, Arial, sans-serif;
margin:0;
text-transform:uppercase;
}
h2 {
font:550 1.5vw Belanosima, Arial, sans-serif;
font-optical-sizing: auto;
font-style: normal;
text-transform:capitalize;
margin:12px 0;
color:yellow;
}
/* h2:before { */
/* position: absolute; */
/* left: 0; */
/* top: 1.2em; */
/* height: 0; */
/* width: 50px; */
/* content: ''; */
/* border-top: 4px solid yellow; */
/* } */
h3 {
color:rgb(255,241,241);
font:550 1vw Belanosima, Arial, sans-serif;
/* font-optical-sizing: auto; */
font-style: normal;
margin:0;
text-transform:capitalize;
width:100%;
}
p {margin-bottom:2em;}
header {
margin:20px auto 0 auto;
/* text-align:center; */
/* margin-top:20px; */
}
a.logo {
background-color:white;
/* WebKit */
-webkit-mask-image:url('data:image/svg+xml;utf8,');
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask-size:contain;
/* Standard */
mask-image:url('data:image/svg+xml;utf8,');
mask-repeat:no-repeat;
mask-position:center;
mask-size:contain;
display:block;
height:100px;
/* width: calc(80px * 2357 / 2128); /* keep aspect ratio */
text-indent:-9999px;
}
a.logo:hover, a.logo.active {/*color:rgb(255,37,245);mix-blend-mode: screen;*/background-color:yellow;}
nav#nav_top {
display:block;
/* display:flex; */
/* justify-content: space-between; */
max-width:1100px;
margin:0 auto;
position:relative;
}
/* reset and turn the UL into your flex row */
nav#nav_top ul {
list-style: none;
margin: 0;
padding: 0;
display: flex; /* this used to be on nav; now on UL */
justify-content: space-between; /* same layout behavior */
width: 100%;
}
nav#nav_top li {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 0;
}
nav#nav_top ul li a:link,
nav#nav_top ul li a:visited {
display:block;
background-color:transparent;
color:#fff;
width:100%;
height:40px;
font:700 1.2em Inter, Arial, sans-serif;
text-decoration:none;
text-align:center;
vertical-align:middle;
line-height:40px;
text-transform:uppercase;
}
nav#nav_top ul li a:hover {color:yellow;box-shadow: inset 0 -2px 0 0 yellow;}
nav#nav_top ul li.current-menu-item > a,
nav#nav_top ul li.current-menu-ancestor > a,
nav#nav_top ul li.current_page_item > a,
nav#nav_top ul li.current_page_ancestor > a {
color: rgba(247,250,8,1);
box-shadow: inset 0 -2px 0 0 yellow;
}
/* mobile checkbox/menu label rule can stay if you add a toggle later */
nav#nav_top input[type='checkbox'],
nav#nav_top label {
display: none;
}
nav#nav_shop {
display:flex;
justify-content: center;
max-width:1100px;
margin:0 auto 20px auto;
position:relative;
gap:5px;
}
nav#nav_shop a:link, nav#nav_shop a:visited {
background-color:transparent;
color:#fff;
width:20%;
height:40px;
font:600 .8em Inter, Arial, sans-serif;
text-decoration:none;
text-align:center;
vertical-align:middle;
line-height:40px;
text-transform:uppercase;
border-radius: 12px;
}
nav#nav_shop a:hover {background:rgb(48,164,236);}
nav#nav_shop a.active {background:rgba(247,250,8, 1);color:#913adb;}
.wrapper {
position:relative;
max-width:1210px;
margin:0 auto;
padding:0;
}
.overlay {
background:#000;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
display: block;
z-index: 998;
opacity:.5;
}
#content {
position:relative;
text-align:center;
}
#content #masthead_page img {
width: 100%;
height:auto;
}
#content .meta {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:2em;
z-index:999;
}
#content .meta p {color:#fff;}
/* Slider wrapper still lives inside #content */
.masthead-slider {
position: relative;
}
/* Slides are normal blocks so #content keeps the image's height */
.masthead-slide {
display: none; /* hide non-active */
opacity: 0; /* prep for fade */
}
.masthead-slide.is-active {
display: block; /* only active slide is in flow */
animation: mastheadFade .6s ease forwards;
}
@keyframes mastheadFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Arrows stay absolutely positioned within the slider (inside #content) */
.masthead-prev,
.masthead-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.45);
color: #fff;
border: 0;
/* padding: .4rem .6rem; */
cursor: pointer;
z-index: 1000;
font-size: 2.5rem; /* Increase icon size */
padding: 0.8rem 1.2rem; /* Add more clickable area */
/* border-radius: 50%; /* Optional: round buttons */ */
/* border-radius: 6px; */
line-height: 1;
}
.masthead-prev { left: 16px; }
.masthead-next { right: 16px; }
.masthead-prev:hover,
.masthead-next:hover { background: rgba(0,0,0,.65); }
/* Dots anchored at the bottom of the same area */
.masthead-dots {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 1000;
}
.masthead-dots .dot {
width: 10px; height: 10px; border-radius: 9999px;
background: rgba(255,255,255,.5);
border: 0; padding: 0; cursor: pointer;
}
.masthead-dots .dot.active { background: #fff; }
/* Keep your original global masthead rules */
#content { position:relative; text-align:center; }
#content #masthead_page img { width:100%; height:auto; }
#content .meta {
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%); font-size:2em; z-index:999;
}
#featured_socials {}
#featured_socials #insta {
display:flex;
flex-wrap: wrap;
gap:50px;
margin-top:20px;
justify-content:flex-start;
}
#insta .post {
background:#f221f5;
width:200px;
height:200px;
border-radius: 16px;
overflow:hidden;
}
#products {
height:auto;
width:100%;
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
gap:20px;
margin-bottom:50px;
position:relative;
}
/* body .product { */
/* max-width:100%; */
/* display:flex; */
/* } */
body .product .product_thumbs, body .product .attachment-woocommerce_thumbnail {
display:flex;
gap:20px;
margin-top:20px;
}
#shop .product, .single .product {
max-width:100%;
display:flex;
justify-content:space-between;
}
#shop .product_gallery, .single .product_gallery {
/* background:blue; */
width:60%;
}
#shop .product .product_meta, .single .product .product_meta {
width:40%;
}
#shop #products .product .product_meta, .single #products .product .product_meta {
width:100%;
}
.product_thumbs a img {
width:120px;
height:auto;
}
.product .product_img_lrg {
max-width:700px;
}
.product_img_med img, .product_img_lrg img, .size-woocommerce_thumbnail {border-radius: 16px;}
#products .product {
max-width:390px;
height:auto;
position:relative;
/* border: 1px solid #a742fe; */
}
#products .product:hover {background:#6912b3;}
a.product_link:link,a.product_link:active, a.product_link:visited {
text-decoration:none;
color:white;
}
/* a.product_link:hover {background:blue;} */
.product .product_img_med img {
max-width:388px;
height:auto;
flex:none;
}
.product_meta {padding:12px;}
.price {font-size:20px;}
/* Related section wrapper */
.related.products { margin-top: 2rem; }
ul.products li img {
}
/* Make the default UL a flex container */
.related.products ul.products {
display: flex;
flex-wrap: wrap;
gap: 20px;
list-style: none;
padding: 0;
margin: 0 0 50px 0;
}
/* Size the product cards (the already has .product) */
.related.products ul.products li.product {
flex: 1 1 240px; /* responsive min width */
max-width: 390px; /* matches your main grid */
}
/* Optional: match your card look */
.related.products ul.products li.product a {
text-decoration: none;
color: inherit;
}
/* Make sure product cards stack vertically */
.related.products ul.products li.product,
.products .product {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Force the price and button to stack */
.related.products ul.products li.product .price {
display: block;
margin-bottom: 10px;
}
/* Make the Add to Cart button full-width or inline-block below price */
.related.products ul.products li.product .button {
display: inline-block;
width: auto; /* or 100% if you want it full-width */
margin-top: 5px;
text-align: center;
}
input.qty {margin-bottom:10px;}
/* Style WooCommerce Add to Cart button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .add_to_cart_button, button.button, a.wp-element-button {
/* background: #ff006e; */
background:rgb(48,164,236);
color: #fff;
padding: 10px 18px;
border-radius: 6px;
/* font-weight: bold; */
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease-in-out;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Hover state */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .add_to_cart_button:hover,
button.button:hover, a.wp-element-button:hover {
background: rgb(26,105,153);
color: #fff;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
#about .masthead {
background:url(../images/masthead_about.png) no-repeat 0 0;
background-size: cover;
max-width:100%;
height:200px;
}
.row {
display:flex;
max-width: 1210px;
margin:40px 0;
justify-content:space-between;
clear:both;
}
.row .intro {
width:50%;
font-size:1.3em;
line-height:32px;
text-align:justify;
margin-right:50px;
}
.row #posts {
font-size:1.3em;
line-height:32px;
text-align:justify;
}
.featured-image {
display: block; /* ensures it behaves as a block element */
width: 100%; /* fill the width of the parent container */
height: auto; /* keep the correct aspect ratio */
max-width: 100%; /* prevent it from overflowing */
object-fit: cover; /* optional: crops the image nicely if container is fixed height */
}
.post a:link, a:visited {
color:white;
text-decoration:3px dashed underline rgb(242,33,245);
}
.post a:hover {
color:yellow;
}
.post img {
border-radius: 16px;
}
.row img.right {
float:right;
/* border-radius: 24px; */
margin:25px 0 25px 25px;
}
.row img.left {
float:left;
/* border-radius: 24px; */
margin:25px 25px 25px 0;
}
#photo {
width:50%;
}
#photo img {
border-radius: 24px;
}
footer {
position:relative;
width:100%;
display:flex;
justify-content:space-between;
color:white;
text-transform:uppercase;
font:400 1em Inter, Arial, sans-serif;
padding:50px 0;
}
footer .wrapper {
width:1210px;
display:flex;
justify-content:space-between;
}
.footer_item {max-width:500px;}
/* WPForms Contact Styles */
#wpforms-72 {
display:block;
width:100%;
--wpforms-label-color: #fff; /* main label color */
--wpforms-label-sublabel-color: #ddd;
}
#wpforms-72 .wpforms-form-description {
max-width: 100%;
margin: 0 auto 1rem;
font-size: 1.1rem;
line-height: 1.6;
color: #fff; /* your site text color */
font-weight: 400;
}
#wpforms-72 .wpforms-field-label,
#wpforms-72 .wpforms-field-sublabel,
#wpforms-72 .wpforms-field-name legend.wpforms-field-label {
color: #fff; /* or whatever you want */
font-weight: 400; /* 400 = normal; try 500 if you want a bit more weight */
}
#wpforms-72 .wpforms-required-label { color: yellow; }
@media screen and (min-width: 1200px) {
div {
/* font-size: 36px; */
}
}
/* 1284×2778 pixels at 458ppi */
@media only screen and (max-width: 432px) {
html, body {
/* color: #f3c8ff; */
font:1em/180% Inter, Arial, sans-serif;
width:100%;
height:100%;
background-size: cover;
}
body {
/* background-color:#1e1c1d; */
font:1em/160% Inter, Arial, sans-serif;
}
/* header { */
/* width:90%; */
/* margin:25px auto; */
/* text-align:center; */
/* } */
nav {
display:flex;
justify-content: space-between;
max-width:650px;
margin:0 auto;
}
a.logo .active {color:rgb(255,37,245);mix-blend-mode: screen;}
nav a:link, nav a:visited {
background-color:transparent;
color:#fff;
width:100%;
height:80px;
font:700 1.2em Inter, Arial, sans-serif;
text-decoration:none;
text-align:center;
vertical-align:middle;
line-height:80px;
text-transform:uppercase;
}
nav a:hover {color:rgb(48,164,236);}
nav a.active {color:rgba(247,250,8, 1);}
nav input[type='checkbox'], nav label {
display: none;
}
.wrapper {
/* position:relative; */
width:400px;
margin:0 auto;
padding:0;
}
.home #content {
height:45vh;
}
.masthead {
background:url(../images/masthead_boneheadsbrigade_mobile.jpg) no-repeat top center;
/* background-size:cover; */
background-size: contain;
width:100%;
height:100%;
}
#about .masthead {
background:url(../images/masthead_about.png) no-repeat top center;
background-size: contain;
width:100%;
height:40px;
}
#about .row {
display:flex;
width: 100%;
margin:40px 0;
justify-content:space-between;
}
#about .intro {
width:100%;
font-size:1.3em;
line-height:32px;
text-align:justify;
margin:0 10px;
}
.intro img.right {
float:right;
}
#about #photo {
display:none;
width:25%;
}
#about #photo img {
border-radius: 24px;
}
footer {
width:100%;
display:flex;
justify-content:space-between;
color:rgba(243,53,194, 1);
text-transform:uppercase;
font:400 1em Inter, Arial, sans-serif;
padding-bottom:100px;
}
/* footer .wrapper { */
/* width:1210px; */
/* display:flex; */
/* justify-content:space-between; */
/* } */
.footer_item {max-width:40%;}
}