/* Default Shopmorphic theme. Plain CSS, nothing loaded from outside the shop. The accent comes from data-accent on ; sellers pick it in the dashboard. */ :root { color-scheme: light; --bg: #ffffff; --fg: #111827; --muted: #6b7280; --line: #e5e7eb; --panel: #f9fafb; --accent: #2295f1; --on-accent: #0a2a43; --accent-hover: #1e83d4; --radius: 14px; --max: 72rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } :root[data-accent="red"] { --accent: #f34236; --on-accent: #fff; --accent-hover: #d63a30; } :root[data-accent="pink"] { --accent: #e8207e; --on-accent: #fff; --accent-hover: #cc1c6f; } :root[data-accent="purple"] { --accent: #9b26ae; --on-accent: #fff; --accent-hover: #882199; } :root[data-accent="deep_purple"] { --accent: #6639ab; --on-accent: #fff; --accent-hover: #5a3296; } :root[data-accent="indigo"] { --accent: #3d51b4; --on-accent: #fff; --accent-hover: #36479e; } :root[data-accent="blue"] { --accent: #2295f1; --on-accent: #0a2a43; --accent-hover: #1e83d4; } :root[data-accent="light_blue"] { --accent: #03a8f3; --on-accent: #013953; --accent-hover: #0394d6; } :root[data-accent="cyan"] { --accent: #00bcd3; --on-accent: #00464e; --accent-hover: #00a5ba; } :root[data-accent="teal"] { --accent: #019587; --on-accent: #fff; --accent-hover: #018377; } :root[data-accent="green"] { --accent: #4bae4f; --on-accent: #173618; --accent-hover: #429946; } :root[data-accent="light_green"] { --accent: #8ac248; --on-accent: #33481b; --accent-hover: #79ab3f; } :root[data-accent="lime"] { --accent: #cbdc38; --on-accent: #575f18; --accent-hover: #b3c231; } :root[data-accent="yellow"] { --accent: #fbc711; --on-accent: #111827; --accent-hover: #ddaf0f; } :root[data-accent="amber"] { --accent: #ffc006; --on-accent: #664d02; --accent-hover: #e0a905; } :root[data-accent="orange"] { --accent: #fe9700; --on-accent: #5e3800; --accent-hover: #e08500; } :root[data-accent="deep_orange"] { --accent: #ff5721; --on-accent: #fff; --accent-hover: #e04d1d; } :root[data-accent="brown"] { --accent: #795649; --on-accent: #fff; --accent-hover: #6a4c40; } :root[data-accent="grey"] { --accent: #9e9d9e; --on-accent: #111; --accent-hover: #8b8a8b; } :root[data-accent="blue_grey"] { --accent: #607c8b; --on-accent: #fff; --accent-hover: #546d7a; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.55; font-size: 1rem; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 .75rem; letter-spacing: -0.02em; } h2 { font-size: 1.375rem; margin: 2rem 0 .75rem; } .sr, .skip { position: absolute; left: -999px; } .skip:focus { left: .5rem; top: .5rem; background: #fff; padding: .5rem; z-index: 9; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } .site-head { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5; } .head-row { display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; flex-wrap: wrap; padding: .5rem 0; } .logo { font-weight: 800; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.01em; } .logo img { max-height: 2.5rem; width: auto; } .nav { display: flex; gap: 1rem; flex-wrap: wrap; } .nav a { text-decoration: none; font-weight: 500; color: var(--muted); } .nav a:hover { color: var(--fg); } .search { margin-left: auto; } .search input { font: inherit; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 999px; min-width: 10rem; } .cart-link { text-decoration: none; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; background: var(--panel); } .cart-link .count { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 .5rem; font-size: .8125rem; } @media (max-width: 640px) { .search { margin-left: 0; width: 100%; } .search input { width: 100%; } } main { padding: 1.5rem 0 4rem; min-height: 50vh; } .crumbs { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; } .crumbs a { color: var(--muted); } .hero { padding: 1.5rem 0 2rem; max-width: 46rem; } .tagline { font-size: 1.25rem; color: var(--muted); margin: 0; } .note { margin: .75rem 0 0; font-weight: 600; } .chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .chip { text-decoration: none; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9375rem; } .chip:hover { border-color: var(--fg); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; } .card { text-decoration: none; display: flex; flex-direction: column; gap: .35rem; } .card-img { display: block; aspect-ratio: 1; background: var(--panel); border-radius: var(--radius); overflow: hidden; } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; } .card:hover .card-img img { transform: scale(1.03); } .card-title { font-weight: 600; margin-top: .35rem; } .card-price { color: var(--muted); } .card-price s { margin-left: .35rem; opacity: .7; } .card-note { font-size: .8125rem; color: #b91c1c; font-weight: 600; } .empty { color: var(--muted); } .intro { max-width: 60ch; color: var(--muted); margin-bottom: 1.25rem; } .coll h2 a { text-decoration: none; } .product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } @media (max-width: 800px) { .product { grid-template-columns: 1fr; } } .main-img { width: 100%; border-radius: var(--radius); background: var(--panel); aspect-ratio: 1; object-fit: cover; } .placeholder { aspect-ratio: 1; } .thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; } .thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; width: 4.5rem; overflow: hidden; } .thumb:hover, .thumb:focus-visible { border-color: var(--accent); } .thumb img { aspect-ratio: 1; object-fit: cover; } .price { font-size: 1.5rem; font-weight: 700; margin: 0 0 .75rem; } .price s { font-size: 1rem; color: var(--muted); font-weight: 400; margin-left: .5rem; } .facts { list-style: none; padding: 0; margin: 0 0 1.25rem; color: var(--muted); font-size: .9375rem; display: flex; flex-direction: column; gap: .25rem; } .facts .warn, .warn { color: #b91c1c; font-weight: 600; } .field { margin-bottom: 1rem; } .field label { display: block; font-weight: 600; margin-bottom: .35rem; } .field .opt { font-weight: 400; color: var(--muted); font-size: .875rem; } .field input, .field select, .field textarea { font: inherit; width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--fg); } .field textarea { min-height: 5rem; } .qty input { max-width: 7rem; } .btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 700; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: .85rem 1.5rem; cursor: pointer; text-decoration: none; min-height: 3rem; } .btn:hover { background: var(--accent-hover); } .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn.small { padding: .5rem .9rem; min-height: 2.5rem; font-weight: 600; } .link { background: none; border: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; } .desc { margin-top: 1.75rem; max-width: 60ch; } .desc h2, .desc h3 { margin-top: 1.25rem; } .sku { color: var(--muted); font-size: .8125rem; } .bundle { margin-top: 1.5rem; background: var(--panel); border-radius: var(--radius); padding: 1rem 1.25rem; } .bundle h2 { margin: 0 0 .5rem; font-size: 1.0625rem; } .bundle ul { margin: 0; padding-left: 1.25rem; } .cart { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 2rem; align-items: start; } @media (max-width: 800px) { .cart { grid-template-columns: 1fr; } } .cart-lines { list-style: none; margin: 0; padding: 0; } .cart-line { display: grid; grid-template-columns: 5rem 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); } @media (max-width: 640px) { .cart-line { grid-template-columns: 4rem 1fr; } .cart-total { grid-column: 2; } } .cart-img img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--panel); } .cart-qty { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .cart-qty input { width: 4.5rem; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; } .cart-total { font-weight: 700; } .small { font-size: .875rem; color: var(--muted); } .cart-summary { background: var(--panel); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; position: sticky; top: 5.5rem; } .cart-summary p { margin: 0; display: flex; justify-content: space-between; gap: 1rem; } .cart-summary p.small { display: block; } .checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); gap: 2rem; align-items: start; } @media (max-width: 800px) { .checkout { grid-template-columns: 1fr; } } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } } .totals { list-style: none; margin: 0 0 1rem; padding: 0; } .totals li { display: flex; justify-content: space-between; padding: .35rem 0; } .totals li.grand { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .75rem; font-weight: 700; font-size: 1.125rem; } .pay-buttons { display: flex; flex-direction: column; gap: .75rem; } .btn.paypal { background: #ffc439; color: #111; } .msg { padding: .75rem 1rem; border-radius: 10px; background: #fef2f1; color: #b91c1c; margin-bottom: 1rem; } .msg.ok { background: #f2f9f3; color: #1c5e20; } .prose { max-width: 66ch; } .prose img { border-radius: var(--radius); } .faq details { border-top: 1px solid var(--line); padding: .75rem 0; } .faq summary { font-weight: 600; cursor: pointer; } .posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; } .post-card h2 { margin: 0 0 .25rem; } .post-card a { text-decoration: none; } .newsletter { background: var(--panel); border-radius: var(--radius); padding: 1.25rem; margin-top: 2rem; max-width: 34rem; } .newsletter form { display: flex; gap: .5rem; flex-wrap: wrap; } .newsletter input { flex: 1; min-width: 12rem; } .site-foot { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--muted); font-size: .9375rem; } .foot-row { display: flex; flex-direction: column; gap: .75rem; } .foot-name { font-weight: 700; color: var(--fg); margin: 0; } .foot-small { margin: 0; font-size: .875rem; } .foot-links { display: flex; gap: 1rem; flex-wrap: wrap; } /* chat */ .chat { max-width: 44rem; } .chat-thread { display: flex; flex-direction: column; gap: .75rem; max-height: 60vh; overflow-y: auto; padding: 1rem; background: var(--panel); border-radius: var(--radius); margin-bottom: 1rem; } .msg { max-width: 85%; } .msg-visitor { align-self: flex-end; text-align: right; } .msg .bubble { display: inline-block; padding: .6rem .9rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); white-space: pre-wrap; text-align: left; } .msg-visitor .bubble { background: var(--accent); color: var(--on-accent); border-color: transparent; } .msg-system .bubble { background: transparent; border-style: dashed; color: var(--muted); font-size: .9375rem; } .msg .meta { font-size: .75rem; color: var(--muted); margin-top: .25rem; } .chat-form { display: flex; gap: .5rem; align-items: flex-end; } .chat-form textarea { flex: 1; font: inherit; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; resize: vertical; } .chat-actions { display: flex; gap: 1rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }