/* ============================================================ IMPERIA design system — token foundation Source of truth: earthenstore-handoff / "Imperia Store.dc.html" Loaded LAST in so these tokens win the cascade. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { /* ---- brand / accent ---- */ --es-accent: #ffb400; /* golden amber — primary CTA / brand */ --es-accent-rgb: 255, 180, 0; --es-accent-soft: #fffdf5; /* gold hover background */ --es-accent-border: #e0d5b0; /* gold hover border on cards */ /* ---- ink / text ---- */ --es-ink: #151515; /* primary text + dark surfaces */ --es-ink-2: #2a2a2a; --es-muted: #666; --es-muted-2: #888; --es-muted-3: #999; --es-brand-label: #a39a85; /* uppercase product brand label */ /* ---- surfaces ---- */ --es-bg: #f4f4f4; /* page background */ --es-surface: #ffffff; /* cards / header / footer-top */ --es-dark: #151515; /* dark sections / footer */ /* ---- borders ---- */ --es-border: #e3e3e3; /* header / inputs */ --es-border-card: #ececec; /* cards */ --es-border-divider: #e6e6e6; /* section heading underline */ --es-border-inner: #f0f0f0; /* ---- semantic ---- */ --es-sale: #e02b1d; /* sale / discount red */ --es-rating-bg: #fbf6e6; --es-rating-fg: #8a7434; /* ---- placeholder swatch (image slots) ---- */ --es-ph-a: #f1efe8; --es-ph-b: #f7f6f0; --es-ph-label: #b6ad96; /* ---- radius ---- */ --es-radius-card: 13px; --es-radius-card-lg: 16px; --es-radius-btn: 9px; --es-radius-pill: 30px; --es-radius-sm: 6px; /* ---- shadow ---- */ --es-shadow-card: 0 12px 28px rgba(0, 0, 0, .10); --es-shadow-card-sm: 0 8px 20px rgba(0, 0, 0, .06); --es-shadow-header: 0 2px 14px rgba(0, 0, 0, .05); --es-shadow-panel: 0 22px 50px rgba(0, 0, 0, .16); /* ---- layout ---- */ --es-maxw: 1500px; --es-gutter: 22px; --es-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ---- remap Bootstrap primary -> Imperia accent (site-wide) ---- */ --bs-primary: var(--es-accent); --bs-primary-rgb: var(--es-accent-rgb); --primary-dark: var(--es-accent); --bs-link-color: var(--es-accent); --bs-link-color-rgb: var(--es-accent-rgb); --bs-link-hover-color: #e0a000; --bs-body-font-family: var(--es-font); } /* ---- base typography / surface ---- */ body, body.toolbar-enabled { font-family: var(--es-font) !important; background-color: var(--es-bg); color: var(--es-ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .btn, input, select, textarea, button, .form-control, .form-select { font-family: var(--es-font); } /* ---- accent-driven primitives ---- */ a { color: var(--es-accent); } a:hover { color: #e0a000; } .text-primary { color: var(--es-accent) !important; } .bg-primary { background-color: var(--es-accent) !important; } .border-primary { border-color: var(--es-accent) !important; } /* Primary buttons in the Imperia design are gold with DARK text */ .btn-primary { --bs-btn-bg: var(--es-accent); --bs-btn-border-color: var(--es-accent); --bs-btn-color: var(--es-ink); --bs-btn-hover-bg: #e8a600; --bs-btn-hover-border-color: #e8a600; --bs-btn-hover-color: var(--es-ink); --bs-btn-active-bg: #e8a600; --bs-btn-active-border-color: #e8a600; --bs-btn-active-color: var(--es-ink); --bs-btn-disabled-bg: var(--es-accent); --bs-btn-disabled-border-color: var(--es-accent); --bs-btn-disabled-color: var(--es-ink); border-radius: var(--es-radius-btn); font-weight: 600; } .btn { border-radius: var(--es-radius-btn); } /* "black pill" CTA used on product cards (Add to Cart) */ .es-btn-dark { background: var(--es-ink); border: 1.5px solid var(--es-ink); color: #fff; font-weight: 600; border-radius: var(--es-radius-btn); transition: .15s; } .es-btn-dark:hover { background: var(--es-accent); border-color: var(--es-accent); color: var(--es-ink); } /* ---- generic card softening toward the design ---- */ .card { border-radius: var(--es-radius-card); } /* ---- reusable helpers for the structural rebuilds ---- */ .es-wrap { max-width: var(--es-maxw); margin: 0 auto; padding-left: var(--es-gutter); padding-right: var(--es-gutter); } .es-sale { color: var(--es-sale) !important; } .es-ph { background: repeating-linear-gradient(45deg, var(--es-ph-a), var(--es-ph-a) 9px, var(--es-ph-b) 9px, var(--es-ph-b) 18px); } /* ============================================================ IMPERIA — global header (top utility bar + sticky header) ============================================================ */ .imp-wrap { max-width: var(--es-maxw); margin: 0 auto; padding-left: var(--es-gutter); padding-right: var(--es-gutter); } /* ---- top utility bar ---- */ .imp-header .imp-utility { height: 46px; background: #fff; border-bottom: 1px solid var(--es-border); position: relative; z-index: 60; font-size: 13px; color: #444; } .imp-utility-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; } .imp-utility-left { display: flex; align-items: center; gap: 22px; } .imp-utility-right { display: flex; align-items: center; gap: 22px; } .imp-util-pill { border: 1px solid #d8d8d8; border-radius: 5px; padding: 5px 12px; font-weight: 500; color: var(--es-ink) !important; text-decoration: none; white-space: nowrap; } .imp-util-pill:hover { border-color: var(--es-accent); color: var(--es-ink) !important; } .imp-util-link { color: #444 !important; text-decoration: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .imp-util-link:hover { color: var(--es-ink) !important; } .imp-util-ico { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .imp-app-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--es-ink); color: #fff !important; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--es-radius-sm); text-decoration: none; white-space: nowrap; } .imp-app-pill:hover { background: #000; color: #fff !important; } .imp-util-dd .dropdown-menu { font-size: 13px; } .imp-caret { font-size: 9px; color: #999; } /* ---- main sticky header ---- */ .imp-header .header-main.imp-main, .imp-header .header-main.love-sticky.imp-main, .imp-header .header-main.love-sticky.imp-main.sticky { position: sticky !important; top: 0 !important; left: 0; right: 0; width: 100%; background: #fff !important; border-bottom: 1px solid var(--es-border); box-shadow: var(--es-shadow-header) !important; z-index: 55; transform: none !important; padding: 0 !important; } .imp-main-row { height: 64px; gap: 8px; } .imp-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 14px; } .imp-logo img { height: 40px; width: auto; max-width: 190px; object-fit: contain; } /* mega-menu triggers */ .imp-mega { position: relative; height: 100%; display: flex; align-items: center; } .imp-mega-trigger { height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 14px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--es-ink); white-space: nowrap; } .imp-trigger-light { font-weight: 500; } .imp-mega-trigger:hover { color: var(--es-accent); } /* mega panels (hover) */ .imp-mega-panel { position: absolute; top: 100%; left: 0; width: 880px; background: #fff; border: 1px solid var(--es-border); border-radius: 0 0 14px 14px; box-shadow: var(--es-shadow-panel); padding: 24px 26px; z-index: 70; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s ease; } .imp-mega:hover .imp-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); } .imp-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 30px; } .imp-mega-col-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--es-ink) !important; margin-bottom: 11px; text-decoration: none; } .imp-mega-col-title i { color: var(--es-accent); width: 18px; text-align: center; } .imp-mega-col-title:hover { color: var(--es-accent) !important; } .imp-mega-sub { display: block; font-size: 12.5px; color: #666 !important; padding: 4px 0; text-decoration: none; } .imp-mega-sub:hover { color: var(--es-accent) !important; } .imp-mega-all { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--es-accent) !important; text-decoration: none; } /* brand panel */ .imp-brand-panel { width: 560px; } .imp-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .imp-brand-cell { border: 1px solid var(--es-border-card); border-radius: 9px; padding: 14px 10px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .3px; color: #3a3a3a !important; text-decoration: none; } .imp-brand-cell:hover { border-color: var(--es-accent); background: var(--es-accent-soft); color: var(--es-ink) !important; } /* today's deals link */ .imp-deals-link { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--es-sale) !important; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; } /* header search */ .imp-search-wrap { flex: 1; display: flex; justify-content: center; position: relative; min-width: 0; } .imp-search { display: flex; align-items: stretch; height: 42px; width: 100%; max-width: 520px; border: 2px solid var(--es-ink); border-radius: 9px; overflow: hidden; background: #fff; } .imp-search-cat { display: flex; align-items: stretch; } .imp-search-cat-btn { height: 100%; border: 0; border-right: 1px solid var(--es-border); background: #f7f7f7; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--es-ink); white-space: nowrap; } .imp-search-input { flex: 1; border: none !important; outline: none; padding: 0 14px; font-size: 13.5px; box-shadow: none !important; background: #fff; min-width: 0; } .imp-search-input:focus { box-shadow: none !important; border: none !important; } .imp-search-btn { flex-shrink: 0; width: 50px; border: none; background: var(--es-accent); color: var(--es-ink); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .imp-search-btn:hover { background: #e8a600; } .imp-search-wrap .search-result-box { max-width: 520px; left: 50% !important; transform: translateX(-50%); } /* right icons */ .imp-icons { display: flex; align-items: center; gap: 22px; flex-shrink: 0; } .imp-ico-link { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: #333 !important; text-decoration: none; position: relative; } .imp-ico-link i { font-size: 21px; } .imp-ico-label { font-size: 10.5px; font-weight: 500; } .imp-ico-link:hover { color: var(--es-ink) !important; } .imp-icons .count, .imp-cart .count { position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--es-sale); color: #fff; font-size: 11px; font-weight: 700; border-radius: 11px; display: flex; align-items: center; justify-content: center; line-height: 1; } .imp-cart > .dropdown > a { color: #333; display: flex; flex-direction: column; align-items: center; gap: 2px; } .imp-cart > .dropdown > a::after { content: 'Cart'; font-size: 10.5px; font-weight: 500; } .imp-cart .bi-bag::before { font-size: 21px; } /* mobile header row */ .imp-main-row-mobile .logo img { height: 38px; width: auto; max-width: 150px; object-fit: contain; } .imp-main-row-mobile .menu-btn { cursor: pointer; } @media (max-width: 1199.98px) { .imp-header .header-main.imp-main { box-shadow: var(--es-shadow-header) !important; } } /* ============================================================ IMPERIA — global footer (dark, 5-column) ============================================================ */ .imp-footer { background: var(--es-dark); color: #cfcfcf; padding: 48px 0 0; margin-top: 40px; } .imp-footer .imp-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .imp-footer-logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 16px; } .imp-footer-tagline { font-size: 13px; line-height: 1.6; color: #9a9a9a; max-width: 320px; margin: 0 0 12px; } .imp-footer-email { font-size: 13px; color: #cfcfcf !important; text-decoration: none; } .imp-footer-email:hover { color: var(--es-accent) !important; } .imp-socials { display: flex; gap: 12px; margin-top: 18px; } .imp-social { width: 38px; height: 38px; border-radius: 9px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #cfcfcf !important; text-decoration: none; } .imp-social:hover { background: var(--es-accent); color: var(--es-ink) !important; } .imp-store-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .imp-store-badges img { height: 38px; width: auto; } .imp-footer-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 15px; } .imp-footer-col { display: flex; flex-direction: column; } .imp-footer-link { font-size: 13px; color: #9a9a9a !important; padding: 5px 0; text-decoration: none; } .imp-footer-link:hover { color: var(--es-accent) !important; } .imp-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 22px 0; } .imp-footer-copy { font-size: 12.5px; color: #7c7c7c; } .imp-footer-policies { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; } .imp-footer-policies a { font-size: 12.5px; color: #9a9a9a !important; text-decoration: none; } .imp-footer-policies a:hover { color: var(--es-accent) !important; } .imp-pay-icons { display: flex; align-items: center; gap: 10px; color: #8a8a8a; font-size: 22px; } @media (max-width: 991.98px) { .imp-footer .imp-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .imp-footer-brand { grid-column: 1 / -1; } } @media (max-width: 575.98px) { .imp-footer .imp-footer-grid { grid-template-columns: 1fr 1fr; } .imp-footer-bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ IMPERIA — homepage ============================================================ */ .imp-home { padding-top: 30px; padding-bottom: 10px; } .imp-section { margin-bottom: 34px; } .imp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .imp-section-head--bordered { border-bottom: 1px solid var(--es-border-divider); padding-bottom: 12px; margin-bottom: 18px; } .imp-h2 { font-size: 21px; font-weight: 700; margin: 0; color: var(--es-ink); display: flex; align-items: center; } .imp-h2--light { color: #fff; } .imp-h2-ico { color: var(--es-accent); margin-right: 9px; } .imp-view-all { font-size: 12.5px; font-weight: 600; color: var(--es-accent) !important; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .imp-view-all--light { color: var(--es-accent) !important; } /* ---- HERO ---- */ .imp-hero { position: relative; width: 100%; height: 600px; overflow: hidden; background: #151515; } .imp-hero-slider, .imp-hero .swiper-wrapper, .imp-hero .swiper-slide { height: 100%; } .imp-hero-slide { display: block; width: 100%; height: 100%; } .imp-hero-slide img { width: 100%; height: 100%; object-fit: cover; } .imp-hero-fallback { background: radial-gradient(circle at 70% 30%, #3a3322, #151515); } .imp-hero-dots { position: absolute; bottom: 92px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 6; } .imp-hero-dots .swiper-pagination-bullet { width: 8px; height: 7px; border-radius: 5px; background: rgba(255,255,255,.5); opacity: 1; transition: .2s; } .imp-hero-dots .swiper-pagination-bullet-active { width: 26px; background: var(--es-accent); } .imp-hero-search-wrap { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: min(1080px, 92%); z-index: 25; } .imp-hero-search { display: flex; align-items: stretch; height: 56px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 16px 44px rgba(0,0,0,.34); border: 2px solid transparent; } .imp-hero-search:focus-within { border-color: var(--es-accent); } .imp-hero-search-input { flex: 1; border: none; outline: none; padding: 0 20px; font-size: 14.5px; color: var(--es-ink); } .imp-hero-search-btn { flex-shrink: 0; width: 64px; border: none; background: var(--es-accent); color: var(--es-ink); font-size: 18px; cursor: pointer; } .imp-hero-search-btn:hover { background: #e8a600; } /* ---- SELL STRIP ---- */ .imp-sell-strip { border-radius: 14px; background: linear-gradient(100deg,#0f1f2b,#14333f); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 36px; margin-bottom: 26px; } .imp-sell-left { display: flex; align-items: center; gap: 16px; } .imp-sell-left > i { font-size: 30px; color: var(--es-accent); } .imp-sell-title { font-size: 17px; font-weight: 700; color: #fff; } .imp-sell-sub { font-size: 13px; color: rgba(255,255,255,.65); } .imp-sell-btn { background: #fff; color: var(--es-ink) !important; font-size: 13px; font-weight: 600; padding: 11px 22px; border-radius: 8px; text-decoration: none; white-space: nowrap; } .imp-sell-btn:hover { background: var(--es-accent); } /* ---- USP STRIP ---- */ .imp-usps { background: #fff; border: 1px solid var(--es-border-card); border-radius: 14px; padding: 6px; display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 30px; } .imp-usp { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-right: 1px solid var(--es-border-inner); } .imp-usp:last-child { border-right: none; } .imp-usp > i { font-size: 26px; color: var(--es-accent); width: 30px; text-align: center; } .imp-usp-title { font-size: 14px; font-weight: 600; } .imp-usp-sub { font-size: 11.5px; color: var(--es-muted-2); } /* ---- CATEGORY CARDS (h-scroll) ---- */ .imp-cat-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; } .imp-cat-scroll::-webkit-scrollbar { height: 7px; } .imp-cat-scroll::-webkit-scrollbar-thumb { background: #d8d3c2; border-radius: 8px; } .imp-cat-card { flex: 0 0 168px; background: #fff; border: 1px solid var(--es-border-card); border-radius: 14px; padding: 0; overflow: hidden; text-decoration: none; color: var(--es-ink) !important; transition: .16s; } .imp-cat-card:hover { border-color: var(--es-accent); box-shadow: var(--es-shadow-card-sm); transform: translateY(-3px); } .imp-cat-thumb { height: 128px; border-radius: 0; background: var(--es-ph-a); display: block; overflow: hidden; margin-bottom: 0; } .imp-cat-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .imp-cat-name { font-size: 13.5px; font-weight: 600; text-align: center; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 10px 8px; line-height: 1.25; } /* ---- PRODUCT GRID + CARD ---- */ .imp-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; } .imp-card { background: #fff; border: 1px solid var(--es-border-card); border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; transition: .16s; } .imp-card:hover { box-shadow: var(--es-shadow-card); transform: translateY(-3px); border-color: var(--es-accent-border); } .imp-card-media { position: relative; height: 200px; background: #f8f6f1; display: block; cursor: pointer; padding: 0; overflow: hidden; } .imp-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; } .imp-card-badge { position: absolute; top: 10px; left: 10px; background: var(--es-sale); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .imp-card-wish { position: absolute; top: 9px; right: 9px; width: 33px; height: 33px; border-radius: 50%; background: #fff; border: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; text-decoration: none; } .imp-card-wish:hover, .imp-card-wish.wishlist_icon_active { color: var(--es-sale); } .imp-card-body { padding: 13px; display: flex; flex-direction: column; } .imp-card-brand { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--es-brand-label); font-weight: 600; } .imp-card-name { font-size: 13px; color: var(--es-ink-2) !important; line-height: 1.35; margin: 4px 0 8px; min-height: 36px; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .imp-card-name:hover { color: var(--es-accent) !important; } .imp-card-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .imp-rating-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--es-rating-bg); color: var(--es-rating-fg); font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; } .imp-rating-chip i { color: var(--es-accent); font-size: 10px; } .imp-rating-count { font-size: 11.5px; color: var(--es-muted-3); } .imp-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .imp-price-new { font-size: 17px; font-weight: 700; } .imp-price-old { font-size: 12px; color: #aaa; text-decoration: line-through; } .imp-price-off { font-size: 11.5px; color: var(--es-sale); font-weight: 700; } .imp-card-cta { margin-top: 11px; width: 100%; border: 1.5px solid var(--es-ink); background: var(--es-ink); color: #fff !important; font-size: 12.5px; font-weight: 600; padding: 9px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; transition: .15s; } .imp-card-cta:hover { background: var(--es-accent); border-color: var(--es-accent); color: var(--es-ink) !important; } /* ---- DEAL (dark) ---- */ .imp-deal-wrap { background: linear-gradient(120deg,#1a1a1a,#2b2417); border-radius: 16px; padding: 22px; margin-bottom: 30px; } .imp-deal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .imp-deal-head-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .imp-countdown { display: flex; align-items: center; gap: 8px; color: #fff; } .imp-countdown-label { font-size: 12px; opacity: .85; } .imp-countdown-timer { display: flex; align-items: center; gap: 6px; } .imp-countdown-timer > div { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); padding: 4px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; min-width: 34px; text-align: center; } /* ---- PROMO BANNER ---- */ .imp-promo-banner { display: block; border-radius: 16px; overflow: hidden; margin-bottom: 30px; } .imp-promo-banner img { width: 100%; height: auto; display: block; } /* ---- TOP CATEGORIES list ---- */ .imp-topcat-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; } .imp-topcat { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--es-border-card); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 500; color: var(--es-ink) !important; text-decoration: none; transition: .16s; } .imp-topcat:hover { border-color: var(--es-accent); color: var(--es-accent) !important; } .imp-topcat-thumb { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .imp-topcat-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .imp-topcat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- NEWSLETTER ---- */ .imp-newsletter-wrap { margin-bottom: 34px; } .imp-newsletter { max-width: 460px; margin: 0 auto; background: var(--es-surface); border: 1px solid var(--es-border-card); border-radius: var(--es-radius-card-lg); box-shadow: var(--es-shadow-card-sm); padding: 30px 32px; } .imp-newsletter-title { font-size: 16px; font-weight: 500; color: var(--es-ink); margin: 0 0 20px; line-height: 1.5; } .imp-newsletter-title strong { font-weight: 700; } .imp-newsletter-form { display: flex; flex-direction: column; gap: 14px; } .imp-newsletter-form input, .imp-newsletter-form select { height: 50px; border: 1px solid var(--es-border); background: var(--es-bg); border-radius: var(--es-radius-btn); padding: 0 16px; font-size: 14px; font-family: var(--es-font); color: var(--es-ink); outline: none; width: 100%; appearance: none; } .imp-newsletter-form select { color: var(--es-muted-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .imp-newsletter-form input:focus, .imp-newsletter-form select:focus { border-color: var(--es-ink); } .imp-newsletter-btn { height: 52px; background: var(--es-ink); border: none; color: #fff; font-size: 14.5px; font-weight: 600; border-radius: var(--es-radius-pill); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } .imp-newsletter-btn:hover { background: #2a2a2a; } /* ---- REVIEWS ---- */ .imp-trust-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--es-rating-bg); border: 1px solid var(--es-accent-border); border-radius: var(--es-radius-card-lg); padding: 22px 28px; margin-bottom: 18px; } .imp-trust-left { display: flex; align-items: center; gap: 16px; } .imp-trust-badge { width: 46px; height: 46px; border-radius: 50%; background: var(--es-surface); color: var(--es-accent); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; box-shadow: var(--es-shadow-card-sm); } .imp-trust-title { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--es-ink); margin-bottom: 6px; } .imp-trust-stars { display: flex; align-items: center; gap: 3px; color: var(--es-accent); font-size: 14px; } .imp-trust-stars .imp-star-empty { color: var(--es-border-card); } .imp-trust-score { margin-left: 8px; font-size: 13.5px; font-weight: 700; color: var(--es-ink); } .imp-trust-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .imp-trust-count { font-size: 12.5px; color: var(--es-muted); } .imp-trust-link { font-size: 13px; font-weight: 600; color: var(--es-rating-fg); text-decoration: underline; display: inline-flex; align-items: center; gap: 6px; } .imp-trust-link:hover { color: var(--es-ink); } .imp-reviews { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .imp-review-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--es-border-card); border-radius: 14px; padding: 24px; } .imp-review-quote-icon { position: absolute; top: 16px; right: 18px; font-size: 34px; color: var(--es-border-card); z-index: 0; } .imp-review-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .imp-review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .imp-review-who { flex: 1; min-width: 0; } .imp-review-name { font-size: 13px; font-weight: 600; } .imp-review-place { font-size: 11.5px; color: var(--es-muted-3); } .imp-review-date { font-size: 11.5px; color: var(--es-muted-3); white-space: nowrap; } .imp-review-stars { position: relative; z-index: 1; display: flex; gap: 3px; color: var(--es-accent); margin-bottom: 12px; font-size: 13px; } .imp-review-stars .imp-star-empty { color: var(--es-border-card); } .imp-review-text { position: relative; z-index: 1; font-size: 13.5px; line-height: 1.6; color: #444; font-style: italic; margin: 0; } /* ---- SEO ---- */ .imp-seo { background: #fff; border: 1px solid var(--es-border-card); border-radius: 16px; padding: 34px 40px; margin-bottom: 20px; } .imp-seo-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; } .imp-seo-kicker { font-size: 13px; color: var(--es-accent); font-weight: 600; margin-bottom: 18px; } .imp-seo p { font-size: 13.5px; line-height: 1.7; color: var(--es-muted); margin: 0; max-width: 1100px; } /* ---- responsive ---- */ @media (max-width: 1199.98px) { .imp-grid-5 { grid-template-columns: repeat(4,1fr); } .imp-topcat-grid { grid-template-columns: repeat(4,1fr); } } @media (max-width: 991.98px) { .imp-hero { height: 470px; } .imp-usps { grid-template-columns: repeat(2,1fr); } .imp-usp:nth-child(2) { border-right: none; } .imp-grid-5 { grid-template-columns: repeat(3,1fr); } .imp-reviews { grid-template-columns: 1fr; } .imp-topcat-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 575.98px) { .imp-hero { height: 365px; } .imp-hero-search { height: 48px; } .imp-trust-card { flex-direction: column; align-items: flex-start; padding: 18px 20px; } .imp-trust-right { align-items: flex-start; width: 100%; } .imp-grid-5 { grid-template-columns: repeat(2,1fr); } .imp-usps { grid-template-columns: 1fr 1fr; } .imp-sell-strip { flex-direction: column; align-items: flex-start; padding: 20px; } .imp-topcat-grid { grid-template-columns: repeat(2,1fr); } .imp-seo { padding: 24px; } .imp-newsletter { padding: 24px 22px; } } /* ============================================================ IMPERIA — site-wide component polish (inner pages) Applies the design language to 6valley's existing components on listing / product / cart / checkout / account pages. (The handoff specifies only the homepage; these keep the rest cohesive.) ============================================================ */ /* section titles */ .styled-title, .section-title, .title-area h2, .widget-title { font-family: var(--es-font); font-weight: 700; color: var(--es-ink); } .styled-title::after { background: var(--es-accent) !important; } /* breadcrumbs */ .breadcrumb { background: transparent; font-size: 13px; } .breadcrumb-item a { color: var(--es-muted) !important; text-decoration: none; } .breadcrumb-item a:hover { color: var(--es-accent) !important; } .breadcrumb-item.active { color: var(--es-ink); } /* generic 6valley product card polish */ .product { background: #fff; } .product .product__top { border: 1px solid var(--es-border-card) !important; border-radius: var(--es-radius-card) !important; overflow: hidden; transition: .16s; } .product:hover .product__top { box-shadow: var(--es-shadow-card); border-color: var(--es-accent-border) !important; } .product__title { font-size: 13px; color: var(--es-ink-2); font-weight: 500; } .product__title:hover, .product__title a:hover { color: var(--es-accent) !important; } .product__new-price, ins.product__new-price { color: var(--es-ink); font-weight: 700; text-decoration: none; } .product__old-price, del.product__old-price { color: #aaa; } .discount-badge, .product .discount-badge span { background: var(--es-sale) !important; color: #fff !important; border-radius: 6px; font-weight: 700; } .text-gold, .star-rating .bi-star-fill, .star-rating .bi-star-half { color: var(--es-accent) !important; } /* card action circle buttons */ .btn-wishlist, .btn-compare, .btn-quickview { border-radius: 50% !important; background: #fff; border: 1px solid #e8e8e8; color: #555; } .btn-wishlist:hover, .btn-compare:hover, .btn-quickview:hover { background: var(--es-accent); border-color: var(--es-accent); color: var(--es-ink); } .wishlist_icon_active, .btn-wishlist.wishlist_icon_active { color: var(--es-sale) !important; } .compare_list_icon_active { color: var(--es-accent) !important; } /* pagination */ .pagination .page-link { color: var(--es-ink); border-radius: 8px; margin: 0 3px; border-color: var(--es-border-card); } .pagination .page-link:hover { background: var(--es-accent-soft); border-color: var(--es-accent); color: var(--es-ink); } .pagination .page-item.active .page-link { background: var(--es-accent); border-color: var(--es-accent); color: var(--es-ink); } /* outline buttons */ .btn-outline-primary { --bs-btn-color: var(--es-ink); --bs-btn-border-color: var(--es-accent); --bs-btn-hover-bg: var(--es-accent); --bs-btn-hover-border-color: var(--es-accent); --bs-btn-hover-color: var(--es-ink); --bs-btn-active-bg: var(--es-accent); --bs-btn-active-border-color: var(--es-accent); --bs-btn-active-color: var(--es-ink); } /* form focus states */ .form-control:focus, .form-select:focus, .search-bar-input:focus { border-color: var(--es-accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--es-accent-rgb), .15) !important; } /* cards / panels site-wide */ .card { border-color: var(--es-border-card); } .card.search-card, .search-result-box { border-radius: var(--es-radius-card); box-shadow: var(--es-shadow-panel); } /* tabs / nav accents */ .nav-tabs .nav-link.active { color: var(--es-accent); border-bottom-color: var(--es-accent); } .badge.bg-primary, .badge.text-bg-primary { background: var(--es-accent) !important; color: var(--es-ink) !important; } /* dropdown hover */ .dropdown-item:active, .dropdown-item.active { background: var(--es-accent); color: var(--es-ink); } /* page background for inner content wrappers */ .section-padding, .inner-section, main { background: transparent; } /* back-to-top + whatsapp keep accent */ .back-to-top { background: var(--es-accent) !important; color: var(--es-ink) !important; } /* ============================================================ IMPERIA — All Categories page (web-views.products.categories) ============================================================ */ .imp-categories-page { padding-top: 26px; padding-bottom: 30px; } .imp-breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--es-muted); margin-bottom: 16px; } .imp-breadcrumb a { color: var(--es-muted) !important; text-decoration: none; } .imp-breadcrumb a:hover { color: var(--es-accent) !important; } .imp-breadcrumb i { font-size: 10px; color: #bbb; } .imp-breadcrumb span { color: var(--es-ink); font-weight: 500; } .imp-categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .imp-category-card { background: #fff; border: 1px solid var(--es-border-card); border-radius: var(--es-radius-card-lg); padding: 20px; display: flex; flex-direction: column; transition: .16s; } .imp-category-card:hover { border-color: var(--es-accent); box-shadow: var(--es-shadow-card-sm); transform: translateY(-3px); } .imp-category-head { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--es-ink) !important; margin-bottom: 14px; } .imp-category-thumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: 12px; background: var(--es-ph-a); display: flex; align-items: center; justify-content: center; overflow: hidden; } .imp-category-thumb img { max-width: 78%; max-height: 78%; object-fit: contain; } .imp-category-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .imp-category-name { font-size: 15px; font-weight: 700; line-height: 1.2; } .imp-category-count { font-size: 12px; color: var(--es-muted-2); } .imp-category-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .imp-category-sub { font-size: 11.5px; color: var(--es-muted) !important; background: var(--es-bg); border: 1px solid var(--es-border-card); border-radius: 20px; padding: 4px 11px; text-decoration: none; } .imp-category-sub:hover { border-color: var(--es-accent); color: var(--es-accent) !important; background: var(--es-accent-soft); } .imp-category-shop { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--es-accent) !important; text-decoration: none; } .imp-empty { text-align: center; color: var(--es-muted-2); padding: 60px 0; font-size: 15px; } @media (max-width: 991.98px) { .imp-categories-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .imp-categories-grid { grid-template-columns: 1fr; } }