/* * niafrika-home.css * Niafrika WooCommerce Homepage — Dawood-inspired layout * Enqueue via functions.php: * wp_enqueue_style('niafrika-home', get_template_directory_uri() . '/niafrika-home.css', [], '1.0'); */ /* ═══════════════════════════════════════════════════ CSS VARIABLES / DESIGN TOKENS ═══════════════════════════════════════════════════ */ :root { --nia-primary: #B85C38; /* Terracotta — African warmth */ --nia-primary-dark: #8F3E1F; --nia-accent: #E8A838; /* Amber gold */ --nia-dark: #1A1A1A; --nia-mid: #4A4A4A; --nia-light: #F5F2EE; /* Warm off-white */ --nia-white: #FFFFFF; --nia-border: #E0DAD4; --nia-flash-bg: #1A1A1A; /* Dark section for flash sale */ --nia-ticker-bg: #B85C38; --nia-font-head: 'Playfair Display', 'Georgia', serif; --nia-font-body: 'Nunito', 'Segoe UI', sans-serif; --nia-radius: 8px; --nia-radius-lg: 14px; --nia-shadow: 0 2px 12px rgba(0,0,0,0.10); --nia-shadow-hover: 0 8px 28px rgba(0,0,0,0.18); --nia-transition: 0.28s ease; } /* ═══════════════════════════════════════════════════ GOOGLE FONTS IMPORT (add to or @import here) ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════ GLOBAL RESETS FOR HOMEPAGE SECTIONS ═══════════════════════════════════════════════════ */ .nia-section, .nia-announcement-bar, .nia-hero-slider { box-sizing: border-box; font-family: var(--nia-font-body); } .nia-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } .nia-section { padding: 60px 0; } /* ═══════════════════════════════════════════════════ SECTION HEADERS ═══════════════════════════════════════════════════ */ .nia-section-head { margin-bottom: 36px; text-align: center; } .nia-section-head h2 { font-family: var(--nia-font-head); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--nia-dark); margin: 0 0 6px; } .nia-section-head p { font-size: 0.95rem; color: var(--nia-mid); margin: 0; } /* Row layout (title left, button right) */ .nia-section-head--row { display: flex; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; gap: 16px; } /* ═══════════════════════════════════════════════════ ANNOUNCEMENT TICKER BAR ═══════════════════════════════════════════════════ */ .nia-announcement-bar { background: var(--nia-ticker-bg); color: var(--nia-white); font-family: var(--nia-font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; overflow: hidden; padding: 9px 0; white-space: nowrap; } .nia-ticker-track { overflow: hidden; } .nia-ticker-inner { display: inline-flex; gap: 0; animation: niaTicker 32s linear infinite; } .nia-ticker-inner span { padding: 0 36px; position: relative; } .nia-ticker-inner span::after { content: '•'; position: absolute; right: -2px; opacity: 0.6; } @keyframes niaTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════ HERO SLIDER ═══════════════════════════════════════════════════ */ .nia-hero-slider { position: relative; width: 100%; overflow: hidden; background: #1A1A1A; } .nia-slides-wrapper { position: relative; width: 100%; height: 560px; } @media (max-width: 768px) { .nia-slides-wrapper { height: 420px; } } .nia-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.7s ease; display: flex; align-items: center; padding: 0 80px; } .nia-slide.active { opacity: 1; } .nia-slide-content { color: var(--nia-white); max-width: 560px; animation: niaSlideIn 0.6s ease both; } @keyframes niaSlideIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nia-slide-eyebrow { display: inline-block; background: var(--nia-primary); color: var(--nia-white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 3px; margin-bottom: 16px; } .nia-slide-content h1 { font-family: var(--nia-font-head); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.15; margin: 0 0 14px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } .nia-slide-content p { font-size: 1rem; opacity: 0.9; margin: 0 0 28px; line-height: 1.6; } .nia-btn-hero { display: inline-block; background: var(--nia-primary); color: var(--nia-white); font-family: var(--nia-font-body); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 13px 32px; border-radius: var(--nia-radius); text-decoration: none; transition: background var(--nia-transition), transform var(--nia-transition); } .nia-btn-hero:hover { background: var(--nia-primary-dark); transform: translateY(-2px); color: var(--nia-white); } /* Slider arrows */ .nia-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.4); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--nia-transition); z-index: 10; backdrop-filter: blur(4px); } .nia-slider-arrow:hover { background: rgba(255,255,255,0.35); } .nia-slider-prev { left: 20px; } .nia-slider-next { right: 20px; } /* Slider dots */ .nia-slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .nia-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; transition: background var(--nia-transition), transform var(--nia-transition); border: none; } .nia-dot.active { background: var(--nia-white); transform: scale(1.25); } /* Mobile: push slide content */ @media (max-width: 600px) { .nia-slide { padding: 0 24px; } .nia-slider-arrow { display: none; } } /* ═══════════════════════════════════════════════════ CATEGORY GRID ═══════════════════════════════════════════════════ */ .nia-section-categories { background: var(--nia-light); } .nia-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } @media (min-width: 1024px) { .nia-cat-grid { grid-template-columns: repeat(8, 1fr); } } .nia-cat-tile { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 10px; transition: transform var(--nia-transition); } .nia-cat-tile:hover { transform: translateY(-4px); } .nia-cat-img-wrap { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--nia-radius-lg); overflow: hidden; background: var(--nia-border); box-shadow: var(--nia-shadow); } .nia-cat-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .nia-cat-tile:hover .nia-cat-img-wrap img { transform: scale(1.07); } .nia-cat-name { font-family: var(--nia-font-body); font-size: 0.78rem; font-weight: 700; color: var(--nia-dark); text-align: center; line-height: 1.3; } /* ═══════════════════════════════════════════════════ PRODUCT GRID (shared across sections) ═══════════════════════════════════════════════════ */ .nia-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; } @media (min-width: 1024px) { .nia-product-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .nia-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } /* ── Product Card ── */ .nia-product-card { background: var(--nia-white); border-radius: var(--nia-radius-lg); overflow: hidden; box-shadow: var(--nia-shadow); transition: box-shadow var(--nia-transition), transform var(--nia-transition); display: flex; flex-direction: column; } .nia-product-card:hover { box-shadow: var(--nia-shadow-hover); transform: translateY(-3px); } /* Image area */ .nia-card-img-wrap { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--nia-light); } .nia-img-main, .nia-img-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; } .nia-img-hover { opacity: 0; } .nia-card-img-wrap:hover .nia-img-main { opacity: 0; } .nia-card-img-wrap:hover .nia-img-hover { opacity: 1; } /* Badges */ .nia-badge { position: absolute; top: 10px; left: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; z-index: 2; } .nia-badge-sale { background: var(--nia-primary); color: #fff; } .nia-badge-new { background: var(--nia-accent); color: #fff; left: auto; right: 10px; } /* Quick View (flash sale) */ .nia-quick-view { position: absolute; bottom: -42px; left: 0; right: 0; background: rgba(26,26,26,0.88); color: #fff; border: none; font-family: var(--nia-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px; cursor: pointer; transition: bottom 0.3s ease; z-index: 3; } .nia-card-img-wrap:hover .nia-quick-view { bottom: 0; } /* Card body */ .nia-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .nia-card-title { font-family: var(--nia-font-body); font-size: 0.88rem; font-weight: 600; color: var(--nia-dark); text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nia-card-title:hover { color: var(--nia-primary); } .nia-card-price { font-size: 0.92rem; font-weight: 700; color: var(--nia-primary); } /* WooCommerce sale price styling */ .nia-card-price del { font-weight: 400; color: #999; font-size: 0.82rem; margin-right: 4px; } .nia-card-price ins { text-decoration: none; } /* Add to cart button */ .nia-btn-add-cart { display: block; text-align: center; background: var(--nia-dark); color: var(--nia-white); font-family: var(--nia-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 16px; border-radius: var(--nia-radius); text-decoration: none; transition: background var(--nia-transition); margin-top: auto; } .nia-btn-add-cart:hover { background: var(--nia-primary); color: var(--nia-white); } /* ═══════════════════════════════════════════════════ LATEST MUST HAVES ═══════════════════════════════════════════════════ */ .nia-section-latest { background: var(--nia-white); } /* ═══════════════════════════════════════════════════ FLASH SALE SECTION ═══════════════════════════════════════════════════ */ .nia-section-flash { background: var(--nia-flash-bg); } .nia-section-flash .nia-section-head--row h2, .nia-section-flash .nia-section-head--row p { color: var(--nia-white); } .nia-flash-heading { font-family: var(--nia-font-head); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--nia-white) !important; } .nia-flash-icon { color: var(--nia-accent); } /* Override card styles inside dark section */ .nia-section-flash .nia-product-card { background: #2A2A2A; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } .nia-section-flash .nia-card-title { color: #eee; } .nia-section-flash .nia-card-title:hover { color: var(--nia-accent); } /* ── Outline buttons ── */ .nia-btn-outline { display: inline-block; border: 2px solid var(--nia-dark); color: var(--nia-dark); font-family: var(--nia-font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 22px; border-radius: var(--nia-radius); text-decoration: none; transition: background var(--nia-transition), color var(--nia-transition); white-space: nowrap; } .nia-btn-outline:hover { background: var(--nia-dark); color: var(--nia-white); } .nia-btn-outline--light { border-color: rgba(255,255,255,0.5); color: var(--nia-white); } .nia-btn-outline--light:hover { background: var(--nia-white); color: var(--nia-dark); } /* ═══════════════════════════════════════════════════ TABBED COLLECTIONS ═══════════════════════════════════════════════════ */ .nia-section-tabbed { background: var(--nia-light); } .nia-tab-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; border-bottom: 2px solid var(--nia-border); padding-bottom: 0; } .nia-tab-btn { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: var(--nia-font-body); font-size: 0.95rem; font-weight: 700; color: var(--nia-mid); padding: 10px 20px; cursor: pointer; transition: color var(--nia-transition), border-color var(--nia-transition); letter-spacing: 0.02em; } .nia-tab-btn:hover { color: var(--nia-primary); } .nia-tab-btn.active { color: var(--nia-primary); border-bottom-color: var(--nia-primary); } .nia-tab-panel { display: none; } .nia-tab-panel.active { display: block; animation: niaFadeIn 0.3s ease; } @keyframes niaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .nia-empty { text-align: center; color: var(--nia-mid); padding: 40px 0; } /* ═══════════════════════════════════════════════════ WHATSAPP FLOAT BUTTON ═══════════════════════════════════════════════════ */ .nia-whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(37,211,102,0.5); z-index: 9999; text-decoration: none; transition: transform var(--nia-transition), box-shadow var(--nia-transition); } .nia-whatsapp-float:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.6); } /* ═══════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { .nia-section { padding: 40px 0; } .nia-section-head--row { flex-direction: column; text-align: center; align-items: center; } .nia-cat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .nia-tab-nav { gap: 6px; } .nia-tab-btn { padding: 8px 14px; font-size: 0.85rem; } .nia-whatsapp-float { bottom: 18px; right: 18px; width: 50px; height: 50px; } } @media (max-width: 480px) { .nia-cat-grid { grid-template-columns: repeat(3, 1fr); } .nia-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .nia-card-body { padding: 10px 12px 14px; } .nia-card-title { font-size: 0.8rem; } .nia-card-price { font-size: 0.85rem; } } /* ═══════════════════════════════════════════════════ NIAFRIKA LAYOUT FIX v2 Replace the entire bottom section of niafrika-home.css (everything from the previous layout fix block onwards) ═══════════════════════════════════════════════════ */ /* ── Force ONLY the page content area to stack — NOT the header ── */ .ast-separate-container .ast-article-single, .ast-plain-container .ast-article-single, .entry-content > *, .post-type-page .entry-content { max-width: 100% !important; width: 100% !important; padding: 0 !important; } /* Remove padding Astra adds around page content */ .ast-separate-container #content .ast-container, .ast-plain-container #content .ast-container { padding: 0 !important; max-width: 100% !important; } /* Hide sidebar on homepage only */ .home #secondary, .front-page #secondary, .page-template-default #secondary { display: none !important; } /* Make primary content full width when no sidebar */ .home #primary, .front-page #primary { width: 100% !important; max-width: 100% !important; float: none !important; } /* Remove Astra article padding */ .home .entry-content, .front-page .entry-content { padding: 0 !important; margin: 0 !important; } /* Remove Astra page title on homepage */ .home .entry-header, .front-page .entry-header, .home .page-title, .front-page .page-title { display: none !important; } /* Stack all nia sections vertically, full width */ .nia-announcement-bar, .nia-hero-slider, .nia-section { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; position: relative !important; box-sizing: border-box !important; } /* Hero slider must be tall enough */ .nia-hero-slider { min-height: 500px !important; overflow: hidden !important; } .nia-slides-wrapper { height: 500px !important; width: 100% !important; position: relative !important; } .nia-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* * niafrika-home.css * Niafrika WooCommerce Homepage — Dawood-inspired layout * Enqueue via functions.php: * wp_enqueue_style('niafrika-home', get_template_directory_uri() . '/niafrika-home.css', [], '1.0'); */ /* ═══════════════════════════════════════════════════ CSS VARIABLES / DESIGN TOKENS ═══════════════════════════════════════════════════ */ :root { --nia-primary: #B85C38; /* Terracotta — African warmth */ --nia-primary-dark: #8F3E1F; --nia-accent: #E8A838; /* Amber gold */ --nia-dark: #1A1A1A; --nia-mid: #4A4A4A; --nia-light: #F5F2EE; /* Warm off-white */ --nia-white: #FFFFFF; --nia-border: #E0DAD4; --nia-flash-bg: #1A1A1A; /* Dark section for flash sale */ --nia-ticker-bg: #B85C38; --nia-font-head: 'Playfair Display', 'Georgia', serif; --nia-font-body: 'Nunito', 'Segoe UI', sans-serif; --nia-radius: 8px; --nia-radius-lg: 14px; --nia-shadow: 0 2px 12px rgba(0,0,0,0.10); --nia-shadow-hover: 0 8px 28px rgba(0,0,0,0.18); --nia-transition: 0.28s ease; } /* ═══════════════════════════════════════════════════ GOOGLE FONTS IMPORT (add to or @import here) ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════ GLOBAL RESETS FOR HOMEPAGE SECTIONS ═══════════════════════════════════════════════════ */ .nia-section, .nia-announcement-bar, .nia-hero-slider { box-sizing: border-box; font-family: var(--nia-font-body); } .nia-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } .nia-section { padding: 60px 0; } /* ═══════════════════════════════════════════════════ SECTION HEADERS ═══════════════════════════════════════════════════ */ .nia-section-head { margin-bottom: 36px; text-align: center; } .nia-section-head h2 { font-family: var(--nia-font-head); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--nia-dark); margin: 0 0 6px; } .nia-section-head p { font-size: 0.95rem; color: var(--nia-mid); margin: 0; } /* Row layout (title left, button right) */ .nia-section-head--row { display: flex; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; gap: 16px; } /* ═══════════════════════════════════════════════════ ANNOUNCEMENT TICKER BAR ═══════════════════════════════════════════════════ */ .nia-announcement-bar { background: var(--nia-ticker-bg); color: var(--nia-white); font-family: var(--nia-font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; overflow: hidden; padding: 9px 0; white-space: nowrap; } .nia-ticker-track { overflow: hidden; } .nia-ticker-inner { display: inline-flex; gap: 0; animation: niaTicker 32s linear infinite; } .nia-ticker-inner span { padding: 0 36px; position: relative; } .nia-ticker-inner span::after { content: '•'; position: absolute; right: -2px; opacity: 0.6; } @keyframes niaTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════ HERO SLIDER ═══════════════════════════════════════════════════ */ .nia-hero-slider { position: relative; width: 100%; overflow: hidden; background: #1A1A1A; } .nia-slides-wrapper { position: relative; width: 100%; height: 560px; } @media (max-width: 768px) { .nia-slides-wrapper { height: 420px; } } .nia-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.7s ease; display: flex; align-items: center; padding: 0 80px; } .nia-slide.active { opacity: 1; } .nia-slide-content { color: var(--nia-white); max-width: 560px; animation: niaSlideIn 0.6s ease both; } @keyframes niaSlideIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nia-slide-eyebrow { display: inline-block; background: var(--nia-primary); color: var(--nia-white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 3px; margin-bottom: 16px; } .nia-slide-content h1 { font-family: var(--nia-font-head); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.15; margin: 0 0 14px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } .nia-slide-content p { font-size: 1rem; opacity: 0.9; margin: 0 0 28px; line-height: 1.6; } .nia-btn-hero { display: inline-block; background: var(--nia-primary); color: var(--nia-white); font-family: var(--nia-font-body); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 13px 32px; border-radius: var(--nia-radius); text-decoration: none; transition: background var(--nia-transition), transform var(--nia-transition); } .nia-btn-hero:hover { background: var(--nia-primary-dark); transform: translateY(-2px); color: var(--nia-white); } /* Slider arrows */ .nia-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.4); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--nia-transition); z-index: 10; backdrop-filter: blur(4px); } .nia-slider-arrow:hover { background: rgba(255,255,255,0.35); } .nia-slider-prev { left: 20px; } .nia-slider-next { right: 20px; } /* Slider dots */ .nia-slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .nia-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; transition: background var(--nia-transition), transform var(--nia-transition); border: none; } .nia-dot.active { background: var(--nia-white); transform: scale(1.25); } /* Mobile: push slide content */ @media (max-width: 600px) { .nia-slide { padding: 0 24px; } .nia-slider-arrow { display: none; } } /* ═══════════════════════════════════════════════════ CATEGORY GRID ═══════════════════════════════════════════════════ */ .nia-section-categories { background: var(--nia-light); } .nia-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } @media (min-width: 1024px) { .nia-cat-grid { grid-template-columns: repeat(8, 1fr); } } .nia-cat-tile { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 10px; transition: transform var(--nia-transition); } .nia-cat-tile:hover { transform: translateY(-4px); } .nia-cat-img-wrap { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--nia-radius-lg); overflow: hidden; background: var(--nia-border); box-shadow: var(--nia-shadow); } .nia-cat-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .nia-cat-tile:hover .nia-cat-img-wrap img { transform: scale(1.07); } .nia-cat-name { font-family: var(--nia-font-body); font-size: 0.78rem; font-weight: 700; color: var(--nia-dark); text-align: center; line-height: 1.3; } /* ═══════════════════════════════════════════════════ PRODUCT GRID (shared across sections) ═══════════════════════════════════════════════════ */ .nia-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; } @media (min-width: 1024px) { .nia-product-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .nia-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } /* ── Product Card ── */ .nia-product-card { background: var(--nia-white); border-radius: var(--nia-radius-lg); overflow: hidden; box-shadow: var(--nia-shadow); transition: box-shadow var(--nia-transition), transform var(--nia-transition); display: flex; flex-direction: column; } .nia-product-card:hover { box-shadow: var(--nia-shadow-hover); transform: translateY(-3px); } /* Image area */ .nia-card-img-wrap { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--nia-light); } .nia-img-main, .nia-img-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; } .nia-img-hover { opacity: 0; } .nia-card-img-wrap:hover .nia-img-main { opacity: 0; } .nia-card-img-wrap:hover .nia-img-hover { opacity: 1; } /* Badges */ .nia-badge { position: absolute; top: 10px; left: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; z-index: 2; } .nia-badge-sale { background: var(--nia-primary); color: #fff; } .nia-badge-new { background: var(--nia-accent); color: #fff; left: auto; right: 10px; } /* Quick View (flash sale) */ .nia-quick-view { position: absolute; bottom: -42px; left: 0; right: 0; background: rgba(26,26,26,0.88); color: #fff; border: none; font-family: var(--nia-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px; cursor: pointer; transition: bottom 0.3s ease; z-index: 3; } .nia-card-img-wrap:hover .nia-quick-view { bottom: 0; } /* Card body */ .nia-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .nia-card-title { font-family: var(--nia-font-body); font-size: 0.88rem; font-weight: 600; color: var(--nia-dark); text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nia-card-title:hover { color: var(--nia-primary); } .nia-card-price { font-size: 0.92rem; font-weight: 700; color: var(--nia-primary); } /* WooCommerce sale price styling */ .nia-card-price del { font-weight: 400; color: #999; font-size: 0.82rem; margin-right: 4px; } .nia-card-price ins { text-decoration: none; } /* Add to cart button */ .nia-btn-add-cart { display: block; text-align: center; background: var(--nia-dark); color: var(--nia-white); font-family: var(--nia-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 16px; border-radius: var(--nia-radius); text-decoration: none; transition: background var(--nia-transition); margin-top: auto; } .nia-btn-add-cart:hover { background: var(--nia-primary); color: var(--nia-white); } /* ═══════════════════════════════════════════════════ LATEST MUST HAVES ═══════════════════════════════════════════════════ */ .nia-section-latest { background: var(--nia-white); } /* ═══════════════════════════════════════════════════ FLASH SALE SECTION ═══════════════════════════════════════════════════ */ .nia-section-flash { background: var(--nia-flash-bg); } .nia-section-flash .nia-section-head--row h2, .nia-section-flash .nia-section-head--row p { color: var(--nia-white); } .nia-flash-heading { font-family: var(--nia-font-head); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--nia-white) !important; } .nia-flash-icon { color: var(--nia-accent); } /* Override card styles inside dark section */ .nia-section-flash .nia-product-card { background: #2A2A2A; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } .nia-section-flash .nia-card-title { color: #eee; } .nia-section-flash .nia-card-title:hover { color: var(--nia-accent); } /* ── Outline buttons ── */ .nia-btn-outline { display: inline-block; border: 2px solid var(--nia-dark); color: var(--nia-dark); font-family: var(--nia-font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 22px; border-radius: var(--nia-radius); text-decoration: none; transition: background var(--nia-transition), color var(--nia-transition); white-space: nowrap; } .nia-btn-outline:hover { background: var(--nia-dark); color: var(--nia-white); } .nia-btn-outline--light { border-color: rgba(255,255,255,0.5); color: var(--nia-white); } .nia-btn-outline--light:hover { background: var(--nia-white); color: var(--nia-dark); } /* ═══════════════════════════════════════════════════ TABBED COLLECTIONS ═══════════════════════════════════════════════════ */ .nia-section-tabbed { background: var(--nia-light); } .nia-tab-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; border-bottom: 2px solid var(--nia-border); padding-bottom: 0; } .nia-tab-btn { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: var(--nia-font-body); font-size: 0.95rem; font-weight: 700; color: var(--nia-mid); padding: 10px 20px; cursor: pointer; transition: color var(--nia-transition), border-color var(--nia-transition); letter-spacing: 0.02em; } .nia-tab-btn:hover { color: var(--nia-primary); } .nia-tab-btn.active { color: var(--nia-primary); border-bottom-color: var(--nia-primary); } .nia-tab-panel { display: none; } .nia-tab-panel.active { display: block; animation: niaFadeIn 0.3s ease; } @keyframes niaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .nia-empty { text-align: center; color: var(--nia-mid); padding: 40px 0; } /* ═══════════════════════════════════════════════════ WHATSAPP FLOAT BUTTON ═══════════════════════════════════════════════════ */ .nia-whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(37,211,102,0.5); z-index: 9999; text-decoration: none; transition: transform var(--nia-transition), box-shadow var(--nia-transition); } .nia-whatsapp-float:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.6); } /* ═══════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { .nia-section { padding: 40px 0; } .nia-section-head--row { flex-direction: column; text-align: center; align-items: center; } .nia-cat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .nia-tab-nav { gap: 6px; } .nia-tab-btn { padding: 8px 14px; font-size: 0.85rem; } .nia-whatsapp-float { bottom: 18px; right: 18px; width: 50px; height: 50px; } } @media (max-width: 480px) { .nia-cat-grid { grid-template-columns: repeat(3, 1fr); } .nia-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .nia-card-body { padding: 10px 12px 14px; } .nia-card-title { font-size: 0.8rem; } .nia-card-price { font-size: 0.85rem; } } /* ═══════════════════════════════════════════════════ NIAFRIKA LAYOUT FIX v2 Replace the entire bottom section of niafrika-home.css (everything from the previous layout fix block onwards) ═══════════════════════════════════════════════════ */ /* ── Force ONLY the page content area to stack — NOT the header ── */ .ast-separate-container .ast-article-single, .ast-plain-container .ast-article-single, .entry-content > *, .post-type-page .entry-content { max-width: 100% !important; width: 100% !important; padding: 0 !important; } /* Remove padding Astra adds around page content */ .ast-separate-container #content .ast-container, .ast-plain-container #content .ast-container { padding: 0 !important; max-width: 100% !important; } /* Hide sidebar on homepage only */ .home #secondary, .front-page #secondary, .page-template-default #secondary { display: none !important; } /* Make primary content full width when no sidebar */ .home #primary, .front-page #primary { width: 100% !important; max-width: 100% !important; float: none !important; } /* Remove Astra article padding */ .home .entry-content, .front-page .entry-content { padding: 0 !important; margin: 0 !important; } /* Remove Astra page title on homepage */ .home .entry-header, .front-page .entry-header, .home .page-title, .front-page .page-title { display: none !important; } /* Stack all nia sections vertically, full width */ .nia-announcement-bar, .nia-hero-slider, .nia-section { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; position: relative !important; box-sizing: border-box !important; } /* Hero slider must be tall enough */ .nia-hero-slider { min-height: 500px !important; overflow: hidden !important; } .nia-slides-wrapper { height: 500px !important; width: 100% !important; position: relative !important; } .nia-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* ═══════════════════════════════════════════════════ ASTRA CONTENT AREA OVERRIDE — v3 Forces sections to stack vertically full width ═══════════════════════════════════════════════════ */ /* Override Astra's flex content container */ #content .ast-container, .ast-page-builder-template #content .ast-container, body.home #content .ast-container, body.page #content .ast-container { display: block !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Force primary content full width */ body.home #primary, body.page #primary, #primary.content-area { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } /* Hide sidebar */ body.home #secondary, body.page #secondary { display: none !important; width: 0 !important; } /* Site main — block not flex */ body.home #main, body.home .site-main, body.page .site-main { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Remove Astra entry padding */ body.home .entry-content, body.home article { padding: 0 !important; margin: 0 !important; max-width: 100% !important; } /* Each nia section stacks as full-width block */ body.home .nia-announcement-bar, body.home .nia-hero-slider, body.home .nia-section { display: block !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════ FONT SIZE OVERRIDES — +5px across all elements (5px = 0.3125rem at 16px base) ═══════════════════════════════════════════════════ */ /* Announcement ticker: 0.82rem → 1.13rem */ .nia-announcement-bar { font-size: 1.13rem; } /* Section headings h2: clamp(1.6,3vw,2.2) → clamp(1.91,3vw,2.51rem) */ .nia-section-head h2 { font-size: clamp(1.91rem, 3vw, 2.51rem); } /* Section subtext p: 0.95rem → 1.26rem */ .nia-section-head p { font-size: 1.26rem; } /* Hero h1: clamp(2,5vw,3.4) → clamp(2.31,5vw,3.71rem) */ .nia-slide-content h1 { font-size: clamp(2.31rem, 5vw, 3.71rem); } /* Hero paragraph: 1rem → 1.31rem */ .nia-slide-content p { font-size: 1.31rem; } /* Hero eyebrow label: 0.78rem → 1.09rem */ .nia-slide-eyebrow { font-size: 1.09rem; } /* Hero CTA button: 0.92rem → 1.23rem */ .nia-btn-hero { font-size: 1.23rem; } /* Category name: 0.78rem → 1.09rem */ .nia-cat-name { font-size: 1.09rem; } /* Product title: 0.88rem → 1.19rem */ .nia-card-title { font-size: 1.19rem; } /* Product price: 0.92rem → 1.23rem */ .nia-card-price { font-size: 1.23rem; } /* Add to Cart button: 0.8rem → 1.11rem */ .nia-btn-add-cart { font-size: 1.11rem; } /* Outline buttons: 0.85rem → 1.16rem */ .nia-btn-outline { font-size: 1.16rem; } /* Tab buttons: 0.95rem → 1.26rem */ .nia-tab-btn { font-size: 1.26rem; } /* Flash sale heading: clamp(1.5,3vw,2) → clamp(1.81,3vw,2.31rem) */ .nia-flash-heading { font-size: clamp(1.81rem, 3vw, 2.31rem) !important; } /* ═══════════════════════════════════════════════════ LATEST MUST HAVES — MARQUEE SCROLL ═══════════════════════════════════════════════════ */ .nia-section-latest { overflow: hidden; padding-bottom: 50px; } /* Full-width overflow wrapper */ .nia-marquee-wrap { width: 100%; overflow: hidden; cursor: grab; position: relative; padding: 10px 0 20px; /* Fade edges left and right */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); } .nia-marquee-wrap:active { cursor: grabbing; } /* Scrolling track — flex row, animates leftward */ .nia-marquee-track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 24px; width: max-content; animation: niaMarquee 35s linear infinite; } /* Pause on hover */ .nia-marquee-wrap:hover .nia-marquee-track { animation-play-state: paused; } @keyframes niaMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Individual marquee card — fixed width */ .nia-marquee-card { flex: 0 0 240px; width: 240px; background: var(--nia-white); border-radius: var(--nia-radius-lg); overflow: hidden; box-shadow: var(--nia-shadow); transition: box-shadow var(--nia-transition), transform var(--nia-transition); display: flex; flex-direction: column; } .nia-marquee-card:hover { box-shadow: var(--nia-shadow-hover); transform: translateY(-4px); } /* Reuse existing card image/body styles */ .nia-marquee-card .nia-card-img-wrap { aspect-ratio: 3 / 4; height: 280px; } .nia-marquee-card .nia-card-body { padding: 14px 16px 18px; } @media (max-width: 768px) { .nia-marquee-card { flex: 0 0 180px; width: 180px; } .nia-marquee-card .nia-card-img-wrap { height: 200px; } .nia-marquee-track { gap: 14px; animation-duration: 25s; } } /* ── Marquee JS override — disable CSS animation, let JS drive it ── */ .nia-marquee-track { animation: none !important; will-change: transform; display: flex !important; flex-wrap: nowrap !important; width: max-content !important; gap: 24px !important; } .nia-marquee-wrap { overflow: hidden !important; width: 100% !important; }