/** * Khokan's Moa — Heritage Theme Foundation * Base palette, typography, and global overrides for the redesign. * Activate by adding class="theme-khokans" to . */ /* ── Design tokens ───────────────────────────────────────────── */ :root { /* Brand red — matches logo (#d92027) */ --km-maroon: #d92027; --km-maroon-dark: #b9181e; --km-maroon-deep: #9a1419; --km-red: #d92027; /* Warm backgrounds */ --km-cream: #fdf9f0; --km-cream-warm: #fff9e3; --km-parchment: #f5edd8; --km-parchment-dark: #ede4c8; /* Gold accents (icons, secondary buttons, ornaments) */ --km-gold: #c9973a; --km-gold-light: #d4af37; --km-gold-btn: #d4a843; --km-gold-muted: #b8860b; /* Text & surfaces */ --km-brown: #4a3728; --km-brown-light: #6b5344; --km-brown-muted: #8a7568; --km-charcoal: #3b2314; --km-charcoal-light: #4d2f1c; --km-footer-brown: #3b2314; --km-white: #ffffff; /* Layout */ --km-radius-sm: 4px; --km-radius-md: 8px; --km-radius-lg: 12px; --km-shadow-soft: 0 4px 24px rgba(44, 36, 32, 0.08); --km-shadow-card: 0 2px 16px rgba(44, 36, 32, 0.06); --km-border: #e8dcc8; --km-border-gold: rgba(201, 151, 58, 0.35); /* Typography */ --km-font-display: "Playfair Display", "Lora", Georgia, serif; --km-font-body: "Lato", "Segoe UI", sans-serif; --km-font-accent: "Cormorant Garamond", "Lora", serif; /* Spacing scale */ --km-section-py: clamp(3.5rem, 6vw, 6rem); --km-container-max: 1200px; /* Smallest common phone CSS pixel width (iPhone SE / classic Androids) */ --km-screen-min: 320px; --km-page-gutter: clamp(0.75rem, 3.5vw, 1.5rem); --km-sticky-toolbar-h: 0px; } /* Map legacy theme variables → heritage palette */ .theme-khokans { --theme-color: var(--km-maroon); --theme-color2: var(--km-maroon-dark); --theme-color3: var(--km-gold); --theme-color4: var(--km-parchment); --secondary-color: var(--km-gold); --secondary-color2: var(--km-gold-btn); --yellow-color: var(--km-gold-light); --black-color: var(--km-brown); --dark-color: var(--km-charcoal); --text-gray-color: var(--km-brown-light); --bg-gray-color: var(--km-cream); --gray-color: var(--km-cream); --gray-color2: var(--km-parchment); --border-color: var(--km-border); --border-color2: var(--km-border); --white-color: var(--km-white); --font-lora: var(--km-font-display); --headings-weight: 600; } /* ── Base page ───────────────────────────────────────────────── */ .theme-khokans { color: var(--km-brown); background-color: var(--km-cream); } .theme-khokans .main__content_wrapper { background-color: var(--km-cream); } /* ── Typography ────────────────────────────────────────────────── */ .theme-khokans h1, .theme-khokans h2, .theme-khokans h3, .theme-khokans h4, .theme-khokans h5, .theme-khokans h6, .theme-khokans .h1, .theme-khokans .h2, .theme-khokans .h3, .theme-khokans .h4, .theme-khokans .h5, .theme-khokans .h6, .theme-khokans .section__heading--maintitle { font-family: var(--km-font-display); color: var(--km-brown); font-weight: 600; letter-spacing: 0.01em; } .theme-khokans .section__heading--subtitle { font-family: var(--km-font-body); color: var(--km-gold-muted); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .theme-khokans p:not(.km-header__tagline), .theme-khokans .section__heading--desc { color: var(--km-brown-light); line-height: 1.75; } /* Top navbar bar — must beat global paragraph color */ .theme-khokans .km-header__topbar, .theme-khokans .km-header__topbar .km-header__tagline, .theme-khokans .km-header__topbar-links, .theme-khokans .km-header__topbar-links a, .theme-khokans .km-header__topbar-sep { color: #ffffff !important; } .theme-khokans .km-header__topbar-links a:hover { color: #ffffff !important; opacity: 0.85; } /* ── Brand color utilities ─────────────────────────────────────── */ .theme-khokans .bg__primary, .theme-khokans .bg__secondary, .theme-khokans .header__topbar.bg__primary, .theme-khokans .header__bottom.bg__secondary { background: var(--km-maroon) !important; background-image: none !important; } .theme-khokans .km-bg-cream { background-color: var(--km-cream); } .theme-khokans .km-bg-parchment { background-color: var(--km-parchment); } .theme-khokans .km-bg-maroon { background-color: var(--km-maroon); color: var(--km-white); } .theme-khokans .km-bg-charcoal { background-color: var(--km-charcoal); color: var(--km-white); } .theme-khokans .text__primary { color: var(--km-gold); } .theme-khokans .text__secondary { color: var(--km-maroon); } /* ── Buttons → see buttons-khokans.css ─────────────────────────── */ /* ── Header (base pass — detailed layout in next phase) ────────── */ .theme-khokans .header__topbar { font-size: 1.3rem; color: #ffffff; } .theme-khokans .header__topbar .header__shipping--text, .theme-khokans .header__topbar p, .theme-khokans .header__topbar a { color: #ffffff !important; } .theme-khokans .header__topbar a:hover { color: #ffffff !important; opacity: 0.85; } .theme-khokans .main__header { background-color: var(--km-white); box-shadow: var(--km-shadow-soft); } .theme-khokans .header__menu--link { color: var(--km-brown); font-weight: 500; } .theme-khokans .header__menu--link:hover { color: var(--km-maroon); } .theme-khokans .header__bottom .header__menu--link { color: var(--km-white); } .theme-khokans .header__account--btn { color: var(--km-brown); } .theme-khokans .items__count { background-color: var(--km-maroon); } .theme-khokans .header__search--button.bg__secondary { background: var(--km-maroon) !important; } /* ── Footer (base pass) ───────────────────────────────────────── */ .theme-khokans .footer__section.bg__black99, .theme-khokans .footer__section3 { background-color: var(--km-footer-brown) !important; } .theme-khokans .footer__widget--title { font-family: var(--km-font-display); color: var(--km-cream) !important; } /* Heritage footer — override global h3/p/link colors on dark background */ .theme-khokans .km-footer { color: rgba(255, 255, 255, 0.88); } .theme-khokans .km-footer h3, .theme-khokans .km-footer .km-footer__heading { color: var(--km-cream) !important; } .theme-khokans .km-footer p, .theme-khokans .km-footer .km-footer__about, .theme-khokans .km-footer .km-footer__copyright, .theme-khokans .km-footer .km-footer__credit { color: rgba(255, 255, 255, 0.78) !important; } .theme-khokans .km-footer .km-footer__copyright, .theme-khokans .km-footer .km-footer__credit { color: rgba(255, 255, 255, 0.72) !important; } .theme-khokans .km-footer .km-footer__links a, .theme-khokans .km-footer .km-footer__contact a, .theme-khokans .km-footer .km-footer__contact li { color: rgba(255, 255, 255, 0.82) !important; } .theme-khokans .km-footer .km-footer__contact-number { color: rgba(255, 255, 255, 0.82) !important; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .theme-khokans .km-footer .km-footer__copyright a, .theme-khokans .km-footer .km-footer__copyright a:hover { color: rgba(255, 255, 255, 0.72) !important; } .theme-khokans .km-footer .km-footer__links a:hover, .theme-khokans .km-footer .km-footer__contact a:hover, .theme-khokans .km-footer .km-footer__contact-number:hover { color: var(--km-gold-light) !important; } .theme-khokans .km-footer .km-footer__contact svg { color: var(--km-gold-light) !important; opacity: 1; } /* Newsletter — override global h2/p colors on maroon background */ .theme-khokans .km-newsletter .km-newsletter__content h2 { color: var(--km-cream) !important; } .theme-khokans .km-newsletter .km-newsletter__content p { color: rgba(253, 249, 240, 0.9) !important; } .theme-khokans .km-footer .km-footer__social a { color: var(--km-gold-light) !important; border-color: rgba(255, 255, 255, 0.35); } /* ── Product cards (base pass) ─────────────────────────────────── */ .theme-khokans .product__items { background-color: var(--km-white); border: 1px solid var(--km-border); border-radius: var(--km-radius-md); box-shadow: var(--km-shadow-card); } .theme-khokans .product__items--content__title a { font-family: var(--km-font-display); color: var(--km-brown); } .theme-khokans .current__price, .theme-khokans .cart__price, .theme-khokans .km-product-card__price, .theme-khokans .km-product-card__price-current, .theme-khokans p.km-shop-card__price, .theme-khokans .km-shop-card__price, .theme-khokans .product__details--info__price .current__price, .theme-khokans .order__summary--final__price { color: var(--km-maroon); } .theme-khokans .current__price { font-weight: 700; } .theme-khokans .km-contact-trust__text strong, .theme-khokans .km-shop-trust__text strong, .theme-khokans .km-feature-card__title { font-family: var(--km-font-display); font-size: 16px; font-weight: 700; color: var(--km-charcoal); } .theme-khokans .km-contact-trust__text span, .theme-khokans .km-shop-trust__text span, .theme-khokans p.km-feature-card__desc { font-size: 15px; line-height: 1.55; color: var(--km-brown-light); } /* Delivery note under Authentic / No Preservatives / Packaging / Delivery strip */ .theme-khokans .km-trust-delivery { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; text-align: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px dashed #d9cdb8; } .theme-khokans .km-trust-delivery__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: auto; height: auto; border: none; border-radius: 0; background: none; color: #c38044; } .theme-khokans .km-trust-delivery__icon svg { width: 28px; height: 28px; display: block; } .theme-khokans .km-trust-delivery__copy { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .theme-khokans .km-trust-delivery__text { margin: 0; font-family: var(--km-font-display); font-size: clamp(15px, 1.8vw, 18px); font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; color: var(--km-charcoal) !important; } .theme-khokans .km-trust-delivery__text--sub { font-size: clamp(13px, 1.5vw, 15px); font-weight: 600; color: var(--km-brown-light) !important; } .theme-khokans .km-order-policy { list-style: none; margin: 0 0 1.25rem; padding: 0.9rem 1rem; border: 1px dashed #d9cdb8; border-radius: 10px; background: #fdf9f0; } .theme-khokans .km-order-policy li { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 14px; line-height: 1.45; color: var(--km-charcoal); } .theme-khokans .km-order-policy li + li { margin-top: 0.45rem; } .theme-khokans .km-order-policy a { color: #c38044; text-decoration: underline; } .theme-khokans .cart__summary .km-order-policy, .theme-khokans .checkout__checkbox .km-order-policy, .theme-khokans .checkout__content--step .km-order-policy { margin-top: 0.75rem; } @media (max-width: 575px) { .theme-khokans .km-trust-delivery { gap: 0.55rem; } .theme-khokans .km-trust-delivery__text { font-size: 14px; max-width: 20rem; } } .theme-khokans .product__badge--items { display: inline-flex; align-items: center; justify-content: center; height: auto; line-height: 1; padding: 0.35rem 0.7rem; font-family: var(--km-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--km-white); border-radius: 4px; box-shadow: 0 1px 4px rgba(59, 35, 20, 0.15); } .theme-khokans .product__badge--items.sale { background-color: var(--km-maroon); } /* ── Sections ────────────────────────────────────────────────── */ .theme-khokans .section--padding { padding-top: var(--km-section-py); padding-bottom: var(--km-section-py); } .theme-khokans .testimonial__bg, .theme-khokans .banner__bg, .theme-khokans .deals__banner--section.banner__bg { background-color: var(--km-parchment); } .theme-khokans .product__bg { background-color: var(--km-white); } /* ── Scrollbar ─────────────────────────────────────────────────── */ .theme-khokans ::-webkit-scrollbar-thumb { background: var(--km-maroon); } /* ── Decorative helpers (for upcoming hero / section work) ─────── */ .theme-khokans .km-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; } .theme-khokans .km-divider::before, .theme-khokans .km-divider::after { content: ""; flex: 1; max-width: 80px; height: 1px; background: var(--km-border-gold); } .theme-khokans .km-divider-icon { color: var(--km-gold); font-size: 1.4rem; } /* ═══════════════════════════════════════════════════════════════ Global responsiveness — floor at 320px, prevent horizontal scroll ═══════════════════════════════════════════════════════════════ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body.theme-khokans { max-width: 100%; } body.theme-khokans { /* Site may shrink with the device; below 320px allow page-level scroll only */ min-width: var(--km-screen-min); width: 100%; overflow-x: hidden; padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } @media (max-width: 991px) { body.theme-khokans { --km-sticky-toolbar-h: calc(6.4rem + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(var(--km-sticky-toolbar-h) + 0.75rem); } } .theme-khokans .main__content_wrapper, .theme-khokans .km-header, .theme-khokans .km-footer, .theme-khokans .km-newsletter, .theme-khokans section { max-width: 100%; } .theme-khokans img, .theme-khokans video, .theme-khokans canvas, .theme-khokans svg, .theme-khokans embed, .theme-khokans object { max-width: 100%; height: auto; } .theme-khokans iframe { max-width: 100%; } .theme-khokans .container, .theme-khokans .container-fluid { width: 100%; max-width: 100%; box-sizing: border-box; padding-left: var(--km-page-gutter); padding-right: var(--km-page-gutter); } @media (min-width: 576px) { .theme-khokans .container { max-width: 576px; } } @media (min-width: 768px) { .theme-khokans .container { max-width: 768px; } } @media (min-width: 992px) { .theme-khokans .container { max-width: 960px; } } @media (min-width: 1200px) { .theme-khokans .container { max-width: 1200px; } } /* Fluid images in fixed-aspect wrappers keep height from aspect-ratio */ .theme-khokans .km-shop-card__img, .theme-khokans .km-product-card__img, .theme-khokans .km-home-blog-card__img-wrap img, .theme-khokans .product__items--img { height: 100%; width: 100%; max-width: none; object-fit: cover; } .theme-khokans .row { --bs-gutter-x: clamp(1rem, 3vw, 3rem); margin-left: calc(var(--bs-gutter-x) * -0.5); margin-right: calc(var(--bs-gutter-x) * -0.5); max-width: none; } .theme-khokans .row > * { min-width: 0; max-width: 100%; padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); } /* Wide tables (cart, orders, wishlist) scroll inside the viewport */ .theme-khokans table { max-width: 100%; } .theme-khokans .cart__table, .theme-khokans .wishlist__table, .theme-khokans .account__table, .theme-khokans .tablecss, .theme-khokans .cart__section table, .theme-khokans .wishlist__section table, .theme-khokans .order__table, .theme-khokans .checkout__order--table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .theme-khokans .cart__table table, .theme-khokans .wishlist__table table, .theme-khokans .account__table table { display: table; width: 100%; min-width: 32rem; } /* Dashboard is the table itself, not a wrapper */ .theme-khokans table.account__table { min-width: 0; width: 100%; } /* Checkout line items are narrow; don't force 32rem horizontal scroll */ .theme-khokans .checkout__product--table.cart__table { overflow-x: visible; } .theme-khokans .checkout__product--table table, .theme-khokans .checkout__product--table .cart__table--inner { min-width: 0; width: 100%; } /* Sticky mobile bottom navbar — brand tab bar */ @media (max-width: 991px) { :root { --km-sticky-toolbar-h: 6.4rem; } body.theme-khokans { --km-sticky-toolbar-h: calc(6.4rem + env(safe-area-inset-bottom, 0px)); } .theme-khokans .offcanvas__stikcy--toolbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; max-width: 100%; height: auto; min-height: var(--km-sticky-toolbar-h); margin: 0; padding: 0.45rem 0.4rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; overflow: visible; background: rgba(253, 249, 240, 0.96); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-top: 1px solid #e6dfd1; box-shadow: 0 -6px 24px rgba(59, 35, 20, 0.08); } .theme-khokans .offcanvas__stikcy--toolbar__list-wrap, .theme-khokans .offcanvas__stikcy--toolbar > ul { display: flex; align-items: stretch; justify-content: space-between; width: 100%; margin: 0; padding: 0; list-style: none; gap: 0; } .theme-khokans .offcanvas__stikcy--toolbar__list { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; } .theme-khokans .offcanvas__stikcy--toolbar__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.25rem; width: 100%; min-height: 4.6rem; padding: 0.25rem 0.15rem 0.15rem; text-align: center; text-decoration: none; color: var(--km-brown-light); border-radius: 10px; overflow: visible; transition: color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } /* Allow badge hit-testing inside the button (legacy CSS set children to none) */ .theme-khokans .offcanvas__stikcy--toolbar__btn > * { pointer-events: none; } .theme-khokans .offcanvas__stikcy--toolbar__btn:hover, .theme-khokans .offcanvas__stikcy--toolbar__btn:focus-visible { color: var(--km-maroon); background: rgba(217, 32, 39, 0.06); outline: none; } .theme-khokans .offcanvas__stikcy--toolbar__btn.km-header__nav-link--active { color: var(--km-maroon); } .theme-khokans .offcanvas__stikcy--toolbar__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; min-height: 2.4rem; margin: 0; line-height: 1; flex-shrink: 0; overflow: hidden; border-radius: 999px; background: rgba(230, 223, 209, 0.55); color: inherit; border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-khokans .offcanvas__stikcy--toolbar__icon svg { width: 1.15rem; height: 1.15rem; max-width: none; display: block; flex-shrink: 0; } .theme-khokans .offcanvas__stikcy--toolbar__btn:hover .offcanvas__stikcy--toolbar__icon, .theme-khokans .offcanvas__stikcy--toolbar__btn:focus-visible .offcanvas__stikcy--toolbar__icon { background: rgba(217, 32, 39, 0.12); color: var(--km-maroon); border-color: rgba(217, 32, 39, 0.18); } .theme-khokans .offcanvas__stikcy--toolbar__btn.km-header__nav-link--active .offcanvas__stikcy--toolbar__icon { background: var(--km-maroon); color: #fff; border-color: var(--km-maroon); box-shadow: 0 4px 12px rgba(217, 32, 39, 0.28); } .theme-khokans .offcanvas__stikcy--toolbar__label { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0 0.1rem 0.05rem; font-family: var(--km-font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; overflow: visible; color: inherit; } .theme-khokans .offcanvas__stikcy--toolbar__btn.km-header__nav-link--active .offcanvas__stikcy--toolbar__label { color: var(--km-maroon); font-weight: 700; } .theme-khokans .offcanvas__stikcy--toolbar .items__count { position: absolute; top: 0.15rem; right: calc(50% - 1.55rem); min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; margin: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; line-height: 1; color: #fff; background: var(--km-maroon); border: 2px solid #fdf9f0; border-radius: 999px; box-shadow: 0 1px 4px rgba(59, 35, 20, 0.15); z-index: 2; } } @media (max-width: 360px) { .theme-khokans .offcanvas__stikcy--toolbar { padding-left: 0.2rem; padding-right: 0.2rem; } .theme-khokans .offcanvas__stikcy--toolbar__label { font-size: 0.9rem; } .theme-khokans .offcanvas__stikcy--toolbar__icon { width: 2.2rem; height: 2.2rem; } .theme-khokans .offcanvas__stikcy--toolbar__icon svg { width: 1.05rem; height: 1.05rem; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media (max-width: 991px) { .theme-khokans .offcanvas__stikcy--toolbar { background: #fdf9f0; } } } /* Forms / buttons never force overflow */ .theme-khokans input, .theme-khokans select, .theme-khokans textarea, .theme-khokans button, .theme-khokans .btn { max-width: 100%; } .theme-khokans .product__details--info, .theme-khokans .product__details--tab__inner, .theme-khokans .login__section--inner, .theme-khokans .account__login { box-sizing: border-box; max-width: 100%; } @media (max-width: 991px) { .theme-khokans #scroll__top { right: 1.25rem; bottom: calc(var(--km-sticky-toolbar-h) + 1.25rem); width: 3.8rem; height: 3.8rem; } .theme-khokans .whatsapp-cust-care { right: 1.25rem; bottom: calc(var(--km-sticky-toolbar-h) + 5.4rem); } .theme-khokans .whatsapp-cust-care img { height: 3.8rem; } } @media (max-width: 575px) { :root { --km-section-py: clamp(2.5rem, 8vw, 3.5rem); } .theme-khokans .section--padding { padding-top: var(--km-section-py); padding-bottom: var(--km-section-py); } .theme-khokans .breadcrumb__bg { min-height: 0; padding: 2.25rem 0 1.75rem; } .theme-khokans #scroll__top { right: 1rem; bottom: calc(var(--km-sticky-toolbar-h) + 1.1rem); width: 3.6rem; height: 3.6rem; } .theme-khokans .whatsapp-cust-care { right: 1rem; bottom: calc(var(--km-sticky-toolbar-h) + 5.2rem); } .theme-khokans .whatsapp-cust-care img { height: 3.6rem; } } @media (max-width: 360px) { .theme-khokans .btn { padding-left: 1.1rem; padding-right: 1.1rem; letter-spacing: 0.06em; font-size: 1.15rem; } }