/* ═══════════════════════════════════════════════════════════════════════ HARMAALWALE — LUX OVERLAY (Premium Metallic + Soft Clay) Loaded AFTER style.css to redefine tokens and add 3D flourishes. Toggle themes via . ═══════════════════════════════════════════════════════════════════════ */ /* ─── Fonts ───────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* ─── Metallic (default) ──────────────────────────────────────────── */ :root, html[data-theme="dark"], html[data-theme="metal"] { --font-head: 'Fraunces', 'Space Grotesk', serif; --font-body: 'Plus Jakarta Sans', 'Hanken Grotesk', system-ui, sans-serif; --accent: oklch(0.80 0.14 82); /* champagne gold */ --accent-press: oklch(0.72 0.14 78); --accent-soft: oklch(0.80 0.14 82 / 0.14); --accent-ink: #100c07; --orange: oklch(0.80 0.14 82); --gold-1: #f7e7a8; --gold-2: #d4af37; --gold-3: #a17a1e; --bg: #0a0907; --bg2: #100d0a; --surface: #16110c; --surface2: #1e1810; --border: #3a2f1e; --border2: #55452a; --text: #f6ecd6; --text2: #d9c9a0; --muted: #8a7a5b; --shadow-sm: 0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,140,.04); --shadow: 0 14px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,140,.06); --shadow-lg: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,140,.08); --lux-gold-gradient: linear-gradient(135deg,#f7e7a8 0%,#e6c766 25%,#c9a340 55%,#8a6a1c 100%); --lux-chrome: linear-gradient(180deg,#1e1810 0%,#0f0b07 100%); --lux-glow: 0 0 0 1px rgba(212,175,55,.35), 0 10px 30px rgba(212,175,55,.18); } /* ─── Soft Clay theme ─────────────────────────────────────────────── */ html[data-theme="clay"] { --font-head: 'Fraunces', serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --accent: #f19b6e; --accent-press: #e07e4d; --accent-soft: rgba(241,155,110,.16); --accent-ink: #ffffff; --bg: #f4eef7; --bg2: #efe6f5; --surface: #ffffff; --surface2: #f8f2fb; --border: #e6dceb; --border2: #d6c8e0; --text: #2a1b3d; --text2: #4a3a5e; --muted: #8a7a9c; --shadow-sm: 0 2px 4px rgba(120,90,160,.10), inset 0 -2px 0 rgba(120,90,160,.06); --shadow: 0 10px 24px rgba(120,90,160,.14), inset 0 -3px 0 rgba(120,90,160,.06); --shadow-lg: 0 24px 60px rgba(120,90,160,.20), inset 0 -4px 0 rgba(120,90,160,.08); --lux-gold-gradient: linear-gradient(135deg,#a78bfa 0%,#f19b6e 100%); --lux-chrome: linear-gradient(180deg,#ffffff 0%,#f4eef7 100%); --lux-glow: 0 0 0 1px rgba(167,139,250,.35), 0 10px 30px rgba(167,139,250,.22); } /* ─── Global refinements ──────────────────────────────────────────── */ body { font-family: var(--font-body); background: radial-gradient(1200px 600px at 15% -10%, rgba(212,175,55,.10), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(212,175,55,.06), transparent 60%), var(--bg); background-attachment: fixed; } html[data-theme="clay"] body { background: radial-gradient(1000px 500px at 10% -10%, rgba(167,139,250,.22), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(241,155,110,.18), transparent 60%), var(--bg); } h1, h2, h3, h4, h5 { font-family: var(--font-head); letter-spacing: -0.015em; } .text-gradient, .text-gold-gradient { background-image: var(--lux-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ─── Buttons — gold metal ────────────────────────────────────────── */ .btn, button.btn { background-image: var(--lux-gold-gradient); color: var(--accent-ink); border: 1px solid rgba(212,175,55,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,80,10,.35), 0 8px 18px rgba(212,175,55,.28); font-weight: 700; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn:hover, button.btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,80,10,.35), 0 14px 28px rgba(212,175,55,.35); background-image: var(--lux-gold-gradient); } .btn.ghost, .btn.outline { background: transparent; color: var(--text); border: 1px solid var(--border2); box-shadow: none; } .btn.ghost:hover, .btn.outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--lux-glow); } html[data-theme="clay"] .btn, html[data-theme="clay"] button.btn { border-color: rgba(120,90,160,.25); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(120,90,160,.25), 0 10px 24px rgba(167,139,250,.28); } /* ─── Header — chrome bar ─────────────────────────────────────────── */ .site-header { background: var(--lux-chrome) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: saturate(1.2) blur(10px); box-shadow: 0 1px 0 rgba(212,175,55,.12), 0 20px 40px rgba(0,0,0,.35); } html[data-theme="clay"] .site-header { box-shadow: 0 4px 20px rgba(120,90,160,.14); } .brand img { filter: drop-shadow(0 4px 10px rgba(212,175,55,.25)); } .nav-link { transition: color .2s; } .nav-link:hover { color: var(--accent) !important; } .nav-pill { border: 1px solid var(--border2); border-radius: 999px; padding: 8px 14px; transition: all .2s; } .nav-pill:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--lux-glow); } .nav-search { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); } html[data-theme="clay"] .nav-search { box-shadow: inset 0 2px 4px rgba(120,90,160,.12); } /* ─── Cards / Panels — beveled metal ──────────────────────────────── */ .card, .panel, .grid.cards article, .product-card, .category-dropdown, .user-dropdown, .cat-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .product-card:hover, .grid.cards article:hover, .card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-lg), var(--lux-glow); } /* Badges */ .badge { background: var(--lux-gold-gradient) !important; color: var(--accent-ink) !important; border: 1px solid rgba(212,175,55,.4); box-shadow: 0 4px 10px rgba(212,175,55,.25); font-weight: 700 !important; } /* Tables */ .table th { background: var(--surface2); color: var(--accent); font-family: var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; } .table tr:hover td { background: var(--accent-soft); } /* Inputs — recessed */ input, textarea, select { background: var(--surface2); border: 1px solid var(--border); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); border-radius: var(--r-md); } html[data-theme="clay"] input, html[data-theme="clay"] textarea, html[data-theme="clay"] select { box-shadow: inset 0 2px 4px rgba(120,90,160,.10); } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 0 3px var(--accent-soft); } /* Hero */ .hero { background: radial-gradient(600px 300px at 20% 0%, rgba(212,175,55,.18), transparent 60%), var(--bg2); border-bottom: 1px solid var(--border); } .hero-copy h1 { background-image: var(--lux-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-logo-card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--lux-glow); } /* Category dropdown items */ .cat-item { border-radius: var(--r-md); padding: 10px 12px; transition: all .2s; } .cat-item:hover { background: var(--accent-soft); transform: translateX(3px); } .cat-mark { background: var(--lux-gold-gradient); color: var(--accent-ink); border-radius: 10px; box-shadow: 0 4px 10px rgba(212,175,55,.3); font-weight: 800; } /* Theme toggle chip */ .theme-toggle { border: 1px solid var(--border2); background: var(--surface2); border-radius: 999px; padding: 8px; transition: all .2s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--lux-glow); } /* User avatar */ .user-avatar { background: var(--lux-gold-gradient) !important; color: var(--accent-ink) !important; border: 1px solid rgba(212,175,55,.5); box-shadow: 0 6px 16px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.5); font-weight: 800; } /* Eyebrow */ .eyebrow { color: var(--accent); letter-spacing: .28em; font-weight: 600; } /* Sidebar (portal) */ .portal-sidebar, .sidebar { background: var(--lux-chrome); border-right: 1px solid var(--border); box-shadow: inset -1px 0 0 rgba(212,175,55,.08); } .portal-sidebar a.active, .sidebar a.active { background: var(--accent-soft); color: var(--accent); border-left: 2px solid var(--accent); } /* Scrollbar */ *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-3, #a17a1e), var(--gold-2, #d4af37)); border-radius: 99px; } /* Selection */ ::selection { background: var(--accent); color: var(--accent-ink); } /* 3D tilt utility */ .tilt-3d { transform-style: preserve-3d; transition: transform .35s ease; } .tilt-3d:hover { transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-2px); } /* Auth cards / small containers */ .auth-card, .card-form { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--lux-glow); padding: 32px; } /* Section headings on portal */ .page-title, .portal-title { font-family: var(--font-head); font-weight: 700; background-image: var(--lux-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Divider */ hr { border: 0; border-top: 1px solid var(--border); } /* Focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }