/* Sitewide modernization layer (local prototype). * Brand colors, logos, and content untouched — this only adds contemporary * polish: motion, depth, rounded media, glass sticky header. * In WordPress: drop into Appearance > Customize > Additional CSS. */ /* Smooth scrolling for anchor jumps */ html { scroll-behavior: smooth; } /* Buttons: micro-interaction */ .btn, button[type="submit"], input[type="submit"] { transition: transform .18s ease, box-shadow .18s ease !important; } .btn:hover, button[type="submit"]:hover, input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important; } .btn:active { transform: translateY(0); } /* Product cards: lift + image zoom */ .product-grid-item, .wd-product { transition: transform .25s ease, box-shadow .25s ease; border-radius: 12px; } .product-grid-item:hover, .wd-product:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, .12); } .product-grid-item .product-image-link img, .product-grid-item .product-image-wrap img { border-radius: 10px; transition: transform .35s ease; } .product-grid-item:hover .product-image-link img, .product-grid-item:hover .product-image-wrap img { transform: scale(1.04); } /* Blog cards / article thumbnails */ .blog-post-loop, article.post { transition: transform .25s ease, box-shadow .25s ease; border-radius: 12px; } .blog-post-loop:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, .10); } .blog-post-loop img, article.post .entry-thumbnail img, .post-img img { border-radius: 12px; } /* Content imagery: gentle rounding (not header/footer logos) */ .main-page-wrapper .wpb_single_image img, .woocommerce-product-gallery img, .entry-content img { border-radius: 12px; } /* Sticky header: translucent glass */ .whb-sticky-header, .whb-clone { background: rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 2px 18px rgba(0, 0, 0, .08); } /* Dropdown menus: soft shadow + rounding */ .main-nav .sub-menu-dropdown, .main-nav .sub-menu { border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .14) !important; overflow: hidden; } /* Links: smooth color/opacity transitions */ a { transition: color .15s ease, opacity .15s ease; } /* Testimonials + info blocks as cards */ .testimonialsBlock .wpb_text_column, .woodmart-info-box { transition: transform .25s ease, box-shadow .25s ease; } .woodmart-info-box:hover { transform: translateY(-4px); } /* Thin modern scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(120, 120, 120, .45); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 120, .7); } /* Visible keyboard focus (accessibility) */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } /* Scroll-reveal: sections fade up as they enter the viewport. * Only active once JS stamps .cw-reveal-init on ; without JS everything * stays visible. Disabled entirely under prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { html.cw-reveal-init .cw-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } html.cw-reveal-init .cw-reveal.cw-revealed { opacity: 1; transform: none; } } /* ---------- Enhancement components (search, CTA bars, related posts) ---------- */ .cw-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 600; } .cw-skip-link:focus { left: 0; } .cw-app-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: none; align-items: center; gap: 10px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -4px 18px rgba(0, 0, 0, .14); } @media (max-width: 767px) { .cw-app-bar { display: flex; } } .cw-app-bar-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; } .cw-app-bar-txt span { opacity: .65; font-size: 11.5px; } .cw-app-bar-x { border: none; background: none; font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; opacity: .55; } .cw-search-overlay { position: fixed; inset: 0; z-index: 10000; display: none; background: rgba(20, 20, 20, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 8vh 16px 0; } .cw-search-overlay.cw-open { display: block; } .cw-search-box { max-width: 620px; margin: 0 auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; position: relative; } .cw-search-box input { width: 100%; border: none; outline: none; font-size: 17px; padding: 18px 52px 18px 20px; box-sizing: border-box; } .cw-search-close { position: absolute; top: 10px; right: 10px; border: none; background: none; font-size: 26px; cursor: pointer; opacity: .5; } .cw-search-results { max-height: 55vh; overflow-y: auto; border-top: 1px solid rgba(0, 0, 0, .08); } .cw-search-hint { padding: 18px 20px; opacity: .6; margin: 0; } .cw-search-item { display: block; padding: 12px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(0, 0, 0, .05); } .cw-search-item:hover { background: rgba(0, 0, 0, .045); } .cw-search-item strong { display: block; font-size: 14.5px; } .cw-search-desc { display: block; font-size: 12.5px; opacity: .65; margin-top: 2px; } .cw-search-tag { float: right; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid rgba(0, 0, 0, .25); border-radius: 20px; padding: 1px 8px; opacity: .6; margin-left: 8px; } .cw-reading-time { font-size: 13px; opacity: .6; margin: 4px 0 14px; } .cw-related { margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .1); } .cw-related h4 { margin: 0 0 14px; } .cw-related-row { display: flex; gap: 14px; flex-wrap: wrap; } .cw-related-card { flex: 1 1 200px; max-width: 320px; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .cw-related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); } .cw-related-card strong { display: block; font-size: 14px; margin-bottom: 5px; } .cw-related-card span { font-size: 12.5px; opacity: .65; } .cw-buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; align-items: center; gap: 12px; padding: 10px 18px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -4px 18px rgba(0, 0, 0, .14); transform: translateY(110%); transition: transform .3s ease; } .cw-buy-bar.cw-visible { transform: none; } .cw-buy-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; } .cw-buy-txt span { opacity: .7; font-size: 13px; } /* ---------- Menu & submenu modernization ---------- */ /* Top-level items: crisper type + animated underline */ .whb-general-header .main-nav .menu > li > a { letter-spacing: .06em; position: relative; transition: opacity .15s ease; } .whb-general-header .main-nav .menu > li > a .nav-link-text::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 2px; background: currentColor; border-radius: 2px; opacity: 0; transition: left .22s ease, right .22s ease, opacity .22s ease; } .whb-general-header .main-nav .menu > li:hover > a .nav-link-text::after, .whb-general-header .main-nav .menu > li.current-menu-item > a .nav-link-text::after { left: 0; right: 0; opacity: .85; } /* Dropdown panel: roomier, rounded, soft shadow */ .main-nav .sub-menu-dropdown, .main-nav .menu > li > ul.sub-menu { border-radius: 14px !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .16) !important; padding: 10px 8px !important; min-width: 240px; border: 1px solid rgba(0, 0, 0, .05); overflow: hidden; } /* Submenu items: pill hover + slide-in */ .main-nav .sub-menu li > a, .main-nav .sub-menu-dropdown li > a { display: block; padding: 9px 14px !important; border-radius: 9px; line-height: 1.35; transition: background .15s ease, transform .15s ease; } .main-nav .sub-menu li > a:hover, .main-nav .sub-menu-dropdown li > a:hover { background: rgba(0, 0, 0, .055); transform: translateX(3px); } /* Nested (third-level) items: smaller + indented */ .main-nav .sub-menu .sub-menu li > a, .main-nav .sub-menu-dropdown ul ul li > a { font-size: .92em; opacity: .85; padding-left: 24px !important; } /* Mobile drawer: bigger touch targets + separators */ ul.site-mobile-menu > li > a { padding-top: 13px !important; padding-bottom: 13px !important; font-weight: 600; letter-spacing: .05em; } ul.site-mobile-menu > li { border-bottom: 1px solid rgba(128, 128, 128, .14); } ul.site-mobile-menu li li > a { padding-top: 10px !important; padding-bottom: 10px !important; opacity: .85; } /* ---------- Dropdown hover fix: bridge the 30px gap + close grace period ---------- */ /* Invisible strip over the gap so moving the pointer down never leaves the menu */ .whb-general-header .main-nav .menu > li > .sub-menu-dropdown::before { content: ""; position: absolute; left: -12px; right: -12px; top: -34px; height: 34px; } .whb-general-header .main-nav .menu > li > .sub-menu-dropdown { overflow: visible !important; } /* Forgiving close: dropdown stays interactive ~0.4s after the pointer strays */ .whb-general-header .main-nav .menu > li > .sub-menu-dropdown { transition: opacity .2s ease .35s, visibility .2s ease .35s, transform .2s ease .35s !important; } .whb-general-header .main-nav .menu > li:hover > .sub-menu-dropdown { transition-delay: 0s, 0s, 0s !important; }