/* Theme Name: ABC Laser V2 Theme URI: https://abclaserengraving.com Author: ABC Laser Engraving Description: Custom WooCommerce theme for ABC Laser Engraving Version: 2.22 Requires at least: 5.8 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: abc-laser-v2 Tags: woocommerce, ecommerce, custom-menu, featured-images */ /* ══════════════════════════════════════ VARIABLES ══════════════════════════════════════ */ :root{ --primary: #d62b2b; --primary-dk: #b01f1f; --nav-bg: #222222; --header-bg: #ffffff; --topbar-bg: #111111; --footer-bg: #1a1a1a; --slide-h: 520px; } /* ══════════════════════════════════════ GLOBAL RESET — force full width at every level ══════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{font-size:16px;font-family:'Segoe UI',system-ui,Arial,sans-serif;scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden;} body{font-family:inherit;color:#333;background:#fff;line-height:1.6;width:100%;max-width:100%;} /* ── Nuclear full-width reset ───────────────────────────── Kills every wrapper WordPress, Gutenberg, WooCommerce, or any plugin might inject between and our theme files. ─────────────────────────────────────────────────────────── */ #page, .site, .site-main, .site-content, #content, .content-area, .wp-site-blocks, .has-global-padding, .entry, .entry-content, .post-content, .type-page, .hentry, .woocommerce-page #content, .woocommerce #content, .woocommerce-page .site-content, .woocommerce-page .site-main, .is-layout-constrained, .is-layout-flow, .wp-block-post-content, .wp-block-group, .wp-block-group__inner-container { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Gutenberg block alignments — let them be full width */ .alignfull, .alignwide { width: 100% !important; max-width: 100% !important; } img{max-width:100%;height:auto;display:block;} a{text-decoration:none;color:inherit;} ul{list-style:none;} button{cursor:pointer;border:none;background:none;} input,select,textarea{font-family:inherit;font-size:1rem;} /* ══════════════════════════════════════ TOP BAR ══════════════════════════════════════ */ #topbar{background:var(--topbar-bg);color:#fff;font-size:var(--topbar-fs,.82rem);padding:var(--topbar-pd,6px) 0;z-index:1001;width:100%;} .topbar-inner{display:flex;align-items:center;min-height:var(--topbar-h,auto);padding:0 15px;gap:10px;width:100%;} .topbar-center{flex:1;text-align:center;} .topbar-announce{display:inline-block;} .topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;} .topbar-contact{color:rgba(255,255,255,.85);} .topbar-contact:hover{color:#fff;} #topbar a{color:rgba(255,255,255,.85);} #topbar a:hover{color:#fff;} .social-icons{display:flex;gap:6px;align-items:center;} .social-icons a{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(255,255,255,.12);border-radius:4px;color:#fff;transition:background .2s;} .social-icons a:hover{background:rgba(255,255,255,.25);} .social-icons svg{width:15px;height:15px;} /* ══════════════════════════════════════ SITE HEADER ══════════════════════════════════════ */ #site-header{background:var(--header-bg);position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.07);width:100%;} .header-inner{padding:10px 15px;width:100%;} .header-main{display:flex;align-items:center;gap:14px;width:100%;} .site-logo{flex-shrink:0;} .site-logo img{max-height:54px;width:auto;display:block;} .site-logo .logo-text{font-size:1.3rem;font-weight:800;color:var(--primary);} /* SEARCH — native WordPress form via searchform.php */ .header-search{flex:1;display:flex;justify-content:center;} .header-search .abc-search-form, .header-search form{display:flex;width:600px;max-width:100%;} .header-search input[type=search], .header-search .abc-search-form input[type=search]{ flex:1;min-width:0;padding:9px 14px; border:2px solid #ddd;border-right:none; border-radius:4px 0 0 4px;font-size:.9rem; outline:none;transition:border-color .2s; background:#fff;color:#333; } .header-search input[type=search]:focus, .header-search .abc-search-form input[type=search]:focus{border-color:var(--primary);} .header-search button, .header-search .abc-search-form button{ padding:9px 16px;background:var(--primary);color:#fff; border:none;border-radius:0 4px 4px 0;cursor:pointer; font-size:.9rem;transition:background .2s;white-space:nowrap;flex-shrink:0; display:flex;align-items:center;justify-content:center;gap:5px; } .header-search button:hover, .header-search .abc-search-form button:hover{background:var(--primary-dk);} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} .header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;} .hdr-btn{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:6px;color:#444;font-size:.72rem;gap:2px;position:relative;transition:color .2s,background .2s;} .hdr-btn svg{width:22px;height:22px;} .hdr-btn:hover{color:var(--primary);background:#f5f5f5;} .cart-count{position:absolute;top:2px;right:4px;background:var(--primary);color:#fff;font-size:.6rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;} /* ══════════════════════════════════════ MAIN NAV ══════════════════════════════════════ */ #main-nav{background:var(--nav-bg);width:100%;} .nav-inner-wrap{padding:0 15px;width:100%;} .nav-inner{display:flex;align-items:stretch;width:100%;} #primary-menu{display:flex;align-items:stretch;flex:1;justify-content:center;} #primary-menu>li{position:relative;} #primary-menu>li>a{display:flex;align-items:center;padding:0 16px;color:#fff;font-size:.86rem;font-weight:500;min-height:46px;white-space:nowrap;transition:background .2s;gap:4px;} #primary-menu>li>a:hover,#primary-menu>li.current-menu-item>a{background:rgba(255,255,255,.1);} .menu-arrow{font-size:.65rem;opacity:.7;transition:transform .2s;} .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.12);border-top:3px solid var(--primary);border-radius:0 0 6px 6px;z-index:9999;} #primary-menu>li:hover>.sub-menu{display:block;} .sub-menu li a{display:block;padding:10px 16px;color:#333;font-size:.84rem;border-bottom:1px solid #f0f0f0;transition:background .15s,color .15s;} .sub-menu li:last-child a{border-bottom:none;} .sub-menu li a:hover{background:#f8f8f8;color:var(--primary);} .all-cat-btn{display:flex;align-items:center;gap:7px;padding:0 18px;background:var(--primary);color:#fff;font-weight:700;font-size:.86rem;min-height:46px;border:none;cursor:pointer;flex-shrink:0;transition:background .2s;} .all-cat-btn:hover{background:var(--primary-dk);} .all-cat-btn svg{width:18px;height:18px;} #cat-panel{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:240px;box-shadow:0 8px 24px rgba(0,0,0,.12);border-top:3px solid var(--primary);border-radius:0 0 6px 6px;z-index:9998;} #cat-panel.open{display:block;} #cat-panel li a{display:block;padding:10px 16px;color:#333;font-size:.84rem;border-bottom:1px solid #f0f0f0;transition:background .15s;} #cat-panel li:last-child a{border-bottom:none;} #cat-panel li a:hover{background:#f8f8f8;color:var(--primary);} .mob-toggle{display:none;align-items:center;padding:0 14px;color:#fff;min-height:46px;} .mob-toggle svg{width:22px;height:22px;} /* ══════════════════════════════════════ HERO SLIDER — auto-fit responsive cross-fade Height comes from the image itself, NOT a fixed pixel value. --slide-h is only a max-height ceiling set by the admin. Active slide is position:relative (in flow, sets container height). Inactive slides are position:absolute (stacked for cross-fade). ══════════════════════════════════════ */ #hero-slider{position:relative;overflow:hidden;background:#111;width:100%;} .sl-viewport{position:relative;overflow:hidden;width:100%;} .slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease;pointer-events:none;} .slide.active{opacity:1;pointer-events:auto;z-index:1;position:relative;height:auto;} .slide>img{width:100%;height:auto;max-height:var(--slide-h);object-fit:cover;display:block;} .slide-bg{width:100%;min-height:240px;max-height:var(--slide-h);background:linear-gradient(135deg,#1a1a2e 0%,#d62b2b 100%);} .slide-overlay{position:absolute;inset:0;background:rgba(0,0,0,.38);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:20px;} .slide-title{font-size:clamp(1.1rem,3.5vw,2.4rem);font-weight:800;margin-bottom:12px;text-shadow:0 2px 8px rgba(0,0,0,.5);line-height:1.2;} .slide-title-link{color:#fff !important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.6);transition:text-decoration-color .2s;cursor:pointer;} .slide-title-link:hover{text-decoration-color:#fff;} .slide-text{font-size:clamp(.78rem,1.8vw,1rem);margin-bottom:clamp(10px,2.5vw,22px);opacity:.9;max-width:600px;} .slide-btn{display:inline-block;padding:clamp(8px,1.5vw,12px) clamp(16px,3vw,30px);background:var(--primary);color:#fff !important;border-radius:4px;font-weight:700;font-size:clamp(.8rem,1.6vw,1rem);transition:background .2s,transform .15s;text-decoration:none !important;} .slide-btn:hover{background:var(--primary-dk);transform:translateY(-2px);} .sl-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,.28);color:#222;opacity:0;transition:opacity .25s,background .2s,transform .15s;pointer-events:none;} #hero-slider:hover .sl-arrow{opacity:1;pointer-events:auto;} .sl-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);} .sl-arrow svg{width:22px;height:22px;pointer-events:none;} .sl-arrow.prev{left:20px;} .sl-arrow.next{right:20px;} .sl-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;} .sl-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:background .2s,transform .2s;} .sl-dot.active{background:#fff;transform:scale(1.3);} /* ══════════════════════════════════════ HOME SECTIONS — full width, 10px top/bottom, 15px sides ══════════════════════════════════════ */ .home-section{display:block;width:100%;padding:10px 15px;box-sizing:border-box;} .home-section.bg-alt{background:#f7f7f7;} .section-title{font-size:1.55rem;font-weight:800;margin-bottom:20px;text-align:center;position:relative;padding-bottom:12px;color:#111;} .section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:56px;height:3px;background:var(--primary);border-radius:2px;} .section-intro{text-align:center;color:#666;margin:-8px auto 18px;max-width:680px;font-size:.95rem;line-height:1.65;} /* override any WP/WC block or page constraints inside sections */ .home-section *{max-width:none;} .home-section .section-intro,.home-section .slide-text{max-width:680px;} /* ══════════════════════════════════════ PRODUCT CARD ══════════════════════════════════════ */ .abc-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:16px;width:100%;} .product-card{background:#fff;border:1px solid #ebebeb;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .2s;margin:0 !important;} .product-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px);} .pc-img{position:relative;overflow:hidden;background:#f9f9f9;aspect-ratio:1;display:flex;align-items:center;justify-content:center;} .pc-img img{width:100%;height:100%;object-fit:contain;transition:transform .35s;} .product-card:hover .pc-img img{transform:scale(1.05);} .pc-badge{position:absolute;top:8px;left:8px;background:var(--primary);color:#fff;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:3px;text-transform:uppercase;} .pc-badge.sale{background:#e67e22;} .pc-body{padding:12px;display:flex;flex-direction:column;flex:1;gap:6px;} .pc-body h3,.woocommerce-loop-product__title{font-size:.9rem !important;font-weight:600 !important;line-height:1.3;color:#222 !important;margin:0 !important;} .pc-body h3 a,.woocommerce-loop-product__title a{color:#222;} .pc-body h3 a:hover,.woocommerce-loop-product__title a:hover{color:var(--primary);} .pc-price{font-size:.95rem;font-weight:700;color:var(--primary);} .pc-price del{color:#999;font-weight:400;font-size:.82rem;margin-right:4px;} .pc-price ins{text-decoration:none;color:#cc0000;font-size:1.1rem;font-weight:800;} /* Sale price on single product and shop pages */ .woocommerce .price ins, .woocommerce-page .price ins{text-decoration:none;color:#cc0000;font-size:1.2em;font-weight:800;} .woocommerce .price del, .woocommerce-page .price del{color:#999;font-size:.85em;font-weight:400;} .pc-btn{display:block;text-align:center;padding:8px;background:var(--btn-color);color:#fff !important;border-radius:4px;font-size:.82rem;font-weight:600;transition:background .2s;margin-top:auto;} .pc-btn:hover{background:var(--btn-color-dk);} /* ══════════════════════════════════════ ALL PRODUCTS — view all button ══════════════════════════════════════ */ .ap-viewall{text-align:center;margin-top:10px;padding:5px 0;} .ap-viewall-btn{display:inline-block;padding:6px 22px;background:var(--primary);color:#fff !important;border-radius:4px;font-weight:700;font-size:.88rem;} .ap-viewall-btn:hover{background:var(--primary-dk);} /* ══════════════════════════════════════ PRODUCTS SHOWCASE ══════════════════════════════════════ */ .showcase-row{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px;margin-bottom:24px;} .sc-card{display:flex;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .25s;color:#333;} .sc-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);} .sc-img{overflow:hidden;background:#f5f5f5;aspect-ratio:4/3;width:100%;} .sc-img.sc-img-side{aspect-ratio:unset;align-self:stretch;} .sc-img img{width:100%;height:100%;object-fit:cover;display:block;} .sc-body{padding:14px;flex:1;min-width:0;} .sc-body h3{font-size:.95rem;font-weight:700;margin-bottom:6px;color:#111;} /* sc-desc: p and li inherit global base font-size (1rem) so typography setting applies directly. Headings use em so they scale relative to whatever base is set. */ .sc-desc p{color:#555;line-height:1.55;margin:.3em 0;} .sc-desc h1,.sc-desc h2,.sc-desc h3,.sc-desc h4{font-weight:700;margin:.5em 0 .25em;color:#111;} .sc-desc h1{font-size:1.5em;}.sc-desc h2{font-size:1.25em;}.sc-desc h3{font-size:1.1em;}.sc-desc h4{font-size:1em;} .sc-desc ul,.sc-desc ol{padding-left:1.4em;margin:.35em 0;}.sc-desc li{color:#555;line-height:1.55;list-style:disc;} .sc-tag{display:inline-block;background:#f0f0f0;color:#555;font-size:.72rem;padding:2px 8px;border-radius:3px;margin-top:6px;} /* ══════════════════════════════════════ JOB SECTION SHOWCASE ══════════════════════════════════════ */ .jsc-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:20px;} .jsc-card{display:flex;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .25s;color:#333;} .jsc-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);} .jsc-img{overflow:hidden;background:#f5f5f5;flex-shrink:0;aspect-ratio:4/3;width:100%;} .jsc-img img{width:100%;height:100%;object-fit:cover;display:block;} .jsc-body{padding:14px;flex:1;min-width:0;} .jsc-body h3{font-size:.95rem;font-weight:700;margin-bottom:6px;color:#111;} /* jsc-desc: same inheritance approach as sc-desc */ .jsc-desc p{color:#555;line-height:1.55;margin:.3em 0;} .jsc-desc h1,.jsc-desc h2,.jsc-desc h3,.jsc-desc h4{font-weight:700;margin:.5em 0 .25em;color:#111;} .jsc-desc h1{font-size:1.5em;}.jsc-desc h2{font-size:1.25em;}.jsc-desc h3{font-size:1.1em;}.jsc-desc h4{font-size:1em;} .jsc-desc ul,.jsc-desc ol{padding-left:1.4em;margin:.35em 0;}.jsc-desc li{color:#555;line-height:1.55;list-style:disc;} /* ══════════════════════════════════════ FRONT-PAGE EDITOR CONTENT ══════════════════════════════════════ */ #front-page-content{display:block;width:100%;padding:10px 15px;box-sizing:border-box;} #front-page-content .entry-content{max-width:900px;margin:0 auto;line-height:1.85;} /* ══════════════════════════════════════ NEW ARRIVALS CAROUSEL ══════════════════════════════════════ */ .na-carousel-wrap{display:flex;align-items:center;gap:12px;width:100%;} .na-viewport{flex:1;min-width:0;overflow:hidden;} .na-pages .na-page{width:100%;} .na-arrow{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:2px solid #ccc;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;color:#333;} .na-arrow:hover:not(:disabled){border-color:var(--primary);background:var(--primary);color:#fff;} .na-arrow:disabled{opacity:.25;cursor:default;} .na-arrow svg{width:20px;height:20px;pointer-events:none;} /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ #site-footer{background:var(--footer-bg);color:#fff;width:100%;} .footer-widgets{padding:40px 60px;box-sizing:border-box;width:100%;} .footer-grid{display:grid;gap:16px;width:100%;} .footer-widget-col{min-width:0;} .footer-widget-col p, .footer-widget-col .textwidget p, .footer-widget-col .widget p{color:rgba(255,255,255,.72);font-size:.86rem;line-height:1.6;margin-bottom:8px;} .footer-widget-col a,.footer-widget-col .widget a{color:rgba(255,255,255,.72);} .footer-widget-col a:hover,.footer-widget-col .widget a:hover{color:#fff;} .footer-widget-col ul,.footer-widget-col .widget ul{margin:0;padding:0;list-style:none;} .footer-widget-col ul li,.footer-widget-col .widget ul li{margin-bottom:6px;} .footer-widget-col ul li a,.footer-widget-col .widget ul li a{font-size:.86rem;} /* Widget title — inline style attribute in functions.php is the primary mechanism. These CSS rules are backup coverage for all possible selectors. */ .footer-widget-col h4, .footer-widget-col .widget h4, .footer-widget-col .widget-title, .footer-widget-col .widget .widget-title, .footer-widget-col .widgettitle { font-size: .95rem !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 14px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--primary) !important; display: block !important; text-transform: none !important; letter-spacing: normal !important; } .footer-widget-col .widget-title *, .footer-widget-col h4 * { color: #fff !important; } /* Spacing between stacked widgets in same column */ .footer-widget-col .widget + .widget { margin-top: 24px; } /* Footer bottom bar */ .footer-bottom{background:rgba(0,0,0,.35);padding:12px 15px;width:100%;box-sizing:border-box;} .ftr-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;width:100%;} .ftr-copy{margin:0;color:rgba(255,255,255,.6);font-size:.82rem;} .ftr-social{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .ftr-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:#fff;transition:opacity .2s,transform .15s;} .ftr-icon:hover{opacity:.82;transform:scale(1.1);} .ftr-icon svg{width:16px;height:16px;pointer-events:none;} .ftr-facebook {background:#1877f2;} .ftr-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);} .ftr-youtube {background:#ff0000;} .ftr-tiktok {background:#010101;} .ftr-twitter {background:#1da1f2;} .ftr-linkedin {background:#0a66c2;} .ftr-pinterest{background:#e60023;} /* ══════════════════════════════════════ WOOCOMMERCE SHOP PAGE ══════════════════════════════════════ */ .site-content{width:100% !important;padding:15px !important;box-sizing:border-box !important;} .woocommerce .products,.woocommerce-page .products{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;gap:20px !important;width:100% !important;} .woocommerce li.product,.woocommerce-page li.product{margin:0 !important;float:none !important;width:auto !important;} .woocommerce-ordering select{padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:.85rem;} .woocommerce-result-count{font-size:.85rem;color:#666;} /* ══════════════════════════════════════ INNER PAGES (page.php / index.php) ══════════════════════════════════════ */ .page-content-wrap,.site-content .container{width:100% !important;max-width:100% !important;padding:15px 30px !important;box-sizing:border-box !important;} /* ── Paragraph spacing — restore what * reset and entry-content margin:0 strips ── */ .entry-content p + p, .site-content p + p { margin-top: 1em !important; } .entry-content p, .site-content p { margin-bottom: 0 !important; } .entry-content h1,.entry-content h2,.entry-content h3, .entry-content h4,.entry-content h5,.entry-content h6 { margin-top:1.4em !important; margin-bottom:.5em !important; } .entry-content ul,.entry-content ol { padding-left:1.6em !important; margin-bottom:1em !important; } .entry-content li { margin-bottom:.3em !important; } .page-header h1,.page-title-bar h1{font-size:1.6rem;font-weight:800;} /* ══════════════════════════════════════ SHOP BY CATEGORY TILES (v2.19) ══════════════════════════════════════ */ .ct-grid{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:16px;width:100%;} .ct-tile{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #ebebeb;border-radius:10px;overflow:hidden;transition:box-shadow .25s,transform .2s,border-color .2s;text-decoration:none;color:#333;} .ct-tile:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px);border-color:var(--primary);} .ct-tile-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:#f5f5f5;display:flex;align-items:center;justify-content:center;} .ct-tile-img img{width:100%;height:100%;object-fit:contain;transition:transform .35s;} .ct-tile:hover .ct-tile-img img{transform:scale(1.06);} .ct-tile-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f0f0f0 0%,#e0e0e0 100%);} .ct-tile-body{padding:12px 10px;width:100%;} .ct-tile-name{font-size:.88rem;font-weight:700;margin:0 0 2px;color:#222;line-height:1.3;} .ct-tile-count{font-size:.75rem;color:#888;} /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ /* ══════════════════════════════════════ HERO SLIDER — touch-device arrow visibility Touch devices have no hover state, so arrows must always be visible. ══════════════════════════════════════ */ @media(hover:none){ .sl-arrow{opacity:.85 !important;pointer-events:auto !important;} } @media(max-width:1024px){ .header-search .abc-search-form,.header-search form{width:400px;} .abc-grid{grid-template-columns:repeat(3,1fr) !important;} .ct-grid{grid-template-columns:repeat(3,1fr) !important;} .search-products{grid-template-columns:repeat(3,1fr) !important;} } @media(max-width:900px){ .header-main{flex-wrap:wrap;gap:8px;} .header-search{order:3;flex-basis:100%;padding:0 0 8px;} .header-search .abc-search-form,.header-search form{width:100%;} #primary-menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg);z-index:9990;padding-bottom:12px;} #primary-menu.open{display:flex;} #primary-menu>li>a{min-height:44px;border-bottom:1px solid rgba(255,255,255,.08);} .sub-menu{position:static;box-shadow:none;border-top:none;border-left:3px solid var(--primary);border-radius:0;display:none;background:rgba(0,0,0,.2);} .mob-open>.sub-menu{display:block;} .mob-toggle{display:flex;} .na-arrow{width:36px;height:36px;} .na-arrow svg{width:16px;height:16px;} .na-carousel-wrap{gap:6px;} .showcase-row{grid-template-columns:repeat(2,1fr) !important;} .jsc-grid{grid-template-columns:repeat(2,1fr) !important;} /* Slider arrows: always visible + smaller on tablet/mobile */ .sl-arrow{opacity:.85 !important;pointer-events:auto !important;width:40px;height:40px;} .sl-arrow svg{width:18px;height:18px;} .sl-arrow.prev{left:10px;} .sl-arrow.next{right:10px;} .slide-overlay{padding:16px;} } @media(max-width:768px){ .sl-arrow{width:36px;height:36px;box-shadow:0 2px 8px rgba(0,0,0,.2);} .sl-arrow svg{width:16px;height:16px;} .sl-dots{bottom:10px;gap:10px;} .sl-dot{width:12px;height:12px;} .abc-grid{grid-template-columns:repeat(2,1fr) !important;} .ct-grid{grid-template-columns:repeat(2,1fr) !important;} .search-products{grid-template-columns:repeat(2,1fr) !important;} .footer-grid{grid-template-columns:repeat(2,1fr) !important;} } @media(max-width:640px){ .topbar-right{flex-wrap:wrap;justify-content:flex-end;} .slide-overlay{padding:12px 10px;} .sl-arrow{width:32px;height:32px;min-width:32px;min-height:32px;} .sl-arrow svg{width:14px;height:14px;} .sl-arrow.prev{left:6px;} .sl-arrow.next{right:6px;} .sl-dots{bottom:8px;gap:8px;} .showcase-row,.jsc-grid{grid-template-columns:1fr !important;} .jsc-card{flex-direction:column !important;} .na-arrow{width:32px;height:32px;} .footer-grid{grid-template-columns:1fr !important;} } @media(max-width:480px){ .abc-grid{grid-template-columns:repeat(2,1fr) !important;} .ct-grid{grid-template-columns:repeat(2,1fr) !important;} .search-products{grid-template-columns:repeat(2,1fr) !important;} } /* ══════════════════════════════════════════════════ SKIP LINK — ADA / WCAG 2.1 (keyboard users) ══════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -100%; left: 15px; z-index: 9999; padding: 10px 18px; background: #000; color: #fff !important; font-size: .9rem; font-weight: 700; border-radius: 0 0 6px 6px; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 0; outline: 3px solid #ffbf00; outline-offset: 2px; } /* ══════════════════════════════════════════════════ FOCUS STYLES — WCAG 2.1 AA (2:1 min, we use 3:1+) Every interactive element must show a visible focus indicator in the browser. ══════════════════════════════════════════════════ */ :focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; border-radius: 2px; } /* Remove default for mouse users only when :focus-visible is supported */ :focus:not(:focus-visible) { outline: none; } /* Buttons / links inside dark areas: invert focus ring */ #topbar a:focus-visible, #site-footer a:focus-visible, #main-nav a:focus-visible, .sl-arrow:focus-visible, .na-arrow:focus-visible, .all-cat-btn:focus-visible, .mob-toggle:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; } /* ══════════════════════════════════════════════════ MOTION — respect prefers-reduced-motion ══════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .slide { transition: none !important; } .sl-arrow { transition: opacity .01ms !important; } } /* ══════════════════════════════════════════════════ HIGH CONTRAST MODE — Windows forced colors ══════════════════════════════════════════════════ */ @media (forced-colors: active) { .slide-btn, .pc-btn, .ap-viewall-btn { border: 2px solid ButtonText; } .sl-arrow, .na-arrow { border: 2px solid ButtonText; } } /* ══════════════════════════════════════════════════ COLOUR CONTRAST HELPERS All text on coloured backgrounds must pass AA (4.5:1) ══════════════════════════════════════════════════ */ /* Ensure placeholder text meets 4.5:1 (light-gray on white fails — use #767676 minimum) */ ::placeholder { color: #767676; opacity: 1; } /* Form field accessible styling */ input[type=search], input[type=text], input[type=email], input[type=tel], textarea, select { color: #111; background: #fff; } input[type=search]:focus, input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus, select:focus { outline: 3px solid var(--primary); outline-offset: 1px; } /* ══════════════════════════════════════════════════ TOUCH TARGETS — WCAG 2.5.5: min 44×44px ══════════════════════════════════════════════════ */ .hdr-btn { min-width: 44px; min-height: 44px; } .sl-arrow { min-width: 44px; min-height: 44px; } .na-arrow { min-width: 44px; min-height: 44px; } .mob-toggle { min-width: 44px; min-height: 44px; } .sl-dot { min-width: 24px; min-height: 24px; padding: 7px; } .ftr-icon { min-width: 44px; min-height: 44px; } #topbar a { min-height: 32px; display: inline-flex; align-items: center; } #primary-menu > li > a { min-height: 46px; } /* ══════════════════════════════════════════════════ PRINT STYLES — for accessibility + SEO crawl value ══════════════════════════════════════════════════ */ @media print { #topbar, #main-nav, .sl-arrow, .sl-dots, .na-arrow, .header-actions, #site-footer { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } a::after { content: ' (' attr(href) ')'; font-size: 10pt; color: #555; } .home-section { padding: 10pt 0 !important; break-inside: avoid; } } /* ══════════════════════════════════════════════════ SHOWCASE & JOB SECTION — title tag styles ══════════════════════════════════════════════════ */ .sc-item-title, .jsc-item-title { font-weight: 700; line-height: 1.3; color: #111; margin: 0 0 6px; } .sc-item-title.h2, h2.sc-item-title, h2.jsc-item-title { font-size: 1.1rem; } .sc-item-title.h3, h3.sc-item-title, h3.jsc-item-title { font-size: .95rem; } .sc-item-title.h4, h4.sc-item-title, h4.jsc-item-title { font-size: .88rem; } /* ══════════════════════════════════════════════════ RESPONSIVE TYPOGRAPHY — fluid scaling ══════════════════════════════════════════════════ */ @media (max-width: 768px) { .section-title { font-size: 1.25rem; } .pc-body h3 { font-size: .85rem; } } @media (max-width: 480px) { .section-title { font-size: 1.1rem; } .hdr-btn span { display: none; } /* hide Cart/Login labels on tiny screens */ } /* ── Search results page ── */ .search-count { color:#666; font-size:.9rem; margin-bottom:16px; } .search-products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin-top: 16px !important; padding: 0 !important; list-style: none !important; } .search-products li.product { display: flex !important; flex-direction: column !important; border: 1px solid #ebebeb; border-radius: 8px; overflow: hidden; background: #fff; } .search-products li.product img { width: 100% !important; height: 180px !important; object-fit: contain !important; background: #f5f5f5; } .search-products li.product .woocommerce-loop-product__link { flex: 1; display: flex; flex-direction: column; padding: 10px; text-decoration: none; color: #222; } .search-products li.product .woocommerce-loop-product__title { font-size: .9rem !important; font-weight: 600 !important; margin: 6px 0 4px !important; } .search-products li.product .price { font-size: .95rem; font-weight: 700; color: var(--primary, #d62b2b); } .search-products li.product .button { display: block; margin: 0; padding: 9px; background: var(--btn-color, #0057b8); color: #fff !important; text-align: center; font-size: .84rem; font-weight: 600; border: none; text-decoration: none; } .search-products li.product .button:hover { background: var(--btn-color-dk, #003d82); } .search-section-title { font-size:1.2rem; font-weight:700; margin:32px 0 16px; border-bottom:2px solid var(--primary,#d62b2b); padding-bottom:8px; } .search-post-item { padding:12px 0; border-bottom:1px solid #eee; } .search-post-item h3 { font-size:1rem; margin-bottom:4px; } .search-post-item h3 a { color:#222; } .search-post-item h3 a:hover { color:var(--primary,#d62b2b); } .search-post-item p { color:#666; font-size:.88rem; margin:0; } .search-no-results { padding:40px 0; color:#666; }