/* =============================== BetterApplianceMD — MD Glow Pack DROP-IN, ZERO-PHP CHANGES. Put this LAST in . =============================== */ /* --- Brand palette (edit these 3 to re-skin quickly) --- */ :root{ --md-primary: #7c3aed; /* Royal Purple */ --md-primary-2: #06b6d4; /* Cyan */ --md-primary-dark:#5b21b6; --md-ink:#0f172a; /* slate-900 */ --md-bg:#ffffff; } /* Optional: modern font (comment out if you don't want external fonts) */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap'); body{ font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--md-ink); background: var(--md-bg); } /* ===== NAVBAR: sticky, blur, slim border, active link pops ===== */ .navbar{ backdrop-filter: saturate(140%) blur(10px) !important; -webkit-backdrop-filter: saturate(140%) blur(10px) !important; box-shadow: 0 6px 30px rgba(2,6,23,.08) !important; border-bottom: 1px solid rgba(124,58,237,.15) !important; } .navbar .nav-link{ font-weight:600; padding: .6rem .9rem !important; border-radius: 999px !important; } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active{ color:#fff !important; background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)) !important; box-shadow: 0 8px 24px rgba(124,58,237,.35) !important; } /* ===== HERO: gradient headline & subtle underglow ===== */ .md-gradient-text{ background: linear-gradient(90deg,var(--md-primary) 0%, var(--md-primary-2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .md-underline{ position:relative; display:inline-block; padding-bottom:.35rem; } .md-underline::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:4px; background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)); border-radius:3px; box-shadow:0 6px 16px rgba(124,58,237,.4); } /* ===== BUTTONS: pill + gradient + glow + micro-interactions ===== */ .btn, [class*="btn"]{ border-radius:999px !important; font-weight:600 !important; letter-spacing:.2px; } .btn-primary, .btn.btn-primary, [class*="btn-primary"]{ background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)) !important; border:0 !important; color:#fff !important; box-shadow: 0 10px 26px rgba(124,58,237,.45) !important; transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease; } .btn-primary:hover, [class*="btn-primary"]:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124,58,237,.58) !important; } .btn-outline-primary, [class*="btn-outline-primary"]{ color:var(--md-primary) !important; border:2px solid var(--md-primary) !important; background:transparent !important; } .btn-outline-primary:hover{ color:#fff !important; border-color:transparent !important; background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)) !important; box-shadow: 0 10px 26px rgba(124,58,237,.45) !important; } /* ===== LINKS, BADGES, PAGINATION ===== */ a{ color:var(--md-primary) !important; } a:hover{ color:var(--md-primary-dark) !important; } .badge-primary, .badge.bg-primary{ background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)) !important; color:#fff !important; } .page-item.active .page-link{ background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)) !important; border:0 !important; color:#fff !important; } /* ===== CARDS: glassmorphism + gradient border + lift on hover ===== */ .card{ border-radius: 18px !important; border: 1px solid rgba(124,58,237,.18) !important; background: rgba(255,255,255,.9) !important; backdrop-filter: blur(6px) !important; box-shadow: 0 12px 34px rgba(2,6,23,.10) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; } .card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(2,6,23,.18) !important; border-color: rgba(124,58,237,.35) !important; } /* Product thumb pop (if your cards use .card-img-top or .product-thumb) */ .card .card-img-top, .product-thumb img{ transition: transform .25s ease, filter .25s ease; } .card:hover .card-img-top, .product-card:hover .product-thumb img{ transform: scale(1.04); filter: saturate(1.15) contrast(1.05); } /* ===== FORMS: brand focus ring ===== */ .form-control:focus, .form-select:focus, textarea:focus, input:focus{ border-color: rgba(124,58,237,.55) !important; box-shadow: 0 0 0 .2rem rgba(124,58,237,.2) !important; } /* ===== TABLES: branded header rule ===== */ .table thead th{ border-bottom: 3px solid var(--md-primary) !important; } /* ===== FOOTER: brighter links ===== */ footer a{ color:#d6bcfa !important; } footer a:hover{ color:#fff !important; } /* ===== UTILS you can sprinkle in your HTML ===== */ .md-gradient-bg{ background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)) !important; color:#fff !important; } .md-glow{ box-shadow: 0 12px 40px rgba(124,58,237,.45) !important; } .md-gradient-border{ position:relative; border-radius:20px; } .md-gradient-border::before{ content:""; position:absolute; inset: -1px; z-index:-1; border-radius:inherit; background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding:1px; } /* ===== Animated accent stripe (use on section headers) ===== */ @keyframes mdShine{ 0%{background-position:0%} 100%{background-position:200%} } .md-accent{ height:4px; width:100px; border-radius:3px; background: linear-gradient(90deg,var(--md-primary),var(--md-primary-2),var(--md-primary)); background-size: 200% 100%; animation: mdShine 2.2s linear infinite; } /* ===== DEBUG: uncomment 10s to be sure it loads body{ outline:4px dashed hotpink !important; } */