/* Design tokens. Dark is the default; [data-theme="light"] overrides below. Palette carried over from the reference build: deep navy gradient with an indigo -> violet accent ramp. The theme is set on before first paint by an inline script in the layouts. */ :root { --bg: #0f0f1a; --bg-grad: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%); --panel: rgba(255, 255, 255, 0.045); --panel-2: rgba(255, 255, 255, 0.02); --input-bg: rgba(255, 255, 255, 0.04); --text: #e4e4e7; --muted: #a1a1aa; --accent: #6366f1; --accent-2: #8b5cf6; --accent-3: #a855f7; --brand-grad: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7); --border: rgba(255, 255, 255, 0.10); --secondary: rgba(255, 255, 255, 0.08); --error: #f87171; --error-bg: rgba(248, 113, 113, 0.12); --error-border: rgba(248, 113, 113, 0.3); --ok: #22c55e; --radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; } [data-theme="light"] { --bg: #f5f5fa; --bg-grad: linear-gradient(135deg, #f7f7fb 0%, #eef0f7 50%, #e9ecf6 100%); --panel: #ffffff; --panel-2: #f2f3f8; --input-bg: #ffffff; --text: #1a1a2e; --muted: #52525b; --border: rgba(0, 0, 0, 0.10); --secondary: rgba(0, 0, 0, 0.06); --error: #dc2626; --error-bg: rgba(220, 38, 38, 0.08); --error-border: rgba(220, 38, 38, 0.25); --ok: #16a34a; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; } /* ---- promo banner (seamless infinite marquee) ---- */ .promo-banner { background-image: var(--brand-grad); color: #fff; font-size: 0.9rem; font-weight: 500; overflow: hidden; padding: 0.55rem 0; } .promo-banner .marquee { display: flex; width: max-content; animation: marquee-scroll 30s linear infinite; } .promo-banner:hover .marquee { animation-play-state: paused; } .promo-banner .marquee-group { display: flex; flex-shrink: 0; } .promo-banner .marquee-item { padding: 0 2rem; white-space: nowrap; } .promo-banner a { color: #fff; text-decoration: underline; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* The marquee is an intentional, opt-in feature, so it keeps scrolling even when the OS requests reduced motion — but it slows down and pauses on hover. */ @media (prefers-reduced-motion: reduce) { .promo-banner .marquee { animation-duration: 60s; } } /* ---- header / footer ---- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .site-header .brand { font-weight: 700; color: var(--text); font-size: 1.1rem; display: inline-flex; align-items: center; } .brand-logo { max-height: 40px; max-width: 200px; display: block; } .brand-wordmark { font-weight: 700; letter-spacing: 1px; background-image: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .site-header nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; } .cart-link .badge { display: inline-block; min-width: 1.2em; padding: 0 0.35em; margin-left: 0.3em; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.75rem; text-align: center; } .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); width: auto; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 1rem; line-height: 1; } .theme-toggle:hover { filter: none; border-color: var(--accent); } .site-footer { margin-top: auto; padding: 2rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; } .site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 2rem 1.5rem; flex: 1; } /* ---- hero / sections ---- */ .hero h1 { margin-bottom: 0.25rem; background-image: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .hero p { color: var(--muted); } section { margin-top: 2rem; } .muted { color: var(--muted); } .notice { color: var(--ok); } /* ---- product grid ---- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .product-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s ease, transform 0.2s ease; } .product-card:hover { border-color: var(--accent); transform: translateY(-2px); } .product-card a { color: inherit; text-decoration: none; } .product-card .thumb { aspect-ratio: 1 / 1; background: var(--panel-2); display: grid; place-items: center; color: var(--muted); font-size: 0.85rem; } .product-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-card .body { padding: 0.85rem; } .product-card .title { font-weight: 600; margin: 0 0 0.25rem; } .product-card .price { color: var(--muted); } /* ---- shop toolbar ---- */ .toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; } .toolbar form { flex-direction: row; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; } .chip { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); } .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination { display: flex; gap: 0.75rem; margin-top: 2rem; align-items: center; } /* ---- product detail ---- */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .gallery { display: grid; gap: 0.75rem; } .gallery .main { aspect-ratio: 1 / 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); } .gallery .main img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); } .in-stock { color: var(--ok); } .out-stock { color: var(--error); } /* ---- cards / forms ---- */ .auth-card, .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(6px); } .auth-card { max-width: 420px; } .card { margin-bottom: 1.25rem; } /* ---- registration / login gate ---- */ .gate-card { margin: 2rem auto; } .gate-logo { text-align: center; margin-bottom: 1rem; } .gate-logo img { max-height: 72px; max-width: 240px; } .gate-logo .brand-wordmark { font-size: 1.6rem; } .consent { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; background: var(--panel-2); } .consent-item { flex-direction: row; align-items: flex-start; gap: 0.6rem; color: var(--text); font-size: 0.9rem; } .consent-item input { width: auto; margin-top: 0.2rem; flex-shrink: 0; } form { display: flex; flex-direction: column; gap: 0.85rem; } form.inline { display: inline; } .row { display: flex; gap: 0.85rem; flex-wrap: wrap; } .row > label { flex: 1; min-width: 160px; } label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); } input, select, textarea { padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font-size: 1rem; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); } button { padding: 0.6rem 1rem; border: none; border-radius: 8px; background-image: var(--brand-grad); color: white; font-size: 1rem; cursor: pointer; } button:hover { filter: brightness(1.08); } button.secondary { background-image: none; background: var(--secondary); color: var(--text); } button.linkish { background-image: none; background: none; color: var(--accent); padding: 0; font-size: inherit; } .btn { display: inline-block; padding: 0.6rem 1rem; border-radius: 8px; background-image: var(--brand-grad); color: #fff; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .error { color: var(--error); background: var(--error-bg); border: 1px solid var(--error-border); padding: 0.6rem 0.8rem; border-radius: 8px; } /* ---- tables ---- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.6rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; } @media (max-width: 640px) { .product-detail { grid-template-columns: 1fr; } } /* ---- admin shell ---- */ .admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } .admin-side { background: var(--panel-2); border-right: 1px solid var(--border); padding: 1rem; } .admin-side .brand { display: block; font-weight: 700; margin-bottom: 1rem; color: var(--text); } .admin-side nav { display: flex; flex-direction: column; gap: 0.15rem; } .admin-side nav a { padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--muted); } .admin-side nav a:hover { background: var(--secondary); text-decoration: none; } .admin-side nav a.active { background: var(--accent); color: #fff; } .admin-main { padding: 1.5rem 2rem; max-width: 1100px; } .admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .stat .n { font-size: 1.6rem; font-weight: 700; } .stat .l { color: var(--muted); font-size: 0.85rem; } .pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--secondary); font-size: 0.8rem; } /* ---- changelog / patch notes ---- */ .changelog .release-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .changelog .release-version { font-weight: 700; background-image: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .changelog .release-title { font-weight: 600; } .changelog .release-date { margin-left: auto; font-size: 0.85rem; } .changelog .release-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .changelog .release-changes li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; } .tag { flex-shrink: 0; display: inline-block; min-width: 3.6rem; text-align: center; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid var(--border); } .tag-added { color: var(--ok); border-color: var(--ok); } .tag-changed { color: var(--accent-2); border-color: var(--accent-2); } .tag-fixed { color: var(--accent); border-color: var(--accent); } /* ---- logo size previews (settings) ---- */ .logo-previews { display: flex; gap: 1.5rem; flex-wrap: wrap; } .logo-previews > div { flex: 1; min-width: 220px; } .logo-preview-box { display: grid; place-items: center; min-height: 120px; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); margin-bottom: 0.6rem; overflow: hidden; } .logo-preview-box.gate { min-height: 180px; } .logo-preview-box img { display: block; max-width: 100%; } @media (max-width: 720px) { .admin-shell { grid-template-columns: 1fr; } .admin-side { border-right: none; border-bottom: 1px solid var(--border); } }