or */
#dopesick-store :is(a,h1,h2,h3,h4,h5,span,div).dopesick-glow {
display: inline-block !important;
width: auto !important;
max-width: max-content !important; /* use fit-content if your browser prefers */
white-space: nowrap !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
}
/* 2) Make the slash the size of that word box (not the whole row) */
#dopesick-store :is(a,h1,h2,h3,h4,h5,span,div).dopesick-glow::after {
left: 0 !important;
right: auto !important; /* prevent stretching */
width: 100% !important; /* exactly the word width */
max-width: 100% !important;
height: 3px !important; /* keep your neon thickness */
top: 50% !important;
transform: translateY(-50%) rotate(-8deg) !important;
}
/* 3) Safety: stop any ancestor rule from forcing full-width */
#dopesick-store .store-item,
#dopesick-store .store-info,
#dopesick-store .store-name_glow-text {
overflow: visible !important;
}
/* 4) Optional: if your glow is on a nested span inside the title block */
#dopesick-store .store-name_glow-text .dopesick-glow {
display: inline-block !important;
width: auto !important;
max-width: max-content !important;
}
/* === reset any accidental overflow or position locks === */
html, body {
position: static !important;
overflow: auto !important;
height: auto !important;
}
#dopesick-store,
#dopesick-store * {
position: static !important;
overflow: visible !important;
}
/* Store: the glow lives only on the word span */
#dopesick-store span.dopesick-glow {
position: relative;
display: inline-block;
white-space: nowrap;
}
#dopesick-store span.dopesick-glow::after {
left: 0;
right: auto;
width: 100%; /* exactly the word width */
}
/* === HERMES CORE / DOPESICK FOUNDATION === */
/* 1. Root palette + glow variables */
:root {
--ds-red: #ff004c;
--ds-pink: #ff00c8;
--ds-bg: #000;
--ds-text: #f1f1f1;
--ds-glow1: 0 0 6px var(--ds-red);
--ds-glow2: 0 0 12px var(--ds-red);
--ds-glow3: 0 0 24px var(--ds-red);
--ds-font: 'Orbitron', 'Montserrat', sans-serif;
}
/* 2. Global reset / layout safety */
html, body {
margin: 0;
padding: 0;
background: var(--ds-bg);
color: var(--ds-text);
font-family: var(--ds-font);
overflow-x: hidden;
}
/* 3. Utility: universal glow */
.glow {
color: var(--ds-red);
text-shadow: var(--ds-glow1), var(--ds-glow2), var(--ds-glow3);
}
/* 4. Utility: neon underline */
.neon-line::after {
content: "";
display: block;
height: 2px;
margin-top: 4px;
background: linear-gradient(90deg, var(--ds-pink), var(--ds-red));
box-shadow: var(--ds-glow2), var(--ds-glow3);
}
/* 5. Core DOPESICK effect */
.dopesick-glow {
position: relative;
display: inline-block;
font-weight: 700;
text-transform: uppercase;
color: var(--ds-red);
text-shadow: var(--ds-glow1), var(--ds-glow2);
white-space: nowrap;
}
.dopesick-glow::after {
content: "";
position: absolute;
left: 0;
top: 55%;
width: 100%;
height: 2px;
transform: rotate(-8deg);
background: linear-gradient(90deg, var(--ds-pink), var(--ds-red));
box-shadow: var(--ds-glow2);
pointer-events: none;
}
/* 6. Animated pulse */
@keyframes dopesickPulse {
0%,100% { opacity: 0.8; filter: blur(0); }
50% { opacity: 1; filter: blur(1px); }
}
.dopesick-glow,
.dopesick-glow::after {
animation: dopesickPulse 3s infinite ease-in-out;
}
/* 7. Section headers */
.section-header,
.store-title,
.underground-title,
.founder-title {
display: inline-block;
width: fit-content;
margin: 0 auto;
text-align: center;
color: var(--ds-red);
text-shadow: var(--ds-glow1), var(--ds-glow2);
position: relative;
}
.section-header::after,
.store-title::after,
.underground-title::after,
.founder-title::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--ds-pink), var(--ds-red));
box-shadow: var(--ds-glow2);
}
/* 8. Store containment – prevent overflow */
#dopesick-store,
#dopesick-store * {
max-width: 100vw;
overflow-x: hidden;
}
/* 9. Responsiveness */
@media (max-width: 768px) {
.dopesick-glow {
transform: scale(0.95);
}
}
/* === DOPESICK NEON FLOW RESTORE === */
@keyframes dopesickFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.dopesick-glow::after {
/* multi-color animated gradient */
background: linear-gradient(
90deg,
#ff9100,
#ff00c8,
#00bfff,
#ff9100
);
background-size: 300% 300%;
animation: dopesickFlow 5s linear infinite;
box-shadow:
0 0 10px #ff00c8,
0 0 20px #ff9100,
0 0 25px #00bfff;
}
/* === THE DOPESICK COLLECTIVE // GLOBAL MASTER === */
/* 1. Core palette + fonts */
:root {
--ds-black: #000000;
--ds-white: #ffffff;
--ds-pink: #ff00c8;
--ds-red: #ff004c;
--ds-blue: #00bfff;
--ds-orange: #ff9100;
--ds-font: 'Orbitron', 'Montserrat', sans-serif;
}
/* 2. Global reset + base layout */
html, body {
background-color: var(--ds-black) !important;
color: var(--ds-white) !important;
font-family: var(--ds-font) !important;
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
scroll-behavior: smooth;
}
/* 3. Universal text + glow tone */
h1, h2, h3, h4, h5, h6, p, a, span {
color: var(--ds-white) !important;
text-shadow: 0 0 5px var(--ds-red), 0 0 15px var(--ds-pink);
}
/* 4. Signature DOPESICK glow */
@keyframes dopesickFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.dopesick-glow {
position: relative;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
color: var(--ds-red);
text-shadow: 0 0 8px var(--ds-red), 0 0 16px var(--ds-pink);
white-space: nowrap;
}
.dopesick-glow::after {
content: "";
position: absolute;
left: 0;
top: 55%;
width: 100%;
height: 2px;
transform: rotate(-8deg);
background: linear-gradient(
90deg,
var(--ds-orange),
var(--ds-pink),
var(--ds-blue),
var(--ds-orange)
);
background-size: 300% 300%;
animation: dopesickFlow 5s linear infinite;
box-shadow: 0 0 8px var(--ds-pink), 0 0 18px var(--ds-blue);
opacity: 0.9;
}
/* 5. Heartbeat logo glow */
@keyframes dsHeartbeat {
0%,100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.25); opacity: 1; }
}
.dopesick-master::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,44,182,0.4), transparent 70%);
filter: blur(120px);
animation: dsHeartbeat 5s ease-in-out infinite;
z-index: 0;
}
/* 6. Shop + card layout */
.dopesick-master .shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-top: 40px;
}
.dopesick-master .product-card {
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,44,182,0.5);
border-radius: 25px;
box-shadow: 0 0 25px rgba(255,44,182,0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dopesick-master .product-card:hover {
transform: scale(1.05);
box-shadow: 0 0 50px rgba(255,44,182,0.8);
}
/* 7. Neon underline headers */
.section-header::after,
.store-title::after,
.founder-title::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
var(--ds-orange),
var(--ds-pink),
var(--ds-blue),
var(--ds-orange)
);
background-size: 300% 300%;
animation: dopesickFlow 6s linear infinite;
box-shadow: 0 0 10px var(--ds-pink), 0 0 20px var(--ds-red);
}
/* 8. Footer / tag line */
.footer-line {
text-align: center;
font-size: 1rem;
text-transform: uppercase;
color: #ff2cb6;
margin-top: 80px;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(255,44,182,0.8);
}
/* Expand blog "Share Your Story" section full width */
.template-blog.share-your-story .page-width,
.blog-template .page-width,
.template-blog .page-width {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Center and space the pink boxes evenly */
.share-your-story .grid,
.blog-template .grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.share-your-story .grid__item {
flex: 1 1 300px;
max-width: 400px;
}
.latest-community {
text-align: center;
margin-top: 80px;
padding: 40px 0;
background: rgba(0,0,0,0.3);
}
.latest-community h2 {
color: #ff00a0;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 20px #ff00a0, 0 0 40px #ff00a0;
margin-bottom: 40px;
}
.community-posts {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.community-post {
width: 300px;
background: rgba(0, 0, 0, 0.7);
border: 2px solid #ff00a0;
border-radius: 16px;
padding: 20px;
box-shadow: 0 0 30px #ff00a0aa;
transition: transform 0.3s ease;
}
.community-post:hover {
transform: translateY(-5px);
background: #ff00a0;
color: #000;
}
.community-post a.btn {
display: inline-block;
margin-top: 15px;
border: 2px solid #ff00a0;
padding: 10px 25px;
text-decoration: none;
color: #ff00a0;
border-radius: 12px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.community-post a.btn:hover {
background: #ff00a0;
color: #000;
}