/* Theme Name: NovaLife Science Theme URI: https://novalife.science Author: NovaLife Science Laboratories Author URI: https://novalife.science Description: Custom premium biotech theme for NovaLife Science Laboratories. Native WordPress + WooCommerce theme — no page builder. Homepage is fully custom (front-page.php) with dynamic WooCommerce featured products; shop, single product, cart, and checkout use WooCommerce's standard rendering via this theme's header/footer. Version: 1.3.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: novalife Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready */ :root{ --navy:#0A2F6B; --navy-deep:#082554; --navy-soft:#3D5A8A; --gold:#D4A72C; --gold-light:#E7C667; --white:#FFFFFF; --off:#F6F8FB; --off-2:#EEF2F9; --muted:#8C97B5; --ink:#0A2F6B; --ink-soft:#5B6B85; --border:rgba(10,47,107,0.08); } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{width:100%;font-family:'Inter',Arial,sans-serif;background:var(--white);color:var(--ink);} img{max-width:100%;display:block;} a{color:inherit;} .wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 64px;} .eyebrow{ display:inline-flex;align-items:center;gap:10px; text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:700; margin-bottom:18px;color:var(--gold); } .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);display:inline-block;} h2.section-title{ font-size:40px;font-weight:800;letter-spacing:-0.5px;line-height:1.2;margin-bottom:18px;color:var(--navy); } p.section-sub{font-size:16px;line-height:1.8;color:var(--ink-soft);max-width:560px;margin-top:20px;} .section-head{margin-bottom:74px;} .section-head.center{text-align:center;margin-left:auto;margin-right:auto;} .section-head.center p.section-sub{margin-left:auto;margin-right:auto;} h2.section-title{position:relative;display:inline-block;} h2.section-title::after{content:'';position:absolute;left:0;bottom:-12px;width:0;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .8s cubic-bezier(.22,1,.36,1);} .section-head.center h2.section-title::after{left:50%;transform:translateX(-50%);} h2.section-title.inview::after{width:46px;} .btn{ padding:16px 32px;font-size:13px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase; border-radius:6px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease; } .btn-primary{ background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy); box-shadow:0 10px 26px rgba(212,167,44,0.35);border:1px solid transparent; } .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(212,167,44,0.48);} .btn-secondary{background:#fff;border:1.5px solid var(--navy);color:var(--navy);} .btn-secondary:hover{transform:translateY(-3px);background:var(--navy);color:#fff;} .btn-outline{background:transparent;border:1px solid var(--border);color:var(--navy);} .btn-outline:hover{transform:translateY(-3px);border-color:var(--navy);} .btn-link{background:transparent;border:none;color:var(--gold);padding:0;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:0.6px; transition:transform .25s ease,letter-spacing .25s ease;} .btn-link:hover{transform:translateX(3px);} /* ============ scroll fade-in ============ Progressive enhancement only: content is visible by default. The opacity:0 starting state is scoped under .js-reveal, a class main.js adds to only after it has successfully initialized. If main.js fails to load or run for any reason (plugin conflict, caching/JS optimization, an unrelated script error elsewhere on the page), .reveal elements simply display normally with no animation, instead of staying permanently invisible. */ .js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);} .js-reveal .reveal.in{opacity:1;transform:translateY(0);} /* ============ ANNOUNCEMENT BAR ============ */ .announce{background:var(--navy-deep);color:#fff;font-size:12px;font-weight:600;letter-spacing:0.3px;} .announce .wrap{display:flex;justify-content:center;align-items:center;gap:48px;padding:10px 64px;flex-wrap:wrap;} .announce span{display:flex;align-items:center;gap:8px;color:#dfe6f5;} .announce i{color:var(--gold-light);font-size:12px;} /* ============ HEADER ============ */ header.site{background:#fff;border-bottom:1px solid var(--border);position:relative;z-index:50;} header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 64px;} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;} .brand img{height:42px;width:auto;} .brand .custom-logo-link img{height:42px;width:auto;} .brand .brand-text{display:flex;flex-direction:column;line-height:1.25;} .brand .brand-text b{font-size:15px;color:var(--navy);letter-spacing:0.5px;} .brand .brand-text small{font-size:10px;color:var(--ink-soft);letter-spacing:1.5px;text-transform:uppercase;} nav.main-nav{display:flex;gap:34px;} nav.main-nav ul{display:flex;gap:34px;list-style:none;} nav.main-nav a{font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:5px;} nav.main-nav li.menu-item-has-children > a::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:9px;color:var(--ink-soft);margin-left:5px;} .head-icons{display:flex;align-items:center;gap:22px;} .head-icons a,.head-icons button{background:none;border:none;cursor:pointer;display:flex;} .head-icons i{font-size:16px;color:var(--navy);} .cart-wrap{position:relative;} .cart-badge{position:absolute;top:-7px;right:-9px;background:var(--gold);color:var(--navy);font-size:9px;font-weight:800; width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:24px;} .nav-toggle span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .25s ease;} .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle.active span:nth-child(2){opacity:0;} .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-nav{display:none;background:#fff;border-bottom:1px solid var(--border);} .mobile-nav.open{display:block;} .mobile-nav ul{list-style:none;display:flex;flex-direction:column;} .mobile-nav ul li{border-top:1px solid var(--border);} .mobile-nav ul a{display:block;padding:16px 28px;font-size:14.5px;font-weight:600;color:var(--navy);text-decoration:none;} /* ============ HERO ============ */ .hero{ position:relative;width:100%;overflow:hidden; background:linear-gradient(155deg, #FFFFFF 0%, #F8FAFD 45%, #EEF3FA 100%); color:var(--navy); } .hero-grid{position:relative;z-index:3;width:100%;max-width:1280px;margin:0 auto;padding:180px 64px 130px; display:grid;grid-template-columns:1.08fr 0.92fr;align-items:center;gap:48px;} .hero .left{max-width:560px;} .hero h1{font-size:54px;line-height:1.15;font-weight:800;letter-spacing:-0.5px;margin-bottom:24px;color:var(--navy);} .hero h1 em{color:var(--gold);font-style:italic;font-weight:700;display:block;} .hero .sub{font-size:16.5px;line-height:1.8;color:var(--ink-soft);max-width:480px;margin-bottom:38px;font-weight:400;} .ctas{display:flex;gap:16px;margin-bottom:40px;flex-wrap:wrap;} .badges{display:flex;gap:12px;flex-wrap:wrap;max-width:480px;} .badge{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(10,47,107,0.16); box-shadow:0 4px 14px rgba(10,47,107,0.05);padding:9px 16px;border-radius:30px;font-size:12px;font-weight:600;color:var(--navy); transition:transform .25s ease, box-shadow .25s ease;} .badge:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(10,47,107,0.10);} .badge i{color:var(--gold);font-size:12px;} .right-stage{position:relative;width:100%;min-height:340px;display:flex;align-items:center;justify-content:center;} .ground{position:absolute;left:50%;bottom:8%;transform:translate(-50%,0);width:120px;height:18px;border-radius:50%; background:radial-gradient(ellipse at center, rgba(10,47,107,0.13), transparent 75%);filter:blur(6px);z-index:1;} .bottle-wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:center; animation:floatBottle 9s ease-in-out infinite;} @keyframes floatBottle{ 0%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-12px) rotate(1.2deg);} 100%{transform:translateY(0) rotate(0deg);} } .bottle-wrap img{width:auto;height:auto;max-width:300px;max-height:60vh;display:block;} /* ============ STATS BAR ============ */ .stats{padding:0 0 115px;background:var(--white);} .stats-card{display:flex;justify-content:space-between;background:#fff;border-radius:20px;border:1px solid var(--border); box-shadow:0 30px 64px rgba(10,47,107,0.10);padding:38px 30px;flex-wrap:wrap;} .stat{flex:1;min-width:160px;text-align:center;padding:10px 18px;border-radius:14px; transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease;cursor:default;} .stat:hover{transform:translateY(-6px) scale(1.03);background:var(--off);} .stat .stat-icon{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:flex; align-items:center;justify-content:center;margin:0 auto 16px;font-size:21px;transition:transform .3s ease;} .stat:hover .stat-icon{transform:scale(1.1) rotate(-4deg);} .stat .num{font-size:30px;font-weight:800;color:var(--navy);margin-bottom:5px;} .stat .lbl{font-size:12px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink-soft);} /* ============ FEATURED PRODUCTS ============ */ .products{padding:165px 0;background:var(--white);} .products-head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:67px;flex-wrap:wrap;gap:20px;} .products-head-row h2{margin-bottom:0;} .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;} .product-card{ position:relative;background:var(--white);border-radius:18px;border:1px solid var(--border); box-shadow:0 22px 52px rgba(10,47,107,0.08);text-align:center;overflow:hidden; transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1); } .product-card:hover{transform:translateY(-10px);box-shadow:0 32px 64px rgba(10,47,107,0.16);} .product-top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 0;} .product-badge{font-size:10px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;padding:6px 13px;border-radius:20px;color:#fff;} .product-badge.gold{background:var(--gold);} .product-badge.navy{background:var(--navy);} .product-top i.heart{color:var(--muted);font-size:15px;transition:color .25s ease,transform .25s ease;} .product-top i.heart:hover{color:#e0526b;transform:scale(1.15);} .product-card .img-stage{height:190px;display:flex;align-items:center;justify-content:center;margin:8px 0 10px;overflow:hidden;} .product-card .img-stage img{max-height:180px;width:auto;margin:0 auto;transition:transform .45s cubic-bezier(.22,1,.36,1);} .product-card:hover .img-stage img{transform:scale(1.03);} .product-card .pname{font-size:16.5px;font-weight:700;letter-spacing:0.2px;margin-bottom:4px;color:var(--navy);} .product-card .pname a{text-decoration:none;color:inherit;} .product-card .pmeta{font-size:12px;color:var(--ink-soft);margin-bottom:14px;letter-spacing:0.4px;text-transform:uppercase;} .purity-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(212,167,44,0.12);color:var(--navy);font-size:13px; font-weight:700;padding:7px 15px;border-radius:20px;margin-bottom:14px;} .purity-pill i{color:var(--gold);font-size:11px;} .price{font-size:25px;font-weight:800;color:var(--navy);margin-bottom:20px;} .price .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit;} .price del{font-size:16px;color:var(--muted);font-weight:600;margin-right:8px;} .quickview-wrap{position:relative;height:54px;margin:0 22px 22px;overflow:hidden;} .quickview-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff; font-size:12.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;border-radius:8px;cursor:pointer;text-decoration:none; opacity:0;transform:translateY(10px);transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), background .25s ease;} .product-card:hover .quickview-btn{opacity:1;transform:translateY(0);} .quickview-btn:hover{background:var(--navy-deep);} .quickview-static{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px; border:1.5px solid var(--border);color:var(--navy);border-radius:8px;font-size:12.5px;font-weight:700;letter-spacing:0.5px; text-transform:uppercase;background:var(--off);transition:opacity .35s ease;} .product-card:hover .quickview-static{opacity:0;} .products-foot{text-align:center;margin-top:56px;} .no-products-msg{text-align:center;color:var(--ink-soft);font-size:15px;padding:40px 0;} /* ============ WHY CHOOSE ============ */ .why{padding:165px 0;background:var(--off);} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;} .why-card{padding:44px 30px;border-radius:16px;background:var(--white);text-align:left;border:1px solid var(--border); box-shadow:0 20px 46px rgba(10,47,107,0.07); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);} .why-card:hover{transform:translateY(-8px);box-shadow:0 26px 52px rgba(10,47,107,0.14);} .why-icon{width:58px;height:58px;border-radius:50%;background:var(--off);border:1.5px solid var(--navy); display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--navy);font-size:21px; transition:transform .3s ease, background .3s ease, color .3s ease;} .why-card:hover .why-icon{transform:scale(1.08) rotate(-4deg);background:var(--navy);color:#fff;} .why-card h3{font-size:19px;font-weight:700;margin-bottom:10px;color:var(--navy);} .why-card p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);} /* ============ CATEGORIES ============ */ .categories{padding:165px 0;background:var(--white);} .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;} .cat-card{position:relative;border-radius:16px;padding:34px 28px;background:var(--white);border:1px solid var(--border); box-shadow:0 20px 46px rgba(10,47,107,0.07);min-height:210px;display:flex;flex-direction:column;justify-content:flex-start; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);text-decoration:none;} .cat-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 26px 52px rgba(10,47,107,0.14);} .cat-card .cat-icon{width:52px;height:52px;border-radius:50%;background:var(--off);border:1.5px solid var(--gold); display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--gold);font-size:19px; transition:transform .3s ease, background .3s ease, color .3s ease;} .cat-card:hover .cat-icon{transform:scale(1.08);background:var(--gold);color:#fff;} .cat-card h4{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px;} .cat-card p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);} /* ============ QUALITY / LAB STANDARDS ============ */ .quality{padding:175px 0;background:var(--off);color:var(--navy);position:relative;overflow:hidden;} .quality .qgrid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 0.9fr;gap:66px;align-items:center;} .quality h2{color:var(--navy);} .quality p.section-sub{color:var(--ink-soft);} .check-list{margin-top:32px;display:flex;flex-direction:column;gap:17px;} .check-item{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--navy);} .check-item .tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(212,167,44,0.14); color:var(--gold);font-size:12px;display:flex;align-items:center;justify-content:center;} .coa-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:18px; padding:40px 36px;box-shadow:0 26px 60px rgba(10,47,107,0.09);overflow:hidden;} .coa-accent{position:absolute;top:0;left:0;right:0;height:5px;background:var(--gold);} .coa-card .coa-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding-bottom:18px; border-bottom:1px dashed var(--border);} .coa-card .coa-top span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;} .coa-row{display:flex;justify-content:space-between;font-size:13.5px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--ink-soft);letter-spacing:.2px;} .coa-row b{color:var(--navy);font-weight:700;} .badge-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;} .mini-badge{font-size:11.5px;font-weight:600;letter-spacing:0.5px;padding:8px 14px;border-radius:20px; border:1px solid var(--border);color:var(--navy);transition:border-color .25s ease,background .25s ease;} .mini-badge:hover{border-color:var(--navy);background:var(--off);} /* ============ FAQ ============ */ .faq{padding:150px 0;background:var(--white);} .faq-list{max-width:760px;margin:0 auto;} .faq-item{border-bottom:1px solid var(--border);} .faq-q{display:flex;justify-content:space-between;align-items:center;padding:28px 4px;cursor:pointer;font-size:17px;font-weight:600;color:var(--navy);transition:color .25s ease;} .faq-q:hover{color:var(--gold);} .faq-q .plus{width:28px;height:28px;border-radius:50%;border:1px solid var(--navy);color:var(--navy); display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s ease,color .3s ease;} .faq-item.open .faq-q .plus{transform:rotate(135deg);background:var(--navy);color:#fff;} .faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;} .faq-item.open .faq-a{max-height:240px;opacity:1;} .faq-a p{padding:0 4px 28px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:680px;} /* ============ FOOTER ============ */ footer{background:var(--navy-deep);color:#cdd8f0;padding:115px 0 0;} .foot-grid{display:flex;flex-wrap:wrap;gap:36px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,0.08);} .foot-brand{flex:1 1 30%;min-width:240px;} .foot-brand h4{color:#fff;font-size:20px;font-weight:700;margin-bottom:14px;} .foot-brand p{font-size:13.5px;line-height:1.75;color:#9aa7cf;max-width:280px;margin-bottom:22px;} .newsletter-btn{display:inline-block;background:linear-gradient(135deg,var(--gold-light),var(--gold));border:none;color:var(--navy-deep); font-weight:700;font-size:12px;letter-spacing:0.5px;text-transform:uppercase;padding:13px 24px;border-radius:30px;cursor:pointer;text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;} .newsletter-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(212,167,44,0.3);} .foot-col{flex:1 1 16%;min-width:150px;} .foot-col h5{color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:20px;} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;} .foot-col ul a{font-size:13.5px;color:#aab8d9;text-decoration:none;transition:color .2s ease, padding-left .2s ease;} .foot-col ul a:hover{color:var(--gold-light);padding-left:3px;} .foot-contact p{font-size:13.5px;color:#aab8d9;margin-bottom:8px;} .socials{display:flex;gap:10px;margin-top:18px;} .socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);display:flex; align-items:center;justify-content:center;font-size:13px;color:#fff;text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .25s ease;} .socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);transform:translateY(-3px);} .trust-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px;padding:26px 0; border-bottom:1px solid rgba(255,255,255,0.08);} .trust-badge{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9aa7cf;} .trust-badge i{font-size:15px;color:#9aa7cf;} .bottom-bar{padding:26px 0;display:flex;justify-content:space-between;font-size:12.5px;color:#7d89b3;flex-wrap:wrap;gap:10px;} /* ============ Minimal WooCommerce defaults for non-homepage pages ============ */ .woocommerce-page .wrap{padding:60px 64px;} .woocommerce-page table.shop_table{width:100%;border-collapse:collapse;} .woocommerce-page .button{background:var(--navy);color:#fff;border-radius:6px;padding:12px 22px;text-decoration:none;display:inline-block;} @media (min-width:981px) and (max-width:1180px){ .hero-grid{padding:160px 40px 110px;gap:28px;} .hero h1{font-size:46px;} .bottle-wrap img{max-width:260px;} } @media (max-width:1080px){ .product-grid,.why-grid,.cat-grid{grid-template-columns:repeat(2,1fr);} /* !important is required here: header.php (v1.0.1) sets inline style="display:flex" directly on