/* ============================================================
Brimo — style.css (SHARED)
Design tokens, base reset, nav, footer, buttons,
the reusable placeholder "bottle" component, and the
scroll-reveal base state.
Loaded on every page BEFORE the page-specific CSS file.
============================================================ */
/* ------------------------------------------------------------
IMAGE LOADING CONVENTION (intentional — do not "fix" later)
------------------------------------------------------------
- Above-the-fold images (logo, nav, hero shelf on index.html):
load EAGERLY. Either omit `loading` or set loading="eager".
Never add loading="lazy" to these — it causes a visible
flash / delay of missing content on first paint.
- Below-the-fold images (product cards, images further down
any page): use loading="lazy" so the browser only fetches
them as the user scrolls near them.
- Every ![]()
must carry width + height (or CSS aspect-ratio)
to reserve layout space and prevent content jumping as
real images load in a later pass.
------------------------------------------------------------
PLACEHOLDER BOTTLE SHAPES (real photos not ready yet)
------------------------------------------------------------
The `.bottle` component below is a CSS-drawn bottle silhouette
used everywhere a real product photo will eventually live
(hero shelf, featured cards, product grid). Each instance sits
inside a `.bottle-slot` box whose size/position exactly matches
where a real ![]()
will later be dropped in — so the swap is
1:1 with NO layout change. When real art is ready, replace the
inner `.bottle` markup with:
inside the same `.bottle-slot`, and the layout holds.
------------------------------------------------------------ */
/* ==================== DESIGN TOKENS ==================== */
:root {
/* Core brand palette — v2, "clean & premium" pass.
Deep midnight-teal ink on warm ivory paper, replacing the brighter
royal-blue/cool-white v1 palette. Same token names throughout the
codebase, so every component below picks this up automatically. */
--ink: #14403D; /* primary brand teal (was royal blue #2E3192) */
--paper: #F8F5EF; /* warm ivory page background (was cool white) */
--charcoal: #1C1A17; /* warm near-black primary text */
--mist: #6D6A61; /* warm muted / secondary text */
--line: #E7E1D3; /* warm borders / dividers */
/* Deeper ink for dark sections */
--ink-deep: #0B2B29;
/* Spectrum hues — muted into jewel tones (was a brighter candy-rainbow) */
--violet: #5B3B7A;
--magenta: #A63D6E;
--coral: #B8434A;
--orange: #C97A3A;
--gold: #C9A227;
--green: #3E7D5A;
--teal: #1E6E64;
/* Signature spectrum — use ONLY in small doses (nav underline,
eyebrow accent, active filter) — never as a full section wash. */
--spectrum: linear-gradient(90deg,
var(--ink) 0%, var(--violet) 16%, var(--magenta) 32%,
var(--coral) 46%, var(--orange) 58%, var(--gold) 70%,
var(--green) 82%, var(--teal) 92%, var(--ink) 100%);
/* Category colors — one per product family, muted to match the new
jewel-tone spectrum instead of the brighter v1 hues. */
--cat-citrus: #C98A2E; /* Multi-Purpose */
--cat-blue: #2E6690; /* Laundry Care */
--cat-rose: #A85C78; /* Personal Care */
--cat-toilet: #3C5872; /* Bathroom & Toilet */
--cat-disinfect:#8C3230; /* Disinfectants */
--cat-dish: #2E7D5B; /* Dishwashing */
/* Fonts — real Google Fonts (linked in each page ) */
--font-heading: 'Fraunces', ui-serif, Georgia, serif;
--font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
/* Layout — slightly more generous width/gutter for a more premium,
less cramped feel (was 1140px / 1.25rem). */
--container-max: 1180px;
--gutter: 1.5rem;
--radius: 10px;
--radius-lg: 20px;
--header-h: 68px;
/* Elevation — warmed to match the new charcoal (was cool rgba(29,27,36,…)) */
--shadow-sm: 0 2px 8px rgba(28, 26, 23, 0.06);
--shadow-md: 0 10px 30px rgba(28, 26, 23, 0.10);
--shadow-lg: 0 22px 50px rgba(28, 26, 23, 0.16);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ==================== BASE RESET ==================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--charcoal);
background: var(--paper);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.08;
color: var(--charcoal);
margin: 0 0 0.5em;
font-weight: 600;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
/* Visually hidden but still announced by screen readers — used where an
icon carries the visual meaning (e.g. footer contact rows) but the
underlying label ("Email", "Phone"...) should still be read aloud. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==================== EYEBROW LABEL (spectrum accent) ==================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mist);
margin: 0 0 1rem;
}
.eyebrow::before {
content: "";
width: 2.2rem;
height: 4px;
border-radius: 4px;
background: var(--spectrum);
}
/* ==================== LAYOUT HELPERS ==================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--cta {
background: var(--ink);
color: var(--paper);
text-align: center;
}
.section--cta h2 { color: var(--paper); }
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* ==================== BUTTONS ==================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.6rem;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.98rem;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.25s var(--ease), background 0.2s, color 0.2s,
border-color 0.2s, box-shadow 0.25s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
box-shadow: 0 8px 20px rgba(20, 64, 61, 0.28);
}
.btn--primary:hover { background: var(--ink-deep); box-shadow: 0 12px 28px rgba(20, 64, 61, 0.38); }
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.btn--light:hover { background: #fff; box-shadow: var(--shadow-md); }
/* ==================== TAG / PILL ==================== */
.tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.28rem 0.75rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tag-color, var(--ink));
background: color-mix(in srgb, var(--tag-color, var(--ink)) 12%, transparent);
}
.tag::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--tag-color, var(--ink));
}
/* ============================================================
PLACEHOLDER BOTTLE COMPONENT
Body = rounded-top rectangle, cap = narrower rectangle on top,
tinted via --bottle-color, with a soft colored shadow blob.
Drop-in replaceable 1:1 by a real ![]()
inside .bottle-slot.
============================================================ */
.bottle-slot {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
aspect-ratio: 3 / 4;
}
/* Real product photo dropped into a slot: fits the same box the placeholder
shape occupied, sitting on the slot's baseline like an item on a shelf.
The drop-shadow follows the bottle's alpha silhouette, giving edge
definition so WHITE/light bottles (e.g. Eau de Javel) separate from a
light background instead of washing out — image itself is untouched. */
.bottle-slot img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
filter:
drop-shadow(0 1px 2px rgba(28, 26, 23, 0.32))
drop-shadow(0 9px 14px rgba(28, 26, 23, 0.12));
}
.bottle {
--bottle-color: var(--ink);
position: relative;
width: 46%;
height: 84%;
display: flex;
flex-direction: column;
align-items: center;
filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--bottle-color) 35%, transparent));
}
/* Cap */
.bottle::before {
content: "";
width: 34%;
height: 14%;
border-radius: 5px 5px 2px 2px;
background: color-mix(in srgb, var(--bottle-color) 75%, #000 12%);
}
/* Neck + body */
.bottle::after {
content: "";
flex: 1;
width: 100%;
margin-top: -2px;
border-radius: 40% 40% 16px 16px / 22% 22% 16px 16px;
background:
linear-gradient(150deg,
color-mix(in srgb, var(--bottle-color) 82%, #fff 30%) 0%,
var(--bottle-color) 45%,
color-mix(in srgb, var(--bottle-color) 78%, #000 18%) 100%);
box-shadow:
inset 0 0 0 3px color-mix(in srgb, var(--bottle-color) 70%, #fff 25%),
inset -8px 0 18px rgba(0, 0, 0, 0.12),
inset 8px 0 14px rgba(255, 255, 255, 0.28);
}
/* Label band across the body */
.bottle__label {
position: absolute;
left: 8%;
right: 8%;
bottom: 22%;
height: 34%;
border-radius: 6px;
background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bottle-color) 30%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.bottle__label::after {
content: "";
width: 46%;
height: 4px;
border-radius: 4px;
background: var(--bottle-color);
box-shadow: 0 8px 0 -1px color-mix(in srgb, var(--bottle-color) 45%, transparent),
0 -8px 0 -1px color-mix(in srgb, var(--bottle-color) 25%, transparent);
}
/* Soft colored shadow blob beneath the bottle — only for the CSS-drawn
placeholder shape, not for real product photos in a slot. */
.bottle-slot:has(.bottle)::after {
content: "";
position: absolute;
bottom: -2%;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 8%;
border-radius: 50%;
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--bottle-color, var(--ink)) 45%, transparent) 0%,
transparent 70%);
filter: blur(3px);
z-index: -1;
}
/* ==================== HEADER / NAV ==================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease),
border-color 0.3s var(--ease);
}
.site-header.is-scrolled {
background: color-mix(in srgb, var(--paper) 82%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom-color: var(--line);
box-shadow: var(--shadow-sm);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: var(--header-h);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo:hover { text-decoration: none; }
.nav__logo img {
display: block;
height: 2.75rem;
width: auto;
}
@media (max-width: 860px) {
.nav__logo img { height: 2.35rem; }
}
.nav__menu {
display: flex;
align-items: center;
gap: 1.75rem;
}
/* Instagram icon next to the "Get in Touch" button */
.nav__social {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
opacity: 0.8;
transition: opacity 0.2s, transform 0.2s var(--ease), color 0.2s;
}
.nav__social:hover {
opacity: 1;
color: var(--orange);
transform: translateY(-2px);
text-decoration: none;
}
.nav__links {
display: flex;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
position: relative;
color: var(--charcoal);
font-weight: 600;
padding-block: 0.4rem;
}
.nav__links a:hover { color: var(--ink); text-decoration: none; }
/* Spectrum underline for the active link (signature motif, small dose) */
.nav__links a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
border-radius: 3px;
background: var(--spectrum);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { transform: scaleX(1); }
/* Hamburger toggle — hidden on desktop */
.nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: transparent;
border: none;
cursor: pointer;
z-index: 60;
}
.nav__toggle span {
display: block;
height: 2px;
width: 24px;
background: var(--charcoal);
border-radius: 2px;
transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
/* Animate hamburger into an X when open */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ==================== FOOTER ==================== */
.site-footer {
background: var(--charcoal);
color: var(--paper);
margin-top: 4rem;
}
/* Explicit 4-column layout (brand is wider, the two label-driven columns
are narrower) rather than auto-fit — keeps column widths predictable
and balanced instead of reflowing unpredictably at odd viewport widths.
Breakpoints live in the RESPONSIVE section at the end of this file. */
.footer__inner {
display: grid;
grid-template-columns: 1.3fr 0.85fr 1.3fr 0.85fr;
gap: clamp(2rem, 4vw, 3.5rem);
padding-block: clamp(3rem, 6vw, 4.5rem);
}
.site-footer p { color: var(--paper); opacity: 0.7; margin: 0; }
/* ---- Brand column ---- */
.footer__brand { max-width: 22rem; }
.footer__logo-img {
display: block;
height: 4.25rem;
width: auto;
margin-bottom: 1.1rem;
}
.footer__brand p { line-height: 1.6; }
/* Shared column heading style ("Quick Links" / "Contact" / "Follow Us" /
"Business Hours") — overrides the global (dark) heading color so it
reads white on the dark footer background. */
.footer__col h3,
.footer__contact h3 {
font-family: var(--font-body);
font-size: 1.02rem;
font-weight: 700;
color: var(--paper);
opacity: 1;
margin: 0 0 1.1rem;
}
.footer__contact h3.footer__subheading { margin: 1.75rem 0 1rem; }
/* ---- Quick Links ---- */
.footer__nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__nav a {
display: inline-flex;
color: var(--paper);
opacity: 0.72;
width: fit-content;
transition: opacity 0.2s, transform 0.2s var(--ease), color 0.2s;
}
.footer__nav a:hover {
opacity: 1;
color: var(--orange);
transform: translateX(3px);
text-decoration: none;
}
/* ---- Contact: icon + text rows. The "Email/Phone/Address/Hours" label
is kept for screen readers (.sr-only) but not shown visually — the
icon carries that meaning at a glance, which reads cleaner. ---- */
.footer__contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.footer__contact-list li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
color: var(--paper);
opacity: 0.75;
font-size: 0.95rem;
line-height: 1.55;
}
.footer__contact-list a { color: inherit; opacity: 1; transition: color 0.2s; }
.footer__contact-list a:hover { color: var(--orange); text-decoration: none; }
.footer__icon { flex: none; margin-top: 0.2rem; color: var(--paper); opacity: 0.55; }
/* align-items: flex-start keeps both address lines sized to their own
content (instead of stretching full-width, which would push the RTL
line to the right edge and leave an odd gap after it). */
.footer__addr { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.footer__addr-ar { font-family: 'Noto Sans Arabic', var(--font-body); }
/* ---- Follow Us: circular social badges (bordered, fill + lift on
hover) rather than bare glyphs — reads as a proper button target. ---- */
.footer__social { display: flex; gap: 0.85rem; }
.footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.18);
color: var(--paper);
opacity: 0.85;
transition: opacity 0.2s, transform 0.25s var(--ease), background 0.25s, border-color 0.25s;
}
.footer__social-link:hover {
opacity: 1;
background: color-mix(in srgb, var(--orange) 16%, transparent);
border-color: var(--orange);
transform: translateY(-3px);
}
.footer__social-link svg { display: block; }
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
text-align: center;
padding-block: 1.25rem;
}
.footer__bottom p { margin: 0; }
/* ==================== FLOATING WHATSAPP BUTTON ====================
Fixed bottom-right on every page. A soft green ring pulses outward on
loop (.whatsapp-float__ping) to draw the eye without being obnoxious —
pure CSS, runs continuously, respects prefers-reduced-motion. */
.whatsapp-float {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 60;
width: 3.5rem;
height: 3.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #25d366;
color: #fff;
box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5), var(--shadow-md);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.whatsapp-float:hover {
transform: translateY(-3px) scale(1.06);
box-shadow: 0 12px 28px rgba(37, 211, 102, 0.6), var(--shadow-lg);
text-decoration: none;
}
.whatsapp-float svg { position: relative; z-index: 1; display: block; }
.whatsapp-float__ping {
position: absolute;
inset: 0;
border-radius: 50%;
background: #25d366;
opacity: 0.6;
animation: whatsapp-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes whatsapp-ping {
0% { transform: scale(1); opacity: 0.55; }
75%, 100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-float__ping { animation: none; opacity: 0; }
}
@media (max-width: 620px) {
.whatsapp-float { right: 1.1rem; bottom: 1.1rem; width: 3.25rem; height: 3.25rem; }
.whatsapp-float svg { width: 27px; height: 27px; }
}
/* ==================== SCROLL-REVEAL (base state) ==================== */
/* CRITICAL: the hidden starting state is gated behind `html.js`,
which is added by an early inline