/** * theme-premium.css — v2.1 Corporate Lite (FIXED) * Jetikan Shitoryu Karate Do — full-site premium theme * FIXES: Larger logo (desktop + mobile), Quick View hover button click, * better header spacing, reduced empty space, proper z-index stack. * Add LAST in after all existing stylesheets. */ /* ═══════════════════════════════════════════════════ 0. ROOT OVERRIDES & RESETS ═══════════════════════════════════════════════════ */ :root { --thm-primary : #ff685c; /* brand red-orange */ --thm-hover : #f04133; /* deeper red */ --thm-text : #1E293B; /* slate-800 */ --thm-radius : 6px; --thm-dark : #0F172A; /* near-black nav */ --thm-card-r : 12px; --thm-shadow : 0 2px 8px rgba(0,0,0,.07); --thm-shadow-h: 0 12px 32px rgba(0,0,0,.14); --transition : .22s ease; } *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; display: block; } /* ═══════════════════════════════════════════════════ 1. TOPBAR ═══════════════════════════════════════════════════ */ .top-bar, [class*="top-bar"], .header-top { background: var(--thm-dark) !important; color: #ccc !important; font-size: 13px; padding: 6px 0; } .top-bar a, .header-top a { color: #ccc !important; transition: color var(--transition); } .top-bar a:hover, .header-top a:hover { color: var(--thm-primary) !important; } /* ═══════════════════════════════════════════════════ 2. NAVIGATION — Tighter, cleaner header ═══════════════════════════════════════════════════ */ .navbar, header .navbar, nav.navbar { background: #fff !important; box-shadow: 0 2px 16px rgba(0,0,0,.10) !important; padding: 0 !important; position: sticky !important; top: 0; z-index: 1030; min-height: 70px; } /* ── LOGO — Bigger on desktop, still clean on mobile ── */ .navbar-brand { padding: 8px 0 !important; display: flex !important; align-items: center !important; margin-right: 20px !important; } /* Reset old round/tiny logo override — make it rectangular and bigger */ .navbar-brand img, .navbar-brand .frontend-site-logo { border-radius: 8px !important; /* slight rounding, not a circle */ height: 58px !important; /* desktop logo height */ width: auto !important; /* preserve aspect ratio */ max-width: 180px !important; object-fit: contain !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* Nav links */ .navbar-nav > li > a, .nav > li > a, .navbar-nav .nav-link { color: #1E293B !important; font-size: 13px !important; font-weight: 600 !important; padding: 24px 13px !important; letter-spacing: .2px; transition: color var(--transition) !important; border-bottom: 2px solid transparent; line-height: 1 !important; } .navbar-nav > li > a:hover, .navbar-nav > li.active > a, .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--thm-primary) !important; border-bottom-color: var(--thm-primary) !important; background: transparent !important; } /* Dropdown */ .dropdown-menu { background: #fff !important; border: 1px solid #eef0f2 !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.14) !important; padding: 8px 0 !important; margin-top: 0 !important; } .dropdown-menu .dropdown-item, .dropdown-menu > li > a { color: #333 !important; font-size: 13px !important; padding: 9px 20px !important; transition: background var(--transition), color var(--transition) !important; } .dropdown-menu .dropdown-item:hover, .dropdown-menu > li > a:hover { background: rgba(255,104,92,.08) !important; color: var(--thm-primary) !important; } /* Hamburger toggle */ .navbar-toggler { border-color: rgba(0,0,0,.2) !important; padding: 6px 10px !important; } .navbar-toggler .fa-bars, .navbar-toggler-icon { color: #333 !important; } .navbar-toggle { border-color: rgba(0,0,0,.2) !important; } .navbar-toggle .icon-bar { background: #333 !important; } /* Mobile nav collapse */ @media (max-width: 991px) { .navbar-brand img, .navbar-brand .frontend-site-logo { height: 48px !important; /* slightly smaller on tablet */ max-width: 150px !important; } .navbar-nav > li > a, .navbar-nav .nav-link { padding: 12px 16px !important; border-bottom: 1px solid #f0f0f0 !important; } .navbar-collapse { background: #fff !important; border-top: 1px solid #eee !important; padding-bottom: 12px !important; } } @media (max-width: 575px) { .navbar, header .navbar, nav.navbar { min-height: 60px !important; } .navbar-brand img, .navbar-brand .frontend-site-logo { height: 44px !important; max-width: 130px !important; } } /* ── Footer logo — same fix ── */ .footer-logo .frontend-site-logo, .footer-logo img { border-radius: 8px !important; height: 56px !important; width: auto !important; max-width: 160px !important; object-fit: contain !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 16px !important; } /* ═══════════════════════════════════════════════════ 3. BREADCRUMB HERO STRIP ═══════════════════════════════════════════════════ */ .breadcrumb-section, .page-title-area, .inner-banner { background: var(--thm-dark) !important; padding: 48px 0 !important; } .breadcrumb-section h2, .page-title-area h2, .inner-banner h2 { color: #fff !important; font-size: 28px !important; font-weight: 800 !important; margin: 0 0 10px !important; } .breadcrumb, .breadcrumb li, .breadcrumb li a { background: transparent !important; color: #aaa !important; font-size: 13px; padding: 0 !important; } .breadcrumb li a:hover { color: var(--thm-primary) !important; } .breadcrumb > li + li::before, .breadcrumb-item + .breadcrumb-item::before { color: var(--thm-primary) !important; content: "›" !important; font-size: 16px; } /* ═══════════════════════════════════════════════════ 4. GLOBAL SECTION RHYTHM ═══════════════════════════════════════════════════ */ section { padding: 72px 0; } section:nth-of-type(even) { background: #f8f9fa; } .section-title, .section-header { text-align: center; margin-bottom: 48px; } .section-title h2, .section-header h2 { font-size: 34px !important; font-weight: 800 !important; color: var(--thm-text) !important; position: relative; display: inline-block; padding-bottom: 14px; margin-bottom: 12px !important; } .section-title h2::after, .section-header h2::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; background: var(--thm-primary); border-radius: 2px; } .section-title p, .section-header p { font-size: 15px; color: #666; max-width: 540px; margin: 0 auto; line-height: 1.7; } /* ═══════════════════════════════════════════════════ 5. BUTTONS ═══════════════════════════════════════════════════ */ .btn-primary, .btn-theme, a.btn-primary { background: var(--thm-primary) !important; border-color: var(--thm-primary) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 24px !important; border-radius: var(--thm-radius) !important; transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important; box-shadow: 0 4px 14px rgba(255,104,92,.28); letter-spacing: .2px; } .btn-primary:hover, .btn-theme:hover, a.btn-primary:hover { background: var(--thm-hover) !important; border-color: var(--thm-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(255,104,92,.35) !important; } .btn-ghost, .btn-outline-white { background: transparent !important; border: 2px solid #fff !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; padding: 9px 22px !important; border-radius: var(--thm-radius) !important; transition: background var(--transition), color var(--transition) !important; } .btn-ghost:hover, .btn-outline-white:hover { background: #fff !important; color: var(--thm-primary) !important; } /* ═══════════════════════════════════════════════════ 6. UNIVERSAL CARD ═══════════════════════════════════════════════════ */ .card, .service-card, .feature-card, .teacher-card, .event-card, .news-card, .blog-card { background: #fff !important; border: 1px solid #eef0f2 !important; border-radius: var(--thm-card-r) !important; box-shadow: var(--thm-shadow) !important; transition: box-shadow var(--transition), transform var(--transition) !important; overflow: hidden; } .card:hover, .service-card:hover, .feature-card:hover, .teacher-card:hover, .event-card:hover, .news-card:hover, .blog-card:hover { box-shadow: var(--thm-shadow-h) !important; transform: translateY(-4px) !important; } /* ═══════════════════════════════════════════════════ 7. HERO SLIDER ═══════════════════════════════════════════════════ */ .hero-section, .slider-section, .main-slider, #home-slider, .carousel { position: relative; } .hero-section .slide, .main-slider .slide, .carousel-item { min-height: 100vh; background-size: cover !important; background-position: center !important; position: relative; } .hero-section .slide::before, .main-slider .slide::before, .carousel-item::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); } .hero-section .slide-content, .main-slider .slide-content, .carousel-caption { position: relative; z-index: 2; text-align: center; padding: 0 20px; } .hero-section h1, .main-slider h1, .carousel-caption h1 { color: #fff !important; font-size: clamp(32px, 6vw, 56px) !important; font-weight: 900 !important; line-height: 1.15 !important; margin-bottom: 20px !important; text-shadow: 0 2px 16px rgba(0,0,0,.3); } .hero-section p, .main-slider p, .carousel-caption p { color: rgba(255,255,255,.88) !important; font-size: 18px !important; max-width: 580px; margin: 0 auto 32px !important; line-height: 1.6; } .carousel-indicators li, .slick-dots li button { background: rgba(255,255,255,.5) !important; border-radius: 50% !important; width: 10px !important; height: 10px !important; border: none !important; transition: background var(--transition) !important; } .carousel-indicators .active, .slick-dots li.slick-active button { background: var(--thm-primary) !important; } /* ═══════════════════════════════════════════════════ 8. FEATURES / ICONS ═══════════════════════════════════════════════════ */ .features-section .feature-item, .service-box, .icon-box { text-align: center; padding: 28px 20px !important; border-radius: var(--thm-card-r) !important; background: #fff !important; border: 1px solid #eef0f2 !important; box-shadow: var(--thm-shadow) !important; transition: box-shadow var(--transition), transform var(--transition) !important; } .features-section .feature-item:hover, .service-box:hover, .icon-box:hover { box-shadow: var(--thm-shadow-h) !important; transform: translateY(-4px) !important; } .features-section .feature-item i, .service-box i, .icon-box i { font-size: 38px !important; color: var(--thm-primary) !important; margin-bottom: 14px !important; display: block; } /* ═══════════════════════════════════════════════════ STORE PAGE — v2.1 FIX KEY FIX: Quick View overlay z-index + pointer-events ═══════════════════════════════════════════════════ */ /* Search bar */ #product-search:focus { box-shadow: none; border-color: #ced4da; } #btn-search { background: var(--thm-primary) !important; border-color: var(--thm-primary) !important; font-weight: 600; } #btn-search:hover { background: var(--thm-hover) !important; border-color: var(--thm-hover) !important; } #btn-clear-search { background: #f8f9fa; border-color: #ced4da; color: #555; } /* Product card */ .product-card-modern { background: #fff; border: 1px solid #eef0f2; border-radius: var(--thm-card-r); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); height: 100%; display: flex; flex-direction: column; box-shadow: var(--thm-shadow); /* Establish stacking context so z-index on children works */ position: relative; isolation: isolate; } .product-card-modern:hover { box-shadow: var(--thm-shadow-h); transform: translateY(-4px); } /* Image container */ .product-image-container { position: relative; height: 190px; min-height: 190px; background: #f4f6f8; /* Do NOT use overflow:hidden — it can clip the overlay z-index stacking */ overflow: hidden; border-bottom: 1px solid #f0f0f0; /* Explicit stacking context */ z-index: 0; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; /* Image sits at base of stack */ position: relative; z-index: 0; } .product-card-modern:hover .product-image { transform: scale(1.06); } /* No image placeholder */ .product-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 190px; color: #c8cdd4; background: #f4f6f8; position: relative; z-index: 0; /* sits below overlay */ pointer-events: none; /* placeholder never captures clicks */ } .product-image-placeholder i { font-size: 2.4rem; } .product-image-placeholder p { margin: 8px 0 0; font-size: 12px; letter-spacing: .5px; } /* Category badge — BELOW the quick-view overlay so it never captures clicks */ .product-category-badge { position: absolute; top: 10px; right: 10px; background: var(--thm-primary); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .3px; box-shadow: 0 2px 6px rgba(0,0,0,.15); z-index: 1; /* BELOW overlay (z-index 3) */ pointer-events: none; /* badge never blocks clicks */ } /* ── QUICK VIEW OVERLAY — THE FIX ───────────────────── Problems fixed: 1. z-index raised above badge (z-index: 3) 2. pointer-events: auto so clicks register 3. cursor: pointer confirmed 4. No element above it that could block the click ──────────────────────────────────────────────────── */ .btn-quick-view-overlay, .btn-quick-view { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0,0,0,.40) !important; color: #fff !important; border: none !important; border-radius: 0 !important; opacity: 0 !important; transition: opacity .22s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: .9rem !important; letter-spacing: .3px !important; cursor: pointer !important; /* Critical: sits above badge and placeholder */ z-index: 3 !important; /* Critical: must receive pointer events */ pointer-events: auto !important; /* Remove any transform that could shift hit area */ transform: none !important; text-decoration: none !important; outline: none !important; } /* Show overlay on card hover */ .product-card-modern:hover .btn-quick-view-overlay, .product-card-modern:hover .btn-quick-view { opacity: 1 !important; } /* Ensure overlay text/icon is visible and not intercepted */ .btn-quick-view-overlay .qv-text, .btn-quick-view .qv-text { pointer-events: none; /* icon/text inside never captures the click */ display: flex; align-items: center; gap: 6px; background: rgba(255,104,92,.85); padding: 8px 18px; border-radius: 24px; font-size: .85rem; font-weight: 700; letter-spacing: .3px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: background .2s ease, transform .2s ease; } .product-card-modern:hover .btn-quick-view-overlay .qv-text, .product-card-modern:hover .btn-quick-view .qv-text { background: rgba(240,65,51,.95); transform: scale(1.04); } /* Product info */ .product-info { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; } .product-title { font-size: 15px; font-weight: 700; color: var(--thm-text); margin: 0 0 4px; line-height: 1.35; } .product-code { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; } .product-price { display: block; font-size: 21px; font-weight: 800; color: var(--thm-primary); letter-spacing: -.3px; } .product-stock { display: block; font-size: 12px; margin-top: 4px; font-weight: 500; } .product-actions { margin-top: auto; } /* Qty stepper */ .product-actions .input-group.input-group-sm { display: flex; flex-wrap: nowrap; align-items: stretch; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; } .product-actions .input-group.input-group-sm > .input-group-btn, .product-actions .input-group.input-group-sm > .form-control { border: none; border-radius: 0; box-shadow: none; } .product-actions .input-group.input-group-sm > .input-group-btn { flex: 0 0 auto; } .product-actions .input-group.input-group-sm > .form-control { flex: 1 1 auto; min-width: 34px; text-align: center; font-size: .85rem; background: #fafafa; border-left: 1px solid #dee2e6 !important; border-right: 1px solid #dee2e6 !important; } .product-actions .input-group-btn > .btn-default { padding: .25rem .55rem; font-size: .85rem; background: #f8f9fa; border: none; color: #555; } .product-actions .input-group-btn > .btn-default:hover { background: #e9ecef; } .product-actions .input-group-btn:last-child > .btn-primary { border-radius: 0; background: var(--thm-primary) !important; border-color: var(--thm-primary) !important; font-size: .8rem; padding: .25rem .6rem; white-space: nowrap; font-weight: 600; } .product-actions .input-group-btn:last-child > .btn-primary:hover { background: var(--thm-hover) !important; border-color: var(--thm-hover) !important; } /* Quick view modal */ #quickViewModal .modal-header { border-bottom: 1px solid #eee; } #quickViewModal .modal-title { font-weight: 700; font-size: 17px; } #quickViewModal .input-group.input-group-sm { display: flex; flex-wrap: nowrap; align-items: stretch; } #quickViewModal .input-group.input-group-sm .input-group-btn { flex: 0 0 auto; } #quickViewModal .input-group.input-group-sm .form-control { flex: 1 1 auto; border-radius: 0; text-align: center; } #quickViewModal .input-group-btn:first-child > .btn { border-radius: 4px 0 0 4px; border-right: 0; } #quickViewModal .input-group-btn:last-child > .btn { border-radius: 0 4px 4px 0; border-left: 0; } .qv-main-image { width: 100%; max-height: 300px; object-fit: contain; border: 1px solid #eee; border-radius: 6px; padding: 6px; } .qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .qv-thumb { width: 64px; height: 64px; object-fit: cover; border: 2px solid transparent; border-radius: 4px; cursor: pointer; } .qv-thumb.active { border-color: var(--thm-primary); } /* ═══════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════ */ footer, .footer { background: var(--thm-dark) !important; color: #ccc !important; padding: 56px 0 0 !important; border-top: 3px solid var(--thm-primary) !important; } footer h4, .footer h4 { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; margin-bottom: 18px !important; position: relative; padding-bottom: 10px; } footer h4::after, .footer h4::after { content: ""; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--thm-primary); } footer p, .footer p { font-size: 13px; color: #aaa; line-height: 1.7; } footer a, .footer a { color: #aaa !important; font-size: 13px; text-decoration: none; transition: color var(--transition) !important; } footer a:hover, .footer a:hover { color: var(--thm-primary) !important; } footer ul { padding: 0; margin: 0; list-style: none; } footer ul li { margin-bottom: 8px; } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ @media (max-width: 991px) { section { padding: 56px 0; } } @media (max-width: 767px) { .hero-section h1, .main-slider h1 { font-size: 30px !important; } .section-title h2, .section-header h2 { font-size: 24px !important; } section { padding: 44px 0; } .product-image-container, .product-image-placeholder { height: 150px !important; min-height: 150px !important; } } @media (max-width: 480px) { .product-image-container, .product-image-placeholder { height: 130px !important; min-height: 130px !important; } } /* ═══════════════════════════════════════════════════ ACCESSIBILITY ═══════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }