/* ============================================================ chayse — stylesheet Two themes live in this one file: 1. Storefront theme (cream / walnut) — used by index.html 2. Admin theme (charcoal / gold) — used by admin.html, scoped under the .admin class on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;1,500&family=Jost:wght@400;500;600&display=swap'); :root { --bg: #F6F1E7; --bg-alt: #EEE4D2; --panel: #FFFDF9; --ink: #26221D; --ink-soft: #6B6255; --line: #DDD0BA; --accent: #7A5230; --accent-deep: #4B3220; --white: #FFFDF9; --danger: #A23B3B; --ok: #4C6B4F; --font-display: 'Fraunces', serif; --font-body: 'Jost', sans-serif; --radius: 2px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; letter-spacing: .01em; } p { margin: 0 0 1em; } button, input, select, textarea { font-family: inherit; font-size: 1rem; } .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-weight: 600; margin-bottom: .6em; display: block; } /* running-stitch divider — the site's signature motif */ .stitch { border: 0; height: 10px; margin: 2.5rem 0; background-image: repeating-linear-gradient( to right, var(--line) 0 10px, transparent 10px 20px ); background-position: center; background-repeat: repeat-x; background-size: 20px 1px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.6em; border-radius: var(--radius); border: 1px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; font-size: .92rem; letter-spacing: .03em; transition: transform .15s ease, opacity .15s ease; } .btn:hover { transform: translateY(-1px); opacity: .92; } .btn:active { transform: translateY(0); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-accent { background: var(--accent); border-color: var(--accent); } .btn-danger { background: var(--danger); border-color: var(--danger); } .btn-sm { padding: .45em 1em; font-size: .82rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; } .link-btn { background: none; border: none; cursor: pointer; color: var(--accent); font-size: .9rem; text-decoration: underline; padding: 0; } /* ============================================================ STOREFRONT ============================================================ */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(246,241,231,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; } .main-nav { display: flex; gap: 2rem; } .main-nav a { font-size: .9rem; letter-spacing: .02em; position: relative; padding: .2em 0; } .main-nav a.active { color: var(--accent); } .main-nav a[data-nav].active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); } .header-actions { display: flex; align-items: center; gap: 1.1rem; } .icon-btn { background: none; border: none; cursor: pointer; position: relative; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; } .cart-count { position: absolute; top: -8px; right: -10px; background: var(--accent); color: #fff; font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); } .page { display: none; padding: 3rem 0 5rem; animation: fade .35s ease; } .page.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } } .hero { padding: 4rem 0 3rem; text-align: center; } .hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-style: italic; max-width: 720px; margin: 0 auto .5em; } .hero p { max-width: 520px; margin: 0 auto 1.6em; color: var(--ink-soft); } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.6rem; flex-wrap: wrap; gap: 1rem; } .section-head h2 { font-size: 1.8rem; font-style: italic; } .filter-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; } .chip { padding: .45em 1.1em; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); cursor: pointer; font-size: .84rem; color: var(--ink-soft); } .chip.active { background: var(--ink); border-color: var(--ink); color: var(--white); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.8rem; } .product-card { cursor: pointer; } .product-card .thumb { aspect-ratio: 3/4; background: var(--bg-alt) center/cover no-repeat; border: 1px solid var(--line); margin-bottom: .8rem; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: .8rem; overflow: hidden; } .product-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-card h3 { font-size: 1.02rem; font-weight: 500; margin-bottom: .2em; } .product-card .price { color: var(--accent); font-size: .92rem; } .product-card .stock-flag { font-size: .74rem; color: var(--danger); margin-top: .2em; } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); } /* ---------- modal / drawer shell ---------- */ .overlay { position: fixed; inset: 0; background: rgba(38,34,29,.5); z-index: 90; display: none; align-items: center; justify-content: center; } .overlay.open { display: flex; } .modal { background: var(--panel); max-width: 640px; width: 92%; max-height: 88vh; overflow-y: auto; padding: 2.2rem; position: relative; border: 1px solid var(--line); } .modal-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ink-soft); line-height: 1; } .drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: var(--panel); z-index: 95; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; border-left: 1px solid var(--line); } .drawer.open { transform: translateX(0); } .drawer-head { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .drawer-body { padding: 1.4rem 1.6rem; overflow-y: auto; flex: 1; } .drawer-foot { padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); } /* product detail modal */ .pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .pd-image { aspect-ratio: 3/4; background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; } .pd-image img { width: 100%; height: 100%; object-fit: cover; } .pd-price { color: var(--accent); font-size: 1.2rem; margin-bottom: 1rem; } .size-row { display: flex; gap: .5rem; margin: .8rem 0 1.4rem; flex-wrap: wrap; } .size-opt { width: 42px; height: 38px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .82rem; } .size-opt.active { border-color: var(--ink); background: var(--ink); color: var(--white); } @media (max-width: 640px) { .pd-grid { grid-template-columns: 1fr; } } /* cart */ .cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); } .cart-item img { width: 64px; height: 80px; object-fit: cover; background: var(--bg-alt); } .cart-item .ci-info { flex: 1; } .cart-item .ci-title { font-size: .92rem; margin-bottom: .2em; } .cart-item .ci-meta { font-size: .78rem; color: var(--ink-soft); } .qty-row { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; } .qty-row button { width: 24px; height: 24px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; } .cart-summary-row { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .92rem; } .cart-summary-row.total { font-size: 1.05rem; font-weight: 600; margin-top: .6rem; } /* forms */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .4em; } .field input, .field select, .field textarea { width: 100%; padding: .7em .8em; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--radius); } .field textarea { resize: vertical; min-height: 90px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-msg { font-size: .85rem; margin-top: .6rem; min-height: 1.2em; } .form-msg.error { color: var(--danger); } .form-msg.ok { color: var(--ok); } .auth-tabs { display: flex; gap: 1.5rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .auth-tabs button { background: none; border: none; padding: .6em 0; cursor: pointer; color: var(--ink-soft); border-bottom: 2px solid transparent; } .auth-tabs button.active { color: var(--ink); border-color: var(--accent); } .auth-panel { display: none; } .auth-panel.active { display: block; } /* account page */ .account-box { max-width: 640px; } .order-row { border: 1px solid var(--line); padding: 1rem 1.2rem; margin-bottom: 1rem; } .order-row .order-top { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); margin-bottom: .6rem; } .badge { display: inline-block; padding: .2em .7em; border-radius: 999px; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor; } .badge.Pending { color: #97671E; } .badge.Processing { color: #4162A3; } .badge.Shipped { color: #4C6B4F; } .badge.Completed { color: #4C6B4F; } .badge.Cancelled { color: var(--danger); } .site-footer { border-top: 1px solid var(--line); padding: 3rem 0; text-align: center; color: var(--ink-soft); font-size: .85rem; } .site-footer .logo { display: block; margin-bottom: .6rem; } .toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: .6rem; } .toast { background: var(--ink); color: var(--white); padding: .8em 1.2em; font-size: .88rem; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.15); animation: fade .25s ease; } .toast.error { background: var(--danger); } @media (max-width: 780px) { .main-nav { display: none; } } /* ============================================================ ADMIN THEME ============================================================ */ body.admin { --a-bg: #1C1A17; --a-panel: #242119; --a-panel-alt: #2C2820; --a-line: #3B362C; --a-text: #EFE7D8; --a-text-soft: #A79C87; --a-gold: #C9A227; --a-danger: #C85C5C; --a-ok: #7FA579; background: var(--a-bg); color: var(--a-text); } body.admin a { color: inherit; } /* login screen */ .admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } .admin-login-card { background: var(--a-panel); border: 1px solid var(--a-line); padding: 2.6rem; width: 100%; max-width: 380px; } .admin-login-card .logo { font-size: 1.6rem; font-style: italic; margin-bottom: .2em; } .admin-login-card .eyebrow { color: var(--a-gold); } body.admin .field input, body.admin .field select, body.admin .field textarea { background: var(--a-panel-alt); border-color: var(--a-line); color: var(--a-text); } body.admin .field label { color: var(--a-text-soft); } .admin-shell { display: flex; min-height: 100vh; } .admin-sidebar { width: 230px; flex-shrink: 0; background: var(--a-panel); border-right: 1px solid var(--a-line); display: flex; flex-direction: column; padding: 1.6rem 0; } .admin-sidebar .brand { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; padding: 0 1.6rem 1.4rem; border-bottom: 1px solid var(--a-line); margin-bottom: 1rem; } .admin-sidebar .brand small { display: block; font-family: var(--font-body); font-style: normal; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--a-gold); margin-top: .3em; } .admin-nav { display: flex; flex-direction: column; gap: .2rem; flex: 1; } .admin-nav button { display: flex; align-items: center; gap: .7em; background: none; border: none; color: var(--a-text-soft); text-align: left; padding: .8em 1.6rem; cursor: pointer; font-size: .92rem; border-left: 2px solid transparent; } .admin-nav button:hover { color: var(--a-text); } .admin-nav button.active { color: var(--a-text); border-left-color: var(--a-gold); background: var(--a-panel-alt); } .admin-sidebar .logout-btn { margin: 1rem 1.6rem 0; } .admin-main { flex: 1; padding: 2.2rem 2.6rem; max-width: 1200px; } .admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .admin-topbar h1 { font-size: 1.6rem; font-style: italic; } .admin-view { display: none; } .admin-view.active { display: block; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.2rem; margin-bottom: 2.4rem; } .stat-card { background: var(--a-panel); border: 1px solid var(--a-line); padding: 1.4rem 1.5rem; } .stat-card .num { font-family: var(--font-display); font-size: 1.9rem; color: var(--a-gold); } .stat-card .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--a-text-soft); margin-top: .3em; } .admin-panel { background: var(--a-panel); border: 1px solid var(--a-line); padding: 1.8rem; margin-bottom: 2rem; } .admin-panel h2 { font-size: 1.15rem; font-style: italic; margin-bottom: 1.2rem; } .admin-table-wrap { overflow-x: auto; } table.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; } table.admin-table th { text-align: left; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; color: var(--a-text-soft); padding: .7em .8em; border-bottom: 1px solid var(--a-line); } table.admin-table td { padding: .8em; border-bottom: 1px solid var(--a-line); vertical-align: middle; } table.admin-table tr:last-child td { border-bottom: none; } .row-thumb { width: 44px; height: 54px; object-fit: cover; background: var(--a-panel-alt); border: 1px solid var(--a-line); } .table-actions { display: flex; gap: .5rem; } .icon-action { background: none; border: 1px solid var(--a-line); color: var(--a-text-soft); cursor: pointer; padding: .35em .6em; font-size: .78rem; } .icon-action:hover { color: var(--a-text); border-color: var(--a-gold); } .icon-action.danger:hover { color: var(--a-danger); border-color: var(--a-danger); } .low-stock { color: var(--a-danger); } .image-drop { border: 1px dashed var(--a-line); padding: 1.2rem; text-align: center; cursor: pointer; color: var(--a-text-soft); font-size: .85rem; margin-bottom: .8rem; } .image-drop img { max-height: 140px; margin: 0 auto .6rem; } .admin-status-select { background: var(--a-panel-alt); color: var(--a-text); border: 1px solid var(--a-line); padding: .4em .6em; } @media (max-width: 900px) { .admin-shell { flex-direction: column; } .admin-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: .8rem; } .admin-sidebar .brand { display: none; } .admin-nav { flex-direction: row; } .admin-nav button { border-left: none; border-bottom: 2px solid transparent; padding: .6em 1em; white-space: nowrap; } .admin-nav button.active { border-left: none; border-bottom-color: var(--a-gold); } .admin-sidebar .logout-btn { display: none; } .admin-main { padding: 1.4rem; } }