/* ==============================================
OHMY CONCEPTS — CUSTOM CSS
Editorial Minimal Direction
Drop into: Appearance → Customize → Additional CSS
OR: Elementor → Site Settings → Custom CSS
============================================== */
/* --- GOOGLE FONTS IMPORT (add to theme head or use @import) ---
Add this line at the very top of Additional CSS:
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');
/* ============================================
1. ROOT TOKENS
============================================ */
:root {
--ohmy-black: #0a0a0a;
--ohmy-white: #fafaf8;
--ohmy-cream: #f4f1ec;
--ohmy-stone: #e8e4dd;
--ohmy-warm-gray: #9b9690;
--ohmy-text: #1a1916;
--ohmy-text-muted:#6b6760;
--ohmy-accent: #c8a96e; /* warm gold — use sparingly */
--ohmy-font-display: 'Cormorant Garamond', Georgia, serif;
--ohmy-font-body: 'DM Sans', system-ui, sans-serif;
--ohmy-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ohmy-transition: 0.35s var(--ohmy-easing);
}
/* ============================================
2. BASE RESET & BODY
============================================ */
body {
background-color: var(--ohmy-white) !important;
color: var(--ohmy-text) !important;
font-family: var(--ohmy-font-body) !important;
font-weight: 300 !important;
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* ============================================
3. TYPOGRAPHY SCALE
============================================ */
/* Display headings — Cormorant Garamond */
h1, h2, h3,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
font-family: var(--ohmy-font-display) !important;
font-weight: 400 !important;
color: var(--ohmy-text) !important;
line-height: 1.1 !important;
letter-spacing: -0.01em;
}
h4, h5, h6 {
font-family: var(--ohmy-font-body) !important;
font-weight: 500 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.7rem !important;
color: var(--ohmy-text-muted) !important;
}
p,
.elementor-widget-text-editor p,
.elementor-text-editor {
font-family: var(--ohmy-font-body) !important;
font-weight: 300 !important;
color: var(--ohmy-text-muted) !important;
line-height: 1.75 !important;
font-size: 0.95rem !important;
}
/* ============================================
4. NAVIGATION
============================================ */
/* Navbar wrapper */
#site-header,
.site-header,
header.header,
.elementor-section.header-section,
nav.elementor-nav-menu,
.e-n-menu {
background: var(--ohmy-white) !important;
border-bottom: 1px solid var(--ohmy-stone) !important;
box-shadow: none !important;
}
/* Nav links */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item,
.e-n-menu-item,
header a,
#site-navigation a {
font-family: var(--ohmy-font-body) !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--ohmy-text) !important;
text-decoration: none !important;
transition: color var(--ohmy-transition) !important;
}
.elementor-nav-menu a:hover,
.e-n-menu-item:hover {
color: var(--ohmy-accent) !important;
}
/* Logo sizing */
header .elementor-widget-image img,
.site-header .elementor-widget-image img {
max-height: 36px !important;
width: auto !important;
}
/* Cart icon */
.elementor-menu-cart__toggle,
.wc-cart-count {
font-family: var(--ohmy-font-body) !important;
font-size: 0.7rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ============================================
5. HERO SECTION
============================================ */
/* The hero container */
.elementor-section:first-of-type .elementor-container,
section.hero,
[class*="hero"] .elementor-container {
min-height: 88vh;
}
/* Hero image — polished framing */
.elementor-section:first-of-type img,
.hero img {
object-fit: cover;
width: 100%;
}
/* Hero headline (h2) */
.elementor-section:first-of-type h2,
.elementor-section:first-of-type .elementor-heading-title {
font-size: clamp(2.6rem, 5.5vw, 5.5rem) !important;
font-weight: 300 !important;
font-family: var(--ohmy-font-display) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
color: var(--ohmy-text) !important;
}
/* Hero sub-tagline (h3 / smaller heading) */
.elementor-section:first-of-type h3 {
font-family: var(--ohmy-font-body) !important;
font-size: 0.65rem !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--ohmy-text-muted) !important;
margin-bottom: 1.5rem !important;
}
/* ============================================
6. BUTTONS
============================================ */
/* Primary CTA — "Shop Perfumes / Shop Vapes" */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button,
.woocommerce-page a.button,
.wc-block-components-button,
input[type="submit"],
button.button {
font-family: var(--ohmy-font-body) !important;
font-size: 0.65rem !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
padding: 0.85rem 2.2rem !important;
border: 1px solid var(--ohmy-text) !important;
background: transparent !important;
color: var(--ohmy-text) !important;
transition: background var(--ohmy-transition), color var(--ohmy-transition) !important;
text-decoration: none !important;
display: inline-block;
cursor: pointer;
}
.elementor-button:hover,
a.elementor-button:hover,
button.button:hover,
input[type="submit"]:hover {
background: var(--ohmy-text) !important;
color: var(--ohmy-white) !important;
}
/* "Shop Now" link-style buttons in featured section */
.elementor-button.elementor-size-xs,
.elementor-button-link {
padding: 0 !important;
border: none !important;
background: transparent !important;
color: var(--ohmy-text) !important;
font-size: 0.65rem !important;
letter-spacing: 0.15em;
text-transform: uppercase;
border-bottom: 1px solid var(--ohmy-text) !important;
border-radius: 0 !important;
padding-bottom: 2px !important;
transition: color var(--ohmy-transition), border-color var(--ohmy-transition) !important;
}
.elementor-button.elementor-size-xs:hover {
color: var(--ohmy-accent) !important;
border-color: var(--ohmy-accent) !important;
background: transparent !important;
}
/* ============================================
7. SECTION LABELS / EYEBROWS
============================================ */
/* Section eyebrow labels — e.g. "Featured Purchases", "Best Selling" */
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
font-family: var(--ohmy-font-body) !important;
font-size: 0.62rem !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--ohmy-text-muted) !important;
margin-bottom: 0.5rem !important;
}
/* ============================================
8. FEATURED / EDITORIAL PRODUCT SECTION
============================================ */
/* The "Featured Purchases" area — cream background strip */
.elementor-section.featured-section,
[data-id*="featured"] .elementor-section {
background-color: var(--ohmy-cream) !important;
}
/* Product editorial cards (Franck Olivier, Afnan, Suave) */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-image-box {
background: transparent !important;
border: none !important;
padding: 1.5rem 0 !important;
}
.elementor-image-box-title {
font-family: var(--ohmy-font-display) !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
color: var(--ohmy-text) !important;
margin-bottom: 0.6rem !important;
line-height: 1.2 !important;
}
.elementor-image-box-description {
font-family: var(--ohmy-font-body) !important;
font-size: 0.87rem !important;
font-weight: 300 !important;
color: var(--ohmy-text-muted) !important;
line-height: 1.7 !important;
max-width: 28ch;
}
/* Image hover lift */
.elementor-widget-image img,
.elementor-image-box-img img,
.woocommerce ul.products li.product img {
transition: transform 0.5s var(--ohmy-easing), opacity 0.4s var(--ohmy-easing) !important;
}
.elementor-widget-image:hover img,
.elementor-image-box-img:hover img,
.woocommerce ul.products li.product:hover img {
transform: scale(1.03) translateY(-4px) !important;
opacity: 0.92 !important;
}
/* ============================================
9. WOOCOMMERCE PRODUCT CARDS
============================================ */
/* Grid products list */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 2px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Individual product card */
.woocommerce ul.products li.product,
.wc-block-grid__product {
background: var(--ohmy-white) !important;
border: none !important;
border-radius: 0 !important;
padding: 1.5rem 1.25rem 1.75rem !important;
overflow: hidden !important;
position: relative !important;
transition: background var(--ohmy-transition) !important;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
background: var(--ohmy-cream) !important;
}
/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.wc-block-grid__product-image img {
border-radius: 0 !important;
margin-bottom: 1rem !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
width: 100% !important;
background: var(--ohmy-cream) !important;
padding: 1rem !important;
}
/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
font-family: var(--ohmy-font-display) !important;
font-size: 1.05rem !important;
font-weight: 400 !important;
color: var(--ohmy-text) !important;
line-height: 1.3 !important;
margin-bottom: 0.4rem !important;
letter-spacing: -0.01em !important;
}
/* Price */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price .price {
font-family: var(--ohmy-font-body) !important;
font-size: 0.8rem !important;
font-weight: 400 !important;
color: var(--ohmy-text-muted) !important;
letter-spacing: 0.04em !important;
}
/* Sale badge */
.woocommerce span.onsale {
background: var(--ohmy-text) !important;
color: var(--ohmy-white) !important;
border-radius: 0 !important;
font-family: var(--ohmy-font-body) !important;
font-size: 0.55rem !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 0.35rem 0.6rem !important;
min-height: unset !important;
min-width: unset !important;
}
/* Add to cart button in product grid */
.woocommerce ul.products li.product .add_to_cart_button,
.wc-block-grid__product .wp-block-button__link {
font-family: var(--ohmy-font-body) !important;
font-size: 0.6rem !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
background: transparent !important;
color: var(--ohmy-text-muted) !important;
border: 1px solid var(--ohmy-stone) !important;
border-radius: 0 !important;
padding: 0.6rem 1rem !important;
transition: all var(--ohmy-transition) !important;
margin-top: 0.75rem !important;
display: block !important;
text-align: center !important;
width: 100% !important;
}
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--ohmy-text) !important;
color: var(--ohmy-white) !important;
border-color: var(--ohmy-text) !important;
}
/* Section headings for product grids */
.woocommerce .products ~ h2,
.elementor-widget-woocommerce-product-categories h2,
section h2.woocommerce-loop-product__title {
font-family: var(--ohmy-font-display) !important;
font-size: clamp(1.8rem, 3vw, 3rem) !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
}
/* ============================================
10. DELIVERY BANNER / MARQUEE STRIP
============================================ */
/* "Same-day delivery across Lagos" strip */
.elementor-section.delivery-strip,
[class*="delivery"] {
background: var(--ohmy-text) !important;
padding: 0.9rem 0 !important;
}
.elementor-section.delivery-strip *,
[class*="delivery"] * {
color: var(--ohmy-white) !important;
font-family: var(--ohmy-font-body) !important;
font-size: 0.65rem !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
}
/* ============================================
11. SECTION DIVIDERS & SPACING
============================================ */
/* Thin rule between sections */
.elementor-section + .elementor-section {
border-top: 1px solid transparent;
}
/* Remove Elementor default section padding bloat */
.elementor-section > .elementor-container {
max-width: 1320px !important;
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
/* ============================================
12. FOOTER
============================================ */
footer,
#colophon,
.site-footer,
.elementor-location-footer {
background: var(--ohmy-text) !important;
color: var(--ohmy-white) !important;
border-top: none !important;
}
footer *,
.site-footer * {
font-family: var(--ohmy-font-body) !important;
}
footer a,
.site-footer a {
color: var(--ohmy-warm-gray) !important;
font-size: 0.7rem !important;
letter-spacing: 0.08em;
text-decoration: none !important;
transition: color var(--ohmy-transition) !important;
}
footer a:hover,
.site-footer a:hover {
color: var(--ohmy-white) !important;
}
footer .elementor-heading-title,
.site-footer h3,
.site-footer h4 {
font-family: var(--ohmy-font-display) !important;
color: var(--ohmy-white) !important;
font-size: 1.2rem !important;
font-weight: 400 !important;
}
footer p,
.site-footer p {
color: var(--ohmy-warm-gray) !important;
font-size: 0.78rem !important;
line-height: 1.8 !important;
}
/* ============================================
13. SEARCH BAR
============================================ */
.elementor-search-form__input,
input[type="search"],
.wp-block-search__input {
font-family: var(--ohmy-font-body) !important;
font-size: 0.8rem !important;
font-weight: 300 !important;
border: none !important;
border-bottom: 1px solid var(--ohmy-stone) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0.6rem 0 !important;
letter-spacing: 0.04em !important;
color: var(--ohmy-text) !important;
outline: none !important;
}
.elementor-search-form__input:focus,
input[type="search"]:focus {
border-color: var(--ohmy-text) !important;
box-shadow: none !important;
}
/* ============================================
14. WOOCOMMERCE CART & NOTICES
============================================ */
.woocommerce-message,
.woocommerce-info {
border-top-color: var(--ohmy-text) !important;
background: var(--ohmy-cream) !important;
font-family: var(--ohmy-font-body) !important;
font-size: 0.82rem !important;
border-radius: 0 !important;
}
.woocommerce-error {
border-top-color: #c0392b !important;
background: #fdf0ee !important;
font-family: var(--ohmy-font-body) !important;
font-size: 0.82rem !important;
border-radius: 0 !important;
}
/* ============================================
15. RESPONSIVE — MOBILE
============================================ */
@media (max-width: 768px) {
.elementor-section:first-of-type h2,
.elementor-section:first-of-type .elementor-heading-title {
font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
}
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1px !important;
}
.elementor-section > .elementor-container {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
.elementor-button,
a.elementor-button {
padding: 0.75rem 1.5rem !important;
}
}
@media (max-width: 480px) {
.woocommerce ul.products {
grid-template-columns: 1fr 1fr !important;
}
}
/* ============================================
16. SUBTLE FADE-IN ON SCROLL
Uses IntersectionObserver — add the JS below
============================================ */
.ohmy-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s var(--ohmy-easing), transform 0.7s var(--ohmy-easing);
}
.ohmy-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================
JS — SCROLL REVEAL
Add via Elementor Custom Code or a code block
(Appearance → Theme File Editor → functions.php
or Elementor → Tools → Custom Code)
============================================ */