/* Theme Name: Astra Child - NOBLE Premium Template: astra Version: 2.0.0 Author: NOBLE Design Team Description: Premium luxury child theme for NOBLE Indonesia */ /* ======================================== NOBLE PREMIUM - LUXURY CUSTOM STYLES V2 ======================================== */ /* ---- CSS Variables ---- */ :root { --noble-gold: #c9a96e; --noble-gold-light: #e0c9a0; --noble-gold-dark: #a0824d; --noble-gold-pale: rgba(201, 169, 110, 0.1); --noble-black: #1a1a1a; --noble-dark: #2d2d2d; --noble-cream: #faf8f5; --noble-white: #ffffff; --noble-gray: #6b6b6b; --noble-light-gray: #f5f5f5; --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.1); --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.15); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } /* ---- Base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } body { font-family: 'Cormorant Garamond', Georgia, serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; color: var(--noble-black); line-height: 1.6; } /* Selection */ ::selection { background: var(--noble-gold); color: var(--noble-white); } /* ======================================== HEADER - STICKY & PREMIUM ======================================== */ /* Main header container */ .site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; transition: var(--transition-smooth); } /* Add padding to body to prevent content jump */ body { padding-top: 80px !important; } /* Header scrolled state */ .site-header.ast-header-scrolled, .site-header.header-scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important; background: rgba(255, 255, 255, 0.98) !important; } /* Header inner */ .ast-main-header-wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; } /* Logo */ .custom-logo-link img { max-height: 50px !important; width: auto; transition: var(--transition-smooth); } /* Navigation menu */ .main-header-menu .menu-item a { font-size: 13px !important; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; color: var(--noble-black) !important; padding: 30px 18px !important; position: relative; font-family: 'Inter', sans-serif; transition: var(--transition-smooth); } /* Active/hover nav underline */ .main-header-menu .menu-item a::after { content: ''; position: absolute; bottom: 22px; left: 18px; right: 18px; height: 2px; background: var(--noble-gold); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; } .main-header-menu .menu-item a:hover::after, .main-header-menu .menu-item.current-menu-item a::after { transform: scaleX(1); } .main-header-menu .menu-item a:hover { color: var(--noble-gold-dark) !important; } /* Cart icon */ .ast-site-header-cart .ast-cart-menu-wrap { color: var(--noble-black) !important; transition: var(--transition-smooth); } .ast-site-header-cart .ast-cart-menu-wrap:hover { color: var(--noble-gold) !important; } /* ======================================== HERO SECTION - FULL IMPACT ======================================== */ /* Container fix for full width */ .ast-container { max-width: 100% !important; padding: 0 !important; } /* Main content wrapper */ #primary { margin: 0 !important; padding: 0 !important; } .entry-content { margin: 0 !important; padding: 0 !important; } /* Hero section */ .noble-hero { position: relative; min-height: calc(100vh - 80px); display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(26, 26, 26, 0.92) 0%, rgba(45, 45, 45, 0.88) 50%, rgba(26, 26, 26, 0.9) 100%), url('/wp-content/uploads/2026/05/DEVELOPMENT.png') center center / cover no-repeat; padding: 80px 0; overflow: hidden; } /* Animated background overlay */ .noble-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 50%, rgba(201, 169, 110, 0.15) 0%, transparent 70%); animation: heroGlow 8s ease-in-out infinite alternate; } @keyframes heroGlow { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 1; transform: scale(1.1); } } /* Hero content wrapper */ .noble-hero .wp-block-columns { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Eyebrow text */ .noble-hero .noble-eyebrow { font-family: 'Inter', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 4px; color: var(--noble-gold); margin-bottom: 24px; font-weight: 500; opacity: 0; animation: fadeInUp 0.8s ease forwards 0.3s; } /* Main heading */ .noble-hero .noble-hero-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(3rem, 5.5vw, 5.5rem); font-weight: 300; line-height: 1.1; color: var(--noble-white); margin-bottom: 32px; max-width: 800px; opacity: 0; animation: fadeInUp 0.8s ease forwards 0.5s; text-wrap: balance; } /* Subtitle text */ .noble-hero .noble-hero-copy { font-family: 'Inter', sans-serif; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: rgba(255, 255, 255, 0.85); line-height: 1.7; margin-bottom: 48px; max-width: 600px; font-weight: 300; opacity: 0; animation: fadeInUp 0.8s ease forwards 0.7s; } /* CTA Buttons row */ .noble-hero .noble-cta-row { gap: 20px; margin-bottom: 60px; opacity: 0; animation: fadeInUp 0.8s ease forwards 0.9s; } /* Button base */ .wp-block-button__link { border-radius: 50px !important; padding: 18px 44px !important; font-family: 'Inter', sans-serif; font-size: 13px !important; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 600; transition: var(--transition-smooth); position: relative; overflow: hidden; border: 2px solid transparent !important; } /* Primary button (gold) */ .noble-primary .wp-block-button__link { background: var(--noble-gold) !important; color: var(--noble-black) !important; border-color: var(--noble-gold) !important; } .noble-primary .wp-block-button__link:hover { background: var(--noble-gold-light) !important; transform: translateY(-3px); box-shadow: 0 12px 35px rgba(201, 169, 110, 0.4); } /* Secondary button (outline white) */ .noble-secondary .wp-block-button__link { background: transparent !important; color: var(--noble-white) !important; border-color: rgba(255, 255, 255, 0.5) !important; } .noble-secondary .wp-block-button__link:hover { background: var(--noble-white) !important; color: var(--noble-black) !important; border-color: var(--noble-white) !important; transform: translateY(-3px); } /* Proof points row */ .noble-proof-row { display: flex; gap: 50px; flex-wrap: wrap; opacity: 0; animation: fadeInUp 0.8s ease forwards 1.1s; } .noble-proof-row p { display: flex; flex-direction: column; margin: 0; } .noble-proof-row strong { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--noble-gold-light); margin-bottom: 6px; letter-spacing: 0.5px; } .noble-proof-row span { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.7); font-weight: 300; } /* Scroll indicator */ .noble-hero::after { content: ''; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: linear-gradient(to bottom, var(--noble-gold), transparent); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleY(0.7); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1); } } /* ======================================== SECTIONS - GLOBAL STYLING ======================================== */ /* Section base */ .noble-section { padding: 120px 40px; position: relative; } /* Section eyebrow */ .noble-section .noble-eyebrow { font-family: 'Inter', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 4px; color: var(--noble-gold-dark); margin-bottom: 20px; font-weight: 500; } /* Section heading */ .noble-section h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 300; line-height: 1.2; color: var(--noble-black); margin-bottom: 60px; text-wrap: balance; } /* ======================================== CATEGORIES SECTION ======================================== */ .noble-categories { background: var(--noble-cream); } /* Card grid */ .noble-card-grid { gap: 30px; margin: 0; } .noble-card-grid.noble-four { display: grid !important; grid-template-columns: repeat(4, 1fr); } /* Individual cards */ .noble-card { background: var(--noble-white); padding: 48px 36px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: var(--transition-smooth); position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.04); height: 100%; } /* Gold top accent line */ .noble-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--noble-gold), var(--noble-gold-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .noble-card:hover::before { transform: scaleX(1); } .noble-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); } /* Card title */ .noble-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; color: var(--noble-black); margin-bottom: 16px; font-weight: 400; } /* Card description */ .noble-card p { font-family: 'Inter', sans-serif; color: var(--noble-gray); line-height: 1.7; margin-bottom: 28px; font-size: 0.95rem; } /* Card link */ .noble-card a { font-family: 'Inter', sans-serif; color: var(--noble-gold-dark); text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; position: relative; display: inline-block; padding-bottom: 4px; } .noble-card a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--noble-gold); transition: width 0.4s ease; } .noble-card a:hover::after { width: 100%; } .noble-categories .noble-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.85) 100%); z-index: 0; pointer-events: none; } .noble-categories .noble-card h3, .noble-categories .noble-card p, .noble-categories .noble-card a { color: white; } .noble-categories .noble-card:nth-child(1) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT-1-rz.png.png'); color: white; } .noble-categories .noble-card:nth-child(2) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT-2-rz.png'); } .noble-categories .noble-card:nth-child(3) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT-3-rz.png'); } .noble-categories .noble-card:nth-child(4) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT-4-rz.png'); } /* ======================================== PRODUCTS SECTION ======================================== */ .noble-products { background: var(--noble-white); } /* WooCommerce grid fix */ .noble-products .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 30px !important; margin: 0 !important; } .noble-products .woocommerce ul.products::before, .noble-products .woocommerce ul.products::after { display: none !important; } /* Product card */ .woocommerce ul.products li.product { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; background: var(--noble-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); border: 1px solid rgba(0, 0, 0, 0.04); } .woocommerce ul.products li.product:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } /* Product image */ .woocommerce ul.products li.product .woocommerce-loop-product__link img { transition: transform 0.6s ease; width: 100%; height: auto; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__link img { transform: scale(1.05); } /* Product title */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; color: var(--noble-black); padding: 20px 24px 8px; font-weight: 400; } /* Product category */ .woocommerce ul.products li.product .ast-woo-product-category { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--noble-gray); text-transform: uppercase; letter-spacing: 1px; padding: 0 24px; } /* Product price */ .woocommerce ul.products li.product .price { font-family: 'Inter', sans-serif; color: var(--noble-gold-dark); font-weight: 600; font-size: 1rem; padding: 8px 24px 20px; } .woocommerce ul.products li.product .price del { color: var(--noble-gray); font-weight: 400; margin-right: 8px; } .woocommerce ul.products li.product .price ins { text-decoration: none; } /* Add to cart button */ .woocommerce ul.products li.product .button { background: var(--noble-gold) !important; color: var(--noble-black) !important; border-radius: 50px !important; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px !important; font-family: 'Inter', sans-serif; font-weight: 600; padding: 12px 24px !important; margin: 0 24px 24px !important; transition: var(--transition-smooth); border: none !important; } .woocommerce ul.products li.product .button:hover { background: var(--noble-gold-light) !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(201, 169, 110, 0.4); } /* Sale badge */ .woocommerce ul.products li.product .onsale { background: var(--noble-gold) !important; color: var(--noble-black) !important; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 50px; top: 16px !important; left: 16px !important; right: auto !important; } /* Center CTA */ .noble-centered-cta { justify-content: center; margin-top: 50px; } /* ======================================== PROCESS SECTION - DARK ======================================== */ .noble-process { background: linear-gradient(135deg, var(--noble-black) 0%, #252525 50%, var(--noble-black) 100%); color: var(--noble-white); position: relative; overflow: hidden; } /* Animated gradient orb */ .noble-process::before { content: ''; position: absolute; top: -30%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(201, 169, 110, 0.12) 0%, transparent 70%); animation: floatOrb 20s ease-in-out infinite; pointer-events: none; } @keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-40px, 40px) scale(1.1); } 66% { transform: translate(30px, -30px) scale(0.95); } } .noble-process .noble-eyebrow { color: var(--noble-gold); } .noble-process h2 { color: var(--noble-white); } /* Process steps grid */ .noble-card-grid.noble-three { display: grid !important; grid-template-columns: repeat(3, 1fr); } /* Step card */ .noble-step { background: rgba(255, 255, 255, 0.03); padding: 48px 36px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); transition: var(--transition-smooth); position: relative; height: 100%; } .noble-step:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-5px); border-color: var(--noble-gold); } /* Step number */ .noble-step span { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: linear-gradient(135deg, var(--noble-gold), var(--noble-gold-light)); color: var(--noble-black); border-radius: 50%; font-weight: 600; font-size: 20px; font-family: 'Inter', sans-serif; margin-bottom: 28px; transition: var(--transition-bounce); } .noble-step:hover span { transform: scale(1.1) rotate(5deg); box-shadow: 0 0 30px rgba(201, 169, 110, 0.4); } /* Step title */ .noble-step h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--noble-white); font-size: 1.5rem; margin-bottom: 16px; font-weight: 400; } /* Step description */ .noble-step p { font-family: 'Inter', sans-serif; color: rgba(255, 255, 255, 0.7); line-height: 1.7; font-size: 0.95rem; font-weight: 300; } /* ======================================== TRUST SECTION ======================================== */ .noble-trust { background: var(--noble-cream); } .noble-trust .wp-block-columns { gap: 80px; align-items: center; } .noble-trust h2 { margin-bottom: 0; } /* Check list */ .noble-check-list { list-style: none; padding: 0; margin: 0; } .noble-check-list li { font-family: 'Inter', sans-serif; padding: 20px 0 20px 52px; position: relative; color: var(--noble-gray); line-height: 1.6; border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: var(--transition-smooth); font-size: 0.95rem; } .noble-check-list li:last-child { border-bottom: none; } /* Check circle */ .noble-check-list li::before { content: '✓'; position: absolute; left: 0; top: 20px; width: 28px; height: 28px; background: var(--noble-gold); color: var(--noble-black); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif; transition: var(--transition-bounce); } .noble-check-list li:hover::before { transform: scale(1.15); box-shadow: 0 4px 15px rgba(201, 169, 110, 0.4); } .noble-check-list li:hover { padding-left: 60px; color: var(--noble-black); } /* ======================================== FINAL CTA SECTION ======================================== */ .noble-final-cta { background: linear-gradient(135deg, var(--noble-gold-dark) 0%, var(--noble-gold) 50%, var(--noble-gold-light) 100%); text-align: center; padding: 140px 40px; position: relative; overflow: hidden; } /* Subtle texture overlay */ .noble-final-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('/wp-content/uploads/2022/11/bg-04.jpg') center / cover no-repeat; opacity: 0.08; mix-blend-mode: overlay; pointer-events: none; } .noble-final-cta h2 { color: var(--noble-black); font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 24px; position: relative; z-index: 1; } .noble-final-cta p { font-family: 'Inter', sans-serif; color: rgba(0, 0, 0, 0.7); font-size: 1.1rem; margin-bottom: 48px; position: relative; z-index: 1; font-weight: 300; max-width: 600px; margin-left: auto; margin-right: auto; } /* Final CTA buttons */ .noble-final-cta .noble-primary .wp-block-button__link { background: var(--noble-black) !important; color: var(--noble-white) !important; border-color: var(--noble-black) !important; } .noble-final-cta .noble-primary .wp-block-button__link:hover { background: var(--noble-dark) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .noble-final-cta .noble-secondary .wp-block-button__link { border-color: var(--noble-black) !important; color: var(--noble-black) !important; } .noble-final-cta .noble-secondary .wp-block-button__link:hover { background: var(--noble-black) !important; color: var(--noble-white) !important; } /* Footer widgets */ .site-footer .widget { margin-bottom: 40px; } .site-footer .widget-title { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--noble-white); font-size: 1.4rem; font-weight: 400; margin-bottom: 24px; } .site-footer a { color: rgba(255, 255, 255, 0.7); font-family: 'Inter', sans-serif; font-size: 14px; transition: var(--transition-smooth); text-decoration: none; } .site-footer a:hover { color: var(--noble-gold); } /* Footer bottom bar */ .ast-small-footer { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding-top: 30px !important; margin-top: 40px !important; } .ast-small-footer-wrap { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.5); } /* ======================================== ANIMATIONS ======================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Scroll reveal base */ .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* Stagger for cards */ .noble-card:nth-child(1) { transition-delay: 0.1s; } .noble-card:nth-child(2) { transition-delay: 0.2s; } .noble-card:nth-child(3) { transition-delay: 0.3s; } .noble-card:nth-child(4) { transition-delay: 0.4s; } .noble-step:nth-child(1) { transition-delay: 0.1s; } .noble-step:nth-child(2) { transition-delay: 0.2s; } .noble-step:nth-child(3) { transition-delay: 0.3s; } /* ======================================== SCROLLBAR ======================================== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--noble-light-gray); } ::-webkit-scrollbar-thumb { background: var(--noble-gold); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--noble-gold-dark); } /* ======================================== ACCESSIBILITY ======================================== */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--noble-gold); outline-offset: 3px; } /* ======================================== RESPONSIVE - TABLET ======================================== */ @media (max-width: 1024px) { .noble-section { padding: 80px 24px; } .noble-hero { padding: 60px 0; } .noble-hero .wp-block-columns { padding: 0 24px; } .noble-card-grid.noble-four { grid-template-columns: repeat(2, 1fr) !important; } .noble-card-grid.noble-three { grid-template-columns: repeat(2, 1fr) !important; } .noble-products .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } .noble-proof-row { gap: 30px; } .noble-trust .wp-block-columns { gap: 40px; } .ast-main-header-wrap { padding: 0 24px; } .main-header-menu .menu-item a { padding: 24px 14px !important; font-size: 12px !important; } } /* ======================================== RESPONSIVE - MOBILE ======================================== */ @media (max-width: 768px) { body { padding-top: 70px !important; } .site-header { padding: 0 !important; } .noble-hero { min-height: auto; padding: 80px 0 100px; } .noble-hero .wp-block-columns { padding: 0 20px; } .noble-hero .noble-hero-title { font-size: clamp(2.2rem, 8vw, 3.2rem); } .noble-hero .noble-cta-row { flex-direction: column; width: 100%; } .noble-hero .wp-block-button { width: 100%; } .noble-hero .wp-block-button__link { width: 100%; text-align: center; padding: 18px 30px !important; } .noble-proof-row { flex-direction: column; gap: 20px; } .noble-proof-row p { flex-direction: row; align-items: center; gap: 12px; } .noble-section { padding: 60px 20px; } .noble-section h2 { margin-bottom: 40px; } .noble-card-grid.noble-four, .noble-card-grid.noble-three { grid-template-columns: 1fr !important; } .noble-card, .noble-step { padding: 36px 28px; } .noble-card h3 { font-size: 1.4rem; } .noble-step span { width: 48px; height: 48px; font-size: 18px; } .noble-step h3 { font-size: 1.3rem; } .noble-products .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 24px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.1rem; } .noble-check-list li { padding: 16px 0 16px 44px; font-size: 0.9rem; } .noble-check-list li::before { width: 24px; height: 24px; font-size: 12px; } .noble-trust .wp-block-columns { flex-direction: column !important; gap: 30px; } .noble-final-cta { padding: 80px 20px; } .noble-final-cta h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); } .noble-final-cta .wp-block-buttons { flex-direction: column; gap: 16px; } .noble-final-cta .wp-block-button { width: 100%; } .site-footer { padding: 60px 0 30px !important; } /* Mobile menu */ .ast-mobile-popup-inner { background: var(--noble-black) !important; } .ast-mobile-popup-inner .menu-item a { color: var(--noble-white) !important; font-family: 'Inter', sans-serif; font-size: 16px; padding: 18px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); letter-spacing: 1.5px; } .ast-mobile-popup-inner .menu-item a:hover { background: rgba(201, 169, 110, 0.1); color: var(--noble-gold) !important; } /* Mobile hamburger */ .ast-mobile-menu-trigger { padding: 12px !important; border-radius: var(--radius-sm) !important; } .ast-mobile-menu-trigger .menu-toggle-icon { color: var(--noble-black) !important; } /* Hide scroll indicator on mobile */ .noble-hero::after { display: none; } } /* ======================================== RESPONSIVE - SMALL MOBILE ======================================== */ @media (max-width: 480px) { body { padding-top: 65px !important; } .noble-hero .noble-hero-title { font-size: 2rem; } .noble-hero .noble-hero-copy { font-size: 1rem; } .noble-card, .noble-step { padding: 28px 22px; } .woocommerce ul.products li.product .button { margin: 0 20px 20px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .ast-woo-product-category, .woocommerce ul.products li.product .price { padding-left: 20px; padding-right: 20px; } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .noble-hero::after { display: none; } } /* ======================================== PRINT ======================================== */ @media print { .site-header { position: relative !important; } body { padding-top: 0 !important; } .noble-hero { min-height: auto; padding: 40px 0; background: var(--noble-black) !important; } .noble-hero::before, .noble-hero::after { display: none; } .wp-block-button__link { border: 1px solid #000 !important; } } /* Override Astra footer completely */ .site-footer { background: #141414 !important; color: #fff !important; padding: 0 !important; margin: 0 !important; } .site-footer .ast-container, .site-footer .ast-small-footer { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .site-footer .ast-small-footer-wrap { display: none !important; } /* Hide default Astra footer widgets if they exist */ .site-footer .footer-adv .ast-container, .site-footer .footer-adv .widget, .site-footer [class*="footer-widget"] { display: none !important; } /* ======================================== NOBLE CUSTOM FOOTER ======================================== */ .noble-footer { background: #141414; color: #fff; position: relative; overflow: hidden; } /* Subtle gold gradient glow at top */ .noble-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--noble-gold) 50%, transparent 100%); } /* Main footer area */ .noble-footer-main { padding: 80px 0 60px; position: relative; z-index: 1; } .noble-footer-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px; } /* Footer columns */ .noble-footer-col { display: flex; flex-direction: column; } /* Brand column */ .noble-footer-brand { padding-right: 40px; } /* Footer logo */ .noble-footer-logo { margin-bottom: 24px; } .noble-footer-logo img { max-height: 60px; width: auto; filter: brightness(1.2); } .noble-footer-logo-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.5rem; font-weight: 300; color: var(--noble-gold); letter-spacing: 8px; } /* Tagline */ .noble-footer-tagline { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin-bottom: 28px; font-weight: 300; } /* Social icons */ .noble-footer-social { display: flex; gap: 12px; } .noble-social-link { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); transition: all 0.3s ease; } .noble-social-link:hover { background: var(--noble-gold); border-color: var(--noble-gold); color: #141414; transform: translateY(-3px); } .noble-social-link svg { width: 16px; height: 16px; } /* Footer titles */ .noble-footer-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 400; color: #fff; margin-bottom: 24px; position: relative; padding-bottom: 12px; } .noble-footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--noble-gold); } /* Footer menu */ .noble-footer-menu { list-style: none; padding: 0; margin: 0; } .noble-footer-menu li { margin-bottom: 12px; } .noble-footer-menu a { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: all 0.3s ease; display: inline-block; position: relative; padding-left: 0; } .noble-footer-menu a::before { content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--noble-gold); opacity: 0; transition: all 0.3s ease; } .noble-footer-menu a:hover { color: var(--noble-gold); padding-left: 16px; } .noble-footer-menu a:hover::before { opacity: 1; left: 0; } /* Contact list */ .noble-footer-contact { list-style: none; padding: 0; margin: 0; } .noble-contact-item { margin-bottom: 16px; display: flex; flex-direction: column; } .noble-contact-label { font-family: 'Inter', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--noble-gold); margin-bottom: 4px; font-weight: 500; } .noble-footer-contact a, .noble-footer-contact span { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; } .noble-footer-contact a:hover { color: var(--noble-gold); } /* ======================================== FOOTER BOTTOM BAR ======================================== */ .noble-footer-bottom { background: #0a0a0a; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); } .noble-footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .noble-footer-copyright { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.4); margin: 0; font-weight: 300; } .noble-footer-legal { display: flex; align-items: center; gap: 16px; } .noble-footer-legal a { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 0.3s ease; } .noble-footer-legal a:hover { color: var(--noble-gold); } .noble-footer-divider { color: rgba(255, 255, 255, 0.2); font-size: 13px; } /* ======================================== FOOTER RESPONSIVE ======================================== */ @media (max-width: 1024px) { .noble-footer-container { grid-template-columns: repeat(2, 1fr); gap: 50px; } .noble-footer-brand { grid-column: 1 / -1; padding-right: 0; text-align: center; } .noble-footer-social { justify-content: center; } .noble-footer-tagline { max-width: 400px; margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .noble-footer-main { padding: 60px 0 40px; } .noble-footer-container { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; } .noble-footer-brand { text-align: center; } .noble-footer-title { text-align: center; } .noble-footer-title::after { left: 50%; transform: translateX(-50%); } .noble-footer-menu, .noble-footer-contact { text-align: center; } .noble-footer-bottom-content { flex-direction: column; text-align: center; padding: 0 24px; } .noble-contact-item { align-items: center; } } @media (max-width: 480px) { .noble-footer-main { padding: 50px 0 30px; } .noble-footer-container { padding: 0 20px; gap: 35px; } .noble-footer-logo-text { font-size: 2rem; } } /* Ensure footer always appears at the bottom */ .site-footer, .noble-footer { display: block !important; width: 100% !important; clear: both !important; float: none !important; position: relative !important; order: 999 !important; flex: 0 0 100% !important; max-width: 100% !important; } /* Ensure body stacks elements vertically */ body, #page, #wrapper, .site { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } /* Main content area should grow */ #primary, .site-content, #main { flex: 1 0 auto !important; width: 100% !important; } /* Footer should not flex */ .site-footer { flex: 0 0 auto !important; } /* Clear any floating elements before footer */ .site-footer::before { content: ''; display: table; clear: both; } /* Override any Astra footer layout */ .ast-page-builder-template .site-footer { margin-top: 0 !important; } /* Ensure footer is not in a flex/grid row */ body *:has(> .site-footer), body *:has(> .noble-footer) { display: block !important; } /* Fix for Astra container */ .ast-container:has(.site-footer) { max-width: 100% !important; padding: 0 !important; } /* Footer must be full width */ .noble-footer { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; } /* Force footer to be block level and at bottom */ .site-footer, .noble-footer, footer#colophon { display: block !important; width: 100% !important; max-width: 100% !important; clear: both !important; float: none !important; position: relative !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; margin: 0 !important; padding: 0 !important; flex: none !important; order: 9999 !important; grid-column: 1 / -1 !important; align-self: flex-end !important; justify-self: stretch !important; } /* Ensure all parent containers are block */ #page, #wrapper, .site, .ast-container, .site-content, #content, #main, .primary { display: block !important; flex-direction: column !important; } /* Make sure body is block */ /* Override any flex/grid on page wrapper */ body * { flex-wrap: wrap !important; } /* Force footer to be at the bottom by making it last */ .site-footer { margin-top: auto !important; } /* Make sure footer is not inside a flex row */ .site-footer::before { content: ''; display: table; clear: both; } /* Astra specific - force footer full width */ .ast-page-builder-template .site-footer { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Remove any max-width constraints */ .site-footer .ast-container, .site-footer .ast-small-footer, .site-footer [class*="ast-"] { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Ensure footer goes below content */ .site-content+.site-footer, #content+.site-footer, #main+.site-footer { display: block !important; clear: both !important; width: 100% !important; } /* ======================================== FOOTER - PREMIUM STYLING ======================================== */ /* Override Astra footer colors */ .site-footer { background: #141414 !important; color: rgba(255, 255, 255, 0.7) !important; } /* Footer primary section */ .site-primary-footer-wrap { padding: 80px 0 40px !important; background: #141414 !important; } /* Footer container */ .site-primary-footer-inner-wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 40px !important; } /* Footer widgets */ .site-footer .widget { margin-bottom: 30px !important; } .site-footer .widget-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1.3rem !important; font-weight: 400 !important; color: #fff !important; margin-bottom: 24px !important; position: relative !important; padding-bottom: 12px !important; } .site-footer .widget-title::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 30px !important; height: 2px !important; background: #c9a96e !important; } /* Footer links */ .site-footer a { color: rgba(255, 255, 255, 0.6) !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; text-decoration: none !important; transition: all 0.3s ease !important; } .site-footer a:hover { color: #c9a96e !important; } /* Footer menu items */ .site-footer .menu-item a { display: block !important; padding: 8px 0 !important; position: relative !important; padding-left: 0 !important; transition: all 0.3s ease !important; } .site-footer .menu-item a::before { content: '' !important; position: absolute !important; left: -16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #c9a96e !important; opacity: 0 !important; transition: all 0.3s ease !important; } .site-footer .menu-item a:hover { padding-left: 16px !important; color: #c9a96e !important; } .site-footer .menu-item a:hover::before { opacity: 1 !important; left: 0 !important; } /* Footer bottom bar */ .site-below-footer-wrap { background: #0a0a0a !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 24px 0 !important; } .site-below-footer-inner-wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 40px !important; } /* Footer copyright */ .ast-footer-copyright { color: rgba(255, 255, 255, 0.4) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; } /* Footer social icons if any */ .site-footer .ast-social-color-type-custom svg { fill: rgba(255, 255, 255, 0.6) !important; } .site-footer .ast-social-color-type-custom svg:hover { fill: #c9a96e !important; } /* Responsive footer */ @media (max-width: 768px) { .site-primary-footer-wrap { padding: 60px 0 30px !important; } .site-primary-footer-inner-wrap, .site-below-footer-inner-wrap { padding: 0 24px !important; } } @media (max-width: 480px) { .site-primary-footer-wrap { padding: 50px 0 25px !important; } .site-primary-footer-inner-wrap, .site-below-footer-inner-wrap { padding: 0 20px !important; } } .noble-footer-credit { color: rgba(255, 255, 255, 0.32); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.2px; margin: 0; } .noble-footer-credit a { color: rgba(255, 255, 255, 0.46); text-decoration: none; transition: color 0.3s ease; } .noble-footer-credit a:hover { color: var(--noble-gold); } /* Footer CTA links */ .noble-footer-actions { display: flex; flex-wrap: wrap; gap: 12px; } .noble-footer-action { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgba(255, 255, 255, 0.78) !important; display: inline-flex; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; line-height: 1; padding: 13px 18px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; } .noble-footer-action:hover { border-color: var(--noble-gold); color: var(--noble-gold) !important; transform: translateY(-2px); } .noble-footer-action-primary { background: var(--noble-gold); border-color: var(--noble-gold); color: #141414 !important; } .noble-footer-action-primary:hover { background: var(--noble-gold-light); color: #141414 !important; } /* ======================================== NOBLE COMPACT GLASS HEADER - FINAL ======================================== */ :root { --noble-header-height: 54px; --noble-mobile-header-height: 52px; } body { padding-top: var(--noble-header-height) !important; } body.admin-bar .site-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px !important; } } #masthead.site-header, .site-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 99999 !important; min-height: var(--noble-header-height) !important; height: var(--noble-header-height) !important; background: rgba(255, 255, 255, 0.76) !important; -webkit-backdrop-filter: blur(18px) saturate(170%) !important; backdrop-filter: blur(18px) saturate(170%) !important; border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important; box-shadow: 0 10px 30px rgba(20, 18, 14, 0.06) !important; } #masthead .ast-main-header-wrap, #masthead .ast-primary-header-bar, #masthead .site-primary-header-wrap, #masthead .ast-builder-grid-row, #masthead .site-header-section, #masthead .ast-builder-layout-element, #masthead .main-header-bar-navigation, #masthead .main-navigation, #masthead .main-header-menu, #masthead .ast-site-header-cart, #masthead .ast-header-account-wrap { min-height: var(--noble-header-height) !important; height: var(--noble-header-height) !important; max-height: var(--noble-header-height) !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: center !important; } #masthead .ast-primary-header-bar, #masthead .site-primary-header-wrap { background: transparent !important; border: 0 !important; } #masthead .main-header-menu>.menu-item, #masthead .main-header-menu>.menu-item>.menu-link { min-height: var(--noble-header-height) !important; height: var(--noble-header-height) !important; line-height: 1 !important; } #masthead .main-header-menu>.menu-item>.menu-link { display: inline-flex !important; align-items: center !important; padding: 0 15px !important; font-size: 12px !important; letter-spacing: 2.2px !important; } #masthead .main-header-menu>.menu-item>.menu-link::after { bottom: 8px !important; } #masthead .custom-logo-link, #masthead .site-logo-img, #masthead .ast-site-identity, #masthead .site-branding { display: inline-flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; } #masthead .custom-logo-link img, #masthead img.custom-logo { width: auto !important; max-height: 34px !important; height: 34px !important; object-fit: contain !important; } #masthead .ast-builder-grid-row.ast-grid-center-col-layout { grid-template-columns: 1fr auto 1fr !important; } #masthead .site-header-primary-section-left, #masthead .site-header-primary-section-center, #masthead .site-header-primary-section-right { min-height: var(--noble-header-height) !important; height: var(--noble-header-height) !important; display: flex !important; align-items: center !important; } #masthead .site-header-primary-section-right { justify-content: flex-end !important; } /* Keep mobile header in one row: logo + hamburger/cart/account */ @media (max-width: 921px) { body { padding-top: var(--noble-mobile-header-height) !important; } #masthead.site-header, .site-header, #masthead .ast-main-header-wrap, #masthead .ast-primary-header-bar, #masthead .site-primary-header-wrap, #masthead .ast-builder-grid-row, #masthead .site-header-section, #masthead .ast-builder-layout-element { min-height: var(--noble-mobile-header-height) !important; height: var(--noble-mobile-header-height) !important; max-height: var(--noble-mobile-header-height) !important; } #masthead .ast-builder-grid-row, #masthead .ast-grid-center-col-layout-only, #masthead .ast-builder-grid-row-layout-default { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 10px !important; } #masthead .site-header-primary-section-left, #masthead .site-header-primary-section-center, #masthead .site-header-primary-section-right { min-height: var(--noble-mobile-header-height) !important; height: var(--noble-mobile-header-height) !important; display: flex !important; align-items: center !important; } #masthead .site-header-primary-section-center { justify-content: center !important; } #masthead .site-header-primary-section-right { justify-content: flex-end !important; } #masthead .custom-logo-link img, #masthead img.custom-logo { max-height: 30px !important; height: 30px !important; } #masthead .menu-toggle, #masthead .ast-mobile-menu-trigger-outline, #masthead .ast-button-wrap, #masthead .mobile-menu-toggle-icon { min-height: 36px !important; height: 36px !important; width: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } #masthead .main-header-menu, #masthead .main-header-bar-navigation { height: auto !important; min-height: 0 !important; } } /* ======================================== NOBLE INNER PAGES - ENHANCED UI/UX ======================================== */ /* ---- Page Hero Section ---- */ .noble-page-hero { background: linear-gradient(135deg, var(--noble-cream) 0%, var(--noble-white) 100%); padding: 120px 0 80px; position: relative; overflow: hidden; } .noble-page-hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: var(--noble-gold-pale); border-radius: 50%; opacity: 0.5; } .noble-page-hero .noble-eyebrow { color: var(--noble-gold); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } .noble-page-hero h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; color: var(--noble-black); margin-bottom: 24px; max-width: 800px; } .noble-page-hero .hero-description { font-size: 1.2rem; color: var(--noble-gray); max-width: 600px; line-height: 1.8; } /* ---- Content Sections ---- */ .noble-content-section { padding: 80px 0; } .noble-content-section.alt-bg { background: var(--noble-light-gray); } /* ---- Process Steps (Custom Orders) ---- */ .noble-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 60px 0; } .noble-process-step { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px 36px; text-align: center; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); position: relative; border: 1px solid rgba(201, 169, 110, 0.1); } .noble-process-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--noble-gold-light); } .noble-process-step .step-number { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: linear-gradient(135deg, var(--noble-gold) 0%, var(--noble-gold-dark) 100%); color: var(--noble-white); font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; border-radius: 50%; margin-bottom: 24px; } .noble-process-step h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-process-step p { color: var(--noble-gray); line-height: 1.7; font-size: 1rem; } /* ---- Feature Cards (About) ---- */ .noble-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 60px 0; } .noble-feature-card { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px 36px; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); border: 1px solid rgba(201, 169, 110, 0.1); } .noble-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); } .noble-feature-card .feature-icon { width: 56px; height: 56px; background: var(--noble-gold-pale); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 24px; } .noble-feature-card h3 { font-size: 1.4rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-feature-card p { color: var(--noble-gray); line-height: 1.7; } /* ---- FAQ Accordion ---- */ .noble-faq-container { max-width: 800px; margin: 60px auto; } .noble-faq-item { background: var(--noble-white); border-radius: var(--radius-md); margin-bottom: 16px; box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid rgba(201, 169, 110, 0.1); transition: var(--transition-smooth); } .noble-faq-item:hover { box-shadow: var(--shadow-medium); } .noble-faq-item.active { border-color: var(--noble-gold-light); } .noble-faq-question { padding: 24px 32px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 1.1rem; color: var(--noble-black); transition: var(--transition-smooth); } .noble-faq-question:hover { color: var(--noble-gold-dark); } .noble-faq-question::after { content: '+'; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 300; color: var(--noble-gold); transition: var(--transition-smooth); } .noble-faq-item.active .noble-faq-question::after { transform: rotate(45deg); } .noble-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease; } .noble-faq-item.active .noble-faq-answer { max-height: 500px; padding: 0 32px 24px; } .noble-faq-answer p { color: var(--noble-gray); line-height: 1.8; margin: 0; } /* ---- Contact Page ---- */ .noble-contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; margin-top: 60px; } .noble-contact-info { display: flex; flex-direction: column; gap: 32px; } .noble-contact-card { background: var(--noble-white); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 169, 110, 0.1); } .noble-contact-card h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-contact-card a { color: var(--noble-gold); text-decoration: none; transition: var(--transition-smooth); } .noble-contact-card a:hover { color: var(--noble-gold-dark); } .noble-contact-form-wrapper { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 169, 110, 0.1); } /* ---- Shipping & Returns Cards ---- */ .noble-policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 60px 0; } .noble-policy-card { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 169, 110, 0.1); transition: var(--transition-smooth); } .noble-policy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); } .noble-policy-card .policy-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--noble-gold) 0%, var(--noble-gold-dark) 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--noble-white); font-size: 28px; } .noble-policy-card h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-policy-card p { color: var(--noble-gray); line-height: 1.8; } /* ---- Shop Page Improvements ---- */ .woocommerce-products-header { background: linear-gradient(135deg, var(--noble-cream) 0%, var(--noble-white) 100%); padding: 100px 0 60px; margin-bottom: 60px; text-align: center; } .woocommerce-products-header h1 { font-size: 3rem; font-weight: 300; color: var(--noble-black); margin-bottom: 16px; } .woocommerce-products-header .page-description { font-size: 1.1rem; color: var(--noble-gray); max-width: 600px; margin: 0 auto; } .woocommerce .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .woocommerce .product { background: var(--noble-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); border: 1px solid rgba(201, 169, 110, 0.1); } .woocommerce .product:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .woocommerce .product img { width: 100%; height: 300px; object-fit: cover; transition: var(--transition-smooth); } .woocommerce .product:hover img { transform: scale(1.05); } .woocommerce .product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 500; padding: 20px 24px 8px; color: var(--noble-black); } .woocommerce .product .price { padding: 0 24px 20px; font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--noble-gold); font-weight: 600; } .woocommerce .product .button { margin: 0 24px 24px; background: var(--noble-black); color: var(--noble-white); border-radius: var(--radius-sm); padding: 14px 24px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); } .woocommerce .product .button:hover { background: var(--noble-gold); } /* ---- CTA Section ---- */ .noble-cta-section { background: linear-gradient(135deg, var(--noble-black) 0%, var(--noble-dark) 100%); padding: 100px 0; text-align: center; color: var(--noble-white); margin-top: 80px; } .noble-cta-section h2 { font-size: 2.5rem; font-weight: 300; margin-bottom: 20px; } .noble-cta-section p { font-size: 1.1rem; opacity: 0.8; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; } .noble-cta-section .noble-button { display: inline-block; background: var(--noble-gold); color: var(--noble-white); padding: 18px 48px; border-radius: var(--radius-sm); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; transition: var(--transition-smooth); } .noble-cta-section .noble-button:hover { background: var(--noble-gold-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 169, 110, 0.3); } /* ---- Responsive ---- */ @media (max-width: 1024px) { .noble-process-grid, .noble-features-grid { grid-template-columns: repeat(2, 1fr); } .noble-contact-layout { grid-template-columns: 1fr; } .noble-policy-grid { grid-template-columns: 1fr; } .woocommerce .products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .noble-page-hero { padding: 100px 0 60px; } .noble-page-hero h1 { font-size: 2.5rem; } .noble-process-grid, .noble-features-grid, .woocommerce .products { grid-template-columns: 1fr; } .noble-content-section { padding: 60px 0; } .noble-contact-form-wrapper { padding: 32px; } /* ======================================== NOBLE INNER PAGES - ENHANCED UI/UX ======================================== */ /* ---- Page Hero Section ---- */ .noble-page-hero { background: linear-gradient(135deg, var(--noble-cream) 0%, var(--noble-white) 100%); padding: 120px 0 80px; position: relative; overflow: hidden; } .noble-page-hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: var(--noble-gold-pale); border-radius: 50%; opacity: 0.5; } .noble-page-hero .noble-eyebrow { color: var(--noble-gold); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } .noble-page-hero h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; color: var(--noble-black); margin-bottom: 24px; max-width: 800px; } .noble-page-hero .hero-description { font-size: 1.2rem; color: var(--noble-gray); max-width: 600px; line-height: 1.8; } /* ---- Content Sections ---- */ .noble-content-section { padding: 80px 0; } .noble-content-section.alt-bg { background: var(--noble-light-gray); } /* ---- Process Steps (Custom Orders) ---- */ .noble-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 60px 0; } .noble-process-step { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px 36px; text-align: center; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); position: relative; border: 1px solid rgba(201, 169, 110, 0.1); } .noble-process-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--noble-gold-light); } .noble-process-step .step-number { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: linear-gradient(135deg, var(--noble-gold) 0%, var(--noble-gold-dark) 100%); color: var(--noble-white); font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; border-radius: 50%; margin-bottom: 24px; } .noble-process-step h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-process-step p { color: var(--noble-gray); line-height: 1.7; font-size: 1rem; } /* ---- Feature Cards (About) ---- */ .noble-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 60px 0; } .noble-feature-card { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px 36px; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); border: 1px solid rgba(201, 169, 110, 0.1); } .noble-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); } .noble-feature-card .feature-icon { width: 56px; height: 56px; background: var(--noble-gold-pale); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 24px; } .noble-feature-card h3 { font-size: 1.4rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-feature-card p { color: var(--noble-gray); line-height: 1.7; } /* ---- FAQ Accordion ---- */ .noble-faq-container { max-width: 800px; margin: 60px auto; } .noble-faq-item { background: var(--noble-white); border-radius: var(--radius-md); margin-bottom: 16px; box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid rgba(201, 169, 110, 0.1); transition: var(--transition-smooth); } .noble-faq-item:hover { box-shadow: var(--shadow-medium); } .noble-faq-item.active { border-color: var(--noble-gold-light); } .noble-faq-question { padding: 24px 32px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 1.1rem; color: var(--noble-black); transition: var(--transition-smooth); } .noble-faq-question:hover { color: var(--noble-gold-dark); } .noble-faq-question::after { content: '+'; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 300; color: var(--noble-gold); transition: var(--transition-smooth); } .noble-faq-item.active .noble-faq-question::after { transform: rotate(45deg); } .noble-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease; } .noble-faq-item.active .noble-faq-answer { max-height: 500px; padding: 0 32px 24px; } .noble-faq-answer p { color: var(--noble-gray); line-height: 1.8; margin: 0; } /* ---- Contact Page ---- */ .noble-contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; margin-top: 60px; } .noble-contact-info { display: flex; flex-direction: column; gap: 32px; } .noble-contact-card { background: var(--noble-white); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 169, 110, 0.1); } .noble-contact-card h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-contact-card a { color: var(--noble-gold); text-decoration: none; transition: var(--transition-smooth); } .noble-contact-card a:hover { color: var(--noble-gold-dark); } .noble-contact-form-wrapper { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 169, 110, 0.1); } /* ---- Shipping & Returns Cards ---- */ .noble-policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 60px 0; } .noble-policy-card { background: var(--noble-white); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 169, 110, 0.1); transition: var(--transition-smooth); } .noble-policy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); } .noble-policy-card .policy-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--noble-gold) 0%, var(--noble-gold-dark) 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--noble-white); font-size: 28px; } .noble-policy-card h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; color: var(--noble-black); } .noble-policy-card p { color: var(--noble-gray); line-height: 1.8; } /* ---- Shop Page Improvements ---- */ .woocommerce-products-header { background: linear-gradient(135deg, var(--noble-cream) 0%, var(--noble-white) 100%); padding: 100px 0 60px; margin-bottom: 60px; text-align: center; } .woocommerce-products-header h1 { font-size: 3rem; font-weight: 300; color: var(--noble-black); margin-bottom: 16px; } .woocommerce-products-header .page-description { font-size: 1.1rem; color: var(--noble-gray); max-width: 600px; margin: 0 auto; } .woocommerce .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .woocommerce .product { background: var(--noble-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); border: 1px solid rgba(201, 169, 110, 0.1); } .woocommerce .product:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .woocommerce .product img { width: 100%; height: 300px; object-fit: cover; transition: var(--transition-smooth); } .woocommerce .product:hover img { transform: scale(1.05); } .woocommerce .product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 500; padding: 20px 24px 8px; color: var(--noble-black); } .woocommerce .product .price { padding: 0 24px 20px; font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--noble-gold); font-weight: 600; } .woocommerce .product .button { margin: 0 24px 24px; background: var(--noble-black); color: var(--noble-white); border-radius: var(--radius-sm); padding: 14px 24px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); } .woocommerce .product .button:hover { background: var(--noble-gold); } /* ---- CTA Section ---- */ .noble-cta-section { background: linear-gradient(135deg, var(--noble-black) 0%, var(--noble-dark) 100%); padding: 100px 0; text-align: center; color: var(--noble-white); margin-top: 80px; } .noble-cta-section h2 { font-size: 2.5rem; font-weight: 300; margin-bottom: 20px; } .noble-cta-section p { font-size: 1.1rem; opacity: 0.8; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; } .noble-cta-section .noble-button { display: inline-block; background: var(--noble-gold); color: var(--noble-white); padding: 18px 48px; border-radius: var(--radius-sm); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; transition: var(--transition-smooth); } .noble-cta-section .noble-button:hover { background: var(--noble-gold-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 169, 110, 0.3); } /* ---- Responsive ---- */ @media (max-width: 1024px) { .noble-process-grid, .noble-features-grid { grid-template-columns: repeat(2, 1fr); } .noble-contact-layout { grid-template-columns: 1fr; } .noble-policy-grid { grid-template-columns: 1fr; } .woocommerce .products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .noble-page-hero { padding: 100px 0 60px; } .noble-page-hero h1 { font-size: 2.5rem; } .noble-process-grid, .noble-features-grid, .woocommerce .products { grid-template-columns: 1fr; } .noble-content-section { padding: 60px 0; } .noble-contact-form-wrapper { padding: 32px; } /* ======================================== NOBLE INNER PAGES - ADDITIONAL FIXES ======================================== */ /* Ensure hero sections display properly */ body .noble-page-hero { background: linear-gradient(135deg, #faf8f5 0%, #ffffff 100%); padding: 120px 0 80px; position: relative; overflow: hidden; } body .noble-page-hero .noble-eyebrow { color: #c9a96e; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } body .noble-page-hero h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; color: #1a1a1a; margin-bottom: 24px; max-width: 800px; } body .noble-page-hero .hero-description { font-size: 1.2rem; color: #6b6b6b; max-width: 600px; line-height: 1.8; } /* Content sections */ body .noble-content-section { padding: 80px 0; } body .noble-content-section.alt-bg { background: #f5f5f5; } /* Process steps */ body .noble-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 60px 0; } body .noble-process-step { background: #ffffff; border-radius: 20px; padding: 48px 36px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; border: 1px solid rgba(201, 169, 110, 0.1); } body .noble-process-step:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); border-color: #e0c9a0; } body .noble-process-step .step-number { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: linear-gradient(135deg, #c9a96e 0%, #a0824d 100%); color: #ffffff; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; border-radius: 50%; margin-bottom: 24px; } body .noble-process-step h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; color: #1a1a1a; } body .noble-process-step p { color: #6b6b6b; line-height: 1.7; font-size: 1rem; } /* Feature cards */ body .noble-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 60px 0; } body .noble-feature-card { background: #ffffff; border-radius: 20px; padding: 48px 36px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(201, 169, 110, 0.1); } body .noble-feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } body .noble-feature-card .feature-icon { width: 56px; height: 56px; background: rgba(201, 169, 110, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 24px; } body .noble-feature-card h3 { font-size: 1.4rem; font-weight: 500; margin-bottom: 16px; color: #1a1a1a; } body .noble-feature-card p { color: #6b6b6b; line-height: 1.7; } /* FAQ Accordion */ body .noble-faq-container { max-width: 800px; margin: 60px auto; } body .noble-faq-item { background: #ffffff; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); overflow: hidden; border: 1px solid rgba(201, 169, 110, 0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .noble-faq-item:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } body .noble-faq-item.active { border-color: #e0c9a0; } body .noble-faq-question { padding: 24px 32px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 1.1rem; color: #1a1a1a; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 0; } body .noble-faq-question:hover { color: #a0824d; } body .noble-faq-question::after { content: '+'; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 300; color: #c9a96e; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .noble-faq-item.active .noble-faq-question::after { transform: rotate(45deg); } body .noble-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease; } body .noble-faq-item.active .noble-faq-answer { max-height: 500px; padding: 0 32px 24px; } body .noble-faq-answer p { color: #6b6b6b; line-height: 1.8; margin: 0; } /* Contact layout */ body .noble-contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; margin-top: 60px; } body .noble-contact-info { display: flex; flex-direction: column; gap: 32px; } body .noble-contact-card { background: #ffffff; border-radius: 20px; padding: 36px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border: 1px solid rgba(201, 169, 110, 0.1); } body .noble-contact-card h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 16px; color: #1a1a1a; } body .noble-contact-card a { color: #c9a96e; text-decoration: none; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .noble-contact-card a:hover { color: #a0824d; } body .noble-contact-form-wrapper { background: #ffffff; border-radius: 20px; padding: 48px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border: 1px solid rgba(201, 169, 110, 0.1); } /* Policy cards */ body .noble-policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 60px 0; } body .noble-policy-card { background: #ffffff; border-radius: 20px; padding: 48px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border: 1px solid rgba(201, 169, 110, 0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .noble-policy-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } body .noble-policy-card .policy-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #c9a96e 0%, #a0824d 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: #ffffff; font-size: 28px; } body .noble-policy-card h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; color: #1a1a1a; } body .noble-policy-card p { color: #6b6b6b; line-height: 1.8; } /* Shop improvements */ body .woocommerce-products-header { background: linear-gradient(135deg, #faf8f5 0%, #ffffff 100%); padding: 100px 0 60px; margin-bottom: 60px; text-align: center; } body .woocommerce-products-header h1 { font-size: 3rem; font-weight: 300; color: #1a1a1a; margin-bottom: 16px; } body .woocommerce-products-header .page-description { font-size: 1.1rem; color: #6b6b6b; max-width: 600px; margin: 0 auto; } body .woocommerce .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } body .woocommerce .product { background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(201, 169, 110, 0.1); } body .woocommerce .product:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); } body .woocommerce .product img { width: 100%; height: 300px; object-fit: cover; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .woocommerce .product:hover img { transform: scale(1.05); } body .woocommerce .product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 500; padding: 20px 24px 8px; color: #1a1a1a; } body .woocommerce .product .price { padding: 0 24px 20px; font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #c9a96e; font-weight: 600; } body .woocommerce .product .button { margin: 0 24px 24px; background: #1a1a1a; color: #ffffff; border-radius: 6px; padding: 14px 24px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .woocommerce .product .button:hover { background: #c9a96e; } /* CTA Section */ body .noble-cta-section { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); padding: 100px 0; text-align: center; color: #ffffff; margin-top: 80px; } body .noble-cta-section h2 { font-size: 2.5rem; font-weight: 300; margin-bottom: 20px; } body .noble-cta-section p { font-size: 1.1rem; opacity: 0.8; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; } body .noble-cta-section .noble-button { display: inline-block; background: #c9a96e; color: #ffffff; padding: 18px 48px; border-radius: 6px; text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body .noble-cta-section .noble-button:hover { background: #e0c9a0; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 169, 110, 0.3); } /* Responsive */ @media (max-width: 1024px) { body .noble-process-grid, body .noble-features-grid { grid-template-columns: repeat(2, 1fr); } body .noble-contact-layout { grid-template-columns: 1fr; } body .noble-policy-grid { grid-template-columns: 1fr; } body .woocommerce .products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { body .noble-page-hero { padding: 100px 0 60px; } body .noble-page-hero h1 { font-size: 2.5rem; } body .noble-process-grid, body .noble-features-grid, body .woocommerce .products { grid-template-columns: 1fr; } body .noble-content-section { padding: 60px 0; } body .noble-contact-form-wrapper { padding: 32px; } } /* ======================================== HIDE DUPLICATE PAGE TITLES ======================================== */ /* Hide default WordPress page titles when we have custom hero */ body.page .entry-header .entry-title, body.page .ast-page-title-bar, body.page .ast-archive-title, body.page h1.entry-title, .page-header h1.page-title, .ast-single-post .entry-header h1.entry-title { display: none !important; } /* But keep the hero section title visible */ .noble-page-hero h1 { display: block !important; } /* ======================================== HIDE DUPLICATE PAGE TITLES - AGGRESSIVE FIX ======================================== */ /* Target all possible page title containers */ .ast-page-title-bar, .entry-header, .page-header, .ast-single-post .entry-header, .ast-archive-description, .ast-archive-title, .ast-page-title-wrap { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Make sure our custom titles remain visible */ .noble-page-hero h1, .noble-page-hero .noble-eyebrow, .noble-content-section h1, .noble-content-section h2 { display: block !important; visibility: visible !important; } /* ======================================== HIDE DUPLICATE TITLES - SPECIFIC FIX ======================================== */ /* Hide the WordPress page title but keep our hero titles */ body.page .entry-header, body.page .ast-single-post .entry-header, body.page .ast-page-title-wrap, body.page .ast-page-title-bar, body.page .page-title, body.page .entry-title, body.page header.entry-header { display: none !important; visibility: hidden !important; } /* But keep our custom titles visible */ .noble-page-hero h1, .noble-page-hero h2, .noble-page-hero h3, .noble-content-section h1, .noble-content-section h2, .noble-content-section h3, .noble-process-step h3, .noble-feature-card h3, .noble-policy-card h3 { display: block !important; visibility: visible !important; } /* Target the specific duplicate title structure */ .ast-article-inner .entry-header:first-of-type, #main .entry-header:first-child, .ast-page-builder-template .entry-header { display: none !important; } /* ======================================== HIDE ALL PAGE TITLES - NUCLEAR OPTION ======================================== */ /* Hide any h1 inside entry-header on pages */ body.page .entry-header h1, body.page .entry-header h2, body.page h1.entry-title, body.page .ast-single-post h1, body.page .ast-page-builder-template h1:first-of-type, body.page #primary h1:first-of-type, body.page #content h1:first-of-type, body.page article h1:first-of-type { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; } /* But keep our custom hero section titles */ .noble-page-hero h1, .noble-page-hero .noble-eyebrow, .noble-content-section h1, .noble-content-section h2, .noble-process-step h3, .noble-feature-card h3, .noble-policy-card h3 { display: block !important; visibility: visible !important; height: auto !important; opacity: 1 !important; } /* Also hide entry headers on pages */ body.page .entry-header, body.page .ast-page-title-bar, body.page .ast-archive-title { display: none !important; } /* ======================================== SALE BADGE STYLING ======================================== */ /* Style the "Sale!" badge */ .woocommerce .product .onsale, .woocommerce .onsale, .wc-block-grid__product-onsale, .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { background-color: #e53935 !important; color: #ffffff !important; border-radius: 4px !important; padding: 6px 14px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: none !important; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3) !important; position: absolute !important; top: 16px !important; left: 16px !important; z-index: 10 !important; } /* Hover effect for sale badge */ .woocommerce .product:hover .onsale, .woocommerce .product:hover .onsale { background-color: #d32f2f !important; box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4) !important; } /* ======================================== SALE BADGE - RED BACKGROUND WHITE TEXT ======================================== */ /* Target Astra's sale badge specifically */ .ast-onsale-card, .ast-on-card-button.ast-onsale-card, .woocommerce .ast-onsale-card, .woocommerce-page .ast-onsale-card, .ast-woo-shop-archive .ast-onsale-card { background-color: #e53935 !important; color: #ffffff !important; border-radius: 4px !important; padding: 6px 14px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: none !important; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3) !important; } /* Also override the default WooCommerce/Astra styles */ .woocommerce span.onsale, .wc-block-grid__product .wc-block-grid__product-onsale, .woocommerce ul.products li.product .onsale { background-color: #e53935 !important; color: #ffffff !important; } /* ======================================== SALE BADGE - MAXIMUM SPECIFICITY ======================================== */ /* Use body ID for maximum specificity */ body.ast-page-builder-template .ast-onsale-card, body.ast-page-builder-template .ast-on-card-button.ast-onsale-card, html body .woocommerce .products .product .ast-onsale-card, html body .woocommerce-page .products .product .ast-onsale-card, body .ast-onsale-card[data-notification="default"], body .woocommerce ul.products li.product .ast-onsale-card { background-color: #e53935 !important; color: #ffffff !important; background: #e53935 !important; border-radius: 4px !important; -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; padding: 6px 14px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: none !important; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3) !important; -webkit-box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3) !important; } /* Override any inline styles */ .ast-onsale-card[style] { background-color: #e53935 !important; color: #ffffff !important; } /* ======================================== SINGLE PRODUCT PAGE - PREMIUM REDESIGN ======================================== */ /* ---- Product Page Layout ---- */ body.single-product .ast-woocommerce-container { padding-top: 40px; padding-bottom: 80px; } body.single-product .product { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } /* ---- Product Image Gallery ---- */ body.single-product .woocommerce-product-gallery { position: relative; background: #ffffff; border-radius: 20px; padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border: 1px solid rgba(201, 169, 110, 0.1); } body.single-product .woocommerce-product-gallery__wrapper { border-radius: 12px; overflow: hidden; } body.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body.single-product .woocommerce-product-gallery__image:hover img { transform: scale(1.03); } body.single-product .woocommerce-product-gallery__trigger { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; } body.single-product .woocommerce-product-gallery__trigger:hover { background: #c9a96e; color: #ffffff; } /* ---- Sale Badge on Product Page ---- */ body.single-product .onsale { position: absolute; top: 20px; left: 20px; background: #e53935 !important; color: #ffffff !important; padding: 8px 16px !important; border-radius: 4px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; z-index: 10; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.32) !important; } /* ---- Product Summary (Right Side) ---- */ body.single-product .summary { padding: 20px 0; } /* Breadcrumb */ body.single-product .woocommerce-breadcrumb { font-family: 'Inter', sans-serif; font-size: 12px; color: #6b6b6b; margin-bottom: 24px; letter-spacing: 0.05em; } body.single-product .woocommerce-breadcrumb a { color: #c9a96e; text-decoration: none; transition: color 0.3s ease; } body.single-product .woocommerce-breadcrumb a:hover { color: #a0824d; } /* Product Category Tag */ body.single-product .product .posted_in { display: inline-block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: #c9a96e; margin-bottom: 16px; } body.single-product .product .posted_in a { color: #c9a96e; text-decoration: none; } /* Product Title */ body.single-product .product .product_title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.8rem; font-weight: 300; line-height: 1.2; color: #1a1a1a; margin-bottom: 20px; } /* Price */ body.single-product .product .price { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 600; color: #c9a96e; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } body.single-product .product .price del { font-size: 1.1rem; color: #999; font-weight: 400; } body.single-product .product .price ins { text-decoration: none; } /* Short Description */ body.single-product .product .woocommerce-product-details__short-description { font-size: 1.05rem; line-height: 1.8; color: #6b6b6b; margin-bottom: 32px; } /* ---- Quantity & Add to Cart ---- */ body.single-product .cart { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 32px; } body.single-product .quantity { display: flex; align-items: center; border: 1px solid rgba(201, 169, 110, 0.3); border-radius: 8px; overflow: hidden; } body.single-product .quantity .qty { border: none; padding: 14px 20px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; text-align: center; width: 60px; background: transparent; -moz-appearance: textfield; } body.single-product .quantity .qty::-webkit-outer-spin-button, body.single-product .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.single-product .quantity button { background: transparent; border: none; padding: 14px 16px; cursor: pointer; font-size: 18px; color: #1a1a1a; transition: background 0.3s ease; } body.single-product .quantity button:hover { background: rgba(201, 169, 110, 0.1); } /* Add to Cart Button */ body.single-product .single_add_to_cart_button { background: #1a1a1a !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 16px 48px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; cursor: pointer !important; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; } body.single-product .single_add_to_cart_button:hover { background: #c9a96e !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3) !important; } /* ---- Product Meta ---- */ body.single-product .product_meta { border-top: 1px solid rgba(201, 169, 110, 0.15); padding-top: 24px; margin-top: 32px; } body.single-product .product_meta>span { display: block; font-family: 'Inter', sans-serif; font-size: 13px; color: #6b6b6b; margin-bottom: 8px; } body.single-product .product_meta>span span, body.single-product .product_meta>span a { color: #1a1a1a; font-weight: 500; text-decoration: none; transition: color 0.3s ease; } body.single-product .product_meta>span a:hover { color: #c9a96e; } /* ---- Tabs Section ---- */ body.single-product .woocommerce-tabs { margin-top: 60px; grid-column: 1 / -1; } body.single-product .woocommerce-tabs ul.tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(201, 169, 110, 0.15); margin-bottom: 32px; padding: 0; } body.single-product .woocommerce-tabs ul.tabs::before { display: none; } body.single-product .woocommerce-tabs ul.tabs li { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 16px 32px !important; margin: 0 !important; position: relative; } body.single-product .woocommerce-tabs ul.tabs li a { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: #6b6b6b; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; padding: 0; } body.single-product .woocommerce-tabs ul.tabs li.active { background: transparent !important; } body.single-product .woocommerce-tabs ul.tabs li.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #c9a96e; } body.single-product .woocommerce-tabs ul.tabs li.active a { color: #1a1a1a; font-weight: 600; } body.single-product .woocommerce-tabs .panel { background: #ffffff; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border: 1px solid rgba(201, 169, 110, 0.1); } body.single-product .woocommerce-tabs .panel h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.8rem; font-weight: 300; color: #1a1a1a; margin-bottom: 20px; } body.single-product .woocommerce-tabs .panel p { color: #6b6b6b; line-height: 1.8; font-size: 1rem; } /* ---- Related Products ---- */ body.single-product .related.products { margin-top: 80px; grid-column: 1 / -1; } body.single-product .related.products>h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.2rem; font-weight: 300; text-align: center; margin-bottom: 48px; color: #1a1a1a; } body.single-product .related.products .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.single-product .related.products .product { display: block; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(201, 169, 110, 0.1); } body.single-product .related.products .product:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } body.single-product .related.products .product img { width: 100%; height: 260px; object-fit: cover; } body.single-product .related.products .product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; font-weight: 500; padding: 16px 20px 4px; color: #1a1a1a; } body.single-product .related.products .product .price { padding: 0 20px 16px; font-family: 'Inter', sans-serif; font-size: 1rem; color: #c9a96e; font-weight: 600; } body.single-product .related.products .product .button { margin: 0 20px 20px; background: #1a1a1a; color: #ffffff; border-radius: 6px; padding: 12px 20px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; text-align: center; display: block; } body.single-product .related.products .product .button:hover { background: #c9a96e; } /* ---- Cek Ongkir Form Styling ---- */ body.single-product #cekongkir_form { background: #faf8f5; border-radius: 12px; padding: 24px; margin-top: 20px; } body.single-product #cekongkir_form select, body.single-product #cekongkir_form input { border: 1px solid rgba(201, 169, 110, 0.3); border-radius: 8px; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 14px; margin-bottom: 12px; width: 100%; } body.single-product #cekongkir_form button { background: #1a1a1a; color: #ffffff; border: none; border-radius: 8px; padding: 14px 32px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; } body.single-product #cekongkir_form button:hover { background: #c9a96e; } /* ---- Responsive ---- */ @media (max-width: 1024px) { body.single-product .product { grid-template-columns: 1fr; gap: 40px; } body.single-product .related.products .products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { body.single-product .product .product_title { font-size: 2rem; } body.single-product .related.products .products { grid-template-columns: repeat(2, 1fr); } body.single-product .woocommerce-tabs ul.tabs li { padding: 12px 20px !important; } } /* ======================================== SINGLE PRODUCT - ADDITIONAL ENHANCEMENTS ======================================== */ /* Single product sale badge override */ body.single-product .ast-onsale-card, body.single-product .ast-on-card-button.ast-onsale-card, body.single-product span.onsale { background: #e53935 !important; background-color: #e53935 !important; color: #ffffff !important; border-radius: 4px !important; padding: 8px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.32) !important; } /* Product page container improvements */ body.single-product .ast-container { max-width: 1280px; } /* Entry header hide on product (we have custom layout) */ body.single-product .ast-article-single .entry-header { display: none; } /* Product summary spacing */ body.single-product .summary.entry-summary { padding-top: 10px; } /* Stock status */ body.single-product .stock { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px; border-radius: 6px; display: inline-block; margin-bottom: 20px; } body.single-product .stock.in-stock { background: rgba(76, 175, 80, 0.1); color: #4caf50; } body.single-product .stock.out-of-stock { background: rgba(244, 67, 54, 0.1); color: #f44336; } /* Enhanced product gallery */ body.single-product .woocommerce-product-gallery .flex-viewport { border-radius: 12px; overflow: hidden; } body.single-product .flex-control-nav.flex-control-thumbs { display: flex; gap: 10px; margin-top: 16px; } body.single-product .flex-control-nav.flex-control-thumbs li { width: 80px !important; height: 80px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; cursor: pointer; } body.single-product .flex-control-nav.flex-control-thumbs li:hover, body.single-product .flex-control-nav.flex-control-thumbs li.flex-active { border-color: #c9a96e; } body.single-product .flex-control-nav.flex-control-thumbs li img { width: 100%; height: 100%; object-fit: cover; } /* Related products title enhancement */ body.single-product section.related.products>h2 { position: relative; padding-bottom: 20px; } body.single-product section.related.products>h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: linear-gradient(90deg, #c9a96e, #e0c9a0); } /* Product tags if any */ body.single-product .product .tagged_as { font-family: 'Inter', sans-serif; font-size: 13px; color: #6b6b6b; margin-top: 12px; } body.single-product .product .tagged_as a { color: #c9a96e; text-decoration: none; font-weight: 500; } /* Back to shop link */ body.single-product .woocommerce-breadcrumb { margin-bottom: 32px; padding: 12px 0; border-bottom: 1px solid rgba(201, 169, 110, 0.1); } /* Enhanced tabs for mobile */ @media (max-width: 768px) { body.single-product .woocommerce-tabs ul.tabs { flex-wrap: wrap; } body.single-product .woocommerce-tabs ul.tabs li { flex: 1; text-align: center; padding: 12px 16px !important; } body.single-product .woocommerce-tabs .panel { padding: 24px; } body.single-product .cart { flex-direction: column; align-items: stretch; } body.single-product .quantity { justify-content: center; } body.single-product .single_add_to_cart_button { width: 100%; text-align: center; } } /* ======================================== PRODUCT TABS IN RIGHT COLUMN ======================================== */ /* Hide tab navigation when tabs are in summary */ .summary .woocommerce-tabs ul.tabs { display: none !important; } /* Show all panels */ .summary .woocommerce-tabs .panel { display: block !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 0 32px 0 !important; } /* Hide default panel headings */ .summary .woocommerce-tabs .panel h2:first-child, .summary #tab-description h2, .summary #tab-cekongkir h2 { display: none !important; } /* Add styled section headers instead */ .summary .woocommerce-tabs { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(201, 169, 110, 0.15); } .summary .woocommerce-tabs::before { content: 'Product Details'; display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 300; color: #1a1a1a; margin-bottom: 24px; } /* Description panel */ .summary #tab-description { margin-bottom: 24px !important; } .summary #tab-description p { color: #6b6b6b; line-height: 1.8; font-size: 0.95rem; margin-bottom: 16px; } /* Cek Ongkir panel styling */ .summary #tab-cekongkir { background: #faf8f5 !important; border-radius: 12px !important; padding: 20px !important; margin-top: 8px !important; } .summary #tab-cekongkir::before { content: 'Shipping Estimate'; display: block; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #1a1a1a; margin-bottom: 16px; } .summary #tab-cekongkir .cekongkir-form select, .summary #tab-cekongkir .cekongkir-form input, .summary #tab-cekongkir select, .summary #tab-cekongkir input { border: 1px solid rgba(201, 169, 110, 0.3); border-radius: 8px; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 14px; margin-bottom: 12px; width: 100%; background: #ffffff; } .summary #tab-cekongkir button, .summary #tab-cekongkir .button, .summary #tab-cekongkir input[type="submit"] { background: #1a1a1a; color: #ffffff; border: none; border-radius: 8px; padding: 14px 32px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; width: 100%; } .summary #tab-cekongkir button:hover { background: #c9a96e; } /* Hide old tabs container if still present below product */ .woocommerce-tabs:not(.summary .woocommerce-tabs) { display: none !important; } /* Force product tabs into right-side summary column */ body.single-product .summary.entry-summary>.woocommerce-tabs, body.single-product .entry-summary>.woocommerce-tabs, body.single-product div.summary .woocommerce-tabs { display: block !important; grid-column: auto !important; clear: none !important; float: none !important; width: 100% !important; margin: 30px 0 0 !important; padding: 24px 0 0 !important; border-top: 1px solid rgba(201, 169, 110, 0.18) !important; } body.single-product div.product>.woocommerce-tabs { display: none !important; } body.single-product .summary.entry-summary>.woocommerce-tabs ul.tabs, body.single-product div.summary .woocommerce-tabs ul.tabs { display: flex !important; gap: 22px !important; border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important; margin: 0 0 20px !important; padding: 0 !important; } body.single-product .summary.entry-summary>.woocommerce-tabs ul.tabs li, body.single-product div.summary .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 0 12px !important; } body.single-product .summary.entry-summary>.woocommerce-tabs ul.tabs li a, body.single-product div.summary .woocommerce-tabs ul.tabs li a { color: #6b6b6b !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; } body.single-product .summary.entry-summary>.woocommerce-tabs ul.tabs li.active, body.single-product div.summary .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid #c9a96e !important; } body.single-product .summary.entry-summary>.woocommerce-tabs ul.tabs li.active a, body.single-product div.summary .woocommerce-tabs ul.tabs li.active a { color: #1a1a1a !important; } body.single-product .summary.entry-summary>.woocommerce-tabs .panel, body.single-product div.summary .woocommerce-tabs .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } body.single-product .summary.entry-summary>.woocommerce-tabs .panel h2, body.single-product div.summary .woocommerce-tabs .panel h2, body.single-product .summary.entry-summary>.woocommerce-tabs #tab-cekongkir .tab-title, body.single-product div.summary .woocommerce-tabs #tab-cekongkir .tab-title { display: none !important; } body.single-product .summary.entry-summary>.woocommerce-tabs .panel p, body.single-product div.summary .woocommerce-tabs .panel p { color: #5f5a55 !important; font-size: 0.95rem !important; line-height: 1.75 !important; margin: 0 0 14px !important; } body.single-product .summary.entry-summary>.woocommerce-tabs #tab-cekongkir, body.single-product div.summary .woocommerce-tabs #tab-cekongkir { background: #faf8f5 !important; border: 1px solid rgba(201, 169, 110, 0.14) !important; border-radius: 12px !important; padding: 18px !important; } body.single-product .summary.entry-summary>.woocommerce-tabs #tab-cekongkir select, body.single-product div.summary .woocommerce-tabs #tab-cekongkir select { background: #fff !important; border: 1px solid rgba(201, 169, 110, 0.28) !important; border-radius: 8px !important; min-height: 44px !important; width: 100% !important; } /* ======================================== MOBILE HEADER - LOGO + HAMBURGER ONE ROW ======================================== */ @media (max-width: 921px) { html body #masthead.site-header, html body #masthead .ast-main-header-wrap, html body #masthead .main-header-bar-wrap, html body #masthead .ast-primary-header-bar, html body #masthead .site-primary-header-wrap, html body #masthead .ast-builder-grid-row-container, html body #masthead .ast-builder-grid-row { height: 64px !important; min-height: 64px !important; max-height: 64px !important; } html body #masthead .ast-builder-grid-row, html body #masthead .ast-grid-center-col-layout-only, html body #masthead .ast-builder-grid-row-layout-default, html body #masthead .site-header-primary-section-left, html body #masthead .site-header-primary-section-center, html body #masthead .site-header-primary-section-right { display: flex !important; align-items: center !important; min-height: 64px !important; } html body #masthead .ast-builder-grid-row { display: grid !important; grid-template-columns: 44px 1fr 44px !important; gap: 10px !important; padding: 0 18px !important; } html body #masthead .site-header-primary-section-left { grid-column: 1 !important; justify-content: flex-start !important; } html body #masthead .site-header-primary-section-center { grid-column: 2 !important; justify-content: center !important; } html body #masthead .site-header-primary-section-right { grid-column: 3 !important; justify-content: flex-end !important; } html body #masthead .site-branding, html body #masthead .ast-site-identity, html body #masthead .custom-logo-link, html body #masthead .site-logo-img { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } html body #masthead img.custom-logo, html body #masthead .custom-logo-link img { display: block !important; height: 30px !important; max-height: 30px !important; width: auto !important; } html body #masthead .menu-toggle, html body #masthead button.menu-toggle, html body #masthead .ast-mobile-menu-trigger-outline, html body #masthead .ast-button-wrap, html body #masthead .mobile-menu-toggle-icon, html body #masthead .ast-mobile-svg, html body #masthead .ahfb-svg-iconset, html body #masthead .mobile-menu-toggle-icon svg { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } html body #masthead .menu-toggle, html body #masthead button.menu-toggle, html body #masthead .ast-mobile-menu-trigger-outline, html body #masthead .ast-button-wrap { align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #1a1a1a !important; } html body #masthead .menu-toggle .mobile-menu-toggle-icon, html body #masthead .menu-toggle svg, html body #masthead .ast-mobile-svg svg, html body #masthead .ahfb-svg-iconset svg { width: 24px !important; height: 24px !important; fill: #1a1a1a !important; color: #1a1a1a !important; } html body #masthead .main-header-menu, html body #masthead .main-header-bar-navigation { height: auto !important; min-height: 0 !important; } } /* ======================================== MOBILE HEADER - PLACE BELOW-ROW TRIGGER IN LOGO ROW ======================================== */ @media (max-width: 921px) { html body #masthead #ast-mobile-header { position: relative !important; } html body #masthead #ast-mobile-header .ast-main-header-wrap, html body #masthead #ast-mobile-header .ast-primary-header-bar, html body #masthead #ast-mobile-header .site-primary-header-wrap, html body #masthead #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row { display: flex !important; align-items: center !important; justify-content: center !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 0 !important; } html body #masthead #ast-mobile-header .site-header-primary-section-center { display: flex !important; align-items: center !important; justify-content: center !important; height: 64px !important; min-height: 64px !important; width: 100% !important; } html body #masthead #ast-mobile-header .ast-below-header-wrap { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; right: 18px !important; width: 44px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 0 !important; padding: 0 !important; z-index: 100000 !important; background: transparent !important; border: 0 !important; } html body #masthead #ast-mobile-header .ast-below-header-bar, html body #masthead #ast-mobile-header .site-below-header-wrap, html body #masthead #ast-mobile-header .ast-below-header-bar .ast-builder-grid-row, html body #masthead #ast-mobile-header .site-header-below-section-center { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html body #masthead #ast-mobile-header [data-section="section-header-mobile-trigger"], html body #masthead #ast-mobile-header .ast-button-wrap, html body #masthead #ast-mobile-header .menu-toggle, html body #masthead #ast-mobile-header button.menu-toggle, html body #masthead #ast-mobile-header .ast-mobile-menu-trigger-outline { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #1a1a1a !important; } html body #masthead #ast-mobile-header .mobile-menu-toggle-icon, html body #masthead #ast-mobile-header .ahfb-svg-iconset, html body #masthead #ast-mobile-header .ast-mobile-svg, html body #masthead #ast-mobile-header .menu-toggle svg { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 24px !important; height: 24px !important; color: #1a1a1a !important; fill: #1a1a1a !important; } html body #masthead #ast-mobile-header .custom-logo-link img, html body #masthead #ast-mobile-header img.custom-logo { height: 30px !important; max-height: 30px !important; width: auto !important; } } /* ======================================== FLOATING WHATSAPP WIDGET + FAQ FIX ======================================== */ .noble-whatsapp-widget { bottom: 22px; position: fixed; right: 22px; z-index: 1000000; } .noble-whatsapp-toggle { align-items: center; background: #25d366 !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 14px 34px rgba(37, 211, 102, 0.34) !important; color: #fff !important; cursor: pointer; display: inline-flex; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; height: 58px; justify-content: center; letter-spacing: 0.06em; padding: 0; transition: transform 0.25s ease, box-shadow 0.25s ease; width: 58px; } .noble-whatsapp-toggle:hover { box-shadow: 0 18px 42px rgba(37, 211, 102, 0.42) !important; transform: translateY(-3px); } .noble-whatsapp-popup { background: #fff; border: 1px solid rgba(201, 169, 110, 0.18); border-radius: 18px; bottom: 76px; box-shadow: 0 24px 70px rgba(20, 18, 14, 0.18); padding: 24px; position: absolute; right: 0; width: min(330px, calc(100vw - 36px)); } .noble-whatsapp-popup[hidden] { display: none !important; } .noble-whatsapp-close { align-items: center; background: rgba(26, 26, 26, 0.06) !important; border: 0 !important; border-radius: 999px !important; color: #1a1a1a !important; cursor: pointer; display: inline-flex; font-size: 20px !important; height: 32px; justify-content: center; line-height: 1 !important; padding: 0 !important; position: absolute; right: 14px; top: 14px; width: 32px; } .noble-whatsapp-eyebrow { color: #25d366; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; margin: 0 0 10px; text-transform: uppercase; } .noble-whatsapp-popup h3 { color: #1a1a1a; font-size: 1.45rem; line-height: 1.15; margin: 0 34px 12px 0; } .noble-whatsapp-popup p:not(.noble-whatsapp-eyebrow) { color: #6b6b6b; font-size: 0.95rem; line-height: 1.65; margin: 0 0 18px; } .noble-whatsapp-cta { align-items: center; background: #25d366; border-radius: 10px; color: #fff !important; display: flex; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; justify-content: center; letter-spacing: 0.08em; padding: 14px 18px; text-decoration: none !important; text-transform: uppercase; } .noble-faq-container .noble-faq-item { overflow: hidden !important; } .noble-faq-container .noble-faq-question { cursor: pointer !important; margin: 0 !important; user-select: none; } .noble-faq-container .noble-faq-answer { display: block !important; max-height: 0 !important; overflow: hidden !important; padding: 0 32px !important; transition: max-height 0.35s ease, padding 0.35s ease !important; } .noble-faq-container .noble-faq-item.active .noble-faq-answer { max-height: 420px !important; padding: 0 32px 24px !important; } .noble-faq-container .noble-faq-question::after { content: '+' !important; } .noble-faq-container .noble-faq-item.active .noble-faq-question::after { transform: rotate(45deg) !important; } @media (max-width: 544px) { .noble-whatsapp-widget { bottom: 16px; right: 16px; } .noble-whatsapp-toggle { height: 54px; width: 54px; } } /* ======================================== MOBILE MENU ICON/GAP + WHATSAPP HARD FIX ======================================== */ @media (max-width: 921px) { html body #masthead #ast-mobile-header .ast-menu2-svg { display: block !important; visibility: visible !important; opacity: 1 !important; } html body #masthead #ast-mobile-header .ast-close-svg { display: none !important; visibility: hidden !important; opacity: 0 !important; } html body.ast-main-header-nav-open #masthead #ast-mobile-header .ast-menu2-svg, html body.ast-popup-nav-open #masthead #ast-mobile-header .ast-menu2-svg { display: none !important; visibility: hidden !important; opacity: 0 !important; } html body.ast-main-header-nav-open #masthead #ast-mobile-header .ast-close-svg, html body.ast-popup-nav-open #masthead #ast-mobile-header .ast-close-svg { display: block !important; visibility: visible !important; opacity: 1 !important; } html body #masthead #ast-mobile-header .ast-below-header-wrap, html body #masthead #ast-mobile-header .ast-below-header-bar, html body #masthead #ast-mobile-header .site-below-header-wrap { min-height: 0 !important; } html body #masthead #ast-mobile-header .ast-mobile-header-content { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; transform: translateY(0) !important; } html body #masthead #ast-mobile-header .ast-mobile-header-content>*, html body #masthead #ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile, html body #masthead #ast-mobile-header .ast-mobile-header-content .main-header-bar-navigation, html body #masthead #ast-mobile-header .ast-mobile-header-content .main-navigation { margin-top: 0 !important; padding-top: 0 !important; } html body #masthead #ast-mobile-header .ast-mobile-header-content .main-header-menu>.menu-item>.menu-link { min-height: 82px !important; } } html body .noble-whatsapp-widget { position: fixed !important; right: 22px !important; bottom: 22px !important; left: auto !important; top: auto !important; z-index: 2147483000 !important; width: auto !important; height: auto !important; transform: none !important; } html body .noble-whatsapp-toggle { align-items: center !important; background: #25d366 !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 14px 34px rgba(37, 211, 102, 0.34) !important; color: #ffffff !important; display: inline-flex !important; height: 58px !important; justify-content: center !important; min-height: 58px !important; min-width: 58px !important; padding: 0 !important; width: 58px !important; } html body .noble-whatsapp-icon, html body .noble-whatsapp-icon svg { display: block !important; height: 31px !important; width: 31px !important; } html body .noble-whatsapp-icon svg { fill: #ffffff !important; } html body .noble-whatsapp-popup { position: absolute !important; right: 0 !important; bottom: 76px !important; left: auto !important; top: auto !important; } @media (max-width: 544px) { html body .noble-whatsapp-widget { right: 16px !important; bottom: 16px !important; } } /* ======================================== SIMPLE FLOATING WHATSAPP + NO SCROLL TOP ======================================== */ html body #ast-scroll-top, html body .ast-scroll-top-icon, html body .ast-scroll-to-top-right, html body .ast-scroll-to-top-left { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html body .noble-whatsapp-widget { align-items: center !important; background: #25d366 !important; border: 0 !important; border-radius: 999px !important; bottom: 22px !important; box-shadow: 0 14px 34px rgba(37, 211, 102, 0.34) !important; color: #ffffff !important; display: inline-flex !important; height: 58px !important; justify-content: center !important; left: auto !important; padding: 0 !important; position: fixed !important; right: 22px !important; text-decoration: none !important; top: auto !important; transform: none !important; width: 58px !important; z-index: 2147483000 !important; } html body .noble-whatsapp-widget:hover { box-shadow: 0 18px 42px rgba(37, 211, 102, 0.45) !important; transform: translateY(-3px) !important; } html body .noble-whatsapp-svg { display: block !important; fill: #ffffff !important; height: 34px !important; width: 34px !important; } html body .noble-whatsapp-popup, html body .noble-whatsapp-toggle, html body .noble-whatsapp-close, html body .noble-whatsapp-cta, html body .noble-whatsapp-eyebrow { display: none !important; } @media (max-width: 544px) { html body .noble-whatsapp-widget { bottom: 16px !important; height: 56px !important; right: 16px !important; width: 56px !important; } } /* ======================================== HARD FLOATING WHATSAPP SVG SIZE + REMOVE TOP BUTTON ======================================== */ html body #ast-scroll-top, html body .ast-scroll-top-icon, html body [id*="scroll-top"], html body [class*="scroll-to-top"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html body a.noble-whatsapp-widget { position: fixed !important; right: 22px !important; bottom: 22px !important; left: auto !important; top: auto !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; max-width: 58px !important; max-height: 58px !important; overflow: hidden !important; background: #25d366 !important; border-radius: 999px !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; transform: none !important; } html body a.noble-whatsapp-widget svg, html body a.noble-whatsapp-widget .noble-whatsapp-svg { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; fill: #fff !important; color: #fff !important; flex: 0 0 34px !important; } /* ======================================== MOBILE HEADER X ICON FINAL FIX ======================================== */ @media (max-width: 921px) { html body #ast-mobile-header .mobile-menu-toggle-icon .ast-close-svg, html body #ast-mobile-header .mobile-menu-toggle-icon .ast-close-svg *, html body #ast-mobile-header .mobile-menu-toggle-icon .ahfb-svg-iconset:has(.ast-close-svg) { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } html body.ast-main-header-nav-open #ast-mobile-header .mobile-menu-toggle-icon .ast-close-svg, html body.ast-popup-nav-open #ast-mobile-header .mobile-menu-toggle-icon .ast-close-svg, html body.ast-main-header-nav-open #ast-mobile-header .mobile-menu-toggle-icon .ahfb-svg-iconset:has(.ast-close-svg), html body.ast-popup-nav-open #ast-mobile-header .mobile-menu-toggle-icon .ahfb-svg-iconset:has(.ast-close-svg) { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 24px !important; height: 24px !important; overflow: visible !important; } } /* NOBLE revision controls and category imagery */ .noble-site-tools { position: static !important; z-index: 1; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 0 14px 0 0; margin: 0 12px 0 0; border-right: 1px solid rgba(201, 169, 110, 0.24); color: rgba(26, 26, 26, 0.72); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; } .noble-site-tools a, #masthead .noble-site-tools a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 28px; padding: 5px 10px; border-radius: 999px; color: rgba(130, 130, 130, 0.7) !important; text-decoration: none !important; transition: all 0.2s ease; cursor: pointer; } .noble-site-tools a.is-active, .noble-site-tools a[aria-current="true"], #masthead .noble-site-tools a.is-active, #masthead .noble-site-tools a[aria-current="true"] { background: #c9a96e !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(201, 169, 110, 0.35); font-weight: 700; } .noble-site-tools a:hover:not(.is-active), #masthead .noble-site-tools a:hover:not(.is-active) { background: rgba(201, 169, 110, 0.14); color: rgba(26, 26, 26, 0.9) !important; } .noble-tool-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgba(201, 169, 110, 0.25); border-radius: 999px; background: rgba(250, 248, 245, 0.9); } /* Image-led process cards */ .noble-process .noble-card-grid.noble-three { gap: 34px !important; } .noble-process .noble-step { min-height: 460px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 !important; background-position: center; background-size: cover; border: 1px solid rgba(201, 169, 110, 0.22); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26); isolation: isolate; } .noble-process .noble-step:nth-child(1) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT-2-rz.png'); } .noble-process .noble-step:nth-child(2) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT.png'); background-position: center 44%; } .noble-process .noble-step:nth-child(3) { background-image: url('/wp-content/uploads/2026/04/DEVELOPMENT-4-rz.png'); } .noble-process .noble-step::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 17, 15, 0.12) 0%, rgba(18, 17, 15, 0.42) 48%, rgba(18, 17, 15, 0.92) 100%), radial-gradient(circle at 18% 16%, rgba(201, 169, 110, 0.24), transparent 34%); transition: opacity 0.35s ease; } .noble-process .noble-step::after { content: ''; position: absolute; inset: 18px; z-index: -1; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: calc(var(--radius-md) - 4px); pointer-events: none; } .noble-process .noble-step:hover { transform: translateY(-8px); border-color: rgba(201, 169, 110, 0.72); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34); } .noble-process .noble-step span { position: absolute; top: 34px; left: 34px; margin: 0; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26); } .noble-process .noble-step h3, .noble-process .noble-step p { position: relative; z-index: 1; margin-left: 36px; margin-right: 36px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.52); } .noble-process .noble-step h3 { margin-bottom: 14px; } .noble-process .noble-step p { margin-bottom: 40px; color: rgba(255, 255, 255, 0.82); } @media (max-width: 1024px) { .noble-process .noble-step { min-height: 420px; } } @media (max-width: 768px) { .noble-process .noble-step { min-height: 390px; } } /* Stronger visible image layer for process cards */ .noble-process .noble-step { background: rgba(255, 255, 255, 0.035) !important; } .noble-process .noble-step::before { content: ''; position: absolute; inset: 0; z-index: 0 !important; opacity: 0.7; background-position: center !important; background-size: cover !important; filter: saturate(1.08) contrast(1.05); transform: scale(1.03); transition: opacity 0.35s ease, transform 0.45s ease; } .noble-process .noble-step:nth-child(1)::before { background-image: url('/wp-content/uploads/2026/05/noble-process-step-1.png') !important; } .noble-process .noble-step:nth-child(2)::before { background-image: url('/wp-content/uploads/2026/05/noble-process-step-2.png') !important; } .noble-process .noble-step:nth-child(3)::before { background-image: url('/wp-content/uploads/2026/05/noble-process-step-3.png') !important; } .noble-process .noble-step::after { content: ''; position: absolute; inset: 0 !important; z-index: 1 !important; border: 0 !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(18, 17, 15, 0.1) 0%, rgba(18, 17, 15, 0.4) 42%, rgba(18, 17, 15, 0.92) 100%), radial-gradient(circle at 18% 18%, rgba(201, 169, 110, 0.28), transparent 32%); } .noble-process .noble-step:hover::before { opacity: 0.82; transform: scale(1.08); } .noble-process .noble-step>* { position: relative; z-index: 2; } .noble-process .noble-step span { display: none !important; } /* Actual image markup for process cards */ .noble-process .noble-step { min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; background: rgba(255, 255, 255, 0.04) !important; } .noble-process .noble-step::before, .noble-process .noble-step::after { display: none !important; } .noble-process .noble-step-image { display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: cover !important; object-position: center !important; border-radius: var(--radius-md) var(--radius-md) 0 0 !important; filter: saturate(1.04) contrast(1.04); } .noble-process .noble-step-content { padding: 34px 36px 40px; } .noble-process .noble-step h3, .noble-process .noble-step p { margin-left: 0 !important; margin-right: 0 !important; text-shadow: none !important; } .noble-process .noble-step h3 { margin-top: 0 !important; } .noble-process .noble-step p { margin-bottom: 0 !important; } @media (max-width: 768px) { .noble-process .noble-step-image { aspect-ratio: 1 / 1 !important; height: auto !important; } } /* Image-led philosophy cards */ .noble-features-grid .noble-feature-card, body .noble-features-grid .noble-feature-card { overflow: hidden !important; padding: 0 !important; text-align: left !important; background: #ffffff !important; } .noble-features-grid .noble-feature-card .feature-icon { display: none !important; } .noble-feature-image { display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: cover !important; object-position: center !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } html body .noble-features-grid .noble-feature-card .noble-feature-image { aspect-ratio: 1 / 1 !important; display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; object-fit: cover !important; width: 100% !important; } .noble-features-grid .noble-feature-card h3, body .noble-features-grid .noble-feature-card h3 { margin: 34px 36px 16px !important; } .noble-features-grid .noble-feature-card p, body .noble-features-grid .noble-feature-card p { margin: 0 36px 40px !important; } /* Image-led custom order process cards */ .noble-process-grid .noble-process-step, body .noble-process-grid .noble-process-step { overflow: hidden !important; padding: 0 !important; text-align: left !important; background: #ffffff !important; } .noble-process-grid .noble-process-step .step-number, body .noble-process-grid .noble-process-step .step-number { display: none !important; } .noble-process-image { display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: cover !important; object-position: center !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } .noble-process-step-content { padding: 34px 36px 40px; } .noble-process-grid .noble-process-step h3, body .noble-process-grid .noble-process-step h3 { margin: 0 0 16px !important; color: var(--noble-black) !important; } .noble-process-grid .noble-process-step p, body .noble-process-grid .noble-process-step p { margin: 0 !important; color: var(--noble-gray) !important; } /* Refined centered homepage hero */ body.home .noble-hero { min-height: calc(100vh - 80px) !important; padding: 120px 24px 92px !important; background: linear-gradient(180deg, rgba(14, 13, 12, 0.36) 0%, rgba(14, 13, 12, 0.54) 56%, rgba(14, 13, 12, 0.7) 100%), radial-gradient(circle at 50% 42%, rgba(201, 169, 110, 0.2), transparent 42%), url('/wp-content/uploads/2026/05/DEVELOPMENT.png') center center / cover no-repeat !important; } body.home .noble-hero::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.28)), radial-gradient(circle at 50% 50%, rgba(250, 248, 245, 0.12), transparent 40%) !important; opacity: 1 !important; } body.home .noble-hero .wp-block-columns, body.home .noble-hero .noble-hero-grid, body.home .noble-hero .wp-block-column { align-items: center !important; display: flex !important; flex-direction: column !important; justify-content: center !important; max-width: 1120px !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; width: 100% !important; } body.home .noble-hero .noble-eyebrow { background: rgba(20, 18, 15, 0.34); border: 1px solid rgba(201, 169, 110, 0.28); border-radius: 999px; color: #e2c37f !important; display: inline-flex; letter-spacing: 0.32em; margin: 0 auto 28px !important; padding: 10px 18px; } body.home .noble-hero .noble-hero-title { font-size: clamp(3.8rem, 7.4vw, 7.5rem) !important; line-height: 0.96 !important; margin: 0 auto 30px !important; max-width: 1040px !important; text-align: center !important; text-shadow: 0 8px 44px rgba(0, 0, 0, 0.55); } body.home .noble-hero .noble-hero-copy { color: rgba(255, 255, 255, 0.88) !important; font-size: clamp(1.08rem, 1.35vw, 1.28rem) !important; margin: 0 auto 42px !important; max-width: 760px !important; text-align: center !important; text-shadow: 0 4px 26px rgba(0, 0, 0, 0.52); } body.home .noble-hero .noble-cta-row { justify-content: center !important; margin: 0 auto 56px !important; } body.home .noble-proof-row { align-items: stretch; background: rgba(15, 14, 13, 0.34); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2); display: grid !important; gap: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto !important; max-width: 860px; overflow: hidden; text-align: center; width: 100%; } body.home .noble-proof-row p { align-items: center; justify-content: center; padding: 22px 26px; } body.home .noble-proof-row p+p { border-left: 1px solid rgba(255, 255, 255, 0.12); } body.home .noble-proof-row strong { color: #e2c37f !important; font-size: 14px; letter-spacing: 0.04em; } body.home .noble-proof-row span { color: rgba(255, 255, 255, 0.78) !important; } @media (max-width: 768px) { body.home .noble-hero { padding: 96px 20px 72px !important; } body.home .noble-hero .noble-eyebrow { font-size: 10px; letter-spacing: 0.18em; } body.home .noble-hero .noble-hero-title { font-size: clamp(2.7rem, 13vw, 4.2rem) !important; } body.home .noble-hero .noble-cta-row { width: 100%; } body.home .noble-proof-row { grid-template-columns: 1fr; } body.home .noble-proof-row p+p { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } } /* Final hero alignment overrides - keep after broad WP/Astra rules */ html body.home .entry-content>.noble-hero.alignfull, html body.home .noble-page>.noble-hero.alignfull, html body.home .noble-hero.alignfull { align-items: center !important; background: linear-gradient(180deg, rgba(12, 11, 10, 0.18) 0%, rgba(12, 11, 10, 0.34) 52%, rgba(12, 11, 10, 0.58) 100%), radial-gradient(circle at 50% 45%, rgba(201, 169, 110, 0.18), transparent 42%), url('/wp-content/uploads/2026/05/DEVELOPMENT.png') center center / cover no-repeat !important; display: flex !important; justify-content: center !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 100vw !important; text-align: center !important; width: 100vw !important; } html body.home .noble-hero.alignfull>.noble-hero-grid, html body.home .noble-hero.alignfull>.wp-block-columns, html body.home .noble-hero.alignfull .noble-hero-grid.wp-block-columns { align-items: center !important; display: flex !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 1180px !important; text-align: center !important; width: min(1180px, calc(100vw - 48px)) !important; } html body.home .noble-hero.alignfull .wp-block-column { align-items: center !important; display: flex !important; flex: 0 1 100% !important; flex-basis: 100% !important; flex-direction: column !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } html body.home .noble-hero.alignfull .noble-eyebrow, html body.home .noble-hero.alignfull .noble-hero-title, html body.home .noble-hero.alignfull .noble-hero-copy, html body.home .noble-hero.alignfull .noble-cta-row, html body.home .noble-hero.alignfull .noble-proof-row { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } html body.home .noble-hero.alignfull .noble-hero-title { max-width: 1120px !important; } html body.home .noble-hero.alignfull .noble-hero-copy { max-width: 760px !important; } .noble-categories .noble-card { position: relative; min-height: 480px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background-position: center; background-size: cover; color: #ffffff; padding: 40px 32px; border: none !important; text-align: left; } .noble-categories .noble-card::before { display: none !important; } .noble-categories .noble-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.85) 100%); z-index: 0; pointer-events: none; } .noble-categories .noble-card>* { position: relative; z-index: 1; } .noble-categories .noble-card h3 { color: #ffffff !important; font-size: 2rem; margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .noble-categories .noble-card p { color: rgba(255, 255, 255, 0.95) !important; font-size: 1rem; line-height: 1.6; margin-bottom: 24px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .noble-categories .noble-card a { color: #ffffff !important; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; align-self: flex-start; padding-bottom: 6px; } .noble-categories .noble-card a::after { background: #ffffff !important; width: 100% !important; height: 1px !important; } @media (max-width: 921px) { .noble-site-tools { margin-left: auto; margin-right: 8px; padding-right: 10px; gap: 8px !important; font-size: 10px; } .noble-site-tools a { min-width: 28px; min-height: 22px; padding: 5px 7px; } } } } /* ========================================================================== Checkout - AgenWebsite Shipping Method Styling ========================================================================== */ /* Hilangkan garis biru bawaan dari container kurir */ .woocommerce-checkout .aw-shipping-field-wrapper, .woocommerce-checkout .aw-shipping-wrapper, .woocommerce-checkout .aw-shipping-field-wrapper select, .woocommerce-checkout .aw-shipping-field-wrapper input, .woocommerce-checkout .aw-shipping-field-wrapper .select2-selection { background-color: transparent !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; box-shadow: none !important; outline: none !important; } .woocommerce-checkout .aw-shipping-field-wrapper { border-bottom: 1px solid #e0e0e0 !important; padding: 10px 15px !important; margin-bottom: 15px !important; } /* Matikan garis biru bawah yang biasanya dipaksakan pakai pseudo element */ .woocommerce-checkout .aw-shipping-field-wrapper::after, .woocommerce-checkout .aw-shipping-field-wrapper::before { display: none !important; } /* Styling Daftar Kurir (Radio Buttons) */ .woocommerce-checkout ul#shipping_method { list-style: none !important; padding: 0 !important; margin: 15px 0 0 0 !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; background: transparent !important; } .woocommerce-checkout ul#shipping_method li { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding: 15px 18px !important; margin: 0 !important; border-bottom: 1px solid #e0e0e0 !important; background: transparent !important; min-height: 50px !important; position: relative !important; } .woocommerce-checkout ul#shipping_method li:last-child { border-bottom: none !important; } /* Penempatan Radio Button */ .woocommerce-checkout ul#shipping_method li input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; flex: 0 0 20px !important; /* Paksa ukuran tetap di flexbox */ margin: 0 16px 0 0 !important; /* Jarak yang tegas ke teks */ border: 1px solid #999 !important; border-radius: 50% !important; outline: none !important; cursor: pointer !important; position: relative !important; transform: none !important; left: auto !important; right: auto !important; box-sizing: border-box !important; display: inline-block !important; } .woocommerce-checkout ul#shipping_method li input[type="radio"]:checked { border-color: #1a1a1a !important; border-width: 6px !important; /* Lingkaran hitam */ background: #fff !important; } /* Teks Nama Kurir dan Harga */ .woocommerce-checkout ul#shipping_method li label { margin: 0 !important; padding: 0 !important; text-indent: 0 !important; font-family: inherit !important; font-size: 14px !important; color: #1a1a1a !important; cursor: pointer !important; line-height: 1.4 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; position: relative !important; transform: none !important; } /* Pastikan harga tidak turun ke bawah */ .woocommerce-checkout ul#shipping_method li label .amount { margin-left: 10px !important; font-weight: 600 !important; }