/*
* Sweets of Oman & NAQKO Confectionery
* Premium Brand Style & Design System
*/
/* Fonts load via + in each page
. An @import here would queue the font request behind this stylesheet
instead of alongside it. */
/* ==========================================================================
Design Tokens & CSS Custom Properties
========================================================================== */
:root {
--leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23c5a880%22%20stroke-width%3D%221.6%22%3E%0A%3Cpath%20d%3D%22M8%20150C50%20108%20118%2052%20196%2014%20152%2078%2092%20128%2022%20172%22%2F%3E%0A%3Cpath%20d%3D%22M8%20150C58%20122%20128%2074%20196%2014%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C34%20186%2082%20148%20138%20122%2096%20164%2054%20194%2014%20218%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C42%20194%2088%20160%20138%20122%22%2F%3E%0A%3C%2Fsvg%3E");
--wave: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2022%22%20fill%3D%22none%22%20stroke%3D%22%23c5a880%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%0A%3Cpath%20d%3D%22M4%2011%20Q18%202%2032%2011%20T60%2011%20T88%2011%20T116%2011%20T144%2011%20T172%2011%20T200%2011%20T236%2011%22%2F%3E%0A%3C%2Fsvg%3E");
/* Color Palette */
/* Surface scale. Elevation reads lighter, not darker: primary is the page,
secondary is a raised section or card, tertiary is the topmost panel. */
--bg-primary: #191818; /* Page background */
--bg-secondary: #201f1f; /* Raised sections and cards */
--bg-tertiary: #201f1f; /* Same as secondary: one panel colour site-wide */
--bg-primary-rgb: 25, 24, 24;
--bg-secondary-rgb: 32, 31, 31;
/* Sampled straight from NAQKO_LOGO.png — the exact wordmark red, so buttons
and badges match the logo instead of sitting slightly duller beside it. */
--brand-red: #e91c2d; /* Flagship NAQKO red */
--brand-red-rgb: 233, 28, 45;
--brand-red-hover: #c81423;
--accent-gold: #c5a880; /* Elegant warm gold */
--accent-gold-rgb: 197, 168, 128;
--accent-gold-hover: #dfc29c;
/* One warm accent across the site: the headline badge, the headline accent
word and every button share this. Brand red stays on the logo and the
small product badges. */
--hero-accent: var(--brand-red); /* Headline badge + accent word */
/* Button fill — the burnt orange of the reference. Set to var(--brand-red)
to put buttons back on the logo red. */
--btn-fill: var(--brand-red);
--btn-fill-hover: var(--brand-red-hover);
/* Typography Colors */
--text-primary: #fdfaf7; /* Soft warm cream */
--text-secondary: #e6dfd5; /* Smooth vanilla cream */
--text-muted: #9e9386; /* Dusty cocoa grey */
--text-placeholder: #988e81; /* Dimmed but legible: 4.7:1 on the lightest panel */
/* Fonts */
--font-display: 'Fredoka', system-ui, sans-serif; /* All headings */
--font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
--font-ui: 'Montserrat', system-ui, sans-serif;
/* Layout Metrics */
--header-height: 90px;
--max-width: 1400px;
/* System Controls */
--transition-smooth: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
--transition-fast: all 0.25s ease;
}
/* ==========================================================================
Base Styles & Reset
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
overflow-x: hidden;
line-height: 1.7;
}
img {
max-width: 100%;
display: block;
object-fit: cover;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-fast);
}
ul {
list-style: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
background: none;
border: none;
color: inherit;
outline: none;
}
/* Premium Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--bg-tertiary);
border-radius: 4px;
border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-gold);
}
/* ==========================================================================
Typography Rules
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.005em;
}
/* Legacy class name kept so the markup does not need touching everywhere. */
.serif-title {
font-family: var(--font-display);
}
.sans-title {
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
}
.gold-text {
color: var(--accent-gold);
}
.red-text {
color: var(--brand-red);
}
p {
color: var(--text-secondary);
font-weight: 400;
}
/* ==========================================================================
Layout Containers
========================================================================== */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 4rem;
}
@media (max-width: 1024px) {
.container {
padding: 0 2rem;
}
}
@media (max-width: 576px) {
.container {
padding: 0 1.25rem;
}
}
.section-padding {
padding: 8rem 0;
}
@media (max-width: 768px) {
.section-padding {
padding: 5rem 0;
}
}
/* Section Header Structure */
.section-header {
margin-bottom: 4.5rem;
text-align: center;
position: relative;
}
.section-header .tagline {
font-family: var(--font-ui);
font-size: 0.85rem;
text-transform: none;
letter-spacing: 0.06em;
font-weight: 500;
color: var(--accent-gold);
margin-bottom: 1rem;
display: block;
}
.section-header .title {
font-size: 3rem;
max-width: 700px;
margin: 0 auto 1.5rem;
}
.section-header .desc {
max-width: 550px;
margin: 0 auto;
color: var(--text-muted);
}
@media (max-width: 768px) {
.section-header .title {
font-size: 2.25rem;
}
}
/* ==========================================================================
Interactive UI Components
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.9rem;
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.01em;
border-radius: 9px;
cursor: pointer;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-primary {
background-color: var(--btn-fill);
color: #fff;
border: 1px solid var(--btn-fill);
}
.btn-primary:hover {
background-color: var(--btn-fill-hover);
border-color: var(--btn-fill-hover);
color: #fff;
}
.btn-secondary {
border: 1px solid var(--accent-gold);
color: var(--text-primary);
}
.btn-secondary:hover {
background-color: var(--accent-gold);
color: var(--bg-primary);
}
.btn-outline {
background-color: var(--brand-red);
border: 1px solid var(--brand-red);
color: #fff;
}
.btn-outline:hover {
background-color: var(--brand-red-hover);
border-color: var(--brand-red-hover);
color: #fff;
}
.btn-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--accent-gold);
position: relative;
padding-bottom: 0.25rem;
}
.btn-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 1px;
background-color: var(--accent-gold);
transition: var(--transition-smooth);
}
.btn-link:hover::after {
width: 100%;
}
.btn-link svg {
width: 16px;
height: 16px;
transition: var(--transition-smooth);
}
.btn-link:hover svg {
transform: translateX(6px);
}
/* ==========================================================================
Navigation Bar (Sticky & Premium)
========================================================================== */
.header-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
display: flex;
align-items: center;
z-index: 1000;
transition: var(--transition-smooth);
border-bottom: 1px solid transparent;
}
/* Scroll Transition Class */
.header-wrapper.scrolled {
background: rgba(var(--bg-secondary-rgb), 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
height: 80px;
border-color: rgba(197, 168, 128, 0.15);
}
.header-container {
display: flex;
align-items: center;
/* Menu and CTA sit together on the right; the logo pushes them there. */
justify-content: flex-end;
gap: 2.25rem;
width: 100%;
}
.header-container .logo-link {
margin-right: auto;
}
.logo-link {
display: flex;
align-items: center;
height: 50px;
}
.logo-img {
height: 100%;
width: auto;
object-fit: contain;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2.25rem;
}
.nav-link {
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: var(--text-secondary);
position: relative;
padding: 0.5rem 0;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background-color: var(--accent-gold);
transition: var(--transition-fast);
transform: translateX(-50%);
}
.nav-link:hover, .nav-link.active {
color: var(--text-primary);
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.nav-cta {
display: flex;
align-items: center;
}
/* Below 1500px the longer menu labels and the CTA cannot share the row. The CTA
goes first: "Signature Collection" already leads to the same page. */
/* Measured: logo 118 + nav 787 + button 203 = 1108. That fits from ~1230px up,
and below 1200px the drawer takes over anyway — so the button is visible
whenever the desktop menu is. */
@media (max-width: 1200px) {
.nav-cta {
display: none;
}
}
/* Compact variant of the button when it sits in the header row, in brand red
so it reads as the primary action rather than blending with the page buttons. */
.nav-cta .btn {
padding: 0.62rem 1.4rem;
font-size: 0.88rem;
background-color: var(--brand-red);
border-color: var(--brand-red);
color: #fff;
}
.nav-cta .btn:hover {
background-color: var(--brand-red-hover);
border-color: var(--brand-red-hover);
color: #fff;
}
/* Mobile Menu Toggle */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
cursor: pointer;
z-index: 1001;
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--text-primary);
transition: var(--transition-fast);
}
/* Hamburger Transformations */
.menu-toggle.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
@media (max-width: 1200px) {
.menu-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 320px;
height: 100vh;
background: var(--bg-secondary);
border-left: 1px solid rgba(197, 168, 128, 0.15);
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 4rem 3rem;
gap: 2rem;
transition: var(--transition-smooth);
z-index: 999;
}
.nav-menu.active {
right: 0;
}
.nav-cta {
display: none;
}
}
/* ==========================================================================
Section 1: Scroll-Animated Hero Banner
========================================================================== */
.hero-scroll-track {
position: relative;
width: 100%;
height: 300vh; /* Control scrolling duration */
background-color: var(--bg-primary);
}
.hero-sticky-viewport {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#hero-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Subtle Vignette overlay to isolate canvas */
.hero-vignette {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Two layers: the vignette that isolates the headline, plus a fade along the
bottom edge so the canvas dissolves into the page instead of stopping at a
hard horizontal cut where the next section begins. */
background:
linear-gradient(to bottom, transparent 62%, rgba(var(--bg-primary-rgb), 0.7) 86%, var(--bg-primary) 100%),
radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.85) 90%);
z-index: 2;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 850px;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}
/* Hero headline — rounded display face, sentence case, with one word set in a
tilted badge and the next in the accent colour. */
.hero-content h1 {
font-weight: 600;
font-size: clamp(2.2rem, 5.4vw, 4.4rem);
letter-spacing: -0.005em;
line-height: 1.18;
margin-bottom: 1.5rem;
color: var(--text-primary);
position: relative;
text-wrap: balance;
}
.hl-badge {
display: inline-block;
background: var(--hero-accent);
color: #fff;
padding: 0.02em 0.3em 0.12em;
border-radius: 0.2em;
transform: rotate(-4deg);
margin: 0 0.04em;
}
.hl-accent {
color: var(--hero-accent);
}
/* Hand-drawn underline sweeping beneath the last line */
.hl-flourish {
display: block;
width: clamp(150px, 32%, 260px);
height: auto;
margin: 0.35rem auto 0;
color: var(--hero-accent);
}
.hero-content p {
font-weight: 500;
font-size: 1.25rem;
max-width: 600px;
margin: 0 auto 3rem;
color: var(--text-secondary);
}
.hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 3rem;
}
.hero-content p {
font-size: 1.05rem;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 280px;
}
}
/* Scroll Indicator Mouse */
.scroll-indicator {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0.8;
pointer-events: none;
font-family: var(--font-ui);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-primary);
}
.scroll-indicator .mouse-icon {
width: 20px;
height: 32px;
border: 2px solid var(--text-primary);
border-radius: 12px;
position: relative;
}
.scroll-indicator .wheel {
width: 2px;
height: 6px;
background-color: var(--text-primary);
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
border-radius: 1px;
animation: mouse-scroll 1.6s infinite ease;
}
@keyframes mouse-scroll {
0% { transform: translate(-50%, 0); opacity: 1; }
100% { transform: translate(-50%, 8px); opacity: 0; }
}
/* Loader Screen */
.canvas-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-primary);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.loader-logo {
height: 60px;
margin-bottom: 2rem;
animation: pulse-logo 2s infinite ease-in-out;
}
.loader-track {
width: 240px;
height: 2px;
background: rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
border-radius: 1px;
}
.loader-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: var(--accent-gold);
transition: width 0.15s ease-out;
}
@keyframes pulse-logo {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.05); opacity: 1; }
}
/* ==========================================================================
Section 2: About Us (Editorial Layout)
========================================================================== */
.about-section {
/* Content sections share the page background — no alternating bands. The
cards and panels inside them carry the tonal contrast instead. */
background-color: transparent;
overflow: hidden;
}
.about-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 6rem;
align-items: center;
}
.about-editorial-composition {
position: relative;
display: flex;
justify-content: flex-end;
}
/* Masked Image Framing styling */
/*
.about-image-wrapper {
position: relative;
width: 85%;
aspect-ratio: 4/5;
border-radius: 2px;
overflow: hidden;
}
*/
.about-image-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: linear-gradient(to top, var(--bg-secondary) 5%, transparent 50%);*/
z-index: 1;
}
.about-image-wrapper img {
/*width: 100%;
height: 100%;*/
object-fit: cover;
transition: var(--transition-smooth);
}
.about-editorial-composition:hover .about-image-wrapper img {
transform: scale(1.05);
}
/* Floating offset elements */
.about-accent-badge {
position: absolute;
bottom: -30px;
left: 0;
background-color: var(--bg-tertiary);
border: 1px solid var(--accent-gold);
padding: 2rem 2.5rem;
z-index: 2;
max-width: 260px;
}
.about-accent-badge h4 {
font-size: 1.8rem;
color: var(--accent-gold);
margin-bottom: 0.5rem;
line-height: 1;
}
.about-accent-badge p {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
}
.about-info .statement-text {
font-weight: 400;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.25;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
color: var(--text-primary);
text-wrap: balance;
}
.about-info .body-text {
font-size: 1.05rem;
line-height: 1.8;
max-width: 56ch;
margin-bottom: 3rem;
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.stat-card {
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.06);
border-left: 3px solid var(--brand-red);
border-radius: 9px;
padding: 1.6rem 1.5rem;
transition: var(--transition-smooth);
}
.stat-card:hover {
border-color: rgba(255, 255, 255, 0.12);
border-left-color: var(--btn-fill);
transform: translateY(-3px);
}
.stat-card h4 {
font-weight: 500;
font-size: 1.15rem;
text-transform: none;
letter-spacing: 0;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.stat-card p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-secondary);
}
@media (max-width: 576px) {
.about-stats {
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
.about-grid {
grid-template-columns: 1fr;
gap: 5rem;
}
.about-editorial-composition {
order: 2;
justify-content: center;
width: 90%;
margin: 0 auto;
}
.about-image-wrapper {
width: 100%;
}
.about-info .statement-text {
font-size: 1.8rem;
}
}
/* ==========================================================================
Section 3: Newly Added Products
========================================================================== */
.products-section {
background-color: transparent;
position: relative;
}
/* Slider Controls wrapper */
.slider-container-outer {
position: relative;
width: 100%;
}
.slider-wrapper {
width: 100%;
overflow: hidden;
cursor: grab;
}
.slider-wrapper:active {
cursor: grabbing;
}
.slider-track {
display: flex;
gap: 2rem;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: transform;
}
/* Product Card Styling */
.product-card {
flex: 0 0 calc((100% - 6rem) / 4); /* Display 4 columns on desktop */
background-color: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.5rem;
border-radius: 12px;
display: flex;
flex-direction: column;
transition: var(--transition-smooth);
}
.product-card:hover {
transform: translateY(-8px);
border-color: rgba(197, 168, 128, 0.2);
}
.product-image-container {
position: relative;
width: 100%;
aspect-ratio: 1;
background-color: transparent;
margin-bottom: 1.5rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
.product-image-container img {
width: 90%;
height: 90%;
object-fit: contain;
transition: var(--transition-smooth);
}
.product-card:hover .product-image-container img {
transform: scale(1.06);
}
/* Subtle badge overlays */
.product-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--brand-red);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.01em;
padding: 0.3rem 0.7rem;
border-radius: 100px;
z-index: 2;
}
.product-info-box {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-category {
font-family: var(--font-ui);
font-size: 0.75rem;
text-transform: none;
letter-spacing: 0.02em;
color: var(--accent-gold);
margin-bottom: 0.5rem;
}
.product-name {
font-size: 1.35rem;
color: var(--text-primary);
margin-bottom: 1rem;
line-height: 1.3;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 1.25rem;
}
.product-spec {
font-size: 0.85rem;
color: var(--text-muted);
}
.product-action {
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition-fast);
}
.product-action svg {
width: 12px;
height: 12px;
stroke: var(--accent-gold);
transition: var(--transition-fast);
}
.product-card:hover .product-action {
color: var(--accent-gold);
}
.product-card:hover .product-action svg {
transform: translateX(4px);
}
/* Slider Controls (Prev/Next Arrows) */
.slider-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background-color: var(--bg-tertiary);
border: 1px solid rgba(197, 168, 128, 0.2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
z-index: 5;
transition: var(--transition-smooth);
}
.slider-control:hover {
background-color: var(--accent-gold);
border-color: var(--accent-gold);
}
.slider-control svg {
width: 20px;
height: 20px;
stroke: var(--text-primary);
transition: var(--transition-smooth);
}
.slider-control:hover svg {
stroke: var(--bg-primary);
}
.slider-control-prev {
left: -80px;
}
.slider-control-next {
right: -80px;
}
/* Slider navigation hidden on mobile, arrows offset adjustments */
@media (max-width: 1560px) {
.slider-control-prev { left: -30px; }
.slider-control-next { right: -30px; }
}
@media (max-width: 1200px) {
.product-card {
flex: 0 0 calc((100% - 4rem) / 3); /* Display 3 columns */
}
.slider-control {
display: none;
}
}
@media (max-width: 768px) {
.product-card {
flex: 0 0 calc((100% - 2rem) / 2); /* Display 2 columns */
}
}
@media (max-width: 480px) {
.product-card {
flex: 0 0 100%; /* Display 1 column */
}
}
.products-footer {
margin-top: 5rem;
text-align: center;
}
/* ==========================================================================
Section 4: Single Designed Promotional Banner
========================================================================== */
.promo-section {
position: relative;
/* background-color: var(--bg-secondary);*/
overflow: hidden;
height: 550px;
display: flex;
align-items: center;
}
.promo-parallax-bg {
position: absolute;
top: -10%;
left: 0;
width: 100%;
height: 120%;
background-image: linear-gradient(to right, rgba(var(--bg-primary-rgb),0.92) 35%, rgba(var(--bg-primary-rgb),0.25) 100%), url('assets/promo-banner.jpg');
background-size: cover;
background-position: center right;
z-index: 1;
transition: transform 0.1s ease-out;
}
/* Feather the top and bottom of the image band into the page, so the banner
reads as part of the page rather than a pasted-in strip. */
.promo-section::before,
.promo-section::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 110px;
z-index: 2;
pointer-events: none;
}
.promo-section::before {
top: 0;
background: linear-gradient(to bottom, var(--bg-primary), transparent);
}
.promo-section::after {
bottom: 0;
background: linear-gradient(to top, var(--bg-primary), transparent);
}
.promo-content {
position: relative;
z-index: 3;
max-width: 650px;
}
.promo-content h2 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
line-height: 1.15;
}
.promo-content p {
font-size: 1.15rem;
margin-bottom: 3rem;
color: var(--text-secondary);
}
@media (max-width: 768px) {
.promo-section {
height: auto;
padding: 6rem 0;
}
.promo-parallax-bg {
background-image: linear-gradient(to top, rgba(var(--bg-primary-rgb),0.95) 45%, rgba(var(--bg-primary-rgb),0.4) 100%), url('assets/blog-01.jpg');
}
.promo-content h2 {
font-size: 2.5rem;
}
}
/* ==========================================================================
Section 5: Our Brands
========================================================================== */
.brands-section {
background-color: transparent;
overflow: hidden;
}
/* Infinite Marquee Track */
/* Static grid: all brands visible at once, no scrolling loop. */
.marquee-container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 4rem;
}
@media (max-width: 1024px) {
.marquee-container { padding: 0 2rem; }
}
@media (max-width: 576px) {
.marquee-container { padding: 0 1.25rem; }
}
.marquee-track {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
width: 100%;
}
@media (max-width: 900px) {
.marquee-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.marquee-track { grid-template-columns: 1fr; }
}
.marquee-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: auto;
background-color: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.06);
padding: 2.25rem 1.5rem;
border-radius: 9px;
transition: var(--transition-smooth);
}
.marquee-item:hover {
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
}
.marquee-logo-wrapper {
height: 60px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.marquee-logo-wrapper img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
filter: none;
transition: var(--transition-smooth);
}
.marquee-item:hover .marquee-logo-wrapper img {
filter: grayscale(0) opacity(1);
}
.marquee-item h4 {
font-weight: 500;
font-size: 1.15rem;
text-transform: none;
letter-spacing: 0;
color: var(--text-primary);
margin-bottom: 0.4rem;
}
.marquee-item p {
font-size: 0.9rem;
text-align: center;
color: var(--text-secondary);
line-height: 1.55;
}
/* ==========================================================================
Section 6: Contact Us (Forms & Info)
========================================================================== */
.contact-section {
/* Runs straight into the footer with no tonal step. The form panel and the
sidebar cards carry the structure here, so the section itself needs no
background of its own. */
background-color: transparent;
position: relative;
}
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 3.5rem;
align-items: start;
}
.contact-form-wrapper {
background: var(--bg-tertiary);
border: 1px solid rgba(197, 168, 128, 0.08);
padding: 2.75rem;
border-radius: 14px;
}
.contact-form-wrapper h3 {
font-size: 1.9rem;
margin-bottom: 0.9rem;
}
.contact-form-wrapper .intro-p {
color: var(--text-muted);
margin-bottom: 2rem;
font-size: 0.98rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.15rem 1.25rem;
}
.form-group {
display: flex;
flex-direction: column;
position: relative;
}
.form-group-full {
grid-column: span 2;
}
.form-group label {
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.01em;
color: var(--accent-gold);
margin-bottom: 0.45rem;
}
/* Premium form controls styling */
.form-control {
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.06);
padding: 0.85rem 1rem;
color: var(--text-primary);
font-size: 0.95rem;
border-radius: 8px;
transition: var(--transition-fast);
}
.form-control::placeholder {
color: var(--text-placeholder);
}
.form-control:focus {
border-color: var(--accent-gold);
}
/* Custom error outlines */
.form-group.has-error .form-control {
border-color: var(--brand-red);
}
.error-message {
font-size: 0.75rem;
color: var(--brand-red);
margin-top: 0.5rem;
display: none;
}
.form-group.has-error .error-message {
display: block;
}
textarea.form-control {
resize: vertical;
min-height: 104px;
}
.form-submit-row {
margin-top: 1.75rem;
}
/* Contact Details Sidebar styling */
.contact-sidebar {
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.sidebar-block h4 {
font-family: var(--font-ui);
font-size: 0.95rem;
text-transform: none;
letter-spacing: 0.01em;
color: var(--accent-gold);
margin-bottom: 0.6rem;
border-left: 2px solid var(--brand-red);
padding-left: 0.85rem;
line-height: 1.2;
}
.sidebar-block p, .sidebar-block a {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.65;
}
.sidebar-block a:hover {
color: var(--accent-gold);
}
.whatsapp-card {
background-color: var(--bg-tertiary);
border: 1px solid rgba(37, 211, 102, 0.2);
padding: 1.75rem;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 0.9rem;
align-items: flex-start;
}
.whatsapp-title {
display: flex;
align-items: center;
gap: 1rem;
}
.whatsapp-title svg {
width: 32px;
height: 32px;
fill: #25d366;
}
/* The heading sits as a sibling of .whatsapp-title in the markup, so it is
matched from the card down rather than from the title row. */
.whatsapp-card h5 {
font-family: var(--font-ui);
font-size: 1.05rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--text-primary);
}
.whatsapp-card p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
.btn-whatsapp {
background-color: #25d366;
color: #073b1c;
border: 1px solid #25d366;
}
.btn-whatsapp:hover {
background-color: transparent;
border-color: #25d366;
color: #25d366;
}
/* Success Modal / State Overlay */
.form-success-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-tertiary);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem;
opacity: 0;
pointer-events: none;
transition: var(--transition-smooth);
}
.form-success-overlay.active {
opacity: 1;
pointer-events: auto;
}
.success-icon-box {
width: 80px;
height: 80px;
border: 2px solid var(--accent-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.success-icon-box svg {
width: 36px;
height: 36px;
stroke: var(--accent-gold);
}
.form-success-overlay h4 {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.form-success-overlay p {
max-width: 450px;
color: var(--text-muted);
}
@media (max-width: 991px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 5rem;
}
.contact-form-wrapper {
padding: 2.5rem 1.5rem;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-group-full {
grid-column: span 1;
}
}
/* ==========================================================================
Section 7: Footer
========================================================================== */
/* Centred, single-row footer. Everything is stacked on one axis and given a lot
of air — no columns, no headings, no uppercase. The links carry the weight. */
.footer-section {
/* No background and no rule of its own — the footer continues whatever
section sits above it instead of reading as a separate band. */
background-color: transparent;
/* Bottom padding stays at 6rem: the fixed WhatsApp and social buttons occupy
the lowest 84px of the viewport, so anything less puts them on the credit
line once you reach the page end. Top padding carries the reduction. */
padding: 4rem 0 6rem;
text-align: center;
}
.footer-logo {
display: inline-flex;
height: 54px;
margin-bottom: 2.5rem;
}
.footer-logo img {
height: 100%;
width: auto;
object-fit: contain;
}
/* The primary row. Sentence case at near-body size, widely spaced — the whole
point of the reference layout. Row gap is tight, column gap is generous, so
wrapped rows on narrow screens still read as one group. */
.footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem 3.5rem;
margin-bottom: 2.5rem;
}
.footer-links a {
font-family: var(--font-sans);
font-size: 1.15rem;
font-weight: 400;
color: var(--text-primary);
position: relative;
padding-bottom: 3px;
}
.footer-links a::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 1px;
background-color: var(--accent-gold);
transform: translateX(-50%);
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--accent-gold);
}
.footer-links a:hover::after {
width: 100%;
}
/* Social channels — pinned bottom-left of the viewport on every page, mirroring
the WhatsApp button on the right. Bare glyphs, no chrome. */
.social-float {
position: fixed;
left: 24px;
bottom: 24px;
display: flex;
align-items: center;
gap: 1.35rem;
z-index: 9998;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.social-link svg {
width: 22px;
height: 22px;
fill: #ffffff;
/* The icons sit over whatever scrolls past — including the light product
tiles — so they carry their own shadow rather than a backing plate. */
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
transition: var(--transition-fast);
}
.social-link:hover {
transform: translateY(-3px);
}
.social-link:hover svg {
fill: var(--accent-gold);
}
@media (max-width: 768px) {
.social-float {
left: 16px;
bottom: 20px;
gap: 1.1rem;
}
.social-link svg {
width: 20px;
height: 20px;
}
}
/* Credit line — muted, with the company name picked out brighter, matching the
"© … / Website by …" pairing in the reference. */
.footer-credit {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 3rem;
font-size: 0.95rem;
color: var(--text-muted);
}
.footer-credit strong {
font-weight: 400;
color: var(--text-secondary);
}
/* Between roughly 770px and 1100px the eight links no longer fit on one line and
would drop a single orphan onto the second row. Tightening the column gap
keeps the break even. */
@media (max-width: 1100px) {
.footer-links {
gap: 1.35rem 2.5rem;
}
}
@media (max-width: 768px) {
.footer-section {
padding: 3rem 0 5.5rem;
}
.footer-logo {
height: 46px;
margin-bottom: 2rem;
}
.footer-links {
gap: 1.1rem 2.25rem;
margin-bottom: 2rem;
}
.footer-links a {
font-size: 1rem;
}
.social-links {
margin-bottom: 2rem;
}
.footer-credit {
gap: 0.4rem 1.5rem;
font-size: 0.85rem;
}
}
/* ==========================================================================
Auxiliary Subpage Layout: Inner Headers
========================================================================== */
.inner-hero {
position: relative;
background-color: transparent;
padding: 11rem 0 5rem;
overflow: hidden;
}
.inner-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(197,168,128,0.06), transparent 50%);
pointer-events: none;
}
.inner-hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.breadcrumbs {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-ui);
font-size: 0.75rem;
text-transform: none;
letter-spacing: 0.02em;
font-size: 0.85rem;
color: var(--text-muted);
}
.breadcrumbs a {
color: var(--accent-gold);
}
.breadcrumbs span {
display: flex;
align-items: center;
}
.breadcrumbs span::before {
content: '/';
margin-right: 0.5rem;
color: rgba(255,255,255,0.15);
}
@media (max-width: 768px) {
.inner-hero h1 {
font-size: 2.75rem;
}
}
/* ==========================================================================
Subpage: Products (Filters & Grid)
========================================================================== */
.products-filter-bar {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.filter-btn {
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.01em;
padding: 0.55rem 1.25rem;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 100px;
cursor: pointer;
transition: var(--transition-fast);
color: var(--text-muted);
}
.filter-btn:hover {
color: var(--text-primary);
border-color: rgba(255,255,255,0.28);
}
.filter-btn.active {
color: #fff;
background: var(--btn-fill);
border-color: var(--btn-fill);
}
.products-grid-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
@media (max-width: 1200px) {
.products-grid-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.products-grid-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.products-grid-inner { grid-template-columns: 1fr; }
}
/* ==========================================================================
Subpage: Product Detail Layout
========================================================================== */
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: start;
}
.detail-gallery {
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
padding: 3rem;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1.1;
border-radius: 14px;
position: relative;
}
.detail-gallery img {
width: 85%;
height: 85%;
object-fit: contain;
}
.detail-info h2 {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}
.detail-category {
font-family: var(--font-ui);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--accent-gold);
margin-bottom: 2rem;
display: block;
}
.detail-meta-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2.5rem 0 3.5rem;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
padding: 2rem 0;
}
.detail-meta-item {
display: flex;
justify-content: space-between;
}
.detail-meta-item span:first-child {
font-family: var(--font-ui);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
}
.detail-meta-item span:last-child {
font-weight: 500;
color: var(--text-primary);
}
.detail-cta-block {
background: var(--bg-tertiary);
border: 1px solid rgba(197, 168, 128, 0.1);
padding: 3rem;
border-radius: 14px;
}
.detail-cta-block h3 {
font-size: 1.6rem;
margin-bottom: 1rem;
}
.detail-cta-block p {
font-size: 0.95rem;
margin-bottom: 2rem;
color: var(--text-muted);
}
@media (max-width: 991px) {
.detail-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
}
/* ==========================================================================
Subpage: Brands Grid & Showcase
========================================================================== */
.brands-grid-container {
display: flex;
flex-direction: column;
gap: 6rem;
}
.brand-row-card {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 4rem;
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.08);
padding: 3rem;
border-radius: 12px;
align-items: center;
}
.brand-logo-panel {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1.5;
background: var(--bg-tertiary);
border-radius: 2px;
}
.brand-logo-panel img {
height: 55%;
width: auto;
max-width: 80%;
object-fit: contain;
}
.brand-text-panel h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.brand-text-panel p {
margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
.brand-row-card {
grid-template-columns: 1fr;
gap: 2.5rem;
padding: 2rem;
}
}
/* ==========================================================================
Subpage: Blogs & Detail Layout
========================================================================== */
.blogs-hero-post {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 4rem;
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 6rem;
align-items: center;
border-radius: 2px;
overflow: hidden;
}
.blogs-hero-img {
aspect-ratio: 16/9;
width: 100%;
}
.blogs-hero-text {
padding: 3rem;
}
.blog-date {
font-family: var(--font-ui);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--accent-gold);
margin-bottom: 1rem;
display: block;
}
.blogs-hero-text h2 {
font-size: 2.2rem;
margin-bottom: 1.5rem;
}
.blogs-grid-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
/* Article Card structure */
.blog-card {
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--transition-smooth);
}
.blog-card:hover {
transform: translateY(-5px);
border-color: rgba(197, 168, 128, 0.2);
}
.blog-card-img {
width: 100%;
aspect-ratio: 1.5;
overflow: hidden;
}
.blog-card-img img {
width: 100%;
height: 100%;
transition: var(--transition-smooth);
}
.blog-card:hover .blog-card-img img {
transform: scale(1.05);
}
.blog-card-text {
padding: 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-card-text h3 {
font-size: 1.45rem;
margin-bottom: 1rem;
line-height: 1.35;
}
.blog-card-text p {
font-size: 0.95rem;
margin-bottom: 2rem;
color: var(--text-muted);
}
.blog-card-footer {
margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.04);
padding-top: 1.25rem;
}
@media (max-width: 991px) {
.blogs-hero-post { grid-template-columns: 1fr; }
.blogs-hero-text { padding: 2rem; }
.blogs-grid-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.blogs-grid-items { grid-template-columns: 1fr; }
}
/* Blog details structure */
.blog-detail-content {
max-width: 800px;
margin: 0 auto;
}
.blog-detail-content p {
font-size: 1.15rem;
margin-bottom: 2.2rem;
}
.blog-detail-content h2, .blog-detail-content h3 {
color: var(--text-primary);
margin: 3.5rem 0 1.5rem;
}
.blog-detail-content blockquote {
border-left: 3px solid var(--accent-gold);
padding-left: 2rem;
font-family: var(--font-display);
font-size: 1.4rem;
margin: 3rem 0;
color: var(--accent-gold);
}
.blog-detail-footer {
margin-top: 5rem;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
/* ==========================================================================
Transitions & Keyframe Utilities
========================================================================== */
/* Reveal-on-scroll elements start hidden so they fade UP into place. Without
this they paint visible first, then snap to opacity 0 the moment the observer
fires — a flicker on every section. Gated on .js so that with scripting off
the content simply shows. */
.js .scroll-reveal {
opacity: 0;
transform: translateY(20px);
}
.fade-in-up {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
Motion & Focus Accessibility
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.js .scroll-reveal,
.fade-in-up {
opacity: 1;
transform: none;
animation: none;
}
.marquee-track,
.loader-logo,
.scroll-indicator .wheel {
animation: none;
}
*, *::before, *::after {
transition-duration: 0.01ms !important;
}
}
/* The global `outline: none` reset leaves keyboard users with no position
indicator, so every focusable control gets an explicit ring back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-toggle:focus-visible,
.slider-control:focus-visible,
.filter-btn:focus-visible {
outline: 2px solid var(--accent-gold);
outline-offset: 3px;
border-radius: 2px;
}
/* Bare glyph, matching the social icons on the left rather than sitting in a
solid green pill. Slightly larger than they are, since it is the primary
contact action. */
.floating-whatsapp {
position: fixed;
right: 24px;
bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: transform 0.25s ease;
}
.floating-whatsapp:hover {
transform: translateY(-3px);
}
.floating-whatsapp svg {
width: 34px;
height: 34px;
fill: #25d366;
/* Carries its own shadow: it scrolls over the light product cut-outs too */
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
transition: var(--transition-fast);
}
.floating-whatsapp:hover svg {
fill: #3ae57a;
}
@media (max-width: 768px) {
.floating-whatsapp {
right: 16px;
bottom: 18px;
}
.floating-whatsapp svg {
width: 30px;
height: 30px;
}
}
.promo-products {
position: absolute;
top: 0;
right: 2%;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.promo-products img {
position: absolute;
height: auto;
object-fit: contain;
filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.5));
}
.promo-products {
overflow: visible;
}
.promo-products img {
will-change: transform;
transition: none;
}
/* Top-left */
.product-one {
top: 180px;
left: 5%;
transform:
translate3d(0, var(--scroll-y, 0), 0)
rotate(50deg);
}
/* Top-right */
.product-two {
top: 50px;
right: 4%;
transform:
translate3d(0, var(--scroll-y, 0), 0)
rotate(15deg);
}
/* Centre-left */
.product-three {
top: 20px;
left: 100px;
transform:
translate3d(0, var(--scroll-y, 0), 0)
rotate(20deg);
}
/* Centre-right — main product */
.product-four {
top: -150px;
right: 2%;
transform:
translate3d(0, var(--scroll-y, 0), 0)
rotate(-8deg);
}
/* Bottom-left */
.product-five {
bottom: 2%;
left: 12%;
transform:
translate3d(0, var(--scroll-y, 0), 0)
rotate(-15deg);
}
/* Bottom-right */
.product-six {
right: 8%;
bottom: 150px;
transform:
translate3d(0, var(--scroll-y, 0), 0)
rotate(160deg);
}
@media (max-width: 768px) {
.promo-products {
top: 10%;
right: -8%;
width: 70%;
height: 85%;
opacity: 0.55;
}
.promo-products img {
filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));
}
}
/* Keyboard users can jump past the nav */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
padding: 0.75rem 1.25rem;
background: var(--bg-tertiary);
color: var(--text-primary);
border-radius: 0 0 8px 0;
}
.skip-link:focus {
left: 0;
}
/* The contact block runs shorter than a full 8rem section needs. */
.contact-section.section-padding {
padding: 5rem 0 6rem;
}
/* Green fill was shouting next to the muted panel */
.btn-whatsapp {
background-color: transparent;
color: #25d366;
border: 1px solid rgba(37, 211, 102, 0.5);
}
.btn-whatsapp:hover {
background-color: #25d366;
border-color: #25d366;
color: #06381a;
}
/* ==========================================================================
Eyebrow / small label above a heading
One size, one face, one colour, everywhere.
========================================================================== */
.eyebrow,
.section-header .tagline,
.product-category,
.blog-date,
.detail-category {
display: block;
font-family: var(--font-ui);
font-size: 1rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.04em;
line-height: 1.4;
color: var(--accent-gold);
margin-bottom: 0.75rem;
}
.section-header .tagline {
margin-bottom: 1rem;
}
/* ==========================================================================
Scroll reveal — section entrance animation
Targets are hidden here in CSS rather than tagged by JS, so they never paint
visible and then flick to hidden. Gated on .js so that with scripting off the
content simply shows.
========================================================================== */
.js .section-header,
.js .about-info,
.js .about-editorial-composition,
.js .stat-card,
.js .slider-container-outer,
.js .products-footer,
.js .promo-content,
.js .marquee-item,
.js .contact-form-wrapper,
.js .contact-sidebar,
.js .brand-row-card,
.js .blogs-hero-post,
.js .blog-card,
.js .detail-gallery,
.js .detail-info,
.js .blog-detail-content,
.js .inner-hero .container,
.js .footer-logo,
.js .footer-links,
.js .footer-credit {
opacity: 0;
transform: translateY(26px);
}
.js .is-revealed {
animation: revealUp 0.7s cubic-bezier(0.22, 0.75, 0.3, 1) forwards;
animation-delay: var(--reveal-delay, 0ms);
}
@keyframes revealUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.js .section-header,
.js .about-info,
.js .about-editorial-composition,
.js .stat-card,
.js .slider-container-outer,
.js .products-footer,
.js .promo-content,
.js .marquee-item,
.js .contact-form-wrapper,
.js .contact-sidebar,
.js .brand-row-card,
.js .blogs-hero-post,
.js .blog-card,
.js .detail-gallery,
.js .detail-info,
.js .blog-detail-content,
.js .inner-hero .container,
.js .footer-logo,
.js .footer-links,
.js .footer-credit,
.js .is-revealed {
opacity: 1;
transform: none;
animation: none;
}
}
/* ==========================================================================
Inner page banners
Each subpage carries its own image, darkened enough for the heading to read
and faded into the page colour at the bottom so there is no hard cut.
========================================================================== */
.inner-hero {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image:
linear-gradient(
to bottom,
rgba(var(--bg-primary-rgb), 0.30) 0%,
rgba(var(--bg-primary-rgb), 0.38) 40%,
rgba(var(--bg-primary-rgb), 0.80) 84%,
var(--bg-primary) 100%
),
var(--banner, none);
}
@media (max-width: 768px) {
.inner-hero {
padding: 9rem 0 4rem;
}
}
/* ==========================================================================
Why Partner With Us
========================================================================== */
.inner-hero-lede {
max-width: 62ch;
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-secondary);
}
.partner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.partner-card {
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid var(--brand-red);
border-radius: 12px;
padding: 1.75rem 1.6rem;
transition: var(--transition-smooth);
}
.partner-card:hover {
border-color: rgba(255, 255, 255, 0.14);
border-left-color: var(--btn-fill);
transform: translateY(-3px);
}
.partner-card h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.6rem;
color: var(--text-primary);
}
.partner-card p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-secondary);
}
.partner-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.partner-step {
padding-top: 1.25rem;
border-top: 2px solid rgba(255, 255, 255, 0.12);
}
.partner-step-num {
display: block;
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 600;
color: var(--accent-gold);
margin-bottom: 0.6rem;
}
.partner-step h3 {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.partner-step p {
font-size: 0.93rem;
line-height: 1.6;
color: var(--text-secondary);
}
.partner-cta {
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.partner-cta h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
margin-bottom: 1rem;
text-wrap: balance;
}
.partner-cta p {
color: var(--text-secondary);
margin-bottom: 2rem;
}
.partner-cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.partner-grid { grid-template-columns: repeat(2, 1fr); }
.partner-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.partner-grid, .partner-steps { grid-template-columns: 1fr; }
}
/* ==========================================================================
Headline word rotator
The badge word cycles; it fades and lifts out, the text is swapped while it
is invisible (so the pill can resize), then it settles back in.
========================================================================== */
.hl-rotate {
transition: opacity 0.34s ease, transform 0.34s ease;
}
.hl-rotate.is-out {
opacity: 0;
transform: rotate(-4deg) translateY(-14px);
}
.hl-rotate.is-in {
opacity: 0;
transform: rotate(-4deg) translateY(14px);
}
@media (prefers-reduced-motion: reduce) {
.hl-rotate,
.hl-rotate.is-out,
.hl-rotate.is-in {
opacity: 1;
transform: rotate(-4deg);
transition: none;
}
}
/* ==========================================================================
Edge decoration
Line-art leaf motifs and scattered dots at the outer edges of sections.
Purely decorative: sits behind content, ignores pointer events, and is
dropped on small screens where there is no spare margin.
========================================================================== */
.about-section,
.products-section,
.brands-section,
.contact-section {
position: relative;
overflow: hidden;
}
.about-section::before,
.products-section::after,
.brands-section::before,
.contact-section::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
/* Keep real content above the decoration */
.about-section > .container,
.products-section > .container,
.brands-section > .container,
.contact-section > .container,
.brands-section .marquee-container {
position: relative;
z-index: 1;
}
.about-section::before {
top: 4rem;
left: -70px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23e91c2d%22%20stroke-width%3D%221.6%22%3E%0A%3Cpath%20d%3D%22M8%20150C50%20108%20118%2052%20196%2014%20152%2078%2092%20128%2022%20172%22%2F%3E%0A%3Cpath%20d%3D%22M8%20150C58%20122%20128%2074%20196%2014%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C34%20186%2082%20148%20138%20122%2096%20164%2054%20194%2014%20218%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C42%20194%2088%20160%20138%20122%22%2F%3E%0A%3C%2Fsvg%3E");
}
.products-section::after {
bottom: 3rem;
right: -70px;
transform: scaleX(-1);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23c5a880%22%20stroke-width%3D%221.6%22%3E%0A%3Cpath%20d%3D%22M8%20150C50%20108%20118%2052%20196%2014%20152%2078%2092%20128%2022%20172%22%2F%3E%0A%3Cpath%20d%3D%22M8%20150C58%20122%20128%2074%20196%2014%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C34%20186%2082%20148%20138%20122%2096%20164%2054%20194%2014%20218%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C42%20194%2088%20160%20138%20122%22%2F%3E%0A%3C%2Fsvg%3E");
}
.brands-section::before {
top: 3rem;
left: -80px;
transform: rotate(12deg);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23c5a880%22%20stroke-width%3D%221.6%22%3E%0A%3Cpath%20d%3D%22M8%20150C50%20108%20118%2052%20196%2014%20152%2078%2092%20128%2022%20172%22%2F%3E%0A%3Cpath%20d%3D%22M8%20150C58%20122%20128%2074%20196%2014%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C34%20186%2082%20148%20138%20122%2096%20164%2054%20194%2014%20218%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C42%20194%2088%20160%20138%20122%22%2F%3E%0A%3C%2Fsvg%3E");
}
.contact-section::after {
bottom: 4rem;
right: -60px;
transform: scaleX(-1) rotate(8deg);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23e91c2d%22%20stroke-width%3D%221.6%22%3E%0A%3Cpath%20d%3D%22M8%20150C50%20108%20118%2052%20196%2014%20152%2078%2092%20128%2022%20172%22%2F%3E%0A%3Cpath%20d%3D%22M8%20150C58%20122%20128%2074%20196%2014%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C34%20186%2082%20148%20138%20122%2096%20164%2054%20194%2014%20218%22%2F%3E%0A%3Cpath%20d%3D%22M4%20214C42%20194%2088%20160%20138%20122%22%2F%3E%0A%3C%2Fsvg%3E");
}
/* Scattered confetti dots, painted as a gradient field */
.products-section,
.contact-section {
background-image:
radial-gradient(circle at 12% 22%, rgba(233, 28, 45, 0.30) 0 4px, transparent 4px),
radial-gradient(circle at 88% 16%, rgba(197, 168, 128, 0.32) 0 5px, transparent 5px),
radial-gradient(circle at 78% 62%, rgba(122, 158, 138, 0.28) 0 4px, transparent 4px),
radial-gradient(circle at 20% 74%, rgba(197, 168, 128, 0.24) 0 6px, transparent 6px),
radial-gradient(circle at 94% 84%, rgba(233, 28, 45, 0.22) 0 4px, transparent 4px),
radial-gradient(circle at 6% 48%, rgba(197, 168, 128, 0.18) 0 3px, transparent 3px);
background-repeat: no-repeat;
}
@media (max-width: 991px) {
.about-section::before,
.products-section::after,
.brands-section::before,
.contact-section::after {
display: none;
}
}
/* ==========================================================================
Product plate — dotted grid with the pack floating above it
========================================================================== */
.product-image-container,
.detail-gallery {
background-color: transparent;
background-image: none;
position: relative;
overflow: hidden;
}
/* The dot field lives on a pseudo-element so it can actually rotate. Oversized
to 200% so the corners stay covered through a full turn. */
.product-image-container::before,
.detail-gallery::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background-image: radial-gradient(circle, rgba(197, 168, 128, 0.34) 1.8px, transparent 1.8px);
background-size: 17px 17px;
transform: translate(-50%, -50%);
animation: dotSpin 70s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes dotSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Pack sits above the dots */
.product-image-container img,
.detail-gallery img {
position: relative;
z-index: 1;
}
/* The pack drifts gently; hover uses the separate scale property so it composes
with the animation instead of fighting it for the transform. */
.product-image-container img,
.detail-gallery img {
animation: floatPack 5.5s ease-in-out infinite;
filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
transition: scale 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.product-card:hover .product-image-container img {
transform: none;
scale: 1.06;
}
@keyframes floatPack {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
/* Offset each card so the row does not bob in unison */
.product-card:nth-child(2n) .product-image-container img { animation-delay: -1.3s; }
.product-card:nth-child(3n) .product-image-container img { animation-delay: -2.6s; }
.product-card:nth-child(4n) .product-image-container img { animation-delay: -3.9s; }
@media (prefers-reduced-motion: reduce) {
.product-image-container img,
.detail-gallery img,
.product-image-container::before,
.detail-gallery::before {
animation: none;
}
}
/* ==========================================================================
Section heading flourish
A drawn wave under each section heading. Inline SVG, not an image file, so
it scales cleanly and costs no extra request.
========================================================================== */
.section-header::after,
.about-info .statement-text::after,
.partner-cta h2::after,
.promo-content h2::after {
content: "";
display: block;
width: 190px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2022%22%20fill%3D%22none%22%20stroke%3D%22%23c5a880%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%0A%3Cpath%20d%3D%22M4%2011%20Q18%202%2032%2011%20T60%2011%20T88%2011%20T116%2011%20T144%2011%20T172%2011%20T200%2011%20T236%2011%22%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* Centred headings */
.section-header::after,
.partner-cta h2::after {
margin: 1.6rem auto 0;
}
/* Left-aligned headings get the wave under their left edge */
.about-info .statement-text::after,
.promo-content h2::after {
margin: 1.1rem 0 0;
background-position: left center;
}
@media (max-width: 768px) {
.section-header::after,
.about-info .statement-text::after,
.partner-cta h2::after,
.promo-content h2::after {
width: 150px;
margin-top: 1.1rem;
}
.about-info .statement-text::after {
margin-left: 0;
}
}
/* ==========================================================================
About — icon + text points (replaces the old four stat cards)
========================================================================== */
.about-points {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.25rem 1.75rem;
}
.about-point {
display: grid;
grid-template-columns: 50px 1fr;
gap: 1.1rem;
align-items: start;
}
.about-point-icon svg {
width: 48px;
height: 48px;
}
.about-point-icon {
display: block;
color: var(--accent-gold);
transition: var(--transition-smooth);
}
.about-point-icon svg {
width: 56px;
height: 56px;
display: block;
}
.about-point:hover .about-point-icon {
color: var(--brand-red);
transform: translateY(-3px);
}
.about-point-body h4 {
font-size: 1.3rem;
font-weight: 400;
color: var(--text-primary);
margin-bottom: 0.4rem;
letter-spacing: 0;
text-transform: none;
font-family: var(--font-display);
}
.about-point-body p {
font-size: 1rem;
line-height: 1.65;
color: var(--text-muted);
}
@media (max-width: 700px) {
.about-points {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.about-point {
grid-template-columns: 44px 1fr;
gap: 1rem;
}
.about-point-icon svg {
width: 42px;
height: 42px;
}
}
/* ==========================================================================
About composition — packs drift continuously, not only on scroll
The inline parallax script owns `transform` on these images, so the bob uses
the independent `translate` and `rotate` properties instead. They compose
rather than overwrite each other.
========================================================================== */
.promo-product {
animation: packBob 6.5s ease-in-out infinite;
}
@keyframes packBob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -16px; }
}
/* Offset each pack so the group breathes rather than pulsing in unison */
.product-one { animation-delay: 0s; }
.product-two { animation-delay: -1.1s; }
.product-three { animation-delay: -2.2s; }
.product-four { animation-delay: -3.3s; }
.product-five { animation-delay: -4.4s; }
.product-six { animation-delay: -5.5s; }
@media (prefers-reduced-motion: reduce) {
.promo-product {
animation: none;
}
}
/* ==========================================================================
Product cards — no frame
Just the rotating dot field behind the pack, with the text beneath it.
========================================================================== */
.product-card {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.product-card:hover {
border-color: transparent;
}
/* Dot field runs the full width of the slot now that the card padding is gone */
.product-image-container {
margin-bottom: 1.25rem;
border-radius: 8px;
}
.product-info-box {
padding: 0 0.25rem;
}
/* Badge sat against the old card padding; nudge it inside the dot field */
.product-badge {
top: 12px;
left: 12px;
}
/* ==========================================================================
Buttons — gold outline pill with a trailing arrow
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
padding: 1.05rem 2.6rem;
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 100px;
background-color: transparent;
border: 1px solid var(--accent-gold);
color: var(--accent-gold);
transition: var(--transition-smooth);
}
.btn::after {
content: "\2192";
font-size: 1.15em;
line-height: 1;
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
background-color: var(--accent-gold);
border-color: var(--accent-gold);
color: var(--bg-primary);
}
.btn:hover::after {
transform: translateX(5px);
}
/* Every variant now shares the one treatment */
.btn-primary,
.btn-outline,
.nav-cta .btn {
background-color: transparent;
border-color: var(--accent-gold);
color: var(--accent-gold);
}
.btn-primary:hover,
.btn-outline:hover,
.nav-cta .btn:hover {
background-color: var(--accent-gold);
border-color: var(--accent-gold);
color: var(--bg-primary);
}
/* Header button stays compact so the nav row still fits */
.nav-cta .btn {
padding: 0.7rem 1.6rem;
font-size: 0.72rem;
letter-spacing: 0.16em;
gap: 0.6rem;
}
/* WhatsApp keeps its own colour, same shape */
.btn-whatsapp {
background-color: transparent;
border-color: rgba(37, 211, 102, 0.55);
color: #25d366;
}
.btn-whatsapp:hover {
background-color: #25d366;
border-color: #25d366;
color: #06381a;
}
/* ==========================================================================
Inner page banner — centred title over a full-bleed image
========================================================================== */
.inner-hero {
padding: 13rem 0 7rem;
text-align: center;
}
.inner-hero .container {
display: flex;
flex-direction: column;
align-items: center;
}
/* Title first, breadcrumb underneath it */
.inner-hero h1 { order: 1; font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin-bottom: 1.1rem; }
.inner-hero .breadcrumbs { order: 2; justify-content: center; }
.inner-hero-lede,
.inner-hero .container > p { order: 3; margin-top: 1.25rem; text-align: center; }
/* No wave under the banner heading — the breadcrumb sits there instead */
.inner-hero h1::after {
content: none;
}
.breadcrumbs span::before {
content: "//";
margin-right: 0.6rem;
color: rgba(255, 255, 255, 0.28);
}
/* Torn edge where the banner meets the page */
.inner-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 58px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22%23191818%22%3E%0A%3Cpath%20d%3D%22M0%2028C90%206%20170%2048%20262%2024S430%204%20528%2032%20700%2054%20812%2024%20984%208%201084%2034s84%2012%20116%20-6V60H0Z%22%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
@media (max-width: 768px) {
.inner-hero {
padding: 10rem 0 5rem;
}
.inner-hero::after {
height: 34px;
}
}
/* Banner type sits over a much lighter image now */
.inner-hero h1 {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.inner-hero .breadcrumbs,
.inner-hero .container > p,
.inner-hero-lede {
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
/* ==========================================================================
Header scrim
The nav rides transparent over the banner and hero images, so it needs its
own gradient behind it to stay readable regardless of what is underneath.
========================================================================== */
.header-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -55px;
background: linear-gradient(
to bottom,
rgba(var(--bg-primary-rgb), 0.92) 0%,
rgba(var(--bg-primary-rgb), 0.62) 45%,
rgba(var(--bg-primary-rgb), 0.22) 75%,
transparent 100%
);
pointer-events: none;
z-index: -1;
transition: opacity 0.4s ease;
}
/* Once scrolled the header has its own solid background, so the scrim retires */
.header-wrapper.scrolled::before {
opacity: 0;
}
/* Nav content stays above the scrim */
.header-container {
position: relative;
z-index: 1;
}
/* Every inner page carries the same banner as the homepage hero opens with. */
.inner-hero {
--banner: url("banner/w1440/frame-001.webp");
}
/* ==========================================================================
Inner pages inherit the homepage type system
Section headings outside .section-header get the same size, weight and
wave flourish, so no page looks hand-built.
========================================================================== */
.inner-hero ~ section h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 400;
line-height: 1.25;
color: var(--text-primary);
text-wrap: balance;
}
/* Wave under standalone section headings, matching the homepage */
.inner-hero ~ section h2:not(.title):not(.blogs-hero-text h2):not(.brand-text-panel h2)::after {
content: "";
display: block;
width: 190px;
height: 18px;
margin: 1.1rem 0 0;
background-image: var(--wave);
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
}
@media (max-width: 768px) {
.inner-hero ~ section h2:not(.title)::after {
width: 150px;
}
}
/* ==========================================================================
Inner page decoration
Same line-art motif as the homepage, placed differently: it comes in from
the top right rather than the left, larger and more faded, and alternates
sides down the page.
========================================================================== */
.inner-hero ~ section {
position: relative;
overflow: hidden;
}
.inner-hero ~ section > .container {
position: relative;
z-index: 1;
}
.inner-hero ~ section:nth-of-type(odd)::before,
.inner-hero ~ section:nth-of-type(even)::before {
content: "";
position: absolute;
width: 340px;
height: 340px;
background-image: var(--leaf);
background-repeat: no-repeat;
background-size: contain;
opacity: 0.28;
pointer-events: none;
z-index: 0;
}
/* Odd sections: enters from the top right */
.inner-hero ~ section:nth-of-type(odd)::before {
top: -60px;
right: -90px;
transform: scaleX(-1) rotate(-8deg);
}
/* Even sections: low on the left, mirrored back */
.inner-hero ~ section:nth-of-type(even)::before {
bottom: -70px;
left: -100px;
transform: rotate(14deg);
}
@media (max-width: 991px) {
.inner-hero ~ section:nth-of-type(odd)::before,
.inner-hero ~ section:nth-of-type(even)::before {
display: none;
}
}
/* ==========================================================================
Patterned card surface
Interlocking concentric rings, built from two repeating radial gradients
offset to opposite corners so the arcs weave together.
========================================================================== */
.about-stats .stat-card {
background-color: var(--bg-secondary);
background-image:
repeating-radial-gradient(circle at 0 0,
transparent 0 9px, rgba(255, 255, 255, 0.032) 9px 18px),
repeating-radial-gradient(circle at 100% 100%,
transparent 0 9px, rgba(255, 255, 255, 0.032) 9px 18px);
background-size: 92px 92px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid var(--brand-red);
border-radius: 12px;
padding: 1.75rem 1.6rem;
overflow: hidden;
transition: var(--transition-smooth);
}
.about-stats .stat-card:hover {
border-color: rgba(255, 255, 255, 0.14);
border-left-color: var(--btn-fill);
transform: translateY(-3px);
}
.about-stats .stat-card h4 {
font-size: 1.2rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.about-stats .stat-card p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-secondary);
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
@media (max-width: 576px) {
.about-stats { grid-template-columns: 1fr; }
}
/* Icon + text points used inside the three-column grid on About */
.partner-grid .about-point {
align-items: start;
}
/* Cold Chain Storage / Expansive Network — thin gold frame, square corners,
over the patterned surface. */
.about-stats .stat-card {
border: 1px solid rgba(197, 168, 128, 0.55);
border-left: 1px solid rgba(197, 168, 128, 0.55);
border-radius: 0;
padding: 2rem 1.9rem;
}
.about-stats .stat-card:hover {
border-color: var(--accent-gold);
border-left-color: var(--accent-gold);
transform: translateY(-3px);
}
/* More breathing room between a heading and its wave, and after the wave
before the copy that follows. Applied to every heading that carries one, so
the spacing is identical on the homepage and every inner page. */
.section-header::after,
.partner-cta h2::after {
margin-top: 2.1rem;
}
.about-info .statement-text::after,
.promo-content h2::after,
.inner-hero ~ section h2:not(.title):not(.blogs-hero-text h2):not(.brand-text-panel h2)::after {
margin: 1.9rem 0 1.5rem;
}
/* Cleaner pattern: thin concentric ring lines rather than thick alternating
bands, which were wide enough to moire into diagonal streaks. Two layers,
one centred in the tile and one on its corners, so the rings interlock. */
.about-stats .stat-card {
background-image:
repeating-radial-gradient(circle at 50% 50%,
transparent 0 13px, rgba(255, 255, 255, 0.045) 13px 14.5px),
repeating-radial-gradient(circle at 0 0,
transparent 0 13px, rgba(255, 255, 255, 0.030) 13px 14.5px);
background-size: 116px 116px;
}
/* Brand logo panels sit directly on the page — no plate behind the mark. */
.brand-logo-panel {
background: transparent;
}
.marquee-logo-wrapper {
background: transparent;
}
/* Brand blocks sit directly on the page — no card fill behind them. */
.brand-row-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0 0 3rem;
}
/* Every brand mark scales into an identical box, so logos with very different
proportions still read at the same visual size. */
.brand-logo-panel {
aspect-ratio: auto;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-logo-panel img {
height: 100%;
width: 100%;
max-width: 240px;
object-fit: contain;
}
/* Text-based marks for brands with no logo file match that box */
.brand-logo-panel > div {
font-size: 2.4rem !important;
line-height: 1.1;
}
@media (max-width: 768px) {
.brand-logo-panel {
height: 96px;
}
.brand-logo-panel img {
max-width: 200px;
}
}
/* Signature Collection carries its own banner rather than the shared frame. */
.hero-products {
--banner: url("assets/about-hero-bg.jpg");
}
/* A thin gold rule between brand blocks — separator only, so the last block
does not trail a line into the section below. */
.brand-row-card + .brand-row-card {
border-top: 1px solid rgba(197, 168, 128, 0.45);
padding-top: 3rem;
}
/* Wavy gold separator between brand blocks, built from a repeating tile so it
spans any width without stretching. */
.brand-row-card + .brand-row-card {
border-top: none;
padding-top: 3.5rem;
position: relative;
}
.brand-row-card + .brand-row-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2012%22%20fill%3D%22none%22%20stroke%3D%22%23c5a880%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%206Q10%200%2020%206T40%206%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat-x;
background-size: 40px 12px;
background-position: left center;
opacity: 0.85;
pointer-events: none;
}
/* Why Partner cards — numbered, with a gold rule across the top instead of the
red edge, so they read differently from the cards on About. */
.partner-grid {
counter-reset: partner;
}
.partner-card {
position: relative;
counter-increment: partner;
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.07);
border-left: 1px solid rgba(255, 255, 255, 0.07);
border-top: 2px solid var(--accent-gold);
border-radius: 4px;
padding: 2.4rem 1.7rem 1.9rem;
}
.partner-card::before {
content: counter(partner, decimal-leading-zero);
position: absolute;
top: 1rem;
right: 1.25rem;
font-family: var(--font-ui);
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
color: rgba(197, 168, 128, 0.28);
}
.partner-card:hover {
background: #262424;
border-color: rgba(255, 255, 255, 0.12);
border-top-color: var(--accent-gold);
transform: translateY(-4px);
}
.partner-card:hover::before {
color: var(--accent-gold);
}
/* The closing CTA is centred, so its wave must be too. This needs to outrank
the inner-page heading rule, which left-aligns the wave. */
.inner-hero ~ section .partner-cta h2::after,
.partner-cta h2::after {
margin-left: auto;
margin-right: auto;
background-position: center;
}
/* Both actions fit on one line: the container was narrower than the two
pill buttons plus their gap, so they wrapped. */
.partner-cta {
max-width: 760px;
}
.partner-cta-actions {
gap: 1rem 1.25rem;
}
@media (max-width: 620px) {
.partner-cta-actions .btn {
width: 100%;
}
}
/* Centre the closing CTA wave. The inner-page heading rule carries three
:not() clauses and outranks any sane selector here, so this is one of the
few places !important is the honest fix. */
.partner-cta h2::after {
margin-left: auto !important;
margin-right: auto !important;
background-position: center !important;
}
/* ==========================================================================
Page banners — one named file each, so swapping an image is just replacing
the file in assets/ with the same name.
========================================================================== */
.hero-about { --banner: url("assets/banner-about.jpg"); }
.hero-products { --banner: url("assets/banner-products.jpg"); }
.hero-brands { --banner: url("assets/banner-brands.webp"); }
.hero-blogs,
.hero-blogpost { --banner: url("assets/banner-blog.webp"); }
.hero-contact { --banner: url("assets/banner-contact.webp"); }
.hero-partner { --banner: url("assets/banner-partner.webp"); }
.hero-product { --banner: url("assets/banner-product.webp"); }
.hero-brand { --banner: url("assets/banner-brand-detail.webp"); }
.hero-legal { --banner: url("assets/banner-legal.webp"); }
/* ==========================================================================
Mobile action bar
Fixed call + WhatsApp strip along the bottom on phones. Replaces the two
floating buttons there, which competed for the same corners.
========================================================================== */
.mobile-actionbar {
display: none;
}
@media (max-width: 768px) {
.mobile-actionbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
z-index: 9999;
background: rgba(var(--bg-secondary-rgb), 0.97);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(197, 168, 128, 0.28);
padding-bottom: env(safe-area-inset-bottom);
}
.mobile-action {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 0.5rem;
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 500;
color: var(--accent-gold);
transition: var(--transition-fast);
}
.mobile-action + .mobile-action {
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-action svg {
width: 20px;
height: 20px;
}
.mobile-action--wa {
color: #25d366;
fill: #25d366;
}
.mobile-action:active {
background: rgba(255, 255, 255, 0.05);
}
/* The floating buttons would sit on top of the bar */
.floating-whatsapp,
.social-float {
display: none;
}
/* Keep the footer clear of the fixed bar */
.footer-section {
padding-bottom: 7rem;
}
}
/* ==========================================================================
Floating pack composition on mobile
The desktop layout pushes packs off both edges with percentage offsets,
which crops them badly on a narrow screen. On mobile the group is centred
and pulled inward instead.
========================================================================== */
@media (max-width: 768px) {
.promo-products {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
height: 300px;
margin: 2rem auto 0;
opacity: 1;
}
.promo-product {
width: 42%;
max-width: 190px;
height: auto;
}
/* Three packs in a loose centred cluster; the rest step aside */
.product-one {
top: 0;
left: 4%;
right: auto;
}
.product-two {
top: 30px;
left: auto;
right: 4%;
}
.product-three {
top: 140px;
left: 50%;
margin-left: -21%;
right: auto;
}
.product-four,
.product-five,
.product-six {
display: none;
}
}
/* ==========================================================================
Product card framing — bordered cards with more breathing room.
Appended last so it overrides the earlier rule that strips the card border.
Scoped to the catalogue grids; the homepage slider keeps its original look.
========================================================================== */
.products-grid-inner {
gap: 2.75rem;
}
.products-grid-inner .product-card {
background-color: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 14px;
padding: 1.5rem 1.5rem 1.25rem;
}
.products-grid-inner .product-card:hover {
border-color: rgba(197, 168, 128, 0.38);
background-color: rgba(197, 168, 128, 0.04);
}
/* The badge is absolutely positioned against the image box, so it needs to
step in by the new padding to stay clear of the rounded corner. */
.products-grid-inner .product-badge {
top: 0.25rem;
left: 0.25rem;
}
@media (max-width: 1100px) {
.products-grid-inner { gap: 2rem; }
.products-grid-inner .product-card { padding: 1.25rem 1.25rem 1rem; }
}
@media (max-width: 600px) {
.products-grid-inner { gap: 1.5rem; }
}