Skip to content
Cart
Your cart is currently empty.
Not sure where to start?
Try these collections:
Recently viewed
/*============================
VARIABLES & RESET
============================*/
:root {
--color-black: #000000;
--color-white: #FFFFFF;
--color-aqua: #54e8b5;
--color-neon-orange: #FF5A00;
--color-electric-purple: #9B5DE5;
--color-charcoal: #121212;
--color-light-gray: #F5F5F5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: var(--color-black);
color: var(--color-white);
}
/*============================
CONTAINER
============================*/
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/*============================
HERO SECTION
============================*/
.hero {
background-color: var(--color-black);
text-align: center;
padding: 5rem 0;
}
.hero h1 {
font-family: 'Oswald', sans-serif;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: -1px;
}
.hero p {
margin-top: 1rem;
font-family: 'Montserrat', sans-serif;
font-size: 1.25rem;
}
/*============================
BUTTONS
============================*/
.btn-primary {
display: inline-block;
background-color: var(--color-aqua);
color: var(--color-white);
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: opacity 0.3s ease;
text-decoration: none;
}
.btn-primary:hover {
opacity: 0.8;
}
.btn-secondary {
display: inline-block;
background: transparent;
color: var(--color-neon-orange);
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
padding: 0.75rem 1.5rem;
border: 2px solid var(--color-neon-orange);
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
text-decoration: none;
}
.btn-secondary:hover {
background-color: var(--color-neon-orange);
color: var(--color-white);
}
/*============================
FEATURE CARDS
============================*/
@media (min-width: 768px) {
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
.feature-card {
background: var(--color-charcoal);
border: 2px solid var(--color-aqua);
border-radius: 8px;
padding: 1.5rem;
text-align: center;
}
.feature-card:nth-child(2) {
border-color: var(--color-electric-purple);
}
.feature-card:nth-child(3) {
border-color: var(--color-neon-orange);
}
/*============================
INGREDIENTS GRID
============================*/
@media (min-width: 768px) {
.ingredients-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
.ingredients-grid h4 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.ingredients-grid p {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
}
/*============================
FLAVOR CARDS
============================*/
@media (min-width: 768px) {
.flavor-grid {
display: flex;
justify-content: center;
gap: 2rem;
}
}
.flavor-card {
background: var(--color-white);
color: var(--color-charcoal);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 1.5rem;
text-align: center;
}
.flavor-card h3 {
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
}
.flavor-card p {
font-family: 'Open Sans', sans-serif;
margin-top: 0.5rem;
}
/*============================
BUNDLE SECTION
============================*/
.bundle-section {
background: var(--color-charcoal);
color: var(--color-white);
text-align: center;
padding: 4rem 0;
}
.bundle-section h2 {
font-family: 'Oswald', sans-serif;
font-size: 2rem;
text-transform: uppercase;
}
.bundle-section p {
font-family: 'Open Sans', sans-serif;
margin-top: 1rem;
}
/*============================
FAQ ACCORDION
============================*/
.faq-item summary {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.faq-item p {
margin-top: 0.5rem;
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
}
.faq-item {
border-bottom: 1px solid var(--color-light-gray);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
/*============================
RETURNS SECTION
============================*/
.returns-section {
background: var(--color-light-gray);
color: var(--color-charcoal);
text-align: center;
padding: 4rem 0;
}
.returns-section h2 {
font-family: 'Oswald', sans-serif;
font-size: 2rem;
text-transform: uppercase;
}
.returns-section p {
font-family: 'Open Sans', sans-serif;
margin-top: 1rem;
}
.returns-section a {
color: var(--color-aqua);
text-decoration: none;
}
/*============================
UTILITIES
============================*/
.text-charcoal { color: var(--color-charcoal); }
.text-white { color: var(--color-white); }
.bg-white { background: var(--color-white); }
.bg-light-gray{ background: var(--color-light-gray); }
.bg-charcoal { background: var(--color-charcoal); }
- Choosing a selection results in a full page refresh.
- Opens in a new window.
