body {
//background: url(//opcritical.com/wp-content/uploads/2026/04/OpCritical-body-bg-compress.png) center / cover no-repeat;
background: url(//opcritical.com/wp-content/uploads/2026/04/OpCritical-body-bg-compress-light.png) center / cover no-repeat;
background: url(//opcritical.com/wp-content/uploads/2026/06/OpCritical-body-bg-compress-light-scaled.webp) center / cover no-repeat
}
#main {min-height: 100vh} ::-webkit-scrollbar {width: 10px}
::-webkit-scrollbar-thumb {
background: #d01717;
border-radius: 4px;
border: 2px solid black
}
::-webkit-scrollbar-track {background: rgba(26, 27, 41, 0.95)} #transparent-header-wrap {}
#site-header {
position: fixed !important;
backdrop-filter: blur(15px)
}
#site-logo a.site-logo-text {
font-family: 'Big Shoulders Inline Text';
font-size: 40px !important;
line-height: 0 !important
} .home-hero {position: relative}
.home-hero::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(//opcritical.com/wp-content/uploads/2026/04/OpCritical-Music-bg-home-hero.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
z-index: -1;
}
.home-hero h1 {
color: #f1ab2c;
display: grid;
justify-items: start;
font-size: 0px;
line-height: 1;
text-shadow: 0 2px 2px white
}
.home-hero h1 span {margin-left: 215px}
.home-hero_video-bg {
position: relative;
height: 100vh;
overflow: hidden;
justify-content: center;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important
}
.home-hero_video-bg video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%)
}
.home h2 {font-size: 130px !important} .neon-header_top, .neon-header_bottom {
position: relative;
font-size: 150px;
font-family: 'Big Shoulders Inline Text';
color: #f5f0d9;
text-shadow: 0 0 5px #fff, 0 0 10px #ff7b00, 0 0 20px #ff7b00, 0 0 40px #ff4800, 0 0 80px #ff4800;
text-shadow: 0 0 1px #fff, 0 0 1px #f45f0b, 0 0 10px #f45f0b, 0 0 40px #f45f0b, 0 0 80px #f45f0b, 6px 6px 5px rgb(244 95 11 / 40%), 4px 4px 2px rgb(244 95 11 / 50%), 15px 15px 10px rgb(244 95 11 / 30%), 15px 15px 30px rgb(244 95 11 / 60%);
text-shadow: 0 0 1px #fff, 0 0 1px #f45f0b, 0 0 10px #f45f0b, 0 0 40px #f45f0b, 0 0 80px #f45f0b, 6px 6px 5px rgb(244 95 11 / 40%), 4px 4px 2px rgb(244 95 11 / 50%), 15px 15px 10px rgb(244 95 11 / 30%), 15px 15px 30px rgb(244 95 11 / 60%), 2px 2px 0px rgb(0 0 0 / 50%), 0px 1px 0px rgb(244 95 11 / 40%), 6px 6px 3px rgb(244 95 11 / 45%), 0px -1px 0px rgb(244 95 11 / 40%), -6px -6px 3px rgb(244 95 11 / 25%);
//-webkit-text-stroke: 1px #ff4800;
font-weight: 400;
transform: rotate(325deg);
margin: -240px -200px 0 -80px;
z-index: -1;
}
.neon-header_bottom {margin: 0px -265px -40px -100px;} .text-shadow {text-shadow: 0 0px 5px rgb(0 0 0 / 80%)}
.wp-block-quote {font-weight: 400}
b, strong {font-weight: 900} .video-block {margin-top: -150px} .video-frame iframe {
border-radius: 12px;
box-shadow: 2px 2px 0px 2px rgb(0 0 0 / 80%), 0px 1px 0px 2px rgb(244 95 11 / 60%), 7px 7px 3px 2px rgb(244 95 11 / 50%);
box-shadow: 2px 2px 0px 2px rgb(0 0 0 / 60%), 0px 1px 0px 2px rgb(244 95 11 / 30%), 7px 7px 3px 2px rgb(244 95 11 / 25%);
box-shadow: 2px 2px 0px 3px rgb(0 0 0 / 50%), 0px 1px 0px 2px rgb(244 95 11 / 40%), 6px 6px 3px 2px rgb(244 95 11 / 45%), 0px -1px 0px 2px rgb(244 95 11 / 40%), -6px -6px 3px 2px rgb(244 95 11 / 25%);
box-shadow: 2px 2px 0px 3px rgb(0 0 0 / 50%), 0px 1px 0px 2px rgb(208 23 23 / 40%), 6px 6px 3px 2px rgb(208 23 23 / 45%), 0px -1px 0px 2px rgb(208 23 23 / 40%), -6px -6px 3px 2px rgb(208 23 23 / 25%);
box-shadow: 2px 4px 16px black;
} .grafiti-img img {
transform: rotate(-20deg);
margin-top: 100px;
} .hear_us-block {}
.hear_us-column {
transform-origin: center 540px;
transform: scale(.9)
}
.hear_us-column:hover {animation: ScaleRotate 2s cubic-bezier(0.05, 1.03, 0.06, 1.02) infinite}
.hear_us-column figure {text-align: center}
.hear_us-column figure:nth-child(2) {margin-top: -50px}
@keyframes ScaleRotate {
0% {transform: scale(1) rotate(4deg)}
33% {transform: scale(1) rotate(0deg)}
66% {transform: scale(1) rotate(-6.5deg)}
100% {transform: scale(1) rotate(4deg)}
} .write-us_icon {transform: rotate(20deg)}
.write-us_button {
position: relative;
text-align: center;
margin-top: -25px
} .news-block .wp-block-latest-posts__featured-image img {
height: 250px;
width: 100%;
object-fit: cover;
border-radius: 12px;
box-shadow: 2px 4px 16px black;
}
.news-block .wp-block-latest-posts__post-title {
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none !important
}
.wp-block-latest-posts__post-title {font-family: 'Anton SC'} .sidebar-box .widget-title, .sidebar-box.widget_block .wp-block-heading {color: #000}
#right-sidebar-inner .wp-block-latest-posts.wp-block-latest-posts__list li {border-bottom: 1px solid #c1c1c1} .wp-block-social-link-anchor  {
text-decoration: none !important;
padding: 10px 15px;
} .wp-block-button__link {
font-size: 22px;
font-weight: 400;
border-radius: 5px
} .pt20 {padding-top: 20px}
.pt40 {padding-top: 40px}
.pt60 {padding-top: 60px}
.pt80 {padding-top: 80px}
.pt100 {padding-top: 100px}
.pt120 {padding-top: 120px}
.pt160 {padding-top: 160px}
.pt200 {padding-top: 200px}
.pt220 {padding-top: 220px}
.pb20 {padding-bottom: 20px}
.pb40 {padding-bottom: 40px}
.pb60 {padding-bottom: 60px}
.pb80 {padding-bottom: 80px}
.pb100 {padding-bottom: 100px}
.pb120 {padding-bottom: 120px}
.pb160 {padding-bottom: 160px}
.pb200 {padding-bottom: 200px}
.pb240 {padding-bottom: 240px}
.pb340 {padding-bottom: 340px}
.gap40 {gap: 40px}
.gap60 {gap: 60px}
.gap80 {gap: 80px}
.gap100 {gap: 100px} @media (max-width: 1500px) {
.home h2 {font-size: 120px !important}
}
@media (max-width: 1366px) {
.home h2 {font-size: 112px !important}
}
@media (max-width: 1280px) {
.home h2 {font-size: 110px !important}
}
@media (max-width: 820px) {
.hhome-hero h1 {
font-size: 100px;
line-height: 1.1;
}
.hhome-hero h1 span {margin-left: 100px}
.neon-header_top, .neon-header_bottom {font-size: 90px}
}
@media (max-width: 768px) {
.home h2 {font-size: 55px !important}
}
@media (max-width: 480px) {
.home-hero_video-bg {height: 45vh}
.video-block {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
margin-top: 20px
}
.video-block figure:last-child {//margin: -20px -50% 0 50%}
.grafiti-img img {margin: 0}
.wp-block-latest-posts.wp-block-latest-posts__list {margin: 0}
.wp-block-latest-posts.wp-block-latest-posts__list li {margin-right: 0}
.ptm80 {padding-top: 80px}
.ptm120 {padding-top: 120px}
.pbm40 {padding-bottom: 40px}
.pbm240 {padding-bottom: 240px}
.gapm10 {gap: 10px}
}