/* ============================== JINZO WEAR — Brand-Inspired Themes Swap by setting or "puma-red" Classes match your current index.php structure ============================== */ /* Base tokens */ :root{ --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.18); --focus:0 0 0 3px rgba(0,0,0,.25); --transition: .22s cubic-bezier(.2,.6,.2,1); } /* THEME: Nike Volt (tech/fast) */ :root[data-theme="nike-volt"]{ --brand:#CEFF00; /* accent */ --ink:#0E0F10; /* base text / dark */ --bg:#FFFFFF; /* page bg */ --muted:#8D8F91; /* secondary text */ --surface:#F3F4F5; /* cards */ --edge:#2C2E30; /* strong text/borders */ --focus:0 0 0 3px rgba(206,255,0,.35); } /* THEME: PUMA Red (bold/heritage) */ :root[data-theme="puma-red"]{ --brand:#E31C23; /* accent */ --ink:#000000; /* base text / dark */ --bg:#FFFFFF; /* page bg */ --muted:#6E6E6E; /* secondary text */ --surface:#F4F4F4; /* cards */ --edge:#3A3A3A; /* strong text/borders */ --focus:0 0 0 3px rgba(227,28,35,.28); } /* ===== Reset + Core ===== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit} :focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px} /* ===== NAV (sticky) ===== */ .nav{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.86)); border-bottom:1px solid rgba(0,0,0,.2); backdrop-filter:saturate(120%) blur(6px); } .nav-inner{ max-width:1200px; margin:0 auto; padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; } .brand{display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:800; letter-spacing:.3px} .brand-logo{width:36px; height:36px; background:var(--brand); border-radius:10px} .brand-name{font-size:1.05rem} .menu a{ color:#fff; margin-left:1.2rem; opacity:.9; transition:opacity var(--transition), color var(--transition), text-underline-offset var(--transition); text-underline-offset: 3px; } .menu a:hover{opacity:1; color:var(--brand); text-decoration: underline} /* ===== Buttons ===== */ .btn{ display:inline-block; border:0; background:var(--brand); color:#0A0A0A; padding:.72rem 1.25rem; border-radius:var(--radius); font-weight:800; letter-spacing:.2px; transition: transform var(--transition), filter var(--transition), box-shadow var(--transition); box-shadow: 0 6px 14px rgba(0,0,0,.08); } .btn:hover{ transform: translateY(-2px); filter: brightness(.97) } .btn:active{ transform: translateY(0) scale(.98) } .btn-outline{ background:transparent; color:var(--brand); border:2px solid var(--brand); } .btn-outline:hover{ background:var(--brand); color:#0A0A0A } /* ===== Hero ===== */ .hero{ display:grid; grid-template-columns: 1fr 1fr; align-items:center; min-height:80vh; max-width:1200px; margin:0 auto; padding:4rem 2rem; gap:2rem; } .h-title{ font-size: clamp(2.2rem, 4vw, 3.2rem); line-height:1.12; font-weight:900; letter-spacing:.2px } .h-sub{ color:var(--muted); max-width:560px; margin:1rem 0 2rem } .h-cta .btn{ margin-right:.6rem } .hero-card{ background:var(--surface); border:1px solid rgba(0,0,0,.06); padding:2rem; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; } .hero-art span{ color:var(--edge); font-weight:900; letter-spacing:.3px } /* ===== Sections ===== */ .section{ max-width:1200px; margin:3rem auto; padding:0 2rem } .s-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.3rem } .s-title{ font-size:2rem; font-weight:900; color:var(--edge) } /* ===== Grid + Cards ===== */ .grid{ display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)) } .card{ background:var(--surface); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card:hover{ transform: translateY(-4px) } .thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#ddd } .c-body{ padding:1.05rem } .c-title{ font-size:1.08rem; font-weight:900; margin-bottom:.35rem; letter-spacing:.2px } .c-meta{ color:var(--muted); font-size:.92rem; margin-bottom:.7rem } .price{ margin-bottom:.8rem } .price strong{ color:var(--edge); font-weight:900; font-size:1.1rem } .strike{ text-decoration:line-through; color:var(--muted); margin-right:.45rem } /* Status chips */ .status{ display:inline-block; font-size:.78rem; font-weight:800; padding:.28rem .65rem; border-radius:999px; letter-spacing:.25px; } .status.ok{ background:#DBF8DE; color:#155A19 } .status.warn{ background:#FFE5E5; color:#7A1F1F } .c-actions{ display:flex; gap:.6rem; margin-top:.85rem } /* ===== About ===== */ .about{ text-align:center; max-width:700px; margin:4rem auto; padding:0 2rem } .about h2{ color:var(--edge); font-size:2rem; margin-bottom:1rem; font-weight:900 } /* ===== Footer ===== */ footer{ text-align:center; padding:1.5rem 0; background:#0B0B0B; color:#fff; font-size:.95rem; } footer a{ color:var(--brand) } footer a:hover{ text-decoration: underline } /* ===== Utilities ===== */ .muted{ color:var(--muted) } /* ===== Responsive ===== */ @media (max-width: 980px){ .hero{ grid-template-columns: 1fr; text-align:center; min-height: unset; padding:3rem 1.5rem } .h-cta .btn{ margin:.35rem } .nav-inner{ padding: .9rem 1.2rem } .menu a{ margin-left: .9rem } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important } }