:root { --black:         #080706;
--black-warm:    #0e0c0a;
--soot:          #161310;
--iron:          #1e1a17;
--hickory:       #2c2520;
--smoke:         #8c8279;
--ash:           #5e5650;
--bone:          #e8ddd0;
--cream:         #f5efe6;
--white:         #faf7f2; --brand-red:     #bf3a1d;
--ember:         #d4501f;
--copper:        #b87333;
--gold:          #c8a84e;
--mesquite:      #6b4226; --flavor-country:  #d4501f;
--sweet-bbq:       #c8a84e;
--primordial:      #7a8e6d;
--voodoo:          #8b4a9e; --color-primary:   #d4501f;
--color-secondary: #1e1a17;
--color-text:      #e8ddd0;
--color-light:     #f5efe6;
--color-shadow:    rgba(0,0,0,0.5); --font-display: 'Bebas Neue', sans-serif;
--font-accent:  'Cormorant Garamond', serif;
--font-body:    'DM Sans', sans-serif;
--font-heading: 'Bebas Neue', sans-serif; --spacing:       1rem;
--gap:           clamp(1rem, 3vw, 2rem);
--container-max: 1260px;
} *, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
height: 100%;
}
body {
font-family: var(--font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.65;
background: var(--black);
color: var(--bone);
overflow-x: hidden;
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.icon { display: none; } body::after {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 10000;
} .container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
} h1, h2, h3 {
font-family: var(--font-display);
color: var(--cream);
letter-spacing: 0.04em;
line-height: 1.1;
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
}
p {
font-family: var(--font-body);
font-weight: 300;
font-size: 1rem;
line-height: 1.65;
color: var(--smoke);
} .topbar {
background: var(--black);
padding: 0.55rem 0;
border-bottom: 1px solid rgba(200,168,78,0.08);
}
.topbar-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 2rem;
}
.topbar-menu {
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}
.topbar-menu li a,
.topbar a {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ash);
text-decoration: none;
transition: color 0.3s;
}
.topbar-menu li a:hover,
.topbar a:hover {
color: var(--gold);
}
.topbar-left .topbar-phone {
color: var(--copper);
text-decoration: none;
font-weight: 600;
}
@media (max-width: 768px) {
.topbar-inner {
justify-content: center;
gap: 1.5rem;
}
} .site-header {
background: var(--black-warm);
padding: 1rem 0;
position: relative;
z-index: 100;
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.site-header .container,
.site-header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.header-logo {
flex-shrink: 0;
}
.custom-logo {
width: 160px;
height: auto;
}
.header-logo a {
display: inline-block;
}
.site-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.1em;
color: var(--cream);
} .primary-navigation {
display: flex;
align-items: center;
flex: 2;
justify-content: center;
}
.primary-navigation ul,
.primary-menu {
display: flex;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.primary-navigation a,
.primary-menu a {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.2em;
color: var(--bone);
padding: 0.5rem 1.1rem;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.primary-navigation a::before,
.primary-menu a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
right: 50%;
height: 1px;
background: var(--ember);
transition: left 0.3s, right 0.3s;
}
.primary-navigation a:hover,
.primary-menu a:hover {
color: var(--ember);
}
.primary-navigation a:hover::before,
.primary-menu a:hover::before {
left: 1.1rem;
right: 1.1rem;
} .go-texan-logo {
flex-shrink: 0;
}
.go-texan-logo img {
height: 42px;
width: auto;
filter: brightness(0) invert(0.9);
opacity: 0.7;
} .header-transparent {
position: absolute;
top: 2rem;
left: 0;
right: 0;
background: transparent;
border-bottom: none;
z-index: 100;
}
.header-transparent .primary-navigation a,
.header-transparent .primary-menu a {
color: var(--bone);
}
.header-transparent .primary-navigation a:hover,
.header-transparent .primary-menu a:hover {
color: var(--ember);
} .header-transparent.scrolled {
background: rgba(8, 7, 6, 0.95);
backdrop-filter: blur(8px);
padding: 0.5rem 0;
} .mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: var(--bone);
padding: 0.5rem;
}
.mobile-menu-toggle::before {
content: "\2630";
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-toggle[aria-expanded="true"]::before {
content: "\2715";
transform: rotate(90deg);
}
@media (max-width: 768px) {
.custom-logo {
width: 100px;
}
.primary-navigation {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--black);
padding: 2rem;
z-index: 100;
border-bottom: 1px solid var(--hickory);
}
.primary-navigation ul,
.primary-menu {
flex-direction: column;
gap: 1rem;
}
.primary-navigation a,
.primary-menu a {
font-size: 1.1rem;
color: var(--copper);
padding: 0.5rem 0;
}
.primary-navigation a::before,
.primary-menu a::before {
display: none;
}
.primary-navigation.open {
display: flex;
}
.mobile-menu-toggle {
display: block;
}
.go-texan-logo {
display: none;
}
.header-transparent {
position: relative;
top: 0;
background: var(--black-warm);
}
}
@media (min-width: 1920px) {
.primary-navigation ul,
.primary-menu {
gap: 1rem;
}
}
.mobile-menu-toggle:focus {
outline: 2px solid var(--ember);
outline-offset: 2px;
} .btn-main,
.button-1 {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.1rem 2.5rem;
font-family: var(--font-display);
font-size: 0.95rem;
letter-spacing: 0.2em;
background: var(--ember);
color: var(--cream);
border: none;
cursor: pointer;
transition: all 0.35s;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-main::after,
.button-1::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s;
}
.btn-main:hover::after,
.button-1:hover::after {
left: 100%;
}
.btn-main:hover,
.button-1:hover {
background: var(--brand-red);
color: var(--cream);
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(212,80,31,0.25);
}
.btn-ghost,
.button-2 {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
color: var(--smoke);
background: transparent;
border: none;
border-bottom: 1px solid var(--hickory);
padding: 0.5rem 0.25rem 0.35rem;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.btn-ghost:hover,
.button-2:hover {
color: var(--gold);
border-color: var(--gold);
background: transparent;
} .hero {
display: flex;
flex-direction: column;
width: 100%;
position: relative;
background: var(--black);
}
.hero-row-image {
position: relative;
width: 100%;
min-height: 80vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
overflow: hidden;
} .hero-row-image::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(212,80,31,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(107,66,38,0.12) 0%, transparent 50%),
linear-gradient(to top, var(--black) 0%, transparent 30%);
z-index: 1;
}
.hero-main-image {
position: absolute;
bottom: 5%;
right: 5%;
width: 500px;
max-width: 45%;
z-index: 2;
}
.hero-main-image img {
width: 100%;
height: auto;
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
} .hero-row-content {
display: flex;
justify-content: center;
align-items: center;
padding: 3rem 2rem;
background: var(--soot);
width: 100%;
border-top: 1px solid rgba(255,255,255,0.03);
}
.hero-content-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: var(--container-max);
width: 100%;
gap: 3rem;
}
.hero-content-left {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hero-content-left h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
letter-spacing: 0.04em;
color: var(--cream);
}
.hero-content-left h2 {
font-family: var(--font-accent);
font-size: 1.1rem;
font-style: italic;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--copper);
}
.hero-content-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-content-right p {
font-size: 1rem;
line-height: 1.7;
color: var(--smoke);
}
.hero-buttons {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.hero-buttons .btn,
.hero-buttons a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
text-decoration: none;
transition: all 0.35s;
}
.hero-buttons .btn:first-child,
.hero-buttons a:first-child {
background: var(--ember);
color: var(--cream);
border: none;
}
.hero-buttons .btn:first-child:hover,
.hero-buttons a:first-child:hover {
background: var(--brand-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
}
.hero-buttons .btn:last-child,
.hero-buttons a:last-child {
background: transparent;
color: var(--smoke);
border-bottom: 1px solid var(--hickory);
padding: 0.5rem 0;
}
.hero-buttons .btn:last-child:hover,
.hero-buttons a:last-child:hover {
color: var(--gold);
border-color: var(--gold);
} .hero-full {
height: 100vh;
min-height: 700px;
}
.hero-half {
height: 50vh;
min-height: 350px;
} @media (max-width: 1024px) {
.hero-content-wrapper {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.hero-content-left,
.hero-content-right {
flex: none;
width: 100%;
}
.hero-buttons {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.hero-main-image {
position: relative;
bottom: auto;
right: auto;
width: 60%;
max-width: 300px;
margin: 0 auto;
padding: 2rem 0;
}
.hero-row-image {
min-height: 50vh;
justify-content: center;
align-items: center;
}
}
@media (max-width: 480px) {
.hero-content-left h1 {
font-size: 2rem;
}
.hero-content-left h2 {
font-size: 0.95rem;
}
.hero-buttons {
flex-direction: column;
gap: 0.75rem;
}
.hero-buttons a {
width: 100%;
text-align: center;
justify-content: center;
}
} .hero-split {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
} .hero-split-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8rem 4rem 4rem;
position: relative;
z-index: 2;
background: var(--black);
} .hero-split-left::before {
content: '';
position: absolute;
top: 15%;
right: 0;
width: 1px;
height: 70%;
background: linear-gradient(to bottom, transparent, var(--mesquite), transparent);
}
.hero-split-content {
max-width: 520px;
}
.hero-eyebrow {
font-family: var(--font-accent);
font-size: 1rem;
font-style: italic;
letter-spacing: 0.08em;
color: var(--copper);
margin-bottom: 1.5rem;
}
.hero-split-title {
font-family: var(--font-display);
font-size: clamp(3.5rem, 7vw, 6.5rem);
line-height: 0.95;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 2rem;
}
.hero-split-title .accent {
color: var(--ember);
display: block;
}
.hero-split-description {
font-size: 1.05rem;
color: var(--smoke);
max-width: 420px;
margin-bottom: 2.5rem;
line-height: 1.8;
}
.hero-split-ctas {
display: flex;
gap: 1.25rem;
align-items: center;
} .hero-split-right {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 30% 50%, rgba(212,80,31,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(107,66,38,0.12) 0%, transparent 50%),
var(--soot);
overflow: hidden;
} .hero-split-right::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background:
radial-gradient(ellipse 40% 30% at 60% 40%, rgba(200,168,78,0.04) 0%, transparent 100%),
radial-gradient(ellipse 50% 40% at 30% 70%, rgba(212,80,31,0.03) 0%, transparent 100%);
animation: smokeFloat 20s ease-in-out infinite;
}
@keyframes smokeFloat {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(2%, -1%) rotate(1deg); }
66% { transform: translate(-1%, 2%) rotate(-1deg); }
}
.hero-split-product {
width: 80%;
max-width: 480px;
position: relative;
z-index: 2;
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
} .hero-stamp {
position: absolute;
bottom: 2rem;
right: 2rem;
z-index: 3;
text-align: center;
width: 110px;
height: 110px;
border: 2px solid var(--copper);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0.7;
animation: stampSpin 30s linear infinite;
}
@keyframes stampSpin {
to { transform: rotate(360deg); }
}
.hero-stamp span {
font-family: var(--font-display);
font-size: 0.65rem;
letter-spacing: 0.2em;
color: var(--copper);
} @media (max-width: 768px) {
.hero-split {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-split-left {
padding: 10rem 2rem 3rem;
text-align: center;
align-items: center;
}
.hero-split-left::before { display: none; }
.hero-split-content { max-width: 100%; }
.hero-split-description { margin-left: auto; margin-right: auto; }
.hero-split-ctas { justify-content: center; flex-wrap: wrap; }
.hero-split-right {
min-height: 50vh;
padding: 2rem;
}
.hero-stamp { display: none; }
} .ticker {
background: var(--iron);
padding: 0.9rem 0;
overflow: hidden;
border-top: 1px solid rgba(200,168,78,0.06);
border-bottom: 1px solid rgba(200,168,78,0.06);
}
.ticker-track {
display: flex;
gap: 3rem;
animation: tickerScroll 30s linear infinite;
width: max-content;
}
@keyframes tickerScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker-item {
font-family: var(--font-display);
font-size: 0.85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ash);
white-space: nowrap;
display: flex;
align-items: center;
gap: 3rem;
}
.ticker-item::after {
content: '◆';
font-size: 0.4rem;
color: var(--mesquite);
} .flexible-hero-section {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cream);
padding: 0 15px;
}
.flexible-hero-section .hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
} .flexible-hero-section .hero-background::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(8,7,6,0.5) 0%, rgba(8,7,6,0.7) 100%);
z-index: 2;
}
.flexible-hero-section .hero-background video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: -1;
}
.flexible-hero-section .hero-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
z-index: -1;
border: none;
}
.flexible-hero-section .background-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.flexible-hero-section .background-slider .slider-item {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.flexible-hero-section .background-slider .slider-item.active {
opacity: 1;
}
.flexible-hero-section .hero-content {
position: relative;
z-index: 3;
text-align: inherit;
max-width: 80%;
}
.flexible-hero-section .hero-content h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.5rem);
margin-bottom: 0.75rem;
text-transform: none;
letter-spacing: 0.04em;
color: var(--cream);
text-shadow: none;
}
.flexible-hero-section .hero-content p {
font-family: var(--font-accent);
font-size: clamp(1rem, 2vw, 1.35rem);
font-style: italic;
margin-bottom: 1rem;
color: var(--bone);
text-shadow: none;
}
.hero-subheadline-slider {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}
.hero-subheadline-slider p {
opacity: 0;
position: absolute;
width: 100%;
text-align: center;
transition: opacity 1s ease-in-out;
}
.hero-subheadline-slider p.active {
opacity: 1;
}
.flexible-hero-section .hero-buttons {
margin-top: 1.5rem;
display: flex;
gap: 1rem;
justify-content: center;
}
.flexible-hero-section .hero-buttons a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
text-decoration: none;
transition: all 0.35s;
background: var(--ember);
color: var(--cream);
border: none;
}
.flexible-hero-section .hero-buttons a:hover {
background: var(--brand-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
} .hero-content.text-center {
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 3;
text-align: center;
width: 100%;
max-width: 100%;
}
.hero-content.text-left {
text-align: left;
}
.hero-content h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 400;
margin: 0;
line-height: 1.1;
color: var(--cream);
text-shadow: none;
}
.hero-content p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--bone);
text-shadow: none;
}
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; } .hero-section {
position: relative;
width: 100%;
height: 50vh;
min-height: 350px;
overflow: hidden;
display: flex;
align-items: center;
background: var(--soot);
}
.hero-section .hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(8,7,6,0.4) 0%, rgba(8,7,6,0.7) 100%);
z-index: 2;
}
@media (max-width: 768px) {
.flexible-hero-section .hero-content h1 {
font-size: 2.2rem;
}
.flexible-hero-section .hero-content p {
font-size: 1rem;
}
.flexible-hero-section {
padding: 30px;
}
.flexible-hero-section .hero-buttons {
flex-direction: column;
align-items: center;
}
}
@media (min-width: 1500px) {
.hero-section {
padding: 200px 45px 150px;
}
} .two-column-section {
display: flex;
justify-content: center;
align-items: center;
padding: 5rem 2rem;
background: var(--soot);
background-position: center;
background-size: cover;
}
.two-column-container {
display: flex;
flex-wrap: nowrap;
max-width: var(--container-max);
width: 100%;
gap: 3rem;
align-items: center;
}
.two-column-section.left .two-column-container {
flex-direction: row;
}
body .two-column-section.right {
flex-direction: row-reverse;
}
.two-column-content {
flex: 1 1 50%;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
.two-column-content h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
color: var(--cream);
margin-bottom: 1rem;
letter-spacing: 0.04em;
}
.two-column-content p {
font-size: 1.05rem;
color: var(--smoke);
line-height: 1.7;
}
.two-column-image {
flex: 1 1 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.two-column-image img {
max-width: 100%;
height: auto;
border-radius: 0;
box-shadow: none;
filter: drop-shadow(0 15px 40px rgba(0,0,0,0.4));
}
@media (max-width: 768px) {
.two-column-section {
padding: 3rem 1rem;
}
.two-column-container {
flex-wrap: wrap;
flex-direction: column;
}
.two-column-content,
.two-column-image {
flex: 1 1 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.two-column-content h2 {
font-size: 1.5rem;
}
.two-column-content p {
font-size: 0.95rem;
}
} section.two-columns {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
background: var(--soot);
padding: 5% 0;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
section.two-columns.switch-columns {
flex-direction: row-reverse;
padding: 5% 0;
}
.two-columns.special-color-1 {
background-color: var(--iron);
}
.content, .image {
flex: 1;
}
.two-columns .content {
padding: 0 6% 0 11%;
}
.two-columns .image {
padding: 0 5% 0 0;
}
.two-columns.switch-columns .content {
padding: 5% 13% 5% 5%;
width: 100%;
max-width: 50%;
}
.two-columns.switch-columns .image {
padding: 0 0 0 5%;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 616px;
max-width: 50%;
height: 640px;
}
.content h2, .content h1 {
font-family: var(--font-display);
color: var(--cream);
margin: 0 0 10px;
letter-spacing: 0.04em;
}
.content p {
color: var(--smoke);
} main section:nth-of-type(1) h2 {
color: var(--cream) !important;
}
#home main section:nth-of-type(1) p {
color: var(--smoke) !important;
}
main section:nth-of-type(1) .content .columns {
display: none;
}
.columns {
display: flex;
margin-top: 20px;
}
.column {
flex: 1;
padding-right: 10px;
}
section.two-columns .buttons {
margin-top: 1.5rem;
} .image img, .image video, .embedded-video iframe, .two-columns-slider .slide img, .two-columns-switch .image img {
max-width: 100%;
height: 600px;
object-fit: cover;
}
.embedded-video {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.embedded-video iframe {
position: absolute;
top: 0;
left: 0;
width: 75%;
height: 100%;
object-fit: cover;
}
.two-columns-slider {
width: 100%;
max-width: 600px;
display: block;
position: relative;
overflow: hidden;
height: 400px;
}
.two-columns-slider .slide {
width: 100%;
max-width: 600px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
} @media (max-width: 1800px) {
section.two-columns {
padding: 0;
}
.two-columns .content {
padding: 3% 5% 3% 5%;
}
.two-columns .image {
padding: 0;
}
}
@media (max-width: 1024px) {
section.two-columns {
flex-direction: column !important;
}
.two-columns .content {
padding: 3%;
margin-bottom: 0;
max-width: 100%;
width: 100% !important;
}
.two-columns .image {
padding: 0 !important;
max-width: 100%;
}
.image {
order: 2;
}
.columns {
flex-direction: column;
}
.column {
padding-right: 0;
margin-bottom: 20px;
}
.two-columns .image, .two-columns-slider, .embedded-video {
max-width: 100%;
height: 300px;
margin-top: 30px;
}
.embedded-video iframe {
width: 100%;
height: 375px;
}
}
@media (max-width: 990px) {
.two-columns.switch-columns .content {
padding: 3%;
max-width: 100%;
margin-top: 3%;
}
.two-columns.switch-columns .image {
padding: 0;
max-width: 100%;
margin-top: 30px;
}
.two-columns .content {
padding: 3%;
max-width: 100%;
margin-top: 3%;
}
.two-columns .image {
padding: 0;
max-width: 100%;
}
}
@media (max-width: 768px) {
.two-columns.switch-columns .content {
margin-top: 0 !important;
}
.embedded-video iframe {
width: 100%;
height: 300px;
}
} .cta-section {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
background: var(--ember);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--cream);
position: relative;
overflow: hidden;
} .cta-section::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 50px,
rgba(0,0,0,0.03) 50px,
rgba(0,0,0,0.03) 51px
);
pointer-events: none;
}
.cta-section .inner-container {
max-width: var(--container-max);
text-align: center;
padding: 3rem 2rem;
background: transparent;
border: none;
margin: 0 auto;
position: relative;
}
.cta-section .cta-heading {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 400;
color: var(--cream);
margin-bottom: 0.75rem;
letter-spacing: 0.04em;
}
.cta-section .cta-subheading {
font-family: var(--font-accent);
font-size: 1.1rem;
font-style: italic;
color: rgba(245,239,230,0.7);
margin-bottom: 2rem;
}
.cta-section .cta-subheading p {
color: rgba(245,239,230,0.7);
}
.cta-section .cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
}
.cta-section .cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
text-decoration: none;
transition: all 0.35s;
border: none;
}
.cta-section .cta-button.primary {
background: var(--black);
color: var(--cream);
}
.cta-section .cta-button.primary:hover {
background: var(--soot);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.cta-section .cta-button.secondary {
background: transparent;
color: var(--cream);
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 0.5rem 0;
}
.cta-section .cta-button.secondary:hover {
border-color: var(--cream);
}
@media (max-width: 768px) {
.cta-section .cta-heading {
font-size: 1.5rem;
}
.cta-section .cta-buttons {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
} .lineup-section {
padding: 7rem 0;
background: var(--black-warm);
position: relative;
}
.lineup-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: end;
margin-bottom: 4rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lineup-header-left .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 0.75rem;
}
.lineup-header-left h2 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
letter-spacing: 0.04em;
color: var(--cream);
}
.lineup-header-left h2 span {
color: var(--ember);
}
.lineup-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
}
.lineup-header-right p {
font-family: var(--font-accent);
font-size: 1.1rem;
font-style: italic;
color: var(--smoke);
text-align: right;
max-width: 380px;
line-height: 1.7;
} .products-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
}
.p-card {
position: relative;
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
flex-direction: column;
}
.p-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
border-color: var(--card-accent, rgba(255,255,255,0.06));
}  .p-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--card-accent, var(--ember));
opacity: 0;
transition: opacity 0.4s;
z-index: 1;
}
.p-card:hover::before {
opacity: 1;
}
.p-card-visual {
position: relative;
padding: 2.5rem 2rem 1.5rem;
display: flex;
justify-content: center;
min-height: 230px;
align-items: center;
} .p-card-visual::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
bottom: 10%;
background: radial-gradient(circle, var(--card-accent, var(--ember)), transparent 70%);
opacity: 0;
filter: blur(30px);
transition: opacity 0.5s;
}
.p-card:hover .p-card-visual::after {
opacity: 0.12;
}
.p-card-visual img {
height: 190px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45));
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-card:hover .p-card-visual img {
transform: scale(1.06) translateY(-6px);
}
.p-card-info {
padding: 0 1.75rem 0;
flex: 1;
display: flex;
flex-direction: column;
}
.p-card-info .flavor-label {
font-family: var(--font-display);
font-size: 0.65rem;
letter-spacing: 0.25em;
color: var(--card-accent, var(--ember));
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.p-card-info h3 {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.08em;
color: var(--cream);
margin-bottom: 0.3rem;
}
.p-card-info .price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.p-card-info .price {
font-family: var(--font-accent);
font-size: 1.3rem;
font-weight: 600;
color: var(--card-accent, var(--ember));
}
.p-card-info p {
font-size: 0.88rem;
color: var(--smoke);
line-height: 1.65;
margin-bottom: 1.5rem;
}
.p-card-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.2rem;
background: var(--iron);
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.2em;
color: var(--bone);
transition: all 0.3s;
text-decoration: none;
margin-top: auto;
}
.p-card-btn:hover {
background: var(--card-accent, var(--ember));
color: var(--cream);
}
.p-card-btn i {
font-size: 0.7rem;
transition: transform 0.3s;
}
.p-card-btn:hover i {
transform: translateX(4px);
} .p-card.reveal:nth-child(1) { transition-delay: 0s; }
.p-card.reveal:nth-child(2) { transition-delay: 0.12s; }
.p-card.reveal:nth-child(3) { transition-delay: 0.24s; }
.p-card.reveal:nth-child(4) { transition-delay: 0.36s; } @media (max-width: 1024px) {
.products-row {
grid-template-columns: repeat(2, 1fr);
}
.lineup-header {
grid-template-columns: 1fr;
text-align: center;
}
.lineup-header-right {
align-items: center;
}
.lineup-header-right p {
text-align: center;
}
}
@media (max-width: 768px) {
.lineup-section {
padding: 4rem 0;
}
.products-row {
grid-template-columns: 1fr;
max-width: 380px;
margin: 0 auto;
}
} .featured-section {
padding: 5rem 2rem;
background: var(--black-warm);
text-align: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.featured-section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(to top, var(--soot), transparent);
pointer-events: none;
}
.featured-section .container {
max-width: var(--container-max);
margin: 0 auto;
position: relative;
}
.featured-section .featured-heading {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--cream);
text-shadow: none;
margin-bottom: 3rem;
letter-spacing: 0.04em;
}
.featured-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--gap);
justify-content: center;
}
.featured-column {
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
padding: 0;
text-align: left;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}   .featured-column::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--card-accent, var(--ember));
opacity: 0;
transition: opacity 0.4s;
}
.featured-column:hover::before {
opacity: 1;
}
.featured-column:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
border-color: rgba(255,255,255,0.06);
}
.featured-image {
padding: 2rem 1.5rem 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
.featured-image img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 0;
margin-bottom: 0;
filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45));
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.featured-column:hover .featured-image img {
transform: scale(1.05) translateY(-4px);
}
.featured-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--cream);
margin-bottom: 0.3rem;
letter-spacing: 0.08em;
padding: 0 1.5rem;
}
.featured-subtitle {
font-size: 0.9rem;
color: var(--smoke);
margin-bottom: 1rem;
line-height: 1.6;
padding: 0 1.5rem;
}
.featured-column p {
color: var(--smoke);
padding: 0 1.5rem;
}
.featured-button {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.5rem;
background: var(--iron);
color: var(--bone);
text-decoration: none;
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.2em;
transition: all 0.3s;
border-radius: 0;
margin-top: auto;
}
.featured-button:hover {
background: var(--card-accent, var(--ember));
color: var(--cream);
} @media (max-width: 1024px) {
.featured-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.featured-row {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.featured-button {
display: flex;
text-align: center;
justify-content: center;
}
} .two-col-nested-three {
padding: 5rem 0;
color: var(--bone);
position: relative;
background: var(--iron);
}
.two-col-nested-three.bg-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.two-col-nested-three .container {
max-width: 1500px;
margin: 0 auto;
padding: 5%;
}
.two-col-nested-three .row {
display: flex;
gap: 40px;
align-items: center;
margin-bottom: 40px;
}
.two-col-nested-three .col-left {
flex: 1.2;
}
.two-col-nested-three .subheadline {
font-family: var(--font-accent);
font-size: 1.1rem;
font-style: italic;
color: var(--copper);
margin-bottom: 10px;
font-weight: 400;
}
.two-col-nested-three .headline {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 400;
margin-bottom: 15px;
color: var(--cream);
letter-spacing: 0.04em;
}
.two-col-nested-three .main-text {
font-size: 1rem;
line-height: 1.7;
color: var(--smoke);
margin-bottom: 20px;
}
.two-col-nested-three .col-right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.two-col-nested-three .col-right img {
max-width: 100%;
height: auto;
border-radius: 0;
filter: drop-shadow(0 15px 40px rgba(0,0,0,0.4));
}
.two-col-nested-three .nested-columns {
display: flex;
justify-content: space-between;
gap: 30px;
text-align: left;
padding-top: 20px;
}
.two-col-nested-three .nested-columns .col {
flex: 1;
max-width: 30%;
padding: 1.5rem;
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
transition: all 0.3s;
}
.two-col-nested-three .nested-columns .col:hover {
border-color: var(--ember);
transform: translateY(-4px);
}
.two-col-nested-three .nested-columns .col img {
max-width: 60px;
height: auto;
margin-bottom: 15px;
}
.two-col-nested-three .nested-columns .col .column-heading {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 10px;
color: var(--cream);
letter-spacing: 0.08em;
}
.two-col-nested-three .nested-columns .col .column-text {
color: var(--smoke);
line-height: 1.6;
font-size: 0.9rem;
} @media (max-width: 1024px) {
.two-col-nested-three .row {
flex-direction: column;
text-align: center;
}
.two-col-nested-three .col-left,
.two-col-nested-three .col-right {
flex: 100%;
}
.two-col-nested-three .col-right img {
max-width: 80%;
}
.two-col-nested-three .nested-columns {
flex-direction: column;
gap: 20px;
align-items: center;
}
.two-col-nested-three .nested-columns .col {
max-width: 80%;
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.two-col-nested-three {
padding: 3rem 0;
}
.two-col-nested-three .headline {
font-size: 2rem;
}
.two-col-nested-three .nested-columns .col {
max-width: 100%;
}
.two-col-nested-three .col-right img {
max-width: 100%;
}
}
@media (max-width: 480px) {
.two-col-nested-three {
padding: 2rem 0;
}
.two-col-nested-three .headline {
font-size: 1.75rem;
}
} #about-us .two-col-nested-three.bg-image {
background-position: center;
}
@media (min-width: 769px) and (max-width: 1024px) {
#about-us .two-col-nested-three.bg-image {
background-position: 20% 16%;
}
#about-us .row.top-row .col-left {
margin-top: 50px;
padding: 50px;
}
#about-us .row.top-row .col-right {
margin-top: 5%;
}
}
@media (max-width: 768px) {
#about-us .row.top-row .col-left {
margin-top: 100px;
}
#about-us .row.top-row .col-right {
margin-top: 15%;
}
}
@media (max-width: 480px) {
#our-services .hero-content.text-left {
max-width: 90%;
}
} .one-column-section {
width: 100%;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5rem 2rem;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--soot);
}
.one-column-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(8, 7, 6, 0.4);
pointer-events: none;
}
.one-column-section .content {
max-width: 84%;
margin: 0 auto;
position: relative;
z-index: 1;
}
.one-column-section.has-bg-image.map {
padding: 100px;
}
.one-column-section h3,
.one-column-section h2 {
font-family: var(--font-display);
margin: 0;
padding: 0;
letter-spacing: 0.04em;
}
.one-column-section h2 {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 400;
color: var(--cream);
}
.one-column-section h3 {
font-family: var(--font-accent);
font-size: 1.2rem;
font-style: italic;
font-weight: 400;
color: var(--copper);
}
.one-column-section p {
line-height: 1.7;
margin: 0;
padding: 0;
color: var(--bone);
}
.one-column-section .buttons {
margin-top: 1.5rem;
}
.one-column-section .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--ember);
color: var(--cream);
padding: 1rem 2rem;
margin: 5px;
text-decoration: none;
border-radius: 0;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
transition: all 0.35s;
}
.one-column-section .btn:hover {
background: var(--brand-red);
transform: translateY(-2px);
}
.one-column-section.has-bg-image {
background-color: transparent;
}
.one-column-section.has-bg-color {
background-image: none;
} @media (max-width: 1024px) {
.one-column-section {
padding: 4rem 1.5rem;
min-height: auto;
}
}
@media (max-width: 768px) {
.one-column-section {
padding: 3rem 1rem;
min-height: auto;
}
.one-column-section .content {
padding: 10px;
}
.one-column-section h2 {
font-size: 1.75rem;
}
}
@media (max-width: 480px) {
.one-column-section {
padding: 2rem 1rem;
}
.one-column-section h2 {
font-size: 1.5rem;
}
} .two-columns-overview {
background: var(--soot);
}
.two-columns-overview h2 {
color: var(--cream);
}
.two-columns-overview p {
color: var(--smoke);
} .form-container {
background-color: var(--iron);
padding: 2.5rem;
border-radius: 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
max-width: 900px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.04);
}
.rgcf-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.form-row > div {
flex: 1;
min-width: 200px;
}
.rgcf-form label {
font-family: var(--font-display);
font-weight: 400;
font-size: 0.8rem;
letter-spacing: 0.15em;
color: var(--bone);
display: block;
margin-bottom: 0.5rem;
}
.rgcf-form input[type="text"],
.rgcf-form input[type="email"],
.rgcf-form textarea {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--hickory);
border-radius: 0;
font-size: 0.95rem;
font-family: var(--font-body);
background-color: var(--soot);
color: var(--bone);
transition: border-color 0.3s;
}
.rgcf-form input[type="text"]:focus,
.rgcf-form input[type="email"]:focus,
.rgcf-form textarea:focus {
outline: none;
border-color: var(--ember);
}
.rgcf-form textarea {
height: 150px;
resize: vertical;
}
.rgcf-form button[type="submit"] {
padding: 1rem 2.5rem;
background-color: var(--ember);
color: var(--cream);
border: none;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
cursor: pointer;
transition: all 0.35s;
align-self: flex-start;
}
.rgcf-form button[type="submit"]:hover {
background-color: var(--brand-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
}
.g-recaptcha {
margin-top: 10px;
}
@media (max-width: 768px) {
.form-container {
padding: 1.5rem;
}
.form-row {
flex-direction: column;
}
.rgcf-form button[type="submit"] {
width: 100%;
text-align: center;
}
} .recipe-archive {
background: var(--black-warm);
}
.recipe-archive .archive-header {
padding: 3rem 2rem;
background: var(--soot);
text-align: center;
}
.recipe-archive .archive-header h1 {
font-family: var(--font-display);
color: var(--cream);
}
.recipe-archive .archive-description {
color: var(--smoke);
}
.recipe-archive .recipes-grid {
max-width: var(--container-max);
margin: 0 auto;
padding: 3rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--gap);
justify-content: center;
}
.recipe-archive .recipe-item {
width: 100%;
max-width: 400px;
margin: 0 auto;
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
overflow: hidden;
transition: all 0.4s ease;
}
.recipe-archive .recipe-item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.recipe-archive .recipe-thumbnail img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.recipe-archive .recipe-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.recipe-archive .recipe-title {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: 0.06em;
}
.recipe-archive .recipe-title a {
color: var(--cream);
transition: color 0.3s;
}
.recipe-archive .recipe-title a:hover {
color: var(--ember);
}
.recipe-archive .recipe-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
margin: 0.75rem 0;
padding: 0;
}
.recipe-archive .recipe-meta li {
background: var(--iron);
color: var(--smoke);
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
}
.recipe-archive .view-recipe-button {
margin-top: auto;
background: var(--ember);
color: var(--cream);
padding: 0.75rem 1.5rem;
text-align: center;
text-decoration: none;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.15em;
transition: all 0.3s;
}
.recipe-archive .view-recipe-button:hover {
background: var(--brand-red);
} .single-recipe {
margin: 0;
padding: 0;
background: var(--black-warm);
}
.single-recipe .recipe-thumbnail {
position: relative;
height: 60vh;
background-size: cover;
background-position: center;
}
.single-recipe .recipe-thumbnail::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(8,7,6,0.3), rgba(8,7,6,0.7));
}
.single-recipe .recipe-thumbnail img {
display: none;
}
.single-recipe .recipe-thumbnail::after {
content: attr(data-title);
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: var(--cream);
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.04em;
text-shadow: none;
white-space: nowrap;
}
.single-recipe .recipe-content {
padding: 3rem 2rem;
max-width: 900px;
margin: 0 auto;
background: var(--soot);
}
.single-recipe .recipe-title {
font-family: var(--font-display);
color: var(--cream);
}
.single-recipe .recipe-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 1rem 0;
padding: 0;
}
.single-recipe .recipe-meta li {
background: var(--iron);
color: var(--smoke);
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.single-recipe section {
margin-top: 2rem;
}
.single-recipe h2 {
font-family: var(--font-display);
color: var(--cream);
margin-bottom: 1rem;
letter-spacing: 0.06em;
}
.single-recipe .recipe-ingredients ul,
.single-recipe .recipe-instructions ol {
padding-left: 1.5rem;
color: var(--bone);
}
.single-recipe li {
margin-bottom: 0.5rem;
color: var(--smoke);
}
.single-recipe .recipe-nutrition,
.single-recipe .recipe-notes {
background: var(--iron);
padding: 1.5rem;
border-radius: 0;
margin-top: 2rem;
border: 1px solid rgba(255,255,255,0.04);
}
.single-recipe .recipe-nutrition ul {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
.single-recipe .recipe-nutrition li {
flex: 1 1 120px;
background: var(--soot);
padding: 0.75rem;
text-align: center;
}
.recipe-gallery .gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--spacing);
}
.recipe-gallery .gallery-item {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.recipe-gallery .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 768px) {
.single-recipe .recipe-thumbnail {
height: 40vh;
}
.single-recipe .recipe-thumbnail::after {
font-size: 1.8rem;
}
}  .shop-hero {
position: relative;
min-height: 40vh;
display: flex;
align-items: flex-end;
padding: 10rem 0 3.5rem;
background-size: cover;
background-position: center;
}
.shop-hero .container { position: relative; z-index: 2; }
.shop-hero .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 0.75rem;
}
.shop-hero h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 0.95;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1rem;
}
.shop-hero h1 span { color: var(--ember); }
.shop-hero-sub {
font-family: var(--font-accent);
font-size: 1.15rem;
font-style: italic;
color: var(--copper);
max-width: 500px;
}
.shop-hero::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 120px;
height: 2px;
background: linear-gradient(to right, transparent, var(--ember), transparent);
z-index: 3;
} .shop-products {
padding: 5rem 0;
background: var(--black-warm);
}
.shop-products-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.shop-products-header h2 {
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 0.1em;
color: var(--cream);
}
.shop-products-count {
font-family: var(--font-accent);
font-style: italic;
color: var(--smoke);
font-size: 0.95rem;
} .woocommerce ul.products,
.shop-products .products {
list-style: none;
padding: 0;
margin: 0;
} .shop-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
} .shop-card {
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.shop-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
} .shop-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px;
height: 100%;
background: var(--card-accent, var(--ember));
opacity: 0;
transition: opacity 0.4s;
z-index: 2;
}
.shop-card:hover::before { opacity: 1; }  .shop-card-image {
position: relative;
overflow: hidden;
background: var(--iron);
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.shop-card-image a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.shop-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.shop-card:hover .shop-card-image img {
transform: scale(1.05);
} .shop-card-image .onsale {
position: absolute;
top: 12px; right: 12px;
background: var(--ember);
color: var(--cream);
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.15em;
padding: 0.3rem 0.75rem;
z-index: 2;
border-radius: 0;
min-height: unset;
min-width: unset;
line-height: 1.4;
}
.shop-card-info {
padding: 1.5rem;
}
.shop-card-label {
font-family: var(--font-accent);
font-size: 0.8rem;
font-style: italic;
letter-spacing: 0.06em;
margin-bottom: 0.25rem;
opacity: 0.85;
}
.shop-card-info h3 {
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: 0.08em;
color: var(--cream);
margin-bottom: 0.35rem;
}
.shop-card-info h3 a {
color: var(--cream);
transition: color 0.3s;
}
.shop-card-info h3 a:hover { color: var(--ember); } .shop-card-price,
.shop-card-price .price,
.shop-card-price .woocommerce-Price-amount {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--card-accent, var(--ember));
margin-bottom: 0.6rem;
}
.shop-card-price .price del {
color: var(--ash);
opacity: 0.6;
}
.shop-card-price .price ins {
text-decoration: none;
color: var(--card-accent, var(--ember));
}
.shop-card-desc {
font-size: 0.85rem;
color: var(--smoke);
line-height: 1.55;
margin-bottom: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .shop-card-btn-wrap .button,
.shop-card-btn-wrap a.button,
.shop-card-btn-wrap a.add_to_cart_button,
.shop-card-btn-wrap a.product_type_simple {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.2em;
color: var(--cream) !important;
background: var(--ember) !important;
padding: 0.7rem 1.5rem;
transition: all 0.35s;
border: none;
border-radius: 0;
cursor: pointer;
text-decoration: none;
font-weight: 400;
}
.shop-card-btn-wrap .button:hover,
.shop-card-btn-wrap a.button:hover,
.shop-card-btn-wrap a.add_to_cart_button:hover {
background: var(--brand-red) !important;
transform: translateY(-2px);
} .single-product-section {
padding: 8rem 0 0;
background: var(--black-warm);
}
.single-product-section > .container {
max-width: 1200px;
margin: 0 auto;
}
.single-breadcrumb,
.single-product-section .woocommerce-breadcrumb {
font-size: 0.85rem;
color: var(--smoke);
margin-bottom: 2rem;
}
.single-breadcrumb a,
.single-product-section .woocommerce-breadcrumb a {
color: var(--ember);
transition: color 0.3s;
}
.single-breadcrumb a:hover,
.single-product-section .woocommerce-breadcrumb a:hover {
color: var(--gold);
}
.single-product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
margin-bottom: 3rem;
} .single-product-image {
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
padding: 2rem;
position: relative;
}
.single-product-image img {
width: 100%;
height: auto;
border-radius: 0;
} .single-product-image .woocommerce-product-gallery,
.single-product-image .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.single-product-image .flex-viewport {
margin-bottom: 0;
}
.stock-badge {
position: absolute;
top: 1.5rem; right: 1.5rem;
font-family: var(--font-display);
font-size: 0.65rem;
letter-spacing: 0.2em;
color: var(--primordial);
border: 1px solid var(--primordial);
padding: 0.3rem 0.75rem;
z-index: 3;
}
.stock-badge.out-of-stock {
color: var(--ember);
border-color: var(--ember);
} .single-product-details {
display: flex;
flex-direction: column;
justify-content: center;
}
.single-product-details .section-number {
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 0.5rem;
}
.single-product-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 0.95;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1rem;
}
.single-product-price,
.single-product-price .woocommerce-Price-amount {
font-family: var(--font-display);
font-size: 2rem;
color: var(--ember);
margin-bottom: 1.5rem;
}
.single-product-desc,
.single-product-desc p {
color: var(--smoke);
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 1.5rem;
max-width: 480px;
}  .single-product-layout .single-product-cart .single_add_to_cart_button {
background: var(--product-accent, var(--ember));
}
.single-product-layout .single-product-cart .single_add_to_cart_button:hover {
box-shadow: 0 8px 25px color-mix(in srgb, var(--product-accent, var(--ember)) 30%, transparent);
}
.flavor-profile {
background: var(--iron);
border: 1px solid rgba(255,255,255,0.04);
padding: 1.5rem;
margin-bottom: 2rem;
}
.flavor-profile-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0;
}
.flavor-profile-row:not(:last-child) {
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.flavor-profile-label {
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--ash);
min-width: 100px;
}
.flavor-profile-value {
font-size: 0.9rem;
color: var(--cream);
} .single-product-cart {
margin-bottom: 2rem;
}
.single-product-cart form.cart {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0;
}
.single-product-cart .quantity input.qty,
.woocommerce .quantity input.qty {
width: 60px;
height: 50px;
background: var(--iron);
border: 1px solid var(--hickory);
color: var(--cream);
text-align: center;
font-size: 1rem;
font-family: var(--font-body);
border-radius: 0;
max-width: 70px;
}
.woocommerce .single_add_to_cart_button.button,
.single-product-cart .single_add_to_cart_button {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 2.5rem;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
color: var(--cream) !important;
background: var(--ember) !important;
border: none;
border-radius: 0;
cursor: pointer;
transition: all 0.35s;
font-weight: 400;
}
.woocommerce .single_add_to_cart_button.button:hover,
.single-product-cart .single_add_to_cart_button:hover {
background: var(--brand-red) !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
} .single-product-meta,
.single-product-meta .product_meta {
font-size: 0.82rem;
color: var(--ash);
} .single-product-details .stock,
.single-product-cart .stock {
display: none;
}
.single-product-meta .product_meta span {
display: block;
margin-bottom: 0.35rem;
}
.single-product-meta a {
color: var(--ember);
transition: color 0.3s;
}
.single-product-meta a:hover { color: var(--gold); } .single-product-tabs {
margin-top: 3rem;
padding-bottom: 4rem;
}
.single-product-tabs .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs {
list-style: none;
padding: 0;
display: flex;
border-bottom: 1px solid var(--hickory);
margin-bottom: 0;
flex-wrap: wrap;
gap: 0.25rem;
}
.single-product-tabs .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
margin: 0;
background: none;
border: none;
padding: 0;
}
.single-product-tabs .woocommerce-tabs ul.tabs li::before,
.single-product-tabs .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
display: none;
}
.single-product-tabs .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--iron);
color: var(--bone);
text-decoration: none;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.15em;
transition: all 0.3s;
}
.single-product-tabs .woocommerce-tabs ul.tabs li.active a,
.single-product-tabs .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
background: var(--ember);
color: var(--cream);
}
.single-product-tabs .woocommerce-tabs .panel,
.woocommerce-tabs .panel {
background: var(--soot);
border: 1px solid rgba(255,255,255,0.04);
padding: 2.5rem;
color: var(--smoke);
line-height: 1.8;
font-size: 0.95rem;
margin-top: 0;
}
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li,
.woocommerce-Tabs-panel blockquote,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 {
color: var(--bone);
}
#tab-description.woocommerce-Tabs-panel p {
text-align: left;
}
.woocommerce-Tabs-panel strong {
color: var(--cream);
font-weight: bold;
} .woocommerce-Tabs-panel blockquote {
border-left: 2px solid var(--ember);
padding-left: 1.25rem;
margin: 1.5rem 0;
font-family: var(--font-accent);
font-style: italic;
font-size: 1.05rem;
color: var(--cream);
} .woocommerce-Tabs-panel table {
width: 100%;
border-collapse: collapse;
}
.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
text-align: left;
}
.woocommerce-Tabs-panel table th {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--cream);
background: var(--iron);
font-weight: 400;
}
.woocommerce-Tabs-panel table td {
color: var(--smoke);
} .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a {
color: var(--ember);
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
font-size: 0.85rem;
color: var(--smoke);
} .woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: var(--iron);
border-top-color: var(--ember);
color: var(--bone);
}
.woocommerce-message::before {
color: var(--ember);
}
.woocommerce-message a.button {
background: var(--ember);
color: var(--cream);
border-radius: 0;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.15em;
} .woocommerce nav.woocommerce-pagination ul {
border: none;
display: flex;
gap: 0.5rem;
justify-content: center;
margin-top: 3rem;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background: var(--iron);
color: var(--bone);
border: 1px solid rgba(255,255,255,0.04);
padding: 0.6rem 1rem;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.1em;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--ember);
color: var(--cream);
border-color: var(--ember);
} @media (max-width: 1024px) {
.shop-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.shop-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.shop-hero {
min-height: 35vh;
padding: 8rem 0 3rem;
}
.single-product-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.single-product-section {
padding-top: 6rem;
}
.woocommerce-tabs ul.tabs {
flex-direction: column;
align-items: stretch;
}
.woocommerce-tabs ul.tabs li a {
width: 100%;
}
.shop-products-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}  .woocommerce-cart .content,
.woocommerce-checkout .content {
background: var(--black-warm);
padding: 6rem 2rem 4rem;
min-height: 80vh;
} .wc-block-cart,
.wc-block-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
color: var(--bone);
} .wc-block-cart .wp-block-heading,
.wc-block-checkout .wp-block-heading,
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-checkout__heading,
.wc-block-components-order-summary .wc-block-components-title {
font-family: var(--font-display) !important;
letter-spacing: 0.1em !important;
color: var(--cream) !important;
} .wc-block-cart-items,
.wc-block-cart-items__row {
border-color: rgba(255,255,255,0.04) !important;
}
.wc-block-cart-items .wc-block-components-product-name {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.06em;
color: var(--cream) !important;
}
.wc-block-cart-items .wc-block-components-product-name:hover {
color: var(--ember) !important;
} .wc-block-components-product-price,
.wc-block-components-product-price .wc-block-components-formatted-money-amount,
.wc-block-components-formatted-money-amount {
color: var(--ember) !important;
font-family: var(--font-display);
} .wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
color: var(--smoke) !important;
font-size: 0.88rem;
} .wc-block-cart-item__image img,
.wc-block-components-product-image img {
border-radius: 0 !important;
} .wc-block-components-quantity-selector {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
background: var(--iron) !important;
color: var(--cream) !important;
border: none !important;
font-family: var(--font-body);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
color: var(--smoke) !important;
background: transparent !important;
border: none !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
color: var(--ember) !important;
} .wc-block-cart-item__remove-link,
.wc-block-components-product-details + a,
a[href*="remove_item"] {
color: var(--ash) !important;
font-size: 0.85rem;
transition: color 0.3s;
}
.wc-block-cart-item__remove-link:hover {
color: var(--ember) !important;
} .wc-block-cart__totals-title {
font-family: var(--font-display) !important;
font-size: 1.3rem !important;
letter-spacing: 0.12em !important;
color: var(--cream) !important;
}
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item {
border-color: rgba(255,255,255,0.04) !important;
}
.wc-block-components-totals-item__label {
color: var(--bone) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-item .wc-block-components-formatted-money-amount {
color: var(--cream) !important;
font-family: var(--font-display);
} .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
color: var(--ember) !important;
font-family: var(--font-display);
font-size: 1.3rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
color: var(--cream) !important;
font-family: var(--font-display);
font-size: 1rem !important;
} .wc-block-components-totals-shipping__via,
.wc-block-components-shipping-rates-control,
.wc-block-components-totals-shipping p,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label {
color: var(--smoke) !important;
} .wc-block-components-totals-taxes .wc-block-components-totals-item__label {
color: var(--smoke) !important;
} .wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 1rem 2rem !important;
font-family: var(--font-display) !important;
font-size: 0.9rem !important;
letter-spacing: 0.2em !important;
color: var(--cream) !important;
background: var(--ember) !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer;
transition: all 0.35s !important;
text-decoration: none !important;
}
.wc-block-cart__submit-button:hover {
background: #bf3a1d !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
} .wc-block-components-checkout-step {
border-color: rgba(255,255,255,0.04) !important;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
}
.wc-block-components-checkout-step__heading {
font-family: var(--font-display) !important;
letter-spacing: 0.1em !important;
}
.wc-block-components-checkout-step__title {
font-family: var(--font-display) !important;
font-size: 1.2rem !important;
letter-spacing: 0.1em !important;
color: var(--cream) !important;
}
.wc-block-components-checkout-step__description {
color: var(--smoke) !important;
} .wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="password"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="search"],
.wc-block-checkout textarea,
.wc-block-checkout select,
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea textarea {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
-webkit-appearance: none;
}
.wc-block-checkout input:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
border-color: var(--ember) !important;
outline: none !important;
box-shadow: none !important;
} .wc-block-components-text-input label,
.wc-block-components-address-form label {
color: var(--ash) !important;
font-size: 0.85rem !important;
}
.wc-block-components-text-input.is-active label {
color: var(--ember) !important;
} .wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-combobox input[type="text"],
.wc-block-components-form .components-combobox-control input {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
border-radius: 0 !important;
}
.wc-block-components-combobox .wc-block-components-combobox-control label,
.wc-block-components-combobox label {
color: var(--ash) !important;
} .wc-block-components-combobox .components-form-token-field__suggestions-list,
.components-combobox-control__suggestions-list {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
}
.wc-block-components-combobox .components-form-token-field__suggestion,
.components-combobox-control__option {
color: var(--bone) !important;
}
.wc-block-components-combobox .components-form-token-field__suggestion.is-highlighted,
.components-combobox-control__option:hover,
.components-combobox-control__option[aria-selected="true"] {
background: var(--ember) !important;
color: var(--cream) !important;
} .wc-block-checkout input[type="checkbox"],
.wc-block-checkout input[type="radio"],
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-radio-control input[type="radio"] {
accent-color: var(--ember);
}
.wc-block-components-checkbox .wc-block-components-checkbox__label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description {
color: var(--bone) !important;
} .wc-block-components-radio-control__option,
.wc-block-components-radio-control .wc-block-components-radio-control__option {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
color: var(--bone) !important;
}
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option:hover {
border-color: var(--ember) !important;
}
.wc-block-components-radio-control__label .wc-block-formatted-money-amount,
.wc-block-components-radio-control__secondary-label {
color: var(--cream) !important;
} .wc-block-components-order-summary {
border-color: rgba(255,255,255,0.04) !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-name {
color: var(--cream) !important;
font-family: var(--font-display);
letter-spacing: 0.06em;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
color: var(--smoke) !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
color: var(--cream) !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__individual-price {
color: var(--smoke) !important;
}
.wc-block-components-order-summary-item {
border-color: rgba(255,255,255,0.04) !important;
} .wc-block-components-payment-method-label {
color: var(--cream) !important;
}
.wc-block-components-payment-method-icons img {
filter: brightness(0.85);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__label {
color: var(--cream) !important;
font-family: var(--font-display);
letter-spacing: 0.06em;
} .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button {
display: block !important;
width: 100% !important;
padding: 1.1rem 2rem !important;
font-family: var(--font-display) !important;
font-size: 0.95rem !important;
letter-spacing: 0.2em !important;
color: var(--cream) !important;
background: var(--ember) !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer;
transition: all 0.35s !important;
}
.wc-block-components-checkout-place-order-button:hover {
background: #bf3a1d !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
}
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button {
color: var(--ember) !important;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.1em;
} .wc-block-checkout a,
.wc-block-components-address-card__edit {
color: var(--ember) !important;
transition: color 0.3s;
}
.wc-block-checkout a:hover,
.wc-block-components-address-card__edit:hover {
color: var(--gold) !important;
} .wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
background: var(--iron) !important;
border-left: 3px solid var(--ember) !important;
color: var(--bone) !important;
border-radius: 0 !important;
}
.wc-block-components-notice-banner.is-error {
border-left-color: #c62828 !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
color: var(--bone) !important;
} .wc-block-checkout__terms,
.wc-block-checkout__terms p {
color: var(--ash) !important;
font-size: 0.82rem;
}
.wc-block-checkout__terms a {
color: var(--ember) !important;
} .wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
border-color: rgba(255,255,255,0.04) !important;
} .wc-block-cart p,
.wc-block-checkout p {
color: var(--smoke);
} .wc-block-components-validation-error,
.wc-block-components-text-input .wc-block-components-validation-error {
color: #ef5350 !important;
} .wc-block-cart .wc-block-cart__empty-cart__title,
.wc-block-cart .wc-block-cart__empty-cart p {
color: var(--bone) !important;
} .wc-block-cart .cross-sells .wp-block-heading,
.wc-block-cart .is-loading {
color: var(--cream) !important;
} .wc-block-grid__products .wc-block-grid__product {
background: var(--soot);
border: 1px solid rgba(255,255,255,0.03);
padding: 1rem;
}
.wc-block-grid__products .wc-block-grid__product-title {
font-family: var(--font-display);
color: var(--cream);
}
.wc-block-grid__products .wc-block-grid__product-price {
color: var(--ember);
font-family: var(--font-display);
}
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.wc-block-grid__products .wc-block-grid__product .add_to_cart_button {
background: var(--ember) !important;
color: var(--cream) !important;
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.15em;
border-radius: 0 !important;
padding: 0.65rem 1.25rem;
} @media (max-width: 768px) {
.woocommerce-cart .content,
.woocommerce-checkout .content {
padding: 5rem 1rem 3rem;
}
}  .wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="search"],
.wc-block-components-address-form input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"] {
background-color: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
box-shadow: none !important;
outline: none !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-checkout input:focus {
border-color: var(--ember) !important;
box-shadow: 0 0 0 1px var(--ember) !important;
outline: none !important;
} .wc-block-components-text-input.is-active input,
.wc-block-components-text-input.has-error input {
background-color: var(--iron) !important;
color: var(--cream) !important;
}
.wc-block-components-text-input.has-error input {
border-color: #ef5350 !important;
} .wc-block-components-text-input label {
color: var(--ash) !important;
font-size: 0.85rem !important;
}
.wc-block-components-text-input.is-active label {
color: var(--ember) !important;
font-size: 0.72rem !important;
} .wc-blocks-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select {
background-color: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
-webkit-appearance: none !important;
}
.wc-blocks-components-select__select:focus {
border-color: var(--ember) !important;
box-shadow: 0 0 0 1px var(--ember) !important;
outline: none !important;
}
.wc-blocks-components-select__label {
color: var(--ash) !important;
}
.wc-blocks-components-select__expand {
fill: var(--ash) !important;
}
.wc-blocks-components-select__container {
border: none !important;
} .wc-blocks-components-select__select option {
background: var(--iron);
color: var(--cream);
} .wc-block-components-address-card {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
padding: 1rem 1.25rem !important;
}
.wc-block-components-address-card address {
color: var(--bone) !important;
}
.wc-block-components-address-card__address-section--primary {
color: var(--cream) !important;
font-family: var(--font-display);
letter-spacing: 0.04em;
}
.wc-block-components-address-card__address-section--secondary {
color: var(--smoke) !important;
}
.wc-block-components-address-card__edit {
color: var(--ember) !important;
font-family: var(--font-display) !important;
font-size: 0.8rem !important;
letter-spacing: 0.1em !important;
}
.wc-block-components-address-card__edit:hover {
color: var(--gold) !important;
} .wc-block-components-textarea textarea,
.wc-block-checkout textarea {
background-color: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
}
.wc-block-components-textarea textarea:focus {
border-color: var(--ember) !important;
box-shadow: 0 0 0 1px var(--ember) !important;
} .wc-block-components-checkout-order-summary__title {
border-color: rgba(255,255,255,0.04) !important;
}
.wc-block-components-checkout-order-summary__title-text {
font-family: var(--font-display) !important;
font-size: 1.2rem !important;
letter-spacing: 0.1em !important;
color: var(--cream) !important;
}
.wc-block-components-checkout-order-summary__title-price {
color: var(--ember) !important;
font-family: var(--font-display) !important;
}
.wc-block-components-checkout-order-summary__title-icon svg {
fill: var(--smoke) !important;
} .wc-block-components-order-summary-item {
border-color: rgba(255,255,255,0.04) !important;
}
.wc-block-components-order-summary-item__quantity {
background: var(--ember) !important;
color: var(--cream) !important;
border: none !important;
box-shadow: none !important;
} .wc-block-components-radio-control-accordion-content {
background: var(--iron) !important;
border-radius: 0 !important;
padding: 1rem !important;
}
.wc-block-components-radio-control-accordion-option {
background: var(--soot) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border-color: var(--ember) !important;
} .payment-method-label__label {
font-family: var(--font-display) !important;
letter-spacing: 0.1em !important;
color: var(--cream) !important;
} .wc-block-components-payment-methods__save-card-info .wc-block-components-checkbox__label {
color: var(--smoke) !important;
font-size: 0.85rem !important;
} .wc-block-checkout__add-note .wc-block-components-checkbox__label {
color: var(--bone) !important;
} .wc-block-components-checkbox__input {
border-color: var(--hickory) !important;
background: var(--iron) !important;
}
.wc-block-components-checkbox__input:checked {
background: var(--ember) !important;
border-color: var(--ember) !important;
}
.wc-block-components-checkbox__mark {
fill: var(--cream) !important;
} .wc-block-components-address-form__address_2-toggle {
color: var(--ember) !important;
font-size: 0.85rem !important;
}
.wc-block-components-address-form__address_2-toggle:hover {
color: var(--gold) !important;
} .wc-block-components-validation-error p {
color: #ef5350 !important;
font-size: 0.82rem !important;
}
.wc-block-components-validation-error svg {
fill: #ef5350 !important;
} .wc-block-checkout__terms--with-separator {
border-color: rgba(255,255,255,0.04) !important;
} .wc-block-components-checkout-return-to-cart-button {
color: var(--ember) !important;
font-family: var(--font-display) !important;
font-size: 0.75rem !important;
letter-spacing: 0.15em !important;
}
.wc-block-components-checkout-return-to-cart-button svg {
fill: var(--ember) !important;
}
.wc-block-components-checkout-return-to-cart-button:hover {
color: var(--gold) !important;
}
.wc-block-components-checkout-return-to-cart-button:hover svg {
fill: var(--gold) !important;
} .wc-block-checkout__sidebar {
border-color: rgba(255,255,255,0.04) !important;
} .ppcp-messages {
color: var(--smoke) !important;
}  .wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-components-sidebar,
.wc-block-components-main {
background: transparent !important;
} .wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-address-form input,
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="number"],
.wc-block-checkout .wc-block-components-text-input input[type="password"],
.wc-block-checkout input#email,
.wc-block-checkout input#shipping-first_name,
.wc-block-checkout input#shipping-last_name,
.wc-block-checkout input#shipping-address_1,
.wc-block-checkout input#shipping-address_2,
.wc-block-checkout input#shipping-city,
.wc-block-checkout input#shipping-postcode,
.wc-block-checkout input#shipping-phone,
.wc-block-checkout input#billing-first_name,
.wc-block-checkout input#billing-last_name,
.wc-block-checkout input#billing-address_1,
.wc-block-checkout input#billing-address_2,
.wc-block-checkout input#billing-city,
.wc-block-checkout input#billing-postcode,
.wc-block-checkout input#billing-phone,
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input.has-error input,
.wc-block-components-address-form__email input,
.wc-block-components-address-form__first_name input,
.wc-block-components-address-form__last_name input,
.wc-block-components-address-form__address_1 input,
.wc-block-components-address-form__city input,
.wc-block-components-address-form__postcode input,
.wc-block-components-address-form__phone input {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
-webkit-appearance: none !important;
box-shadow: none !important;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-address-form input:focus,
.wc-block-components-text-input.is-active input:focus {
border-color: var(--ember) !important;
outline: none !important;
box-shadow: none !important;
}
.wc-block-components-text-input.has-error input {
border-color: var(--ember) !important;
} .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-text-input label {
color: var(--ash) !important;
}
.wc-block-components-text-input.is-active label {
color: var(--smoke) !important;
}
.wc-block-components-text-input.has-error label {
color: var(--ember) !important;
} .wc-blocks-components-select__container {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
}
.wc-blocks-components-select__select,
select.wc-blocks-components-select__select,
select#shipping-country,
select#shipping-state,
select#billing-country,
select#billing-state {
background: var(--iron) !important;
color: var(--cream) !important;
border: none !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
-webkit-appearance: none !important;
}
.wc-blocks-components-select__select option {
background: var(--iron);
color: var(--cream);
}
.wc-blocks-components-select__label {
color: var(--ash) !important;
}
.wc-blocks-components-select__expand {
fill: var(--smoke) !important;
} .wc-block-components-address-card {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
color: var(--bone) !important;
}
.wc-block-components-address-card address,
.wc-block-components-address-card__address-section {
color: var(--bone) !important;
}
.wc-block-components-address-card__edit {
color: var(--ember) !important;
}
.wc-block-components-address-card__edit:hover {
color: var(--gold) !important;
} .wc-block-components-radio-control__option {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted {
border-color: var(--ember) !important;
}
.wc-block-components-radio-control__label {
color: var(--bone) !important;
}
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__secondary-label .wc-block-formatted-money-amount {
color: var(--ember) !important;
}
.wc-block-components-radio-control__input {
accent-color: var(--ember) !important;
} .wc-block-components-radio-control-accordion-option {
background: var(--soot) !important;
border: 1px solid var(--hickory) !important;
border-radius: 0 !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border-color: var(--ember) !important;
}
.payment-method-label__label {
color: var(--cream) !important;
font-family: var(--font-display);
letter-spacing: 0.08em;
} .wc-block-components-radio-control-accordion-content {
background: var(--iron) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
padding: 1rem !important;
}
.wcpay-payment-element,
.wcpay-payment-element.StripeElement {
background: var(--iron) !important;
border-radius: 0 !important;
}
.wcpay-payment-element .__PrivateStripeElement {
background: transparent !important;
}
.wcpay-payment-element .__PrivateStripeElement iframe {
filter: invert(0.88) hue-rotate(180deg) !important;
}
.wc-block-components-payment-methods__save-card-info .wc-block-components-checkbox__label {
color: var(--smoke) !important;
font-size: 0.85rem;
} .wc-block-components-checkbox__input {
accent-color: var(--ember) !important;
}
.wc-block-components-checkbox__label {
color: var(--bone) !important;
}
.wc-block-components-checkbox__mark {
fill: var(--ember) !important;
}
.wc-block-checkout__use-address-for-billing .wc-block-components-checkbox__label {
color: var(--bone) !important;
}
.wc-block-checkout__add-note .wc-block-components-checkbox__label {
color: var(--smoke) !important;
}
.wc-block-checkout__terms .wc-block-components-checkbox__label {
color: var(--ash) !important;
font-size: 0.82rem;
} .wc-block-components-checkout-order-summary__title {
background: var(--soot) !important;
border: 1px solid rgba(255,255,255,0.04) !important;
border-radius: 0 !important;
}
.wc-block-components-checkout-order-summary__title-text {
font-family: var(--font-display) !important;
letter-spacing: 0.1em !important;
color: var(--cream) !important;
}
.wc-block-components-checkout-order-summary__title-price,
.wc-block-components-checkout-order-summary__title-price .wc-block-formatted-money-amount {
color: var(--ember) !important;
}
.wc-block-components-checkout-order-summary__title-icon svg {
fill: var(--smoke) !important;
}
.wc-block-components-checkout-order-summary__content {
background: var(--soot) !important;
border: 1px solid rgba(255,255,255,0.04) !important;
border-top: none !important;
border-radius: 0 !important;
}
.wc-block-components-order-summary-item .wc-block-components-product-name {
font-family: var(--font-display) !important;
letter-spacing: 0.06em !important;
color: var(--cream) !important;
}
.wc-block-components-order-summary-item__individual-price,
.wc-block-components-order-summary-item__individual-price .wc-block-formatted-money-amount {
color: var(--smoke) !important;
}
.wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
color: var(--cream) !important;
}
.wc-block-components-order-summary-item__quantity {
background: var(--ember) !important;
color: var(--cream) !important;
border-radius: 0 !important;
}
.wc-block-components-order-summary-item img {
border-radius: 0 !important;
}
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
color: var(--smoke) !important;
}
.wc-block-components-order-summary-item {
border-color: rgba(255,255,255,0.04) !important;
} .wc-block-components-totals-wrapper {
border-color: rgba(255,255,255,0.04) !important;
}
.wc-block-components-totals-item__label {
color: var(--bone) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__value .wc-block-formatted-money-amount {
color: var(--cream) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-family: var(--font-display) !important;
font-size: 1rem !important;
letter-spacing: 0.1em !important;
color: var(--cream) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
font-family: var(--font-display) !important;
font-size: 1.3rem !important;
color: var(--ember) !important;
} .wc-block-components-checkout-return-to-cart-button {
color: var(--ember) !important;
font-family: var(--font-display) !important;
font-size: 0.8rem !important;
letter-spacing: 0.1em !important;
text-decoration: none !important;
}
.wc-block-components-checkout-return-to-cart-button svg {
fill: var(--ember) !important;
}
.wc-block-components-checkout-return-to-cart-button:hover {
color: var(--gold) !important;
} .wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
background: var(--ember) !important;
color: var(--cream) !important;
border: none !important;
border-radius: 0 !important;
font-family: var(--font-display) !important;
font-size: 0.9rem !important;
letter-spacing: 0.2em !important;
padding: 1rem 2rem !important;
transition: all 0.35s !important;
}
.wc-block-components-checkout-place-order-button:hover {
background: #bf3a1d !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
}
.wc-block-components-checkout-place-order-button__text {
color: var(--cream) !important;
} .wc-block-components-validation-error p {
color: #ef5350 !important;
}
.wc-block-components-validation-error svg {
fill: #ef5350 !important;
} .wc-block-components-checkout-step {
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
} .wc-block-components-address-form__address_2-toggle {
color: var(--ember) !important;
}
.wc-block-components-address-form__address_2-toggle:hover {
color: var(--gold) !important;
}
.wc-block-components-address-form__address_2-hidden-input {
background: var(--iron) !important;
border: 1px solid var(--hickory) !important;
color: var(--cream) !important;
} .wc-block-components-notice-banner {
background: var(--iron) !important;
border-left: 3px solid var(--ember) !important;
color: var(--bone) !important;
border-radius: 0 !important;
}
.wc-block-components-notice-banner.is-error {
border-left-color: #c62828 !important;
}
.wc-block-checkout p,
.wc-block-components-checkout-step__content p {
color: var(--smoke);
} @media (max-width: 768px) {
.woocommerce-cart .content,
.woocommerce-checkout .content {
padding: 5rem 1rem 3rem;
}
}  .about-hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: flex-end;
padding: 10rem 0 4rem;
background-size: cover;
background-position: center;
}
.about-hero .container {
position: relative;
z-index: 2;
}
.about-hero .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 0.75rem;
}
.about-hero h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 0.95;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1.25rem;
}
.about-hero h1 span {
color: var(--ember);
}
.about-hero-sub {
font-family: var(--font-accent);
font-size: 1.2rem;
font-style: italic;
color: var(--copper);
max-width: 500px;
} .about-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 2px;
background: linear-gradient(to right, transparent, var(--ember), transparent);
z-index: 3;
} .about-mission {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 60vh;
}
.about-mission-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem 4rem;
background: var(--black-warm);
}
.about-mission-content .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 1rem;
}
.about-mission-content h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.05;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1.5rem;
}
.about-mission-content h2 span {
color: var(--ember);
}
.about-mission-content p {
font-size: 1.05rem;
color: var(--smoke);
line-height: 1.85;
margin-bottom: 1.5rem;
max-width: 460px;
}
.about-pullquote {
font-family: var(--font-accent);
font-size: 1.15rem;
font-style: italic;
color: var(--copper);
border-left: 2px solid var(--ember);
padding-left: 1.25rem;
margin: 2rem 0;
max-width: 440px;
}
.about-mission-image {
position: relative;
overflow: hidden;
}
.about-mission-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-mission-image::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(8,7,6,0.2), rgba(8,7,6,0.05));
pointer-events: none;
} .about-quality {
padding: 7rem 0;
background: var(--soot);
position: relative;
}
.about-quality-header {
text-align: center;
margin-bottom: 4rem;
}
.about-quality-header .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 0.75rem;
}
.about-quality-header h2 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.5rem);
letter-spacing: 0.04em;
color: var(--cream);
}
.about-quality-header h2 span {
color: var(--ember);
}
.about-quality-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.about-quality-card {
background: var(--iron);
padding: 2.5rem 2rem;
border: 1px solid rgba(255,255,255,0.03);
position: relative;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-quality-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
} .about-quality-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: var(--ember);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s;
}
.about-quality-card:hover::before {
transform: scaleX(1);
}
.about-quality-card-icon {
width: 56px;
height: 56px;
border: 1px solid var(--hickory);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--ember);
font-size: 1.3rem;
transition: all 0.3s;
}
.about-quality-card:hover .about-quality-card-icon {
background: var(--ember);
border-color: var(--ember);
color: var(--cream);
}
.about-quality-card h3 {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: 0.1em;
color: var(--cream);
margin-bottom: 0.75rem;
}
.about-quality-card p {
font-size: 0.92rem;
color: var(--smoke);
line-height: 1.7;
} .about-quality-card.reveal:nth-child(1) { transition-delay: 0s; }
.about-quality-card.reveal:nth-child(2) { transition-delay: 0.12s; }
.about-quality-card.reveal:nth-child(3) { transition-delay: 0.24s; } .about-blends {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 55vh;
}
.about-blends-image {
position: relative;
overflow: hidden;
background: var(--iron);
display: flex;
align-items: center;
justify-content: center;
padding: 4rem;
}
.about-blends-image img {
max-height: 400px;
width: auto;
filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
}
.about-blends-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem 4rem;
background: var(--black-warm);
}
.about-blends-content .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 1rem;
}
.about-blends-content h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.05;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1.5rem;
}
.about-blends-content h2 span {
color: var(--ember);
}
.about-blends-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.about-blends-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
color: var(--smoke);
font-size: 0.95rem;
line-height: 1.6;
}
.about-blends-list li strong {
color: var(--cream);
font-weight: 500;
white-space: nowrap;
}
.about-blends-list li::before {
content: '\25C6';
color: var(--ember);
font-size: 0.5rem;
margin-top: 0.5rem;
flex-shrink: 0;
}
.about-blends-ctas {
display: flex;
gap: 1.25rem;
align-items: center;
} .about-cta-banner {
background: var(--ember);
padding: 4.5rem 0;
text-align: center;
position: relative;
overflow: hidden;
} .about-cta-banner::before,
.about-cta-banner::after {
content: '';
position: absolute;
width: 1px;
height: 60%;
background: rgba(255,255,255,0.08);
top: 20%;
}
.about-cta-banner::before { left: 15%; }
.about-cta-banner::after { right: 15%; }
.about-cta-banner h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: 0.06em;
color: var(--cream);
margin-bottom: 1rem;
position: relative;
}
.about-cta-banner p {
font-family: var(--font-accent);
font-size: 1.15rem;
font-style: italic;
color: rgba(245,239,230,0.8);
max-width: 550px;
margin: 0 auto 2rem;
position: relative;
}
.about-cta-buttons {
display: flex;
justify-content: center;
gap: 1.25rem;
position: relative;
} .about-cta-banner .btn-main {
background: var(--black);
}
.about-cta-banner .btn-main:hover {
background: var(--soot);
} @media (max-width: 1024px) {
.about-quality-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.about-mission,
.about-blends {
grid-template-columns: 1fr;
}
.about-mission-content,
.about-blends-content {
padding: 3rem 2rem;
}
.about-mission-image {
min-height: 300px;
}
.about-blends-image {
padding: 3rem 2rem;
order: -1;
}
.about-hero {
min-height: 40vh;
padding: 8rem 0 3rem;
}
.about-cta-buttons {
flex-direction: column;
align-items: center;
}
.about-blends-ctas {
flex-wrap: wrap;
}
}  .contact-hero {
position: relative;
min-height: 40vh;
display: flex;
align-items: flex-end;
padding: 10rem 0 3.5rem;
background-size: cover;
background-position: center;
}
.contact-hero .container { position: relative; z-index: 2; }
.contact-hero .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 0.75rem;
}
.contact-hero h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 0.95;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1rem;
}
.contact-hero h1 span { color: var(--ember); }
.contact-hero-sub {
font-family: var(--font-accent);
font-size: 1.15rem;
font-style: italic;
color: var(--copper);
max-width: 450px;
}
.contact-hero::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 120px; height: 2px;
background: linear-gradient(to right, transparent, var(--ember), transparent);
z-index: 3;
} .contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 60vh;
} .contact-form-panel {
background: var(--black-warm);
padding: 5rem 4rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.contact-form-panel .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 1rem;
}
.contact-form-panel h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.05;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 0.75rem;
}
.contact-form-panel h2 span { color: var(--ember); }
.contact-form-panel .form-intro {
color: var(--smoke);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2.5rem;
} .contact-form-wrap {
width: 100%;
}
.contact-form-wrap .form-container {
margin: 0;
padding: 0;
background: none;
}
.contact-form-wrap .rgcf-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
} .contact-form-wrap .rgcf-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
} .contact-form-wrap .rgcf-form label {
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--ash);
margin-bottom: 0.35rem;
display: block;
} .contact-form-wrap .rgcf-form input[type="text"],
.contact-form-wrap .rgcf-form input[type="email"],
.contact-form-wrap .rgcf-form textarea {
width: 100%;
background: var(--iron);
border: 1px solid var(--hickory);
color: var(--cream);
padding: 0.85rem 1rem;
font-family: var(--font-body);
font-size: 0.92rem;
transition: border-color 0.3s;
border-radius: 0;
-webkit-appearance: none;
}
.contact-form-wrap .rgcf-form input[type="text"]::placeholder,
.contact-form-wrap .rgcf-form input[type="email"]::placeholder,
.contact-form-wrap .rgcf-form textarea::placeholder {
color: var(--ash);
}
.contact-form-wrap .rgcf-form input[type="text"]:focus,
.contact-form-wrap .rgcf-form input[type="email"]:focus,
.contact-form-wrap .rgcf-form textarea:focus {
outline: none;
border-color: var(--ember);
}
.contact-form-wrap .rgcf-form textarea {
min-height: 140px;
resize: vertical;
} .contact-form-wrap .rgcf-form button[type="submit"] {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 2.5rem;
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
color: var(--cream);
background: var(--ember);
border: none;
border-radius: 0;
cursor: pointer;
transition: all 0.35s;
align-self: flex-start;
-webkit-appearance: none;
}
.contact-form-wrap .rgcf-form button[type="submit"]:hover {
background: #bf3a1d;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212,80,31,0.25);
} .contact-form-wrap .rgcf-form input[type="hidden"] {
display: none;
} .contact-info-panel {
background: var(--soot);
padding: 5rem 3rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.contact-info-panel .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 2rem;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.contact-info-icon {
width: 50px;
height: 50px;
border: 1px solid var(--hickory);
display: flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-size: 1.1rem;
flex-shrink: 0;
transition: all 0.3s;
}
.contact-info-item:hover .contact-info-icon {
background: var(--ember);
border-color: var(--ember);
color: var(--cream);
}
.contact-info-text h4 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.1em;
color: var(--cream);
margin-bottom: 0.35rem;
}
.contact-info-text p {
font-size: 0.88rem;
color: var(--smoke);
line-height: 1.6;
}
.contact-info-text a {
color: var(--ember);
transition: color 0.3s;
}
.contact-info-text a:hover { color: var(--gold); } .contact-social {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.contact-social a {
width: 42px;
height: 42px;
border: 1px solid var(--hickory);
display: flex;
align-items: center;
justify-content: center;
color: var(--smoke);
font-size: 1rem;
transition: all 0.3s;
}
.contact-social a:hover {
background: var(--ember);
border-color: var(--ember);
color: var(--cream);
} .contact-cta {
background: var(--ember);
padding: 4.5rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-cta::before,
.contact-cta::after {
content: '';
position: absolute;
width: 1px;
height: 60%;
background: rgba(255,255,255,0.08);
top: 20%;
}
.contact-cta::before { left: 15%; }
.contact-cta::after { right: 15%; }
.contact-cta h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: 0.06em;
color: var(--cream);
margin-bottom: 1rem;
position: relative;
}
.contact-cta p {
font-family: var(--font-accent);
font-size: 1.15rem;
font-style: italic;
color: rgba(245,239,230,0.8);
max-width: 550px;
margin: 0 auto 2rem;
position: relative;
}
.contact-cta-buttons {
display: flex;
justify-content: center;
gap: 1.25rem;
position: relative;
} .contact-cta .btn-main {
background: var(--black);
}
.contact-cta .btn-main:hover {
background: var(--soot);
} @media (max-width: 768px) {
.contact-content {
grid-template-columns: 1fr;
}
.contact-form-panel,
.contact-info-panel {
padding: 3rem 2rem;
}
.contact-form-wrap .rgcf-form .form-row {
grid-template-columns: 1fr;
}
.contact-hero {
min-height: 35vh;
padding: 8rem 0 3rem;
}
.contact-cta-buttons {
flex-direction: column;
align-items: center;
}
} .story {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 70vh;
}
.story-left {
background:
linear-gradient(135deg, rgba(8,7,6,0.5), rgba(8,7,6,0.85)),
url(https://alwaysbeseasoning.com/wp-content/uploads/2025/04/three-spoons-with-spices.jpg) center/cover;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem;
}
.story-left-inner {
max-width: 400px;
}
.story-left .section-number {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--ash);
margin-bottom: 1rem;
}
.story-left h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.05;
letter-spacing: 0.04em;
color: var(--cream);
margin-bottom: 1.5rem;
}
.story-left p {
color: var(--smoke);
line-height: 1.8;
margin-bottom: 2rem;
}
.story-right {
background: var(--iron);
display: flex;
align-items: center;
padding: 4rem;
}
.story-values {
display: flex;
flex-direction: column;
gap: 2.5rem;
max-width: 420px;
}
.story-value {
display: grid;
grid-template-columns: 50px 1fr;
gap: 1.25rem;
align-items: start;
}
.story-value-icon {
width: 50px;
height: 50px;
border: 1px solid var(--hickory);
display: flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-size: 1.1rem;
transition: all 0.3s;
}
.story-value:hover .story-value-icon {
background: var(--ember);
border-color: var(--ember);
color: var(--cream);
}
.story-value h4 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.1em;
color: var(--cream);
margin-bottom: 0.35rem;
}
.story-value p {
font-size: 0.88rem;
color: var(--smoke);
line-height: 1.6;
}
@media (max-width: 768px) {
.story {
grid-template-columns: 1fr;
}
.story-left {
min-height: 50vh;
padding: 3rem 2rem;
text-align: center;
}
.story-left-inner {
max-width: 100%;
}
.story-right {
padding: 3rem 2rem;
}
.story-values {
max-width: 100%;
}
} .quote-strip {
background: var(--ember);
padding: 3.5rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.quote-strip::before,
.quote-strip::after {
content: '\201C';
position: absolute;
font-family: var(--font-accent);
font-size: 18rem;
color: rgba(0,0,0,0.08);
line-height: 1;
}
.quote-strip::before { top: -3rem; left: 5%; }
.quote-strip::after { bottom: -8rem; right: 5%; transform: rotate(180deg); }
.quote-strip blockquote {
font-family: var(--font-accent);
font-size: clamp(1.2rem, 2.2vw, 1.65rem);
font-style: italic;
color: var(--cream);
max-width: 750px;
margin: 0 auto 0.75rem;
position: relative;
line-height: 1.7;
}
.quote-strip cite {
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.25em;
color: rgba(245,239,230,0.6);
font-style: normal;
position: relative;
}
@media (max-width: 768px) {
.quote-strip {
padding: 2.5rem 1.5rem;
}
.quote-strip::before,
.quote-strip::after {
font-size: 10rem;
}
} .footer-main {
background-color: var(--black);
color: var(--bone);
padding: 0;
}
footer p {
color: var(--smoke);
} .footer-cta {
padding: 4rem 0;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.footer-cta .container {
max-width: var(--container-max);
}
.footer-cta h2,
.footer-headline {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
color: var(--cream);
margin-bottom: 0.5rem;
letter-spacing: 0.04em;
}
.footer-cta p,
.footer-subheadline {
color: var(--smoke);
margin-bottom: 2rem;
font-size: 1rem;
}
.footer-buttons {
display: flex;
gap: 1rem;
justify-content: center;
} .footer-grid-section {
padding: 3.5rem 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 3rem;
}
.footer-brand img,
.footer-brand .custom-logo-link img,
.footer-logo-img {
height: 50px;
width: auto;
margin-bottom: 1.25rem;
}
.footer-brand p {
font-size: 0.88rem;
color: var(--ash);
line-height: 1.7;
max-width: 280px;
}
.footer-col h4 {
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.2em;
color: var(--bone);
margin-bottom: 1.25rem;
}
.footer-col ul,
.footer-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li,
.footer-menu-list li {
margin-bottom: 0.6rem;
}
.footer-col a,
.footer-menu-list li a {
font-size: 0.88rem;
color: var(--ash);
transition: color 0.3s;
text-decoration: none;
}
.footer-col a:hover,
.footer-menu-list li a:hover {
color: var(--gold);
} .footer-newsletter p {
font-size: 0.88rem;
color: var(--ash);
margin-bottom: 1rem;
line-height: 1.6;
}
.newsletter-form {
display: flex;
border: 1px solid var(--hickory);
}
.newsletter-form input {
flex: 1;
background: transparent;
border: none;
padding: 0.85rem 1rem;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--bone);
outline: none;
}
.newsletter-form input::placeholder {
color: var(--ash);
}
.newsletter-form button {
background: var(--ember);
border: none;
padding: 0.85rem 1.25rem;
color: var(--cream);
font-size: 0.85rem;
cursor: pointer;
transition: background 0.3s;
}
.newsletter-form button:hover {
background: var(--brand-red);
} .footer-bottom {
border-bottom: 1px solid rgba(255,255,255,0.03);
padding: 0;
}
.footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
max-width: var(--container-max);
margin: 0 auto;
}
.footer-copyright {
text-align: left;
}
.footer-copyright p {
font-size: 0.78rem;
color: var(--ash);
margin: 0;
}
.footer-social {
text-align: right;
}
.footer-social ul {
display: flex;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
}
.footer-social ul li a {
color: var(--ash);
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s;
}
.footer-social ul li a:hover {
color: var(--ember);
border-color: var(--ember);
transform: translateY(-2px);
} .footer-credit {
text-align: center;
padding: 1rem 0;
font-size: 0.72rem;
color: var(--hickory);
}
.footer-credit a {
color: var(--ash);
}
.footer-credit a:hover {
color: var(--gold);
} .footer-logo-centered {
text-align: center;
margin: 30px 0;
}
.footer-logo-centered img {
max-width: 200px;
} @media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-brand p {
max-width: 100%;
margin: 0 auto;
}
.newsletter-form {
max-width: 340px;
margin: 0 auto;
}
.footer-bottom-inner {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-copyright {
text-align: center;
}
.footer-social {
text-align: center;
}
.footer-social ul {
justify-content: center;
}
.footer-buttons {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.footer-cta {
padding: 3rem 0;
}
} main.content {
background: var(--black-warm);
color: var(--bone);
min-height: 50vh;
}
main.content p {
color: var(--smoke);
}
p.sq-ft {
width: 200px !important;
} .reveal,
.reveal-left,
.reveal-right {
opacity: 1;
transform: none;
transition: opacity 0.7s ease, transform 0.7s ease;
} .js-reveal .reveal {
opacity: 0;
transform: translateY(25px);
}
.js-reveal .reveal-left {
opacity: 0;
transform: translateX(-30px);
}
.js-reveal .reveal-right {
opacity: 0;
transform: translateX(30px);
}
.js-reveal .reveal.visible,
.js-reveal .reveal-left.visible,
.js-reveal .reveal-right.visible {
opacity: 1;
transform: none;
} .sr-only,
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}