perfume

[abuzarmalpara218-ship-it]

/* style.css */ :root { --bg: #0f0f12; --bg-2: #14141a; --text: #e9e9ec; --muted: #b6b6c2; --accent: #d0a15e; --accent-2: #b8894f; --card: #1a1a22; --border: #292931; --shadow: 0 10px 30px rgba(0,0,0,0.35); }

• { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); line-height: 1.6; }

/* Navbar */ .navbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; background: rgba(15, 15, 18, 0.6); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: box-shadow 0.2s ease, background 0.2s ease; }

.navbar.is-scrolled { background: rgba(15, 15, 18, 0.85); box-shadow: 0 8px 30px rgba(0,0,0,0.35); }

.logo { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.6px; }

.logo span { color: var(--accent); }

.navbar nav { display: flex; gap: 18px; flex-wrap: wrap; }

.navbar a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.3px; padding: 6px 4px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }

.navbar a:hover { color: var(--text); border-color: var(--accent); }

.navbar a.active { color: var(--text); border-color: var(--accent); }

/* Hero */ .hero { position: relative; min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 96px 24px 72px; overflow: hidden; }

.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 70% 20%, rgba(208,161,94,0.25), transparent 70%), radial-gradient(900px 500px at 20% 60%, rgba(255,255,255,0.06), transparent 60%); pointer-events: none; }

.hero::after { content: ""; position: absolute; inset: 0; background: url("https://images.unsplash.com/photo-1520976029533-6a6c5a4c041a?q=80&w=1920&auto=format&fit=crop") center/cover no-repeat; opacity: 0.14; mix-blend-mode: screen; pointer-events: none; }

.hero-content { position: relative; max-width: 860px; margin: 0 auto; }

.hero h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.15; margin-bottom: 14px; }

.hero p { color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); margin-bottom: 28px; }

.btn { display: inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0e0e11; font-weight: 800; letter-spacing: 0.5px; padding: 12px 18px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 22px rgba(208,161,94,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }

.btn:hover { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 12px 28px rgba(208,161,94,0.35); }

/* Sections */ section { padding: 72px 24px; }

section h2 { text-align: center; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 28px; }

/* Products */ .products .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }

.product-card { background: linear-gradient(180deg, var(--card) 0%, #14141b 100%); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }

.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.45); border-color: rgba(208,161,94,0.35); }

.product-card img { width: 100%; height: 210px; object-fit: cover; display: block; }

.product-card h3 { font-size: 1.1rem; padding: 14px 14px 0; }

.product-card p { color: var(--muted); font-size: 0.95rem; padding: 8px 14px 4px; }

.product-card .price { display: inline-block; margin: 10px 14px 16px; font-weight: 800; color: var(--accent); letter-spacing: 0.4px; }

/* About */ .about { max-width: 900px; margin: 0 auto; color: var(--muted); font-size: 1.05rem; text-align: center; }

/* Contact */ .contact form { max-width: 700px; margin: 0 auto; display: grid; gap: 14px; }

.contact input, .contact textarea { width: 100%; background: #121219; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }

.contact input::placeholder, .contact textarea::placeholder { color: #7a7a86; }

.contact input:focus, .contact textarea:focus { border-color: rgba(208,161,94,0.65); box-shadow: 0 0 0 3px rgba(208,161,94,0.15); }

.contact button.btn { justify-self: start; }

/* Footer */ footer { padding: 36px 24px 48px; text-align: center; color: var(--muted); border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }

/* Utilities */ @media (max-width: 520px) { .navbar { padding: 14px 16px; } .navbar nav { gap: 12px; } .product-card img { height: 190px; } }