/* ═══════════════════════════════════════════════════════════════ DIAGONAL THEME — half black / half white, 135° split ───────────────────────────────────────────────────────────── TO REVERT: remove class="diagonal-theme" from in views/partials/header.ejs (and optionally remove this tag from the same file). ═══════════════════════════════════════════════════════════════ */ /* ── Base ── */ body.diagonal-theme { background: linear-gradient(135deg, #0d0d0d 50%, #f0f0f0 50%); background-attachment: fixed; color: #fff; } /* ── Navbar ── */ body.diagonal-theme .navbar { background: transparent; box-shadow: none; border-bottom: none; } body.diagonal-theme .navbar.scrolled { background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; } body.diagonal-theme .nav-links a, body.diagonal-theme .nav-icons .nav-icon, body.diagonal-theme .nav-icons a { color: #fff; mix-blend-mode: difference; } body.diagonal-theme .nav-logo img { mix-blend-mode: difference; filter: invert(1); } body.diagonal-theme .hamburger span { background: #fff; mix-blend-mode: difference; } body.diagonal-theme .nav-links a::after { background: #fff; } body.diagonal-theme .dropdown-chevron { stroke: #fff; mix-blend-mode: difference; } /* ── Mega dropdown ── */ body.diagonal-theme .nav-mega-dropdown { background: #0d0d0d; border-color: rgba(255,255,255,0.1); } body.diagonal-theme .mega-list-heading, body.diagonal-theme .mega-list-link, body.diagonal-theme .mega-cat-name { color: rgba(255,255,255,0.75); } body.diagonal-theme .mega-list-link:hover, body.diagonal-theme .mega-cat-name:hover { color: #fff; } body.diagonal-theme .mega-list-divider { background: rgba(255,255,255,0.1); } /* ── Account dropdown ── */ body.diagonal-theme .nav-account-menu { background: #0d0d0d; border-color: rgba(255,255,255,0.1); } body.diagonal-theme .nav-account-item { color: rgba(255,255,255,0.75); } body.diagonal-theme .nav-account-item:hover { background: rgba(255,255,255,0.06); color: #fff; } /* ── Category nav bar ── */ body.diagonal-theme .cat-nav { background: rgba(5, 5, 5, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.08); } body.diagonal-theme .cat-nav-link { color: rgba(255,255,255,0.6); } body.diagonal-theme .cat-nav-link:hover, body.diagonal-theme .cat-nav-link.active { color: #fff; opacity: 1; } /* ── Mobile menu ── */ body.diagonal-theme .mobile-menu { background: #0d0d0d; } body.diagonal-theme .mobile-menu li a { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.08); } body.diagonal-theme .mobile-menu li a:hover { color: #fff; } /* ── Search overlay ── */ body.diagonal-theme .search-overlay { background: rgba(10,10,10,0.95); } body.diagonal-theme .search-overlay-inner input { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.15); } body.diagonal-theme .search-overlay-inner input::placeholder { color: rgba(255,255,255,0.35); } /* ── Hero ── */ body.diagonal-theme .hero-overlay { background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, rgba(255,255,255,0.1) 100% ); } body.diagonal-theme .hero-eyebrow { color: rgba(255,255,255,0.65); } body.diagonal-theme .hero-title { color: #fff; } body.diagonal-theme .hero-subtitle { color: rgba(255,255,255,0.75); } /* ── Section headers ── */ body.diagonal-theme .section-header h2, body.diagonal-theme .section-tag { color: #fff; } body.diagonal-theme .section-link { color: rgba(255,255,255,0.65); } body.diagonal-theme .section-link::after { background: rgba(255,255,255,0.65); } body.diagonal-theme .section-link:hover { color: #fff; } body.diagonal-theme .section-link:hover::after { background: #fff; } /* ── Main sections transparent ── */ body.diagonal-theme .bestsellers, body.diagonal-theme .featured-section, body.diagonal-theme .shop-page, body.diagonal-theme .cart-page, body.diagonal-theme .account-page, body.diagonal-theme .checkout-page, body.diagonal-theme .pdp-page, body.diagonal-theme .info-page, body.diagonal-theme main > section, body.diagonal-theme .container { background: transparent; } /* ── Product cards ── */ body.diagonal-theme .product-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.07); } body.diagonal-theme .product-card:hover { background: rgba(255,255,255,0.08); } body.diagonal-theme .product-name a { color: #fff; } body.diagonal-theme .product-name a:hover { color: rgba(255,255,255,0.7); } body.diagonal-theme .product-price { color: rgba(255,255,255,0.55); } body.diagonal-theme .product-price .sale-price { color: #fff; } body.diagonal-theme .product-price .original-price { color: rgba(255,255,255,0.3); } body.diagonal-theme .product-overlay { background: rgba(0,0,0,0.6); } body.diagonal-theme .quick-add { background: #fff; color: #000; } body.diagonal-theme .quick-add:hover { background: rgba(255,255,255,0.85); } body.diagonal-theme .badge-new, body.diagonal-theme .badge-sale { background: #fff; color: #000; } /* ── Shop filters ── */ body.diagonal-theme .shop-filters, body.diagonal-theme .filter-tabs { background: transparent; } body.diagonal-theme .filter-tab { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } body.diagonal-theme .filter-tab.active, body.diagonal-theme .filter-tab:hover { background: #fff; color: #000; border-color: #fff; } /* ── Buttons ── */ body.diagonal-theme .btn-primary { background: #fff; color: #000; border-color: #fff; } body.diagonal-theme .btn-primary:hover { background: transparent; color: #fff; border-color: #fff; } body.diagonal-theme .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } body.diagonal-theme .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; } /* ── Forms / inputs ── */ body.diagonal-theme input:not([type="checkbox"]):not([type="radio"]), body.diagonal-theme textarea, body.diagonal-theme select { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); } body.diagonal-theme input:not([type="checkbox"]):not([type="radio"]):focus, body.diagonal-theme textarea:focus, body.diagonal-theme select:focus { border-color: rgba(255,255,255,0.55); outline: none; } body.diagonal-theme input::placeholder, body.diagonal-theme textarea::placeholder { color: rgba(255,255,255,0.35); } body.diagonal-theme label { color: rgba(255,255,255,0.75); } body.diagonal-theme select option { background: #1a1a1a; color: #fff; } /* ── Cards / panels (checkout, account, cart) ── */ body.diagonal-theme .cart-summary, body.diagonal-theme .checkout-form, body.diagonal-theme .account-section, body.diagonal-theme .address-card, body.diagonal-theme .order-card, body.diagonal-theme .pdp-info { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); color: #fff; } body.diagonal-theme .account-sidebar { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } body.diagonal-theme .account-nav-link { color: rgba(255,255,255,0.65); } body.diagonal-theme .account-nav-link.active, body.diagonal-theme .account-nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); } /* ── Cart drawer ── */ body.diagonal-theme .cart-drawer { background: #111; color: #fff; } body.diagonal-theme .cart-drawer-head, body.diagonal-theme .cart-drawer-subtotal { border-color: rgba(255,255,255,0.1); } body.diagonal-theme .cart-drawer-head h3, body.diagonal-theme .cart-drawer-subtotal { color: #fff; } body.diagonal-theme .cart-drawer-close { color: rgba(255,255,255,0.6); } body.diagonal-theme .cart-drawer-close:hover { color: #fff; } body.diagonal-theme .cart-drawer-viewcart { color: rgba(255,255,255,0.5); } body.diagonal-theme .cart-drawer-viewcart:hover { color: #fff; } body.diagonal-theme .cart-drawer-suggested-title { color: rgba(255,255,255,0.4); } /* ── Cart items (drawer + full page) ── */ body.diagonal-theme .cart-item { border-color: rgba(255,255,255,0.08); } body.diagonal-theme .cart-item-name { color: #fff; } body.diagonal-theme .cart-item-price, body.diagonal-theme .cart-item-total { color: rgba(255,255,255,0.6); } /* ── Qty controls ── */ body.diagonal-theme .qty-btn { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.15); } body.diagonal-theme .qty-btn:hover { background: rgba(255,255,255,0.18); } body.diagonal-theme .qty-input { background: transparent; color: #fff; border-color: rgba(255,255,255,0.15); } /* ── Headings & body text ── */ body.diagonal-theme h1, body.diagonal-theme h2, body.diagonal-theme h3, body.diagonal-theme h4, body.diagonal-theme h5 { color: #fff; } body.diagonal-theme p { color: rgba(255,255,255,0.7); } body.diagonal-theme a { color: rgba(255,255,255,0.75); } body.diagonal-theme a:hover { color: #fff; } /* ── Alert messages ── */ body.diagonal-theme .alert-error { background: rgba(200,50,50,0.15); border-color: rgba(200,50,50,0.4); color: #ff9a9a; } body.diagonal-theme .alert-success { background: rgba(50,180,100,0.12); border-color: rgba(50,180,100,0.35); color: #7dfcb0; } /* ── Footer ── */ body.diagonal-theme .footer { background: #000; border-top: 1px solid rgba(255,255,255,0.08); } body.diagonal-theme .footer-bottom { border-color: rgba(255,255,255,0.06); } /* ── Backdrop (cart drawer) ── */ body.diagonal-theme .cart-drawer-backdrop { background: rgba(0,0,0,0.6); }