/** Shopify CDN: Minification failed
Line 1618:0 All "@import" rules must come first
Line 2556:5 Unexpected "="
Line 2608:0 Unexpected "<"
Line 2611:0 Comments in CSS use "/* ... */" instead of "//"
Line 2612:0 Comments in CSS use "/* ... */" instead of "//"
Line 2613:0 Comments in CSS use "/* ... */" instead of "//"
Line 2668:0 Unexpected "<"
Line 2671:0 Comments in CSS use "/* ... */" instead of "//"
Line 3544:23 Unexpected "*"
**/
/* --- GLOBAL FONT RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Inter:wght@400;600&display=swap');
/* --- GLOBAL FONT RESET --- */
body {
font-family: 'Inter', sans-serif;
background: #000;
color: #f6e7f9;
line-height: 1.6;
}
/* Heading font — scoped to main content, not Dawn UI components */
main h1, main h2, main h3, main h4, main h5, main h6,
.dsk-hero-shop h1, .dsk-hero-shop h2,
.dsk-underground h2, .dsk-manifesto h3, .dsk-products h2,
.dsk-media-home h1, .dsk-media-home h2 {
font-family: 'Cinzel Decorative', serif;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(255,0,120,.5);
}
/* === THE DOPESICK COLLECTIVE // HERMES CORE MASTER === */
/* 1. Root palette + font */
:root {
--ds-black: #000;
--ds-white: #f5f5f5;
--ds-red: #ff004c;
--ds-pink: #ff00c8;
--ds-blue: #00bfff;
--ds-orange: #ff9100;
--ds-font: 'Inter', sans-serif;
/* --- FONT VARIABLES OVERRIDE --- */
--font-body-family: 'Inter', sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-heading-family: 'Cinzel Decorative', serif;
--font-heading-style: normal;
--font-heading-weight: 700;
}
/* 2. Base layout */
html, body {
background: var(--ds-black);
color: var(--ds-white);
font-family: var(--ds-font);
margin: 0;
padding: 0;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* 3. Neon glow — scoped to brand sections only, never bleeds into Dawn UI */
main h1, main h2, main h3, main h4, main h5, main h6,
.dsk-hero-shop h1, .dsk-hero-shop p,
.dsk-underground h2, .dsk-underground p,
.dsk-manifesto h3, .dsk-manifesto p,
.dsk-products h2,
.dsk-media-home h1, .dsk-media-home h2, .dsk-media-home p {
color: var(--ds-white);
text-shadow:
0 0 5px var(--ds-pink),
0 0 10px var(--ds-red);
}
/* 4. Keyframes for glow and flow */
@keyframes dsFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes dsHeartbeat {
0%,100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; }
}
/* 5. The signature “DOPESICK” word effect */
.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),
0 0 24px var(--ds-blue);
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: dsFlow 5s linear infinite;
box-shadow:
0 0 8px var(--ds-pink),
0 0 18px var(--ds-blue);
pointer-events: none;
}
/* 6. Heartbeat logo aura */
.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.35), transparent 70%);
filter: blur(120px);
animation: dsHeartbeat 6s ease-in-out infinite;
z-index: -1;
}
/* 7. Section headers with animated underline */
.section-header,
.store-title,
.founder-title {
position: relative;
display: inline-block;
width: fit-content;
margin: 0 auto;
text-align: center;
color: var(--ds-red);
text-shadow:
0 0 8px var(--ds-red),
0 0 16px var(--ds-pink);
}
.section-header::after,
.store-title::after,
.founder-title::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
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: dsFlow 6s linear infinite;
box-shadow: 0 0 10px var(--ds-pink), 0 0 20px var(--ds-blue);
}
/* 8. Product grid + cards */
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-top: 40px;
}
.product-card {
background: rgba(0, 0, 0, 0.6);
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;
}
.product-card:hover {
transform: scale(1.05);
box-shadow: 0 0 50px rgba(255, 44, 182, 0.8);
}
/* 9. Footer tagline */
.footer-line {
text-align: center;
font-size: 0.95rem;
text-transform: uppercase;
color: #ff2cb6;
margin-top: 80px;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(255,44,182,0.8);
}
/* 10. Responsive adjustments */
@media (max-width: 768px) {
.dopesick-glow { transform: scale(0.95); }
.product-card { margin: 0 auto; width: 90%; }
}
/* === STORE TITLE TUNE-UP === */
#dopesick-store .store-title {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
text-align: center;
}
/* keep THE / STORE text normal but confine the DOPESICK word */
#dopesick-store .store-title .dopesick-glow {
display: inline-block;
width: auto;
max-width: max-content;
white-space: nowrap;
position: relative;
}
/* short neon slash only across the word */
#dopesick-store .store-title .dopesick-glow::after {
left: 0;
right: auto;
width: 100%;
max-width: 100%;
transform: rotate(-8deg);
background: linear-gradient(
90deg,
var(--ds-orange),
var(--ds-pink),
var(--ds-blue),
var(--ds-orange)
);
background-size: 300% 300%;
animation: dsFlow 5s linear infinite;
box-shadow: 0 0 10px var(--ds-pink), 0 0 20px var(--ds-blue);
}
/* === Fix for store header .dsx span === */
#dopesick-store .store-title .dsx {
position: relative;
display: inline-block;
width: auto;
max-width: max-content;
white-space: nowrap;
color: var(--ds-red);
text-transform: uppercase;
font-weight: 700;
text-shadow:
0 0 8px var(--ds-red),
0 0 16px var(--ds-pink),
0 0 24px var(--ds-blue);
}
/* neon slash only across the word */
#dopesick-store .store-title .dsx::after {
content: "";
position: absolute;
top: 55%;
left: 0;
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: dsFlow 5s linear infinite;
box-shadow:
0 0 8px var(--ds-pink),
0 0 18px var(--ds-blue);
pointer-events: none;
opacity: 0.9;
}
/* === Sharpen DOPESICK word in store header === */
#dopesick-store .store-title .dsx {
color: var(--ds-red);
text-shadow:
0 0 3px var(--ds-red),
0 0 6px var(--ds-pink),
0 0 10px var(--ds-blue);
filter: brightness(1.1) contrast(1.2);
-webkit-font-smoothing: antialiased;
font-smooth: always;
}
/* keep the line vibrant but clear */
#dopesick-store .store-title .dsx::after {
box-shadow: 0 0 6px var(--ds-pink), 0 0 12px var(--ds-blue);
opacity: 0.95;
}
/* === Crystal-clear DOPESICK slash fix === */
#dopesick-store .store-title .dsx {
position: relative;
display: inline-block;
color: #ff2cb6; /* slightly lighter core for clarity */
font-weight: 800;
text-shadow:
0 0 2px #ff2cb6,
0 0 6px #ff00c8; /* tighter glow radius */
filter: brightness(1.2) contrast(1.15);
-webkit-font-smoothing: antialiased;
font-smooth: always;
}
/* the line itself — thinner, sharper gradient */
#dopesick-store .store-title .dsx::after {
content: "";
position: absolute;
left: 0;
top: 52%;
width: 100%;
height: 1.5px; /* slightly thinner line */
transform: rotate(-6deg);
background: linear-gradient(
90deg,
#ff9100 0%,
#ff00c8 50%,
#00bfff 100%
);
background-size: 200% 200%;
animation: dsFlow 5s linear infinite;
box-shadow:
0 0 4px #ff00c8,
0 0 8px #00bfff;
opacity: 0.85;
}
/* === Coming-Soon logo responsive fix === */
#dopesick-store .store-img,
#dopesick-store .store-img img,
img.store-img,
img.store-img-wrap,
img.img_store-img {
display: block;
width: 100%;
max-width: 400px; /* limit desktop width */
height: auto;
margin: 0 auto;
}
/* Mobile: make sure it shrinks nicely */
@media (max-width: 768px) {
#dopesick-store .store-img,
#dopesick-store .store-img img,
img.store-img,
img.store-img-wrap,
img.img_store-img {
max-width: 90vw;
}
}/* === Product Page Focus: show only shop/product content === */
.template-product #shopify-section-header,
.template-product #shopify-section-footer,
.template-product #shopify-section-underground,
.template-product #shopify-section-founder,
.template-product #shopify-section-collection,
.template-product #shopify-section-hero,
.template-product #shopify-section-newsletter,
.template-product #shopify-section-contact,
.template-product #shopify-section-the-underground,
.template-product #shopify-section-the-founder,
.template-product #shopify-section-the-collective {
display: none !important;
}
/* optional: make product start right under header */
.template-product main {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 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;
}
/* === DOPESICK MASTER FEED + COMMUNITY STYLING === */
/* 1. Full-width blog layout */
.template-blog.product-reviews .page-width,
.template-blog .page-width,
.blog-template .page-width {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2. Centered feed cards / boxes */
.template-blog.product-reviews .grid,
.blog-template .grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 40px;
margin-bottom: 40px;
}
.template-blog.product-reviews .grid__item {
flex: 1 1 300px;
max-width: 400px;
background: rgba(0, 0, 0, 0.7);
border: 2px solid #ff004c;
border-radius: 16px;
box-shadow: 0 0 30px #ff004c88;
padding: 20px;
transition: all 0.3s ease;
}
.template-blog.product-reviews .grid__item:hover {
background: #ff004c;
color: #000;
transform: translateY(-4px);
}
/* 3. "Latest from the Community" section */
.latest-community,
#latest-community,
.section--latest-community {
text-align: center;
width: 100%;
margin: 80px auto 40px;
}
.latest-community h2,
#latest-community h2,
.section--latest-community h2 {
color: #ff004c;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 2rem;
text-shadow: 0 0 20px #ff004c, 0 0 40px #ff004c;
margin-bottom: 40px;
}
/* 4. Brand buttons — scoped to community/blog sections only, not Dawn UI */
.dsk-section a.btn,
.dsk-section a.button {
background: transparent;
border: 2px solid #ff004c;
color: #ff004c;
border-radius: 12px;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
box-shadow: 0 0 20px #ff004c;
transition: all 0.3s ease;
}
.dsk-section a.btn:hover,
.dsk-section a.button:hover {
background: #ff004c;
color: #000;
box-shadow: 0 0 30px #ff004c, 0 0 60px #ff004c;
}
/* 5. Responsive fixes */
@media (max-width: 768px) {
.template-blog.product-reviews .grid__item {
max-width: 90%;
}
.latest-community h2 {
font-size: 1.5rem;
}
}
/* === LATEST FROM THE COMMUNITY === */
.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 img {
width: 100%;
border-radius: 10px;
margin-bottom: 15px;
}
.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;
}
/* === COMMUNITY LAYOUT === */
.latest-community {
text-align: center;
margin-top: 80px;
padding: 60px 0;
background: rgba(0,0,0,0.3);
}
.latest-community h2 {
color: #ff00a0;
text-transform: uppercase;
font-size: 2rem;
letter-spacing: 2px;
text-shadow: 0 0 20px #ff00a0, 0 0 40px #ff00a0;
margin-bottom: 50px;
}
.community-layout {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 50px;
}
/* LEFT side */
.community-left {
flex: 1 1 400px;
max-width: 500px;
min-height: 200px;
background: rgba(0,0,0,0.8);
border: 2px solid #ff00a0;
border-radius: 20px;
box-shadow: 0 0 40px #ff00a0aa;
padding: 40px;
position: relative;
overflow: hidden;
}
.shoutout {
opacity: 0;
transform: scale(0.95);
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity 1.2s ease, transform 1.2s ease;
}
.shoutout.active {
opacity: 1;
transform: scale(1);
position: relative;
}
.shoutout p {
font-size: 1.2rem;
color: #fff;
margin-bottom: 15px;
}
.shoutout span {
color: #ff00a0;
font-size: 0.9rem;
}
/* RIGHT side */
.community-right {
flex: 1 1 300px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
}
.community-post {
background: rgba(0,0,0,0.7);
border: 2px solid #ff00a0;
border-radius: 16px;
padding: 20px 30px;
box-shadow: 0 0 30px #ff00a0aa;
text-align: right;
width: 100%;
max-width: 350px;
transition: transform 0.3s ease;
}
.community-post:hover {
transform: translateX(-5px);
background: #ff00a0;
color: #000;
}
.community-post h3 {
margin-bottom: 10px;
color: #ff00a0;
}
.community-post a.btn {
border: 2px solid #ff00a0;
padding: 8px 20px;
color: #ff00a0;
text-decoration: none;
border-radius: 10px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.community-post a.btn:hover {
background: #ff00a0;
color: #000;
}
/* Mobile */
@media (max-width: 768px) {
.community-layout {
flex-direction: column;
align-items: center;
}
.community-right {
align-items: center;
}
.community-post {
text-align: center;
}
}
/* === DOPESICK: Community Rotator + Right Column === */
.latest-community {
text-align: center;
margin-top: 80px;
padding: 60px 0;
background: rgba(0, 0, 0, 0.3);
}
.latest-community h2 {
color: #ff00a0;
text-transform: uppercase;
font-size: 2rem;
letter-spacing: 2px;
text-shadow: 0 0 20px #ff00a0, 0 0 40px #ff00a0;
margin-bottom: 50px;
}
.community-layout {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 50px;
}
/* LEFT: rotating shout-out */
.community-left {
flex: 1 1 420px;
max-width: 560px;
min-height: 220px;
background: rgba(0,0,0,0.85);
border: 2px solid #ff00a0;
border-radius: 20px;
box-shadow: 0 0 40px #ff00a0aa;
padding: 36px 32px;
position: relative;
overflow: hidden;
}
.shoutout {
opacity: 0;
transform: scale(0.95);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transition: opacity 1.2s ease, transform 1.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.shoutout.active {
opacity: 1;
transform: scale(1);
position: relative;
}
#shoutout-title {
color: #ff00a0;
text-shadow: 0 0 10px #ff00a0;
font-size: 1.35rem;
}
#shoutout-excerpt {
color: #fff;
font-size: 1rem;
}
#shoutout-link.btn {
align-self: flex-start;
}
/* RIGHT: stacked buttons aligned right */
.community-right {
flex: 1 1 320px;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 18px;
}
.community-post {
width: 100%;
background: rgba(0,0,0,0.7);
border: 2px solid #ff00a0;
border-radius: 16px;
padding: 18px 24px;
box-shadow: 0 0 30px #ff00a0aa;
text-align: right;
transition: transform .3s ease, background .3s ease, color .3s ease;
}
.community-post:hover { transform: translateX(-4px); background:#ff00a0; color:#000; }
.community-post h3 { margin: 0 0 10px; color: #ff00a0; }
/* Global neon button look (reuses your theme colors) */
.latest-community .btn {
display: inline-block;
border: 2px solid #ff00a0;
padding: 10px 22px;
color: #ff00a0;
text-decoration: none;
border-radius: 12px;
text-transform: uppercase;
transition: all .3s ease;
box-shadow: 0 0 20px #ff00a0aa;
}
.latest-community .btn:hover { background:#ff00a0; color:#000; }
/* Downward Path → Coming Soon */
.community-post.disabled { opacity: .75; }
.community-post.disabled .btn { display: none; }
.community-post.disabled .coming-soon {
display: inline-block;
border: 2px solid #ff00a0;
color: #ff00a0;
padding: 8px 16px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: .5px;
}
/* Mobile */
@media (max-width: 768px) {
.community-layout { flex-direction: column; align-items: center; gap: 30px; }
.community-right { align-items: center; max-width: 100%; }
.community-post { text-align: center; }
#shoutout-link.btn { align-self: center; }
}
/* === DOPESICK MASTER DESIGN === */
.latest-community {
text-align: center;
margin-top: 100px;
padding: 80px 0;
background: radial-gradient(circle at center, rgba(255, 0, 150, 0.1), transparent 70%);
animation: backgroundPulse 6s infinite ease-in-out alternate;
}
@keyframes backgroundPulse {
from { background-color: rgba(255, 0, 150, 0.1); }
to { background-color: rgba(255, 0, 150, 0.3); }
}
.latest-community h2 {
color: #ff00a0;
text-transform: uppercase;
font-size: 2.4rem;
letter-spacing: 2px;
text-shadow: 0 0 25px #ff00a0, 0 0 55px #ff00a0;
margin-bottom: 60px;
font-weight: 700;
}
.community-layout {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 70px;
}
/* === LEFT CARD === */
.community-left {
flex: 1 1 450px;
max-width: 560px;
min-height: 250px;
background: rgba(0, 0, 0, 0.9);
border: 2px solid #ff00a0;
border-radius: 22px;
box-shadow: 0 0 60px #ff00a0aa;
padding: 40px;
position: relative;
overflow: hidden;
}
.shoutout {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease, transform 1s ease;
position: absolute;
inset: 0;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.shoutout.active {
opacity: 1;
transform: translateY(0);
}
#shoutout-title {
color: #ff00a0;
text-shadow: 0 0 15px #ff00a0;
font-size: 1.4rem;
margin-bottom: 15px;
}
#shoutout-excerpt {
color: #fff;
font-size: 1rem;
margin-bottom: 20px;
}
#shoutout-link.btn {
align-self: flex-start;
}
/* === RIGHT SIDE BUTTONS === */
.community-right {
flex: 1 1 300px;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 25px;
}
.community-post {
width: 100%;
background: rgba(0, 0, 0, 0.75);
border: 2px solid #ff00a0;
border-radius: 18px;
padding: 22px 28px;
box-shadow: 0 0 40px #ff00a0aa;
text-align: right;
transition: transform .4s ease, background .4s ease;
}
.community-post:hover {
transform: translateX(-8px);
background: #ff00a0;
color: #000;
}
.community-post h3 {
color: #ff00a0;
margin-bottom: 10px;
}
.latest-community .btn {
border: 2px solid #ff00a0;
padding: 10px 24px;
color: #ff00a0;
text-decoration: none;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all .3s ease;
box-shadow: 0 0 30px #ff00a0aa;
}
.latest-community .btn:hover {
background: #ff00a0;
color: #000;
box-shadow: 0 0 50px #ff00a0;
}
/* COMING SOON STATE */
.community-post.disabled {
opacity: 0.7;
cursor: default;
}
.community-post.disabled .btn {
display: none;
}
.community-post .coming-soon {
display: inline-block;
border: 2px solid #ff00a0;
color: #ff00a0;
padding: 8px 20px;
border-radius: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
.community-layout {
flex-direction: column;
align-items: center;
}
.community-right {
align-items: center;
}
.community-post {
text-align: center;
}
#shoutout-link.btn {
align-self: center;
}
}
/* === Origins Page Styling === */
.origins-section {
background-color: #000;
color: #ff00cc;
text-align: center;
padding: 80px 20px;
font-family: 'Orbitron', sans-serif;
letter-spacing: 1px;
}
.origins-container {
max-width: 900px;
margin: 0 auto;
}
.origins-title {
font-size: 3rem;
text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc;
margin-bottom: 10px;
}
.origins-subtitle {
color: #ff99ff;
font-size: 1.1rem;
margin-bottom: 40px;
text-shadow: 0 0 8px #ff66cc;
}
.alchemy-divider {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, #ff00cc, transparent);
margin: 40px auto;
width: 80%;
box-shadow: 0 0 8px #ff00cc;
}
.section-header {
font-size: 1.6rem;
color: #ff66cc;
margin-bottom: 20px;
text-shadow: 0 0 10px #ff33cc;
}
.origins-text {
font-size: 1rem;
color: #fff;
line-height: 1.8;
text-shadow: 0 0 6px #ff00cc44;
margin-bottom: 40px;
}
.origins-footer {
margin-top: 60px;
font-size: 1.1rem;
color: #ff99ff;
text-shadow: 0 0 10px #ff00cc;
font-style: italic;
animation: glowPulse 2.5s infinite alternate;
}
@keyframes glowPulse {
from { text-shadow: 0 0 5px #ff00cc; opacity: 0.8; }
to { text-shadow: 0 0 20px #ff66ff; opacity: 1; }
}
/* === DOPESICK ORIGINS MENU GLOW EFFECT === */
/* Main glowing tab for THE ORIGINS link */
a[href*="/pages/origins"] {
position: relative;
color: #ff00cc !important;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 0 8px #ff33cc, 0 0 16px #ff00cc, 0 0 32px #ff33ff;
animation: flickerGlow 2.8s infinite alternate;
transition: all 0.3s ease-in-out;
}
/* Add pulsing sigil icon (alchemy A + glowing ring) before the text */
a[href*="/pages/origins"]::before {
content: "Ⓐ";
position: relative;
margin-right: 6px;
font-size: 1.2em;
color: #ff33ff;
text-shadow: 0 0 8px #ff00cc, 0 0 16px #ff66ff, 0 0 24px #ff00cc;
animation: sigilPulse 3s infinite alternate;
}
/* Hover state — brighter, slightly enlarged */
a[href*="/pages/origins"]:hover {
color: #ffffff !important;
text-shadow: 0 0 10px #ff66ff, 0 0 20px #ff00cc, 0 0 40px #ff33cc;
transform: scale(1.08);
}
/* Flicker and glow rhythm */
@keyframes flickerGlow {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
text-shadow: 0 0 6px #ff33cc, 0 0 12px #ff00cc, 0 0 24px #ff66ff;
}
20%, 24%, 55% {
opacity: 0.7;
text-shadow: none;
}
}
/* Sigil pulse (the little A symbol before the text) */
@keyframes sigilPulse {
0% { opacity: 0.8; text-shadow: 0 0 4px #ff00cc; transform: scale(1); }
50% { opacity: 1; text-shadow: 0 0 16px #ff66ff, 0 0 24px #ff00cc; transform: scale(1.15); }
100% { opacity: 0.9; text-shadow: 0 0 8px #ff33cc; transform: scale(1); }
}
/* Optional subtle underline glow */
a[href*="/pages/origins"]::after {
content: "";
display: block;
height: 2px;
width: 0%;
background: linear-gradient(90deg, #ff00cc, #ff66ff);
margin: 4px auto 0;
border-radius: 2px;
transition: width 0.4s ease;
box-shadow: 0 0 10px #ff33ff;
}
a[href*="/pages/origins"]:hover::after {
width: 80%;
}
a[href*="/pages/the-underground"] {
color: #ff3300 !important;
text-shadow: 0 0 6px #ff3300, 0 0 14px #ff6600, 0 0 24px #ff2200;
animation: flickerUnderground 3s infinite alternate;
}
@keyframes flickerUnderground {
0%, 25%, 50%, 75%, 100% { opacity: 1; }
30%, 60% { opacity: 0.6; }
}
/* === Glowing Symbol Inside ORIGINS Title === */
.origins-symbol {
color: #ff00cc;
text-shadow: 0 0 8px #ff00cc, 0 0 16px #ff66ff, 0 0 32px #ff33cc;
font-size: 1.4em;
margin-right: 8px;
animation: symbolPulse 3s infinite alternate;
vertical-align: middle;
}
@keyframes symbolPulse {
0% { opacity: 0.8; transform: scale(1); text-shadow: 0 0 5px #ff33cc; }
50% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 18px #ff66ff, 0 0 32px #ff00cc; }
100% { opacity: 0.9; transform: scale(1); text-shadow: 0 0 10px #ff00cc; }
}
/* === Glowing Symbols for Origins Title === */
.origins-title {
display: inline-block;
font-size: 3rem;
font-weight: 900;
text-align: center;
width: 100%;
color: #ff00cc;
text-shadow: 0 0 10px #ff00cc, 0 0 25px #ff66ff;
letter-spacing: 2px;
position: relative;
margin-top: 40px;
}
.origins-symbol {
color: #ff00cc !important;
font-size: 1.4em;
margin: 0 8px;
vertical-align: middle;
text-shadow: 0 0 8px #ff00cc, 0 0 18px #ff66ff, 0 0 30px #ff33cc;
animation: symbolPulse 2.5s infinite alternate;
}
@keyframes symbolPulse {
0% {
opacity: 0.8;
transform: scale(1);
text-shadow: 0 0 6px #ff00cc;
}
50% {
opacity: 1;
transform: scale(1.2);
text-shadow: 0 0 16px #ff66ff, 0 0 30px #ff00cc;
}
100% {
opacity: 0.9;
transform: scale(1);
text-shadow: 0 0 8px #ff33cc;
}
}
h1, h2 {
text-align:center;
color:#ff0099;
text-shadow:0 0 12px rgba(255,0,150,.5);
margin-top:3rem;
}
.intro {
text-align:center;
font-size:1.15rem;
line-height:1.8;
color:#f4dff8;
margin:1.5rem auto;
max-width:850px;
}
hr {
border:0;
height:1px;
background:linear-gradient(90deg,rgba(255,0,150,.4),rgba(255,255,255,.2),rgba(255,0,150,.4));
margin:2.5rem 0;
}
h3 {
color:#ff5ac7;
text-shadow:0 0 8px rgba(255,90,199,.6);
margin-top:2.5rem;
text-transform:uppercase;
letter-spacing:.04em;
}
.origins-footer {
margin:5rem 0 3rem 0;
text-align:center;
padding:3rem 1rem;
border-top:1px solid rgba(255,255,255,.15);
}
.origins-banner .banner-line {
font-family:'Courier New', monospace;
color:#ff00aa;
text-shadow:0 0 10px rgba(255,0,170,.6);
letter-spacing:.2em;
}
.origins-banner .banner-title {
margin:1rem 0;
color:#ffffff;
font-size:1.8rem;
text-shadow:0 0 12px rgba(255,0,170,.4),0 0 24px rgba(255,0,170,.2);
}
.origins-banner .banner-text {
color:#f8dff8;
font-size:1.05rem;
line-height:1.8;
max-width:700px;
margin:0 auto;
}
.banner-link {
color:#ff69b4;
text-decoration:none;
text-shadow:0 0 6px rgba(255,105,180,.4);
transition:all .2s ease;
}
.banner-link:hover {
color:#fff;
text-shadow:0 0 12px rgba(255,255,255,.8);
}
/* --- DOPESICK HERO --- */
.dsk-hero {
min-height: 78vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
text-align: center;
padding: 6rem 1.25rem 4rem;
}
.dsk-hero__title {
font-size: clamp(2.4rem, 5vw, 4.2rem);
color: #ff007f;
text-shadow: 0 0 18px rgba(255, 0, 127, 0.45);
}
.dsk-hero__tag {
margin: 0.9rem auto 1.8rem;
color: #f3e9f5;
max-width: 760px;
line-height: 1.7;
font-size: 1.1rem;
}
.dsk-hero__cta {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.dsk-btn {
border: 1px solid #ff007f;
padding: 0.8rem 1.6rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #000;
background: #ff007f;
transition: 0.25s;
}
.dsk-btn:hover {
filter: brightness(1.15);
}
.dsk-btn--ghost {
background: transparent;
color: #ff007f;
}
.dsk-btn--ghost:hover {
background: #ff007f;
color: #000;
}
/* --- DOPESICK HEART --- */
.dsk-heart {
max-width: 860px;
margin: 4rem auto 2rem;
padding: 0 1rem;
color: #f6e7f9;
line-height: 1.8;
text-align: center;
}
.dsk-heart__title {
color: #ff5ac7;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: .8rem;
text-shadow: 0 0 12px rgba(255, 90, 199, .5);
}
.dsk-heart__copy p {
margin-bottom: 1rem;
}
/* --- DOPESICK PRODUCTS --- */
.dsk-products {
padding: 3rem 1rem;
border-top: 1px solid rgba(255,255,255,.12);
text-align: center;
}
.dsk-products__title {
color: #ff70b9;
text-shadow: 0 0 12px rgba(255,112,185,.45);
margin-bottom: 1.4rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.dsk-products__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.dsk-card {
background: #0a0a0a;
border: 1px solid rgba(255,255,255,.08);
text-decoration: none;
color: #fff;
transition: .25s;
}
.dsk-card:hover {
transform: translateY(-3px);
box-shadow: 0 0 18px rgba(255,0,127,.18);
}
.dsk-card__img img {
width: 100%;
display: block;
}
.dsk-card__meta {
padding: .9rem;
}
.dsk-card__meta h3 {
margin: 0 0 .25rem;
font-size: 1rem;
}
.dsk-card__meta p {
margin: 0;
color: #f3e9f5;
}
/* --- DOPESICK CTA --- */
.dsk-cta {
text-align: center;
padding: 3rem 1rem;
border-top: 1px solid rgba(255,255,255,.12);
background: #090909;
}
.dsk-cta h2 {
color: #ff007f;
text-shadow: 0 0 14px rgba(255,0,127,.4);
margin: 0 0 .5rem;
}
.dsk-cta__sub {
color: #f0e4f6;
margin: 0 0 1.3rem;
}
.dsk-cta__row {
display: flex;
gap: .75rem;
justify-content: center;
flex-wrap: wrap;
}
/* --- DOPESICK HELP PAGE --- */
.help-intro,
.help-hotlines,
.help-message,
.help-links {
max-width: 850px;
margin: 3rem auto;
padding: 0 1rem;
color: #f6e7f9;
line-height: 1.8;
text-align: center;
}
.help-intro h1,
.help-hotlines h2,
.help-message h2,
.help-links h2 {
color: #ff5ac7;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 1rem;
text-shadow: 0 0 12px rgba(255,90,199,.5);
}
.help-hotlines ul,
.help-links ul {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.help-hotlines li,
.help-links li {
margin: .6rem 0;
}
.help-hotlines a,
.help-links a {
color: #ff70b9;
text-decoration: none;
}
.help-hotlines a:hover,
.help-links a:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255,255,255,.5);
}
.help-message form {
display: flex;
flex-direction: column;
align-items: center;
}
.help-message textarea {
width: 100%;
max-width: 700px;
min-height: 140px;
margin: 1rem 0;
background: #0a0a0a;
color: #fff;
border: 1px solid rgba(255,255,255,.2);
padding: .8rem;
font-size: 1rem;
}
.help-message button {
border: 1px solid #ff007f;
background: #ff007f;
color: #000;
text-transform: uppercase;
letter-spacing: .08em;
padding: .8rem 1.6rem;
transition: .3s;
cursor: pointer;
}
.help-message button:hover {
background: transparent;
color: #ff007f;
}
/* --- DOPESICK JOIN PAGE --- */
.join-intro,
.join-form,
.join-links {
max-width: 850px;
margin: 3rem auto;
padding: 0 1rem;
color: #f6e7f9;
line-height: 1.8;
text-align: center;
}
.join-intro h1,
.join-form h2,
.join-links h2 {
color: #ff5ac7;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 1rem;
text-shadow: 0 0 12px rgba(255,90,199,.5);
}
.join-form form {
display: flex;
flex-direction: column;
align-items: center;
}
.join-form input,
.join-form textarea {
width: 100%;
max-width: 700px;
background: #0a0a0a;
color: #fff;
border: 1px solid rgba(255,255,255,.2);
margin: .6rem 0;
padding: .8rem;
font-size: 1rem;
}
.join-form button {
border: 1px solid #ff007f;
background: #ff007f;
color: #000;
text-transform: uppercase;
letter-spacing: .08em;
padding: .8rem 1.6rem;
transition: .3s;
cursor: pointer;
}
.join-form button:hover {
background: transparent;
color: #ff007f;
}
.join-links ul {
list-style: none;
padding: 0;
}
.join-links li {
margin: .6rem 0;
}
.join-links a {
color: #ff70b9;
text-decoration: none;
}
.join-links a:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255,255,255,.5);
}
/* --- DIVIDER LINES / SECTIONS --- */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(255,0,150,.4), rgba(255,255,255,.2), rgba(255,0,150,.4));
margin: 3rem 0;
}
/* --- MOBILE TWEAKS --- */
@media (max-width: 768px) {
.dsk-hero__title {
font-size: 2rem;
}
.dsk-btn {
width: 100%;
margin: .3rem 0;
}
.dsk-products__grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.dsk-heart, .dsk-products, .dsk-cta, .help-intro, .join-intro {
padding: 2rem 1rem;
}
}
body::before {
content: "";
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(circle at center, rgba(255,0,127,.1), transparent 70%);
pointer-events: none;
animation: slowPulse 8s ease-in-out infinite;
z-index: 0;
}
@keyframes slowPulse {
0%,100% { opacity: 0.6; }
50% { opacity: 0.3; }
}
.footer {
background:#000;
border-top:1px solid rgba(255,0,127,.25);
color:#f6e7f9;
}
.footer a {
color:#ff70b9;
text-decoration:none;
}
.footer a:hover {
color:#fff;
text-shadow:0 0 10px rgba(255,255,255,.5);
}
/* --- DOPESICK MANIFESTO --- */
.manifesto-intro,
.manifesto-body,
.manifesto-closing {
max-width: 850px;
margin: 3rem auto;
padding: 0 1rem;
color: #f6e7f9;
line-height: 1.8;
text-align: center;
}
.manifesto-intro h1,
.manifesto-body h2,
.manifesto-closing h2 {
color: #ff5ac7;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 1rem;
text-shadow: 0 0 12px rgba(255,90,199,.5);
}
.manifesto-body ul {
list-style: none;
padding: 0;
}
.manifesto-body li {
margin: .6rem 0;
}
.manifesto-links {
margin-top: 2rem;
}
/* --- DOPESICK GLOBAL FONTS (force) --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Inter:wght@400;600&display=swap');
html, body { font-family: 'Inter', sans-serif !important; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Cinzel Decorative', serif !important;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(255,0,120,.5);
}
/* === DOPESICK GLOBAL FONT ENFORCERS === */
html, body, p, li, button, input, select, textarea {
font-family: var(--font-body-family) !important;
color: var(--ds-white);
}
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .heading, .title, .page-title,
.section-header__title, .section-title, .banner__heading,
.dsk-hero__title, .dopesick-glow, .dopesick-glow * {
font-family: var(--font-heading-family) !important;
font-weight: var(--font-heading-weight) !important;
letter-spacing: .05em;
}
/* wordmark spans must not inherit heading text-transform or font */
.dsk-wordmark,
.dsk-wordmark span {
text-transform: none !important;
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
text-shadow: none !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* === DOPESICK GLOW PULSE === */
@keyframes glowPulse {
0%, 100% {
text-shadow: 0 0 10px rgba(255,0,120,.35),
0 0 20px rgba(255,0,120,.25),
0 0 30px rgba(255,0,120,.15);
}
50% {
text-shadow: 0 0 14px rgba(255,0,180,.55),
0 0 28px rgba(255,0,180,.45),
0 0 42px rgba(255,0,180,.25);
}
}
/* glowPulse removed — was causing GPU compositing blur on all headings */
/* === DOPESICK COLOR PULSE === */
@keyframes glowColorShift {
0% {
text-shadow:
0 0 10px rgba(255, 0, 120, .35),
0 0 20px rgba(255, 0, 120, .25),
0 0 30px rgba(255, 0, 120, .15);
color: #ff007f;
}
33% {
text-shadow:
0 0 14px rgba(255, 0, 180, .45),
0 0 28px rgba(255, 0, 180, .35),
0 0 42px rgba(255, 0, 180, .25);
color: #ff00c8;
}
66% {
text-shadow:
0 0 14px rgba(0, 128, 255, .45),
0 0 28px rgba(0, 128, 255, .35),
0 0 42px rgba(0, 128, 255, .25);
color: #00bfff;
}
100% {
text-shadow:
0 0 10px rgba(255, 0, 120, .35),
0 0 20px rgba(255, 0, 120, .25),
0 0 30px rgba(255, 0, 120, .15);
color: #ff007f;
}
}
/* glowColorShift removed from h1 — was causing GPU blur */
/* === DOPESICK FORM CONFIRMATION === */
.thank-you-message {
text-align: center;
color: #f6e7f9;
background: rgba(255,0,120,.08);
border: 1px solid rgba(255,0,120,.4);
border-radius: 12px;
padding: 2rem 1rem;
margin-top: 1.5rem;
box-shadow: 0 0 20px rgba(255,0,120,.3);
animation: fadeIn 0.6s ease-in-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- DOPESICK UNDERGROUND BOX --- */
.dsk-underground {
text-align: center;
padding: 3rem 1rem;
border-top: 1px solid rgba(255,255,255,.12);
background: radial-gradient(circle at center, rgba(255,0,120,.05), transparent 70%);
color: #f6e7f9;
}
.dsk-underground__title {
font-family: 'Cinzel Decorative', serif;
color: #ff00c8;
text-transform: uppercase;
letter-spacing: .06em;
text-shadow: 0 0 12px rgba(255,0,200,.5);
margin-bottom: 1rem;
}
.dsk-underground__text {
max-width: 700px;
margin: 0 auto 1.5rem;
line-height: 1.8;
}
.dsk-underground__cta {
display: flex;
justify-content: center;
}
/* --- THE UNDERGROUND PAGE --- */
.underground-intro {
text-align:center;
color:#f6e7f9;
margin:3rem auto;
max-width:800px;
line-height:1.8;
}
.underground-intro h1 {
color:#ff00c8;
text-transform:uppercase;
letter-spacing:.06em;
text-shadow:0 0 12px rgba(255,0,200,.5);
margin-bottom:1rem;
}
.underground-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1.5rem;
max-width:1100px;
margin:3rem auto;
padding:0 1rem 3rem;
}
.underground-card {
background:#0a0a0a;
border:1px solid rgba(255,255,255,.1);
padding:1.5rem;
border-radius:12px;
text-align:center;
transition:transform .25s, box-shadow .25s;
}
.underground-card:hover {
transform:translateY(-4px);
box-shadow:0 0 22px rgba(255,0,127,.25);
}
.underground-card h3 {
color:#ff70b9;
text-transform:uppercase;
margin-bottom:.75rem;
}
.underground-card p {
color:#f6e7f9;
font-size:1rem;
margin-bottom:1rem;
}
/* --- THE UNDERGROUND PAGE --- */
.underground-intro {
text-align:center;
color:#f6e7f9;
margin:3rem auto;
max-width:800px;
line-height:1.8;
}
.underground-intro h1 {
color:#ff00c8;
text-transform:uppercase;
letter-spacing:.06em;
text-shadow:0 0 12px rgba(255,0,200,.5);
margin-bottom:1rem;
}
.underground-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1.5rem;
max-width:1100px;
margin:3rem auto;
padding:0 1rem 3rem;
}
.underground-card {
background:#0a0a0a;
border:1px solid rgba(255,255,255,.1);
padding:1.5rem;
border-radius:12px;
text-align:center;
transition:transform .25s, box-shadow .25s;
}
.underground-card:hover {
transform:translateY(-4px);
box-shadow:0 0 22px rgba(255,0,127,.25);
}
.underground-card h3 {
color:#ff70b9;
text-transform:uppercase;
margin-bottom:.75rem;
}
.underground-card p {
color:#f6e7f9;
font-size:1rem;
margin-bottom:1rem;
}
.manifesto-home h2 {
text-shadow: 0 0 10px #ff66b2, 0 0 20px #ff3399, 0 0 40px #ff66b2;
animation: pulseGlow 3s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
from { text-shadow: 0 0 8px #ff66b2; }
to { text-shadow: 0 0 25px #ff66b2, 0 0 50px #ff33cc; }
}
/* === UNDERGROUND SECTION STYLING === */
.dsk-underground {
background: radial-gradient(circle at center, #0a0010 60%, #000 100%);
text-align: center;
padding: 80px 20px;
border-top: 1px solid #ff66b2;
border-bottom: 1px solid #ff33cc;
position: relative;
overflow: hidden;
}
.dsk-underground::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,102,178,0.08), transparent 80%);
filter: blur(80px);
z-index: 0;
}
.underground-inner {
position: relative;
z-index: 1;
animation: fadeUp 1.2s ease-out forwards;
}
.underground-title {
color: #ff66b2;
font-family: "Cinzel Decorative", serif;
font-size: 2.4rem;
text-shadow: 0 0 15px #ff66b2, 0 0 30px #ff33cc;
margin-bottom: 20px;
animation: pulseGlow 3s ease-in-out infinite alternate;
}
.underground-text {
color: #ccc;
max-width: 700px;
margin: 0 auto 60px;
line-height: 1.7;
font-size: 1.1rem;
}
.manifesto-container {
background: rgba(0, 0, 0, 0.7);
border: 1px solid #ff33cc;
border-radius: 16px;
padding: 40px 30px;
margin: 0 auto 60px;
max-width: 800px;
box-shadow: 0 0 25px rgba(255, 51, 204, 0.2);
animation: fadeInGlow 1.5s ease-out forwards;
}
.manifesto-title {
color: #ff66b2;
font-family: "Cinzel Decorative", serif;
font-size: 1.8rem;
margin-bottom: 15px;
text-shadow: 0 0 20px #ff33cc;
animation: pulseGlow 3s ease-in-out infinite alternate;
}
.manifesto-text {
color: #eee;
line-height: 1.8;
font-size: 1rem;
margin-bottom: 25px;
}
.manifesto-btn {
background: linear-gradient(90deg, #ff33cc, #ff66b2);
color: #000;
text-decoration: none;
font-weight: bold;
padding: 12px 28px;
border-radius: 8px;
transition: all 0.3s ease;
display: inline-block;
text-transform: uppercase;
}
.manifesto-btn:hover {
background: linear-gradient(90deg, #ff66b2, #ff33cc);
box-shadow: 0 0 20px #ff66b2;
transform: scale(1.05);
}
.underground-cta {
margin-top: 30px;
}
.underground-btn {
background: transparent;
border: 2px solid #ff66b2;
padding: 12px 30px;
color: #ff66b2;
text-transform: uppercase;
font-weight: bold;
border-radius: 8px;
transition: all 0.4s ease;
text-decoration: none;
}
.underground-btn:hover {
background: #ff66b2;
color: #000;
box-shadow: 0 0 25px #ff33cc, 0 0 45px #ff66b2;
transform: scale(1.05);
}
/* === ANIMATIONS === */
@keyframes pulseGlow {
from {
text-shadow: 0 0 10px #ff66b2, 0 0 20px #ff33cc;
}
to {
text-shadow: 0 0 30px #ff33cc, 0 0 50px #ff66b2;
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInGlow {
from {
opacity: 0;
transform: scale(0.95);
box-shadow: 0 0 0 rgba(255, 51, 204, 0);
}
to {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 30px rgba(255, 51, 204, 0.2);
}
}
/* ===================== */
/* ⚡ THE UNDERGROUND ⚡ */
/* ===================== */
.dsk-underground {
background: radial-gradient(circle at center, #08000f 65%, #000 100%);
text-align: center;
padding: 90px 20px;
border-top: 1px solid #ff33cc;
border-bottom: 1px solid #ff66b2;
position: relative;
overflow: hidden;
}
.dsk-underground::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,102,178,0.08), transparent 70%);
animation: undergroundLight 10s linear infinite;
z-index: 0;
}
.underground-container {
position: relative;
z-index: 1;
animation: fadeUp 1.2s ease-out forwards;
}
.underground-title {
font-family: "Cinzel Decorative", serif;
color: #ff66b2;
font-size: 2.8rem;
margin-bottom: 20px;
text-shadow: 0 0 20px #ff33cc, 0 0 40px #ff66b2;
animation: pulseGlow 3s ease-in-out infinite alternate;
}
.underground-subtext {
color: #bbb;
font-size: 1.1rem;
line-height: 1.8;
max-width: 700px;
margin: 0 auto 40px;
}
.underground-btn {
background: transparent;
border: 2px solid #ff66b2;
color: #ff66b2;
text-transform: uppercase;
font-weight: bold;
padding: 12px 28px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 0 25px rgba(255, 51, 204, 0.3);
}
.underground-btn:hover {
background: #ff66b2;
color: #000;
box-shadow: 0 0 25px #ff33cc, 0 0 45px #ff66b2;
transform: scale(1.05);
}
/* ===================== */
/* ⚡ THE MANIFESTO ⚡ */
/* ===================== */
.dsk-manifesto {
background: linear-gradient(180deg, #0a0013 0%, #000 100%);
padding: 90px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.dsk-manifesto::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(255,51,204,0.1), transparent 80%);
animation: glowFlow 12s linear infinite;
z-index: 0;
}
.manifesto-wrapper {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
animation: fadeUp 1.2s ease-out forwards;
}
.manifesto-title {
font-family: "Cinzel Decorative", serif;
color: #ff66b2;
font-size: 2rem;
margin-bottom: 20px;
text-shadow: 0 0 25px #ff33cc, 0 0 40px #ff66b2;
animation: pulseGlow 3s ease-in-out infinite alternate;
}
.manifesto-text {
color: #eee;
line-height: 1.8;
margin-bottom: 35px;
font-size: 1.1rem;
}
.manifesto-btn {
background: linear-gradient(90deg, #ff33cc, #ff66b2);
color: #000;
text-decoration: none;
font-weight: bold;
padding: 12px 30px;
border-radius: 8px;
transition: all 0.3s ease;
text-transform: uppercase;
}
.manifesto-btn:hover {
background: linear-gradient(90deg, #ff66b2, #ff33cc);
box-shadow: 0 0 25px #ff66b2;
transform: scale(1.05);
}
/* ===================== */
/* ✴️ Animations ✴️ */
/* ===================== */
@keyframes pulseGlow {
from {
text-shadow: 0 0 10px #ff66b2, 0 0 20px #ff33cc;
}
to {
text-shadow: 0 0 40px #ff33cc, 0 0 60px #ff66b2;
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes undergroundLight {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes glowFlow {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 0.5;
}
}
/* ===== DOPESICK FOOTER — REBELLION, RECOVERY, REBIRTH ===== */
footer, .footer {
background: radial-gradient(circle at top, #0a0007 10%, #000 90%);
border-top: 2px solid #ff66b2;
box-shadow: 0 -0.5rem 2rem rgba(255, 102, 178, 0.2);
color: #fff;
padding: 40px 20px;
text-align: center;
font-family: 'Cinzel Decorative', serif;
position: relative;
overflow: hidden;
}
/* Neon grid effect */
footer::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
rgba(255, 102, 178, 0.05) 0px,
rgba(255, 102, 178, 0.05) 1px,
transparent 2px,
transparent 10px
);
pointer-events: none;
animation: moveGrid 20s linear infinite;
}
@keyframes moveGrid {
from { background-position: 0 0; }
to { background-position: 200px 200px; }
}
/* Footer headings */
footer h4, .footer-block__heading, .footer__heading {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #ff66b2;
text-shadow: 0 0 10px #ff66b2, 0 0 30px rgba(255, 102, 178, 0.4);
margin-bottom: 12px;
}
/* Links */
footer a, .footer a {
color: #ff66b2;
text-decoration: none;
font-weight: bold;
transition: 0.3s ease;
}
footer a:hover, .footer a:hover {
color: #fff;
text-shadow: 0 0 15px #ff66b2, 0 0 40px #ff33cc;
letter-spacing: 0.5px;
}
/* Email subscribe box */
footer input[type="email"] {
background: #000;
border: 1px solid #ff66b2;
color: #fff;
padding: 10px;
border-radius: 8px;
outline: none;
width: 220px;
transition: 0.3s;
}
footer input[type="email"]:focus {
border-color: #ff33cc;
box-shadow: 0 0 10px #ff33cc;
}
footer button, footer input[type="submit"] {
background: #ff66b2;
border: none;
color: #000;
padding: 10px 16px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
footer button:hover, footer input[type="submit"]:hover {
background: #fff;
color: #000;
box-shadow: 0 0 15px #ff66b2;
}
/* Divider glow lines */
.footer-block {
border: 1px solid rgba(255, 102, 178, 0.4);
border-radius: 12px;
box-shadow: 0 0 10px rgba(255, 102, 178, 0.3);
padding: 20px;
backdrop-filter: blur(3px);
}
/* Bottom credits */
.footer__copyright, .footer__content-bottom {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
margin-top: 20px;
text-shadow: 0 0 4px rgba(255, 102, 178, 0.4);
}
/* Pulse animation */
@keyframes pulseGlow {
0%, 100% { text-shadow: 0 0 8px #ff66b2, 0 0 25px #ff33cc; }
50% { text-shadow: 0 0 20px #ff99cc, 0 0 50px #ff33cc; }
}
footer h4, .footer__heading {
animation: pulseGlow 3s infinite ease-in-out;
}
/* ===== ABOUT THE DOPESICK COLLECTIVE ===== */
.dsk-about {
max-width: 900px;
margin: 80px auto;
padding: 60px 30px;
background: radial-gradient(circle at top, rgba(255, 102, 178, 0.08), rgba(0, 0, 0, 0.8));
border: 1px solid rgba(255, 102, 178, 0.4);
border-radius: 20px;
box-shadow: 0 0 25px rgba(255, 102, 178, 0.3);
color: #fff;
font-family: 'Cinzel Decorative', serif;
text-align: center;
animation: fadeIn 1.4s ease-out;
}
.about-title {
font-size: 2.2rem;
color: #ff66b2;
text-shadow: 0 0 20px #ff66b2, 0 0 40px #ff33cc;
margin-bottom: 40px;
letter-spacing: 2px;
}
.about-title .glow {
color: #fff;
text-shadow: 0 0 20px #ff33cc, 0 0 50px #ff99cc;
}
.about-text p {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 28px;
color: #eaeaea;
}
.about-text strong {
color: #ff66b2;
text-shadow: 0 0 12px #ff66b2;
}
.about-text .quote {
font-size: 1.3rem;
font-style: italic;
color: #ff99cc;
text-shadow: 0 0 25px #ff33cc;
margin-top: 40px;
}
.about-buttons {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.dsk-btn {
background: transparent;
border: 1px solid #ff66b2;
padding: 12px 25px;
color: #fff;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
.dsk-btn:hover {
background: #ff66b2;
color: #000;
box-shadow: 0 0 15px #ff33cc, 0 0 50px #ff66b2;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
/* === UNIVERSAL DOPESICK BOX GLOW SYSTEM === */
.dsk-box, .footer-block, .card, .highlight, .shopify-section, .collection-grid__item {
background: radial-gradient(circle at center, rgba(255, 102, 178, 0.08), rgba(0, 0, 0, 0.85));
border: 1px solid rgba(255, 102, 178, 0.4);
border-radius: 15px;
box-shadow: 0 0 25px rgba(255, 102, 178, 0.2), inset 0 0 20px rgba(255, 102, 178, 0.05);
transition: all 0.4s ease;
color: #fff;
backdrop-filter: blur(6px);
padding: 20px;
}
/* Hover effects */
.dsk-box:hover, .footer-block:hover, .card:hover, .highlight:hover, .collection-grid__item:hover {
border-color: #ff66b2;
box-shadow: 0 0 40px rgba(255, 102, 178, 0.5), inset 0 0 25px rgba(255, 51, 204, 0.15);
transform: translateY(-3px);
}
/* Inner text readability */
.dsk-box p, .footer-block p, .card p, .highlight p {
color: #eaeaea;
line-height: 1.7;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.dsk-box h2, .dsk-box h3, .footer-block h4, .card h3, .highlight h3 {
color: #ff66b2;
text-shadow: 0 0 12px #ff66b2, 0 0 25px #ff33cc;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Links inside boxes */
.dsk-box a, .footer-block a, .card a, .highlight a {
color: #ff99cc;
font-weight: bold;
text-decoration: none;
transition: 0.3s ease;
}
.dsk-box a:hover, .footer-block a:hover, .card a:hover, .highlight a:hover {
color: #fff;
text-shadow: 0 0 20px #ff33cc;
}
/* Optional: subtle floating glow animation */
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 102, 178, 0.25), inset 0 0 15px rgba(255, 51, 204, 0.05);
}
50% {
box-shadow: 0 0 35px rgba(255, 102, 178, 0.45), inset 0 0 20px rgba(255, 51, 204, 0.15);
}
}
.dsk-box, .highlight, .footer-block {
animation: pulseGlow 6s ease-in-out infinite;
}
/* Collection / product cards */
.collection-grid__item {
text-align: center;
color: #fff;
border-radius: 18px;
overflow: hidden;
}
.collection-grid__item img {
transition: all 0.4s ease;
border-radius: 15px;
}
.collection-grid__item:hover img {
filter: brightness(1.3) contrast(1.1);
transform: scale(1.02);
}
/* ===== DOPESICK SCROLL REVEAL ANIMATION ===== */
.reveal {
opacity: 0;
transform: translateY(50px) scale(0.98);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
filter: blur(4px);
}
.reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
/* Neon flash when element becomes visible */
.reveal.visible::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(255,102,178,0.15), transparent 70%);
border-radius: inherit;
animation: glowFade 1.5s ease-out;
pointer-events: none;
}
@keyframes glowFade {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* === MOBILE FIX for cut-off boxes === */
@media screen and (max-width: 768px) {
/* specifically target Community Hub + Art & Design boxes */
.community-hub,
.art-design {
width: 100% !important;
max-width: 90vw !important;
margin: 20px auto !important;
padding: 24px 18px !important;
overflow: visible !important;
box-sizing: border-box;
}
/* ensure the parent container doesn't crop glowing edges */
.community-hub-container,
.art-design-container,
.cards-section,
.page-width {
overflow: visible !important;
}
/* soft glow adjustment to avoid clipping */
.community-hub::before,
.art-design::before {
filter: blur(24px);
opacity: 0.8;
}
}
/* optional – small screen tuning */
@media screen and (max-width: 480px) {
.community-hub,
.art-design {
box-shadow: 0 0 15px #ff00aa, 0 0 40px rgba(255, 0, 119, 0.5);
border-radius: 16px;
}
}
/* === UNIVERSAL GLOW FOR ALCHEMISTS MARKETPLACE === */
/* 1️⃣ Global word-based highlight */
body :is(h1,h2,h3,h4,p,a,span,strong,em,li):not(.no-glow) {
/* look for "alchemist" text case-insensitive */
text-transform: none;
}
body :is(h1,h2,h3,h4,p,a,span,strong,em,li):not(.no-glow):has-text("Alchemist"),
body :is(h1,h2,h3,h4,p,a,span,strong,em,li):not(.no-glow):has-text("ALCHEMIST"),
body :is(h1,h2,h3,h4,p,a,span,strong,em,li):not(.no-glow):has-text("alchemists") {
color:#4cff91 !important;
text-shadow:0 0 10px #4cff91,0 0 20px #00ff7a,0 0 40px #00c95a;
}
/* 2️⃣ Buttons / links explicitly marked as Alchemist */
a[href*="alchemist"],
button[id*="alchemist"],
button[class*="alchemist"],
a[class*="alchemist"] {
color:#fff !important;
border:2px solid #00ff7a !important;
box-shadow:0 0 15px #00ff7a inset,0 0 20px #00ff7a;
text-shadow:0 0 10px #00ff7a;
transition:all .3s ease;
}
a[href*="alchemist"]:hover,
button[id*="alchemist"]:hover,
button[class*="alchemist"]:hover {
background:#00ff7a !important;
color:#000 !important;
transform:scale(1.05);
}
/* 3️⃣ Special logo pulse for Marketplace pages */
body[data-collection-handle*="alchemists"]::before {
content:"";
display:block;
width:140px;
height:140px;
margin:80px auto 20px;
background:radial-gradient(circle,#00ff7a 10%,transparent 70%);
border-radius:50%;
filter:drop-shadow(0 0 25px #00ff7a) drop-shadow(0 0 60px #00e673);
animation:alchemyPulse 4s ease-in-out infinite;
}
@keyframes alchemyPulse {
0%,100%{transform:scale(1);filter:drop-shadow(0 0 20px #00ff7a);}
50%{transform:scale(1.08);filter:drop-shadow(0 0 40px #00e673);}
}
/* 4️⃣ Marketplace header accent */
body[data-collection-handle*="alchemists"] .collection-hero__title {
color:#4cff91 !important;
text-shadow:0 0 15px #00ff7a,0 0 35px #00e673;
}
/* === ALCHEMISTS GREEN WORDMARK GLOW === */
.alchemist-word {
position: relative;
display: inline-block;
color: #00ff7a !important;
font-weight: 700;
letter-spacing: 1px;
text-shadow: 0 0 10px #00ff7a, 0 0 25px #00e673;
transition: all 0.3s ease;
overflow: hidden;
}
.alchemist-word::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
transparent 46%,
#00ff7a 49%,
#00ff7a 51%,
transparent 54%
);
mix-blend-mode: screen;
opacity: 0.8;
animation: alchemistSlash 3s infinite ease-in-out;
pointer-events: none;
}
@keyframes alchemistSlash {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(2px); opacity: 1; }
}
.alchemist-word:hover {
text-shadow: 0 0 15px #00ff7a, 0 0 40px #00e673;
transform: scale(1.03);
}
/* === TEST FLAG (lets you see the script is running) === */
body.ag-ready { outline: 0; }
body.ag-ready::after{
content:"Alchemist glow active";
position:fixed; right:10px; bottom:10px; z-index:99999;
background:#0a0a0a; color:#00ff7a; font:600 12px/1.2 Montserrat, sans-serif;
border:1px solid #00ff7a; border-radius:6px; padding:6px 8px;
box-shadow:0 0 12px #00ff7a66; opacity:.65; pointer-events:none;
}
/* === ALCHEMISTS GREEN WORDMARK === */
.alchemist-word {
position: relative;
display: inline-block;
overflow: hidden;
color: #00ff7a !important;
font-weight: 700;
letter-spacing: 1px;
text-shadow: 0 0 10px #00ff7a, 0 0 25px #00e673;
transition: all 0.3s ease;
}
.alchemist-word::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
transparent 46%,
#00ff7a 49%,
#00ff7a 51%,
transparent 54%
);
mix-blend-mode: screen;
opacity: 0.8;
pointer-events: none;
animation: alchemistSlash 3s ease-in-out infinite;
}
@keyframes alchemistSlash {
0%,100% { transform: translateY(0); opacity: .6; }
50% { transform: translateY(2px); opacity: 1; }
}
.alchemist-word:hover {
transform: scale(1.03);
text-shadow: 0 0 15px #00ff7a, 0 0 40px #00e673;
}
/* ================
DOPESICK GLOBAL AURA CSS
================ */
:root {
--orange: #ff7a00;
--pink: #ff2ea6;
--blue: #00c1ff;
--red: #ff0033;
--black: #000;
--leaf: #3cb371;
--leaf-light: #5bd28f;
--glow-speed: 6s;
}
/* UNIVERSAL BACKGROUND AURA */
.dopesick-global body {
background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.02), transparent 70%),
linear-gradient(135deg, var(--orange), var(--pink), var(--blue));
background-size: 400% 400%;
animation: dopesickHue var(--glow-speed) linear infinite;
color: #f0f0f0;
}
@keyframes dopesickHue {
0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
100% { background-position: 200% 50%; filter: hue-rotate(360deg); }
}
/* TEXT SLASH EFFECT — DOPESICK */
.brand-dopesick {
position: relative;
display: inline-block;
font-family: 'Cinzel Decorative', serif;
text-transform: uppercase;
background: linear-gradient(90deg,var(--orange),var(--pink),var(--blue));
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: dopesickHue var(--glow-speed) linear infinite;
filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
}
.brand-dopesick::after {
content: "";
position: absolute;
inset: -5%;
background: linear-gradient(90deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 60%);
transform: rotate(25deg);
mix-blend-mode: screen;
animation: slashRotate 4s linear infinite;
pointer-events: none;
filter: blur(1px);
}
@keyframes slashRotate {
0% { transform: rotate(20deg) translateX(-20%); }
50% { transform: rotate(200deg) translateX(20%); }
100% { transform: rotate(380deg) translateX(-20%); }
}
/* UNDERGROUND MODE — Red/Black slash */
.underground-mode body {
background: linear-gradient(180deg, #000, #1a0000 60%, #000);
animation: redPulse 3s ease-in-out infinite;
}
@keyframes redPulse {
0%,100% { box-shadow: inset 0 0 40px rgba(255,0,0,.2); }
50% { box-shadow: inset 0 0 60px rgba(255,0,0,.6); }
}
.brand-underground {
position: relative;
color: #e6e6e6;
font-weight: 800;
text-transform: uppercase;
}
.brand-underground::after {
content: "";
position: absolute;
left: -5%; right: -5%;
top: 50%;
height: .2em;
transform: rotate(-12deg);
background: repeating-linear-gradient(90deg,#000 0 10px,var(--red) 10px 20px);
box-shadow: 0 0 10px rgba(255,0,0,.5);
}
/* MARKETPLACE MODE — Leaf green pulse */
.marketplace-green body {
background: radial-gradient(1200px 900px at 50% -10%, rgba(60,179,113,.1), transparent 60%),
#060806;
color: #cce7d3;
animation: leafPulse 3.6s ease-in-out infinite;
}
@keyframes leafPulse {
0%,100% { filter: drop-shadow(0 0 0 var(--leaf)); }
50% { filter: drop-shadow(0 0 12px var(--leaf)); }
}
.marketplace-green h1,
.marketplace-green h2,
.marketplace-green h3 {
color: var(--leaf);
text-shadow: 0 0 12px rgba(60,179,113,.7);
}
/* textPulse removed from h1/h2/h3 — was causing GPU blur */
@keyframes textPulse {
0%,100% { text-shadow: 0 0 8px rgba(255,255,255,.1); }
50% { text-shadow: 0 0 18px rgba(255,255,255,.4); }
}
/* ===============================
DOPESICK BALANCED AURA MASTER
=============================== */
:root {
--orange: #ff7a00;
--pink: #ff2ea6;
--blue: #00c1ff;
--red: #ff0033;
--black: #000;
--leaf: #3cb371;
--aura-opacity: 0.8;
}
/* Base balanced aura */
body.dopesick-balanced {
background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.03), transparent 70%),
linear-gradient(120deg, var(--orange), var(--pink), var(--blue));
background-size: 250% 250%;
animation: auraFlow 30s ease-in-out infinite;
color: #f2f2f2;
transition: background 1s ease;
}
@keyframes auraFlow {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Page mood overlays */
body.aura-trinity {
background-blend-mode: soft-light;
filter: brightness(0.9) saturate(1.1);
}
body.aura-green {
background: radial-gradient(ellipse at 50% 0%, rgba(60,179,113,0.15), transparent 60%), #0b0f0b;
color: #d6f7e0;
}
body.aura-red {
background: radial-gradient(ellipse at 50% 0%, rgba(255,0,40,0.12), transparent 60%), #0a0202;
color: #ffe6e6;
}
/* LOGO / BRAND TITLE GLOW */
.brand-dopesick {
font-family: 'Cinzel Decorative', serif;
text-transform: uppercase;
letter-spacing: 0.03em;
background: linear-gradient(90deg, var(--orange), var(--pink), var(--blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: titlePulse 8s ease-in-out infinite;
}
@keyframes titlePulse {
0%,100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0.25)); }
50% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.4)); }
}
/* SECTION TITLES GLOW */
h1, h2, h3, .section-title {
text-shadow: 0 0 8px rgba(255,255,255,0.1);
transition: text-shadow 0.4s ease;
}
h1:hover, h2:hover, h3:hover, .section-title:hover {
text-shadow: 0 0 16px rgba(255,255,255,0.45);
}
/* SUBTLE BODY BREATH */
.dopesick-balanced {
transition: background-color 2s ease, color 1s ease;
}
/* ========================================
DOPESICK FINAL AURA ENGINE (CSS)
======================================== */
:root {
--orange: #ff7a00;
--pink: #ff2ea6;
--blue: #00c1ff;
--red: #ff0033;
--leaf: #3cb371;
--aura-depth: #09080c;
}
/* --- global breathing background --- */
body.dopesick-final {
background: linear-gradient(135deg,var(--orange),var(--pink),var(--blue));
background-size: 300% 300%;
animation: globalFlow 22s ease-in-out infinite;
color:#f4f4f4;
}
@keyframes globalFlow{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
/* --- page moods --- */
body.aura-green{
background: radial-gradient(ellipse at 50% 0%,rgba(60,179,113,0.15),transparent 60%),#0b0f0b;
color:#d6f7e0;
}
body.aura-red{
background: radial-gradient(ellipse at 50% 0%,rgba(255,0,40,0.15),transparent 60%),#0a0202;
color:#ffe6e6;
}
/* --- universal pulse variable --- */
@keyframes dopesickPulse{
0%{filter:drop-shadow(0 0 0 rgba(255,255,255,.25));}
50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.45));}
100%{filter:drop-shadow(0 0 0 rgba(255,255,255,.25));}
}
/* --- DOPESICK glow text --- */
.brand-dopesick{
position:relative;
display:inline-block;
font-family:'Cinzel Decorative',serif;
text-transform:uppercase;
letter-spacing:.04em;
background:linear-gradient(90deg,var(--orange),var(--pink),var(--blue),var(--orange));
background-size:400% 100%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation: textHue 8s ease-in-out infinite, dopesickPulse 6s ease-in-out infinite;
}
@keyframes textHue{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
/* --- optional subtle slash reflection --- */
.brand-dopesick::after{
content:"";
position:absolute;
inset:-6%;
background:linear-gradient(90deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 55%);
transform:rotate(25deg);
mix-blend-mode:screen;
animation: slashDrift 6s linear infinite;
pointer-events:none;
}
@keyframes slashDrift{
0%{transform:rotate(20deg) translateX(-10%);}
50%{transform:rotate(200deg) translateX(10%);}
100%{transform:rotate(380deg) translateX(-10%);}
}
/* --- titles and headers --- */
h1,h2,h3,.section-title{
animation:dopesickPulse 8s ease-in-out infinite;
text-shadow:0 0 8px rgba(255,255,255,0.15);
transition:text-shadow .4s ease;
}
h1:hover,h2:hover,h3:hover,.section-title:hover{
text-shadow:0 0 16px rgba(255,255,255,0.5);
}
/* --- buttons subtle aura --- */
/* button rules consolidated below */
/* =====================================================
HERMES BASE — DOPESICK COLLECTIVE
Full trinity aura / rotating slash / color-mood system
===================================================== */
:root {
--orange: #ff7a00;
--pink: #ff2ea6;
--blue: #00c1ff;
--red: #ff0033;
--leaf: #3cb371;
--bg-dark: #07060a;
--hermes-hue: 0;
--hermes-pulse: 0.8;
}
/* ---------- CORE BACKGROUND AURA ---------- */
body.hermes-core {
background:
radial-gradient(circle at var(--aura-x,50%) var(--aura-y,10%),
hsl(var(--hermes-hue),70%,12%,var(--hermes-pulse)),
var(--bg-dark) 80%);
background-size: 300% 300%;
animation: hermesFlow 40s ease-in-out infinite;
color: #f1f1f1;
transition: background 1s ease;
}
@keyframes hermesFlow {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ---------- PAGE MOODS ---------- */
body.aura-green {
background: radial-gradient(ellipse at 50% 0%, rgba(60,179,113,0.15), transparent 60%), #0b0f0b;
color: #d8f7e2;
}
body.aura-red {
background: radial-gradient(ellipse at 50% 0%, rgba(255,0,40,0.15), transparent 60%), #0a0202;
color: #ffeaea;
}
body.aura-trinity {
background: linear-gradient(135deg, var(--orange), var(--pink), var(--blue));
background-size: 400% 400%;
animation: hermesFlow 40s ease-in-out infinite;
}
/* --- DOPESICK TEXT / SLASH --- */
[class*="dopesick"], [class*="Dopesick"], .brand-dopesick, h1, h2, h3 {
position: relative;
display: inline-block;
font-family: 'Cinzel Decorative', serif;
text-transform: uppercase;
letter-spacing: .04em;
/* gradient fill */
background: linear-gradient(90deg,
#ff7a00 0%,
#ff2ea6 33%,
#00c1ff 66%,
#ff7a00 100%);
background-size: 300% 100%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShift 10s linear infinite;
}
@keyframes textShift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* --- SLASH REFLECTION LAYER --- */
[class*="dopesick"]::after,
[class*="Dopesick"]::after,
.brand-dopesick::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 49%,
rgba(255,255,255,.35) 50%,
rgba(255,255,255,0) 51%
);
transform: rotate(25deg);
mix-blend-mode: screen;
animation: slashSpin 7s linear infinite;
}
/* movement path */
@keyframes slashSpin {
0% { transform: rotate(20deg) translateX(-10%); }
50% { transform: rotate(200deg) translateX(10%); }
100% { transform: rotate(380deg) translateX(-10%); }
}
/* =========================================================
HERMES AURA BREATH — SUBTLE BACKGROUND ENERGY
========================================================= */
:root {
--aura1: #ff7a00;
--aura2: #ff2ea6;
--aura3: #00c1ff;
}
/* applies to all pages unless mood overrides it */
body {
background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.02), transparent 70%),
linear-gradient(120deg, var(--aura1), var(--aura2), var(--aura3));
background-size: 400% 400%;
animation: auraBreath 45s ease-in-out infinite;
color: #f4f4f4;
}
/* keyframe: slow breathing motion */
@keyframes auraBreath {
0% {
background-position: 0% 50%;
filter: brightness(0.95) saturate(1);
}
50% {
background-position: 100% 50%;
filter: brightness(1.05) saturate(1.2);
}
100% {
background-position: 0% 50%;
filter: brightness(0.95) saturate(1);
}
}
/* Optional: page-based color moods override */
body.aura-green {
--aura1: #2ca65a;
--aura2: #5fd488;
--aura3: #84ffc3;
}
body.aura-red {
--aura1: #7a0000;
--aura2: #ff0033;
--aura3: #ff7a7a;
}
body.aura-trinity {
--aura1: #ff7a00;
--aura2: #ff2ea6;
--aura3: #00c1ff;
}
/* Make sure text and cards stay readable */
.shopify-section, .card, .content-container {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 12px;
backdrop-filter: blur(4px);
transition: background-color 0.8s ease;
}
.shopify-section:hover, .card:hover, .content-container:hover {
background-color: rgba(0, 0, 0, 0.55);
}
/* =========================================================
HERMES TRINITY FINAL — THE DOPESICK COLLECTIVE
========================================================= */
/* ---------- COLOR ROOTS ---------- */
:root {
--aura1: #ff7a00;
--aura2: #ff2ea6;
--aura3: #00c1ff;
--red1: #7a0000;
--red2: #ff0033;
--red3: #ff7a7a;
--green1: #2ca65a;
--green2: #5fd488;
--green3: #84ffc3;
}
/* ---------- GLOBAL BACKGROUND AURA ---------- */
body {
background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.02), transparent 70%),
linear-gradient(120deg, var(--aura1), var(--aura2), var(--aura3));
background-size: 400% 400%;
animation: auraBreath 45s ease-in-out infinite;
color: #f4f4f4;
}
@keyframes auraBreath {
0% { background-position: 0% 50%; filter: brightness(.95) saturate(1); }
50% { background-position: 100% 50%; filter: brightness(1.05) saturate(1.2); }
100% { background-position: 0% 50%; filter: brightness(.95) saturate(1); }
}
/* ---------- PAGE MOODS ---------- */
body.aura-green {
--aura1: var(--green1);
--aura2: var(--green2);
--aura3: var(--green3);
}
body.aura-red {
--aura1: var(--red1);
--aura2: var(--red2);
--aura3: var(--red3);
}
body.aura-trinity {
--aura1: #ff7a00;
--aura2: #ff2ea6;
--aura3: #00c1ff;
}
/* ---------- CONTENT GLASS EFFECT ---------- */
.shopify-section,
.card,
.content-container {
background-color: rgba(0, 0, 0, 0.35);
border-radius: 12px;
backdrop-filter: blur(4px);
transition: background-color 0.8s ease;
}
.shopify-section:hover,
.card:hover,
.content-container:hover {
background-color: rgba(0, 0, 0, 0.55);
}
/* =========================================================
DOPESICK TEXT / SLASH
========================================================= */
[class*="dopesick"],
[class*="Dopesick"],
.brand-dopesick {
position: relative;
display: inline-block;
}
@keyframes textShift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* --- SLASH REFLECTION --- */
[class*="dopesick"]::after,
[class*="Dopesick"]::after,
.brand-dopesick::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(255,255,255,0) 49%,
rgba(255,255,255,.35) 50%,
rgba(255,255,255,0) 51%);
transform: rotate(25deg);
mix-blend-mode: screen;
animation: slashSpin 7s linear infinite;
}
@keyframes slashSpin {
0% { transform: rotate(20deg) translateX(-10%); }
50% { transform: rotate(200deg) translateX(10%); }
100% { transform: rotate(380deg) translateX(-10%); }
}
/* button rules consolidated below */
/* =========================================================
LIVING HEADER / LOGO / HORIZON LINE
========================================================= */
header, .header, .site-header, .header-wrapper {
position: relative;
background: #050508;
border-bottom: 1px solid rgba(255, 45, 85, 0.18);
box-shadow: 0 2px 20px rgba(0,0,0,0.5);
z-index: 1000;
}
@keyframes headerGlow {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* horizon pulse line under header */
header::after, .header::after, .site-header::after, .header-wrapper::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg,var(--aura1),var(--aura2),var(--aura3));
background-size: 300% 100%;
animation: horizonLine 30s ease-in-out infinite;
box-shadow: 0 0 15px rgba(255,255,255,0.4);
}
@keyframes horizonLine {
0%,100% { background-position: 0% 50%; opacity:.8; }
50% { background-position: 100% 50%; opacity:1; }
}
/* nav links */
header a, .header a, .site-header a, .header-wrapper a {
color: #ffffff;
transition: color .3s ease;
}
header a:hover, .header a:hover, .site-header a:hover, .header-wrapper a:hover {
color: #ff4f7d;
}
/* =========================================================
MOBILE FIX — MANIFESTO BUTTONS + LAYOUT
========================================================= */
@media screen and (max-width: 768px) {
/* general container padding */
.shopify-section,
.content-container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* manifesto / hero button rows */
.button-row,
.manifesto-buttons,
.hero__buttons,
.index-buttons {
display: flex;
flex-direction: column; /* stack vertically */
align-items: center;
justify-content: center;
gap: 0.75rem; /* spacing between buttons */
width: 100%;
max-width: 100%;
margin: 0 auto;
}
/* individual buttons */
.button,
.btn,
button {
width: 90%;
max-width: 320px;
padding: 0.8rem 1rem;
font-size: 1rem;
line-height: 1.2;
text-align: center;
box-sizing: border-box;
}
/* tighten section text so it doesn't overflow */
.section-title,
h1, h2, h3, p {
text-align: center;
word-wrap: break-word;
}
/* optional: soften top margin below text for small screens */
.manifesto-buttons {
margin-top: 1.25rem;
}
}
/* =========================================================
MANIFESTO PAGE — BUTTON LAYOUT FIX
========================================================= */
@media screen and (max-width: 768px) {
/* stack and center manifesto buttons */
.manifesto-links {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.75rem !important;
width: 100% !important;
margin-top: 1rem;
}
.manifesto-links a,
.manifesto-links .dsk-btn {
display: block !important;
width: 90% !important;
max-width: 320px;
box-sizing: border-box;
text-align: center;
margin: 0 auto;
padding: 0.9rem 1rem;
line-height: 1.2;
font-size: 1rem;
}
/* optional: adjust font color contrast */
.manifesto-links a {
color: #fff !important;
}
}
/* =========================================================
HERMES SYNCED AURA — GALLERY GATEWAY BUTTONS
========================================================= */
/* container layout */
.gallery-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin: 2rem auto 1rem;
}
/* base button look */
.glow-btn {
position: relative;
display: inline-block;
padding: 0.9rem 1.8rem;
border-radius: 50px;
font-family: 'Cinzel Decorative', serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border: 2px solid var(--aura2);
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 8px var(--aura2), inset 0 0 6px var(--aura2);
transition: all 0.4s ease;
animation: auraPulse 8s ease-in-out infinite;
}
/* universal hover */
.glow-btn:hover {
transform: scale(1.05);
background: linear-gradient(90deg,var(--aura1),var(--aura2),var(--aura3));
background-size: 200% 100%;
color: #000;
box-shadow:
0 0 20px var(--aura2),
0 0 40px rgba(255,255,255,0.25);
}
/* --- specific color versions --- */
/* Blue — Shop the Light */
.glow-btn--blue {
--btn1: #00c1ff;
--btn2: #66e0ff;
--btn3: #0096cc;
border-color: var(--btn1);
box-shadow: 0 0 10px var(--btn1), inset 0 0 8px var(--btn1);
animation: bluePulse 8s ease-in-out infinite;
}
.glow-btn--blue:hover {
background: linear-gradient(90deg,var(--btn1),var(--btn2),var(--btn3));
color: #000;
box-shadow:
0 0 20px var(--btn1),
0 0 40px rgba(0,193,255,0.5);
}
/* Green — Enter the Alchemist Marketplace */
.glow-btn--green {
--btn1: #3cb371;
--btn2: #5fd488;
--btn3: #84ffc3;
border-color: var(--btn1);
box-shadow: 0 0 10px var(--btn1), inset 0 0 8px var(--btn1);
animation: greenPulse 8s ease-in-out infinite;
}
.glow-btn--green:hover {
background: linear-gradient(90deg,var(--btn1),var(--btn2),var(--btn3));
color: #000;
box-shadow:
0 0 20px var(--btn1),
0 0 40px rgba(60,179,113,0.5);
}
/* Return link */
.return-link {
display: block;
margin-top: 1.5rem;
text-align: center;
font-family: 'Cinzel Decorative', serif;
color: var(--aura2);
text-decoration: none;
transition: color .3s ease, text-shadow .3s ease;
}
.return-link:hover {
color: var(--aura3);
text-shadow: 0 0 8px var(--aura3);
}
/* ---- synced aura breathing ---- */
@keyframes auraPulse {
0%,100% { filter: brightness(1) drop-shadow(0 0 6px var(--aura2)); }
50% { filter: brightness(1.15) drop-shadow(0 0 12px var(--aura3)); }
}
@keyframes bluePulse {
0%,100% { filter: brightness(1) drop-shadow(0 0 6px #00c1ff); }
50% { filter: brightness(1.15) drop-shadow(0 0 12px #66e0ff); }
}
@keyframes greenPulse {
0%,100% { filter: brightness(1) drop-shadow(0 0 6px #3cb371); }
50% { filter: brightness(1.15) drop-shadow(0 0 12px #84ffc3); }
}
/* ---- mobile stack ---- */
@media screen and (max-width: 768px) {
.gallery-buttons {
flex-direction: column;
gap: 0.75rem;
}
.glow-btn {
width: 90%;
max-width: 320px;
text-align: center;
}
}
/* === Dopesick Product Description Fix === */
.product__description,
.product__description .rte,
.rte,
#ProductInfo-template--* .rte {
color: #fff !important;
opacity: 1 !important;
filter: none !important;
text-shadow: none !important;
font-size: 16px;
line-height: 1.6;
max-width: 100% !important;
overflow-wrap: break-word;
word-break: break-word;
padding: 0 12px;
margin: 0 auto;
}
/* Prevent text clipping on small screens */
@media (max-width: 768px) {
.product__description,
.rte {
font-size: 15px;
padding: 0 8px;
}
}
.dsk-shop-buttons a:hover {
background: linear-gradient(90deg,#ff7a00,#ff2ea6,#00c1ff);
color:#000 !important;
box-shadow:0 0 20px rgba(255,255,255,.4);
}
/* === Dopesick Collection Page Text Clarity Fix === */
/* Fix blurry product titles and prices in grid */
.card__heading,
.card__heading a,
.card__information,
.card__information p,
.price__regular,
.price-item,
.price-item--regular {
color: #fff !important;
filter: none !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-stroke: 0.6px rgba(255,255,255,0.9);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-weight: 700;
letter-spacing: 0.03em;
}
/* Make product text appear above glow boxes */
.card__content,
.card__information {
position: relative !important;
z-index: 10 !important;
}
/* Optional — add subtle white glow when hovering product cards */
.card__heading a:hover {
text-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.6);
}
/* Ensure background glows don’t blur text */
.card-wrapper::before,
.card-wrapper::after {
filter: none !important;
opacity: 1 !important;
}
/* ============================================================
✦ DOPESICK GLOBAL AURA SYSTEM v5 ✦
Unified hover glow + text clarity + trinity color harmonics
Orange → Pink → Blue (the Healer’s Flame)
============================================================ */
/* === Universal Text Clarity === */
body, p, h1, h2, h3, h4, h5, h6, a, li, span, strong {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: #fff;
filter: none !important;
opacity: 1 !important;
}
/* === Product Grid Titles + Prices (Sharper Edge) === */
.card__heading,
.card__heading a,
.card__information,
.card__information p,
.price__regular,
.price-item,
.price-item--regular {
color: #fff !important;
filter: none !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-stroke: 0.6px rgba(255,255,255,0.9);
font-weight: 700;
letter-spacing: 0.03em;
transition: all 0.25s ease-in-out;
}
/* Hover Aura on product text */
.card__heading a:hover,
.card__information a:hover,
.price__regular:hover,
.price-item:hover {
background: linear-gradient(120deg,#ff7a00,#ff2ea6,#00c1ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 8px rgba(255,255,255,0.3),
0 0 14px rgba(255,255,255,0.25);
}
/* === Buttons (Add to Cart, Quick Add, Buy Now, etc.) === */
/* button rules consolidated below */
/* === Navigation Links === */
.header__menu a,
.navbar a,
.site-nav a,
.menu-drawer__menu-item {
color: #fff !important;
text-decoration: none;
letter-spacing: .05em;
font-weight: 600;
transition: all 0.25s ease-in-out;
}
/* Nav Hover Aura */
.header__menu a:hover,
.navbar a:hover,
.site-nav a:hover,
.menu-drawer__menu-item:hover {
background: linear-gradient(120deg,#ff7a00,#ff2ea6,#00c1ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 6px rgba(255,255,255,0.3),
0 0 10px rgba(255,255,255,0.2);
}
/* === Footer Links + Text === */
.footer__content a,
.footer__content p,
.footer__content span,
.footer__menu a {
color: #ccc !important;
transition: all 0.3s ease-in-out;
}
/* Footer Hover Glow */
.footer__content a:hover,
.footer__menu a:hover {
color: #fff !important;
background: linear-gradient(120deg,#ff7a00,#ff2ea6,#00c1ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 5px rgba(255,255,255,0.25),
0 0 10px rgba(255,255,255,0.15);
}
/* === General Glow Unification === */
.card__content,
.card__information {
position: relative !important;
z-index: 10 !important;
}
/* Buttons and Text Lift when Hovered */
a:hover, button:hover {
transform: scale(1.02);
}
/* === Global Smooth Transitions === */
* {
transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* === Dopesick Collection Dropdown Styling === */
/* Target only the Dopesick Collection link inside the dropdown */
.menu-drawer__menu-item[href*="the-dopesick-collection"],
.site-nav__link[href*="the-dopesick-collection"],
.header__submenu a[href*="the-dopesick-collection"],
.header__menu-item a[href*="the-dopesick-collection"] {
color: #ffffff !important;
border: 2px solid #ffffff !important;
border-radius: 8px;
padding: 6px 12px !important;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.05em;
text-shadow: none !important;
transition: all 0.25s ease-in-out;
box-shadow: 0 0 8px rgba(255,255,255,0.2);
}
/* Hover effect for the Dopesick Collection link */
.menu-drawer__menu-item[href*="the-dopesick-collection"]:hover,
.site-nav__link[href*="the-dopesick-collection"]:hover,
.header__submenu a[href*="the-dopesick-collection"]:hover,
.header__menu-item a[href*="the-dopesick-collection"]:hover {
background: rgba(255,255,255,0.15);
box-shadow: 0 0 14px rgba(255,255,255,0.3),
0 0 24px rgba(255,255,255,0.15);
transform: scale(1.05);
}
/* Keep the green box around Alchemist Marketplace */
.menu-drawer__menu-item[href*="the-alchemists-marketplace"],
.site-nav__link[href*="the-alchemists-marketplace"],
.header__submenu a[href*="the-alchemists-marketplace"],
.header__menu-item a[href*="the-alchemists-marketplace"] {
color: #00ff66 !important;
border: 2px solid #00ff66 !important;
border-radius: 8px;
padding: 6px 12px !important;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.05em;
box-shadow: 0 0 8px rgba(0,255,102,0.2);
}
/* Hover Glow for Alchemist Marketplace link */
.menu-drawer__menu-item[href*="the-alchemists-marketplace"]:hover,
.site-nav__link[href*="the-alchemists-marketplace"]:hover,
.header__submenu a[href*="the-alchemists-marketplace"]:hover,
.header__menu-item a[href*="the-alchemists-marketplace"]:hover {
background: rgba(0,255,102,0.15);
box-shadow: 0 0 14px rgba(0,255,102,0.3),
0 0 24px rgba(0,255,102,0.15);
transform: scale(1.05);
}
/* === DOPESICK COLLECTION + ALCHEMIST MARKETPLACE NAV FIX === */
/* Universal base styling for dropdown items */
.mega-menu__link,
.menu-drawer__menu-item,
.site-nav__link,
.header__submenu a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.05em;
padding: 6px 14px !important;
border-radius: 8px;
transition: all 0.25s ease-in-out;
}
/* --- Dopesick Collection (White Aura Box) --- */
.mega-menu__link[href*="the-dopesick-collection"],
.menu-drawer__menu-item[href*="the-dopesick-collection"],
.site-nav__link[href*="the-dopesick-collection"],
.header__submenu a[href*="the-dopesick-collection"] {
color: #ffffff !important;
border: 2px solid #ffffff !important;
background: rgba(255,255,255,0.05);
box-shadow: 0 0 8px rgba(255,255,255,0.2);
text-shadow: none !important;
}
/* Hover glow for Dopesick Collection */
.mega-menu__link[href*="the-dopesick-collection"]:hover,
.menu-drawer__menu-item[href*="the-dopesick-collection"]:hover,
.site-nav__link[href*="the-dopesick-collection"]:hover,
.header__submenu a[href*="the-dopesick-collection"]:hover {
background: rgba(255,255,255,0.15);
box-shadow: 0 0 15px rgba(255,255,255,0.4), 0 0 25px rgba(255,255,255,0.2);
transform: scale(1.05);
}
/* --- Alchemist Marketplace (Green Aura Box) --- */
.mega-menu__link[href*="the-alchemists-marketplace"],
.menu-drawer__menu-item[href*="the-alchemists-marketplace"],
.site-nav__link[href*="the-alchemists-marketplace"],
.header__submenu a[href*="the-alchemists-marketplace"] {
color: #00ff66 !important;
border: 2px solid #00ff66 !important;
background: rgba(0,255,102,0.05);
box-shadow: 0 0 8px rgba(0,255,102,0.25);
}
/* Hover glow for Alchemist Marketplace */
.mega-menu__link[href*="the-alchemists-marketplace"]:hover,
.menu-drawer__menu-item[href*="the-alchemists-marketplace"]:hover,
.site-nav__link[href*="the-alchemists-marketplace"]:hover,
.header__submenu a[href*="the-alchemists-marketplace"]:hover {
background: rgba(0,255,102,0.15);
box-shadow: 0 0 15px rgba(0,255,102,0.4), 0 0 25px rgba(0,255,102,0.2);
transform: scale(1.05);
}
/* --- button rules consolidated below --- */
@media (hover: none) {
button:active, .button:active, .btn:active, .product-form__submit:active {
transform: scale(.98);
box-shadow: 0 0 28px rgba(255, 0, 200, .9) !important;
}
}
/* Prevent theme overrides on small screens */
.shopify-payment-button__more-options,
.product-form__submit {
position: relative;
z-index: 2; /* keeps glow from being clipped */
}
body {
background-color:#000;
color:#eee;
font-family:'Cinzel Decorative',serif;
line-height:1.8;
}
/* removed global h1/h2/h3 color and text-shadow override */
a {
color:#ff66cc;
text-decoration:none;
transition:color .3s ease;
}
a:hover {
color:#ffd966;
}
hr {
border:0;
border-top:1px solid rgba(255,102,204,.3);
box-shadow:0 0 20px rgba(255,102,204,.4);
width:70%;
margin:50px auto;
}
/* === ✴️ DOPESICK GLOW MENU – FULL MASTER STYLE === */
/* Base nav link styles */
.site-nav__link,
.mobile-nav__item a,
.drawer__menu-item {
font-family: 'Cinzel Decorative', serif !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
font-size: 15px;
color: #ffccff !important;
text-shadow: 0 0 10px rgba(255,102,204,.6), 0 0 20px rgba(255,102,204,.3);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
/* Hover + focus state */
.site-nav__link:hover,
.mobile-nav__item a:hover,
.drawer__menu-item:hover {
color: #ffffff !important;
text-shadow: 0 0 15px rgba(255,255,255,.9),
0 0 30px rgba(255,102,204,.8);
transform: scale(1.04);
}
/* Animated underline for active link */
.site-nav__link--active::after,
.drawer__menu-item--active::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: linear-gradient(90deg,#ff66cc,#ffcc33,#66ffcc,#ff66cc);
background-size: 400% 400%;
box-shadow: 0 0 12px rgba(255,102,204,.5);
border-radius: 2px;
margin-top: 4px;
animation: underlineGlow 6s linear infinite;
}
/* Glowing mobile menu background */
.drawer {
background: radial-gradient(circle at top,#100010,#000) !important;
box-shadow: inset 0 0 50px rgba(255,102,204,.15);
}
/* Icon glow */
.drawer__menu-item svg {
filter: drop-shadow(0 0 6px rgba(255,102,204,.6));
}
/* --- ✴️ COLOR THEMES BY SECTION --- */
/* Origins – pink/magenta */
a[href*="origins"],
.drawer__menu-item a[href*="origins"] {
color: #ff99ff !important;
}
a[href*="origins"]:hover {
text-shadow: 0 0 20px rgba(255,153,255,.9),
0 0 40px rgba(255,102,204,.7);
}
/* Healer’s Path – green */
a[href*="healers-path"],
.drawer__menu-item a[href*="healers-path"] {
color: #aaffaa !important;
}
a[href*="healers-path"]:hover {
text-shadow: 0 0 20px rgba(170,255,170,.9),
0 0 40px rgba(100,255,150,.6);
}
/* Emerald Tablet – cyan / teal */
a[href*="emerald-tablet"],
.drawer__menu-item a[href*="emerald-tablet"] {
color: #99ffff !important;
}
a[href*="emerald-tablet"]:hover {
text-shadow: 0 0 20px rgba(150,255,255,.9),
0 0 40px rgba(102,255,204,.6);
}
/* The Collective – orange/gold */
a[href*="join-the-collective"],
.drawer__menu-item a[href*="join-the-collective"] {
color: #ffcc66 !important;
}
a[href*="join-the-collective"]:hover {
text-shadow: 0 0 20px rgba(255,204,100,.9),
0 0 40px rgba(255,150,100,.6);
}
/* Alchemist’s Gallery – purple/blue */
a[href*="alchemists-gallery"],
.drawer__menu-item a[href*="alchemists-gallery"] {
color: #bbaaff !important;
}
a[href*="alchemists-gallery"]:hover {
text-shadow: 0 0 20px rgba(187,170,255,.9),
0 0 40px rgba(120,100,255,.6);
}
/* --- ✴️ Dropdown / sublink styling --- */
.drawer__submenu,
.site-nav__dropdown {
background: rgba(0,0,0,.85) !important;
border: 1px solid rgba(255,102,204,.25);
box-shadow: 0 0 25px rgba(255,102,204,.25),
inset 0 0 10px rgba(255,102,204,.15);
border-radius: 14px;
}
/* Submenu links */
.drawer__submenu a,
.site-nav__dropdown a {
font-family: 'Cinzel Decorative', serif !important;
color: #ffccff !important;
font-size: 14px;
padding: 10px 20px;
transition: all .3s ease;
}
.drawer__submenu a:hover,
.site-nav__dropdown a:hover {
color: #fff !important;
text-shadow: 0 0 15px rgba(255,255,255,.9),
0 0 25px rgba(255,102,204,.7);
transform: translateX(4px);
}
/* ✴️ Animation keyframes */
@keyframes underlineGlow {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
/* === ✴️ DOPESICK FULL COLOR MENU — FINAL MASTER STYLE === */
/* General navigation styling */
.site-nav__link,
.mobile-nav__item a,
.drawer__menu-item {
font-family: 'Cinzel Decorative', serif !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
/* Drawer / mobile background */
.drawer {
background: radial-gradient(circle at top, #0a0008 0%, #000 80%) !important;
box-shadow: inset 0 0 50px rgba(255, 102, 204, 0.1);
}
/* Link hover interaction */
.site-nav__link:hover,
.mobile-nav__item a:hover,
.drawer__menu-item:hover {
color: #fff !important;
transform: scale(1.04);
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9),
0 0 25px currentColor;
}
/* Base color fallback (if no match) */
.site-nav__link,
.mobile-nav__item a,
.drawer__menu-item a {
color: #ffccff !important;
text-shadow: 0 0 8px rgba(255, 102, 204, 0.4);
}
/* Each nav link gets its own glow color */
/* Home */
a[href="/"], a[href*="home"] {
color: #ff99ff !important;
text-shadow: 0 0 15px rgba(255,153,255,.8),
0 0 30px rgba(255,102,204,.5);
}
/* Dopesick Genesis */
a[href*="dopesick-genesis"] {
color: #ffcc33 !important;
text-shadow: 0 0 15px rgba(255,204,100,.8),
0 0 30px rgba(255,150,50,.5);
}
/* Origins */
a[href*="origins"] {
color: #ff66cc !important;
text-shadow: 0 0 15px rgba(255,102,204,.8),
0 0 30px rgba(255,51,153,.5);
}
/* Healer’s Path */
a[href*="healers-path"] {
color: #66ff99 !important;
text-shadow: 0 0 15px rgba(100,255,150,.8),
0 0 30px rgba(50,255,120,.5);
}
/* Teachings */
a[href*="teachings"] {
color: #99ccff !important;
text-shadow: 0 0 15px rgba(150,200,255,.8),
0 0 30px rgba(80,150,255,.5);
}
/* Living Circle */
a[href*="living-circle"] {
color: #ffb366 !important;
text-shadow: 0 0 15px rgba(255,180,100,.8),
0 0 30px rgba(255,140,60,.5);
}
/* Emerald Tablet */
a[href*="emerald-tablet"] {
color: #00ffff !important;
text-shadow: 0 0 15px rgba(100,255,255,.8),
0 0 30px rgba(50,200,200,.5);
}
/* Gospel of the Living Flame */
a[href*="gospel-of-the-living-flame"] {
color: #ff6666 !important;
text-shadow: 0 0 15px rgba(255,100,100,.8),
0 0 30px rgba(255,60,60,.5);
}
/* Alchemist’s Gallery */
a[href*="alchemists-gallery"] {
color: #cc99ff !important;
text-shadow: 0 0 15px rgba(204,153,255,.8),
0 0 30px rgba(170,120,255,.5);
}
/* Shop */
a[href*="shop"] {
color: #ffee99 !important;
text-shadow: 0 0 15px rgba(255,255,180,.8),
0 0 30px rgba(255,220,120,.5);
}
/* About Us */
a[href*="about-us"] {
color: #ff99aa !important;
text-shadow: 0 0 15px rgba(255,150,170,.8),
0 0 30px rgba(255,80,100,.5);
}
/* Active page indicator (animated underline) */
.site-nav__link--active::after,
.drawer__menu-item--active::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: linear-gradient(90deg,#ff66cc,#ffcc33,#66ffcc,#ff66cc);
background-size: 400% 400%;
box-shadow: 0 0 12px rgba(255,102,204,.5);
border-radius: 2px;
margin-top: 4px;
animation: underlineGlow 6s linear infinite;
}
/* Animation for underline flow */
@keyframes underlineGlow {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
/* === ✴️ DOPESICK MENU BREATH EFFECT === */
/* Applies to mobile drawer and main nav background */
.drawer,
.header,
.site-nav {
background: radial-gradient(circle at top, #0a0008 0%, #000 85%) !important;
animation: dopesickBreath 12s ease-in-out infinite alternate;
transition: background 1s ease;
}
/* Subtle ambient light shimmer (for desktop nav bars) */
.header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(255,102,204,.15), transparent 60%),
linear-gradient(90deg, rgba(255,204,255,.05) 0%, rgba(255,255,255,.08) 50%, rgba(255,102,204,.05) 100%);
background-size: 200% 200%;
animation: shimmerSweep 20s linear infinite;
z-index: 0;
}
/* Animations */
@keyframes dopesickBreath {
0% {
box-shadow: inset 0 0 40px rgba(255,102,204,.15), 0 0 20px rgba(255,102,204,.05);
background-color: #070006;
}
50% {
box-shadow: inset 0 0 60px rgba(255,102,204,.25), 0 0 35px rgba(255,204,255,.1);
background-color: #0b0010;
}
100% {
box-shadow: inset 0 0 50px rgba(255,102,204,.18), 0 0 25px rgba(255,102,204,.08);
background-color: #09000c;
}
}
@keyframes shimmerSweep {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.ds-media-clean {
padding: 80px 20px;
max-width: 900px;
margin: 120px auto;
text-align: center;
}
.ds-media-title {
font-size: 36px;
font-weight: 700;
color: #ff66cc;
margin-bottom: 10px;
}
.ds-media-desc {
font-size: 18px;
color: #eee;
margin-bottom: 40px;
}
.ds-media-video iframe {
width: 100%;
max-width: 700px;
aspect-ratio: 16 / 9;
border-radius: 16px;
}
.ds-basic-btn {
display: inline-block;
background: #111;
padding: 14px 28px;
border-radius: 8px;
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 600;
border: 1px solid #ff66cc;
margin-top: 40px;
}
.ds-basic-btn:hover {
background: #ff66cc;
color: #000;
}
/* Centering for The Dopesick Collective title inside Media page */
.dsk-media-header {
text-align: center !important;
margin: 0 auto 40px auto;
width: 100%;
}
.dsk-media-header .hero-title {
text-align: center !important;
margin: 0 auto;
display: inline-block;
}
.dsk-media-header .hero-tagline {
text-align: center !important;
margin: 10px auto 0;
display: block;
}
/* DOPE SICK CHORUS BUTTON — NEON RIGHT-SIDE VERSION */
.dsk-chorus-btn-wrap {
width: 100%;
text-align: right; /* move button to the right */
margin: 50px 0 0 0;
}
.dsk-chorus-btn {
display: inline-block;
padding: 16px 42px;
border-radius: 40px;
background: rgba(0, 0, 0, 0.6);
color: #ff66cc;
border: 2px solid rgba(255, 102, 204, 0.7);
font-family: 'Cinzel Decorative', serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-decoration: none;
/* neon effects */
box-shadow:
0 0 20px rgba(255, 102, 204, 0.5),
inset 0 0 15px rgba(255, 102, 204, 0.2);
transition: 0.25s ease;
}
.dsk-chorus-btn:hover {
color: #ffffff;
border-color: #ff99ff;
box-shadow:
0 0 35px rgba(255, 102, 204, 0.9),
inset 0 0 20px rgba(255, 102, 204, 0.4);
transform: translateY(-3px) scale(1.04);
}
.dsk-landing-reopen {
display: inline-block;
margin-top: 24px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ff9fff;
text-decoration: none;
cursor: pointer;
}
.dsk-landing-reopen:hover {
text-shadow: 0 0 10px rgba(255, 153, 255, 0.8);
}
/* ===== TOP PORTAL STRIP ===== */
.dsk-portal-strip {
margin: 18px auto 28px;
padding: 14px 18px 18px;
max-width: 1040px;
border-radius: 24px;
background: radial-gradient(circle at top, rgba(255, 102, 204, 0.22), rgba(5, 0, 20, 0.96));
border: 1px solid rgba(255, 102, 204, 0.7);
box-shadow:
0 0 26px rgba(255, 102, 204, 0.75),
0 0 60px rgba(0, 204, 255, 0.35);
text-align: center;
}
.dsk-portal-strip-title {
margin: 0 0 10px;
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffe6ff;
text-shadow: 0 0 12px rgba(255, 153, 255, 0.9);
}
.dsk-portal-strip-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.dsk-portal-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(255, 204, 255, 0.9);
color: #ffe6ff;
background: rgba(5, 0, 20, 0.9);
box-shadow:
0 0 14px rgba(255, 102, 204, 0.7),
inset 0 0 6px rgba(255, 102, 204, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dsk-portal-chip:hover {
transform: translateY(-1px) scale(1.03);
background: radial-gradient(circle at top, rgba(255, 102, 204, 0.7), rgba(5, 0, 20, 0.95));
box-shadow:
0 0 18px rgba(255, 153, 255, 1),
0 0 40px rgba(255, 51, 153, 0.9);
}
/* Mobile tweak */
@media (max-width: 768px) {
.dsk-portal-strip {
margin: 14px auto 22px;
padding: 12px 10px 14px;
}
.dsk-portal-strip-title {
font-size: 13px;
}
}
/* =========================================================
DOPESICK PORTAL STRIP — GLOBAL NAV ABOVE PAGE CONTENT
========================================================= */
.dsk-portal-strip {
width: 100%;
padding: 16px 0 12px;
background: rgba(10, 0, 20, 0.65);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(255, 120, 255, 0.35);
box-shadow: 0 2px 18px rgba(255, 0, 120, 0.25);
text-align: center;
position: relative;
z-index: 50;
}
.portal-title {
font-family: 'Cinzel Decorative', serif;
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 10px;
background: linear-gradient(90deg, #ff66cc, #66ccff);
-webkit-background-clip: text;
color: transparent;
}
.portal-title span {
color: transparent;
text-shadow: 0 0 12px rgba(255, 0, 120, 0.9);
}
.portal-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.portal-btn {
padding: 8px 16px;
border-radius: 12px;
background: rgba(30, 10, 45, 0.75);
border: 1px solid rgba(255, 150, 255, 0.45);
color: #ffe6ff;
font-size: 13px;
text-decoration: none;
display: inline-block;
transition: all .2s ease;
box-shadow: 0 0 10px rgba(255, 80, 255, 0.35);
}
.portal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 16px rgba(255, 120, 255, 0.75);
}
/* Optional unique aura colors */
.portal-btn.media { border-color: #66d9ff; box-shadow: 0 0 10px rgba(102,217,255,0.35); }
.portal-btn.media:hover { box-shadow: 0 0 18px rgba(102,217,255,0.85); }
.portal-btn.underground { border-color: #ff0066; box-shadow: 0 0 10px rgba(255,0,102,0.35); }
.portal-btn.underground:hover { box-shadow: 0 0 18px rgba(255,0,102,0.85); }
.portal-btn.shop { border-color: #ffaa33; box-shadow: 0 0 10px rgba(255,170,51,0.35); }
.portal-btn.shop:hover { box-shadow: 0 0 18px rgba(255,170,51,0.85); }
.portal-btn.genesis { border-color: #6eff8f; box-shadow: 0 0 10px rgba(110,255,143,0.35); }
.portal-btn.genesis:hover { box-shadow: 0 0 18px rgba(110,255,143,0.85); }
.portal-btn.manifesto { border-color: #ff4444; box-shadow: 0 0 10px rgba(255,68,68,0.35); }
.portal-btn.manifesto:hover { box-shadow: 0 0 18px rgba(255,68,68,0.85); }
/* Mobile */
@media (max-width: 768px) {
.portal-btn {
font-size: 12px;
padding: 6px 12px;
}
}
/* Hide Shopify hamburger menu when Portal Nav exists */
.header__icon--menu,
.mobilenav-trigger {
display: none !important;
}
/* Also hide the default mobile drawer if someone tries to open it */
#menu-drawer,
.drawer {
display: none !important;
}
/* ===========================================
DOPESICK PORTAL — OUTLINE BOX + COLOR TEXT
(No inner glow, no inside fill)
=========================================== */
/* Base style for all portal buttons */
.portal-nav .portal-btn {
display:inline-block;
padding:10px 26px;
border-radius:40px;
border:2px solid currentColor; /* outline matches text color */
background: transparent !important;
box-shadow:0 0 18px currentColor; /* soft OUTER glow only */
text-decoration:none;
font-family:'Cinzel Decorative', serif;
font-weight:600;
letter-spacing:1px;
transition:all .25s ease;
}
/* Hover brightens ONLY the outline and text */
.portal-nav .portal-btn:hover {
filter:brightness(1.35);
transform:translateY(-2px);
}
/* 🔮 Portals (purple) */
.portal-nav .portals {
color:#b066ff !important;
}
/* 🏛️ Main Hall (blue) */
.portal-nav .mainhall {
color:#66b3ff !important;
}
/* 🎥 Media (cyan) */
.portal-nav .media {
color:#4dffff !important;
}
/* 🔥 Underground (orange/red) */
.portal-nav .underground {
color:#ff6633 !important;
}
/* ✨ Shop the Light (gold) */
.portal-nav .shop {
color:#ffdd55 !important;
}
/* 📜 Dopesick Word (pink/lavender) */
.portal-nav .word {
color:#ff66cc !important;
}
/* 🩹 Get Help (healing blue) */
.portal-nav .help {
color:#66e0ff !important;
}
/* === DESKTOP PORTAL BUTTON WIDTH FIX === */
@media (min-width: 900px) {
.portal-nav {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 14px; /* reduce spacing slightly */
}
.portal-nav .portal-btn {
padding: 8px 20px !important; /* slightly smaller buttons */
font-size: 0.9rem !important; /* clean readable size */
white-space: nowrap; /* prevents text wrapping */
}
}
/* =========================================================
PRODUCT PAGE FONT FIX
========================================================= */
.product__title,
.product-item__title,
.cart-item__name,
.card__heading {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
-webkit-text-fill-color: currentColor !important;
}
/* =========================================================
BUTTONS — unified clean design
========================================================= */
/* Base reset — stop all the old animation/gradient stuff */
button, .button, .btn,
.product-form__submit,
.quick-add__submit {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 45, 85, 0.5) !important;
background: rgba(255, 45, 85, 0.08) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
box-shadow: none !important;
animation: none !important;
background-image: none !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
-webkit-font-smoothing: antialiased;
}
button:hover, .button:hover, .btn:hover,
.product-form__submit:hover,
.quick-add__submit:hover {
background: rgba(255, 45, 85, 0.18) !important;
border-color: #ff2d55 !important;
box-shadow: 0 0 18px rgba(255, 45, 85, 0.35) !important;
transform: translateY(-1px) !important;
}
/* Add to Cart — solid fill since it's the primary CTA */
.product-form__submit {
background: #ff2d55 !important;
border-color: #ff2d55 !important;
color: #ffffff !important;
}
.product-form__submit:hover {
background: #e0105a !important;
border-color: #e0105a !important;
box-shadow: 0 0 24px rgba(255, 45, 85, 0.5) !important;
}
/* Shop Pay button — leave it alone, just fix overflow */
.shopify-payment-button {
margin-top: 8px !important;
overflow: hidden !important;
border-radius: 999px !important;
animation: none !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
.shopify-payment-button__button {
border-radius: 999px !important;
animation: none !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
background-image: none !important;
}
.shopify-payment-button__more-options {
color: rgba(255, 255, 255, 0.5) !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* =========================================================
DSK WORDMARK — dOpESiCk mixed-case brand style
========================================================= */
.dsk-wordmark {
display: inline;
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: none !important;
text-shadow: none !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* dim letters (lowercase) */
.dsk-wm-lo {
color: rgba(235, 218, 255, 0.70) !important;
-webkit-text-fill-color: rgba(235, 218, 255, 0.70) !important;
}
/* per-letter pink shades for uppercase letters */
/* O */ .dsk-wm-O { color: #ff2d55 !important; -webkit-text-fill-color: #ff2d55 !important; }
/* E */ .dsk-wm-E { color: #ff6b9d !important; -webkit-text-fill-color: #ff6b9d !important; }
/* S */ .dsk-wm-S { color: #ff4f7d !important; -webkit-text-fill-color: #ff4f7d !important; }
/* C */ .dsk-wm-C { color: #c9184a !important; -webkit-text-fill-color: #c9184a !important; }
/* Reset the h1 wrapper so no gradient/fill bleeds into the wordmark */
.header__heading {
background: none !important;
-webkit-text-fill-color: inherit !important;
animation: none !important;
}
/* Header wordmark size */
.header__heading .dsk-wordmark,
.header__heading-link .dsk-wordmark {
font-size: 1.3em;
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
animation: none !important;
}
/* Hero kicker wordmark size */
.dsk-hero-shop__kicker .dsk-wordmark {
font-size: 1em;
}