/* Theme: an explicit choice persisted in localStorage and applied as data-theme on (see theme.js) - default is dark, matching the site's original look, so nothing changes for anyone who never touches the toggle. Palette is drawn from the relief models themselves (tree green as the accent, grass/rock/snow informing everything else) instead of a generic blue, so the site's own chrome reads like the thing it sells - customizing a model's own colors never touches these tokens, only the UI does. */ :root { color-scheme: dark; --bg: #141712; --panel: #1b1f19; --border: #2b322a; --text: #e9ede6; --muted: #96a091; --accent: #4f8a5f; --accent-rgb: 79, 138, 95; --accent-hover: #61a071; --good: #8bc34a; --bad: #c9695a; --input-bg: #0f120e; --hover-bg: rgba(255, 255, 255, 0.06); /* The 3D stage deliberately stays the same dark "shop window" backdrop in both themes - a model reads better against a dark stage regardless of the surrounding UI, the same reason product photography uses a dark sweep. */ --stage-bg: #0b0d0a; } :root[data-theme="light"] { color-scheme: light; --bg: #f4f6f1; --panel: #ffffff; --border: #dbe3d7; --text: #1a1f18; --muted: #5c6658; --accent: #3f7d52; --accent-rgb: 63, 125, 82; --accent-hover: #356a45; --good: #4f9d3f; --bad: #b3453c; --input-bg: #eef1ea; --hover-bg: rgba(0, 0, 0, 0.045); } * { box-sizing: border-box; } /* Range/checkbox/radio controls otherwise render with the browser's own default accent (platform blue) regardless of this page's own accent token. */ input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; flex-direction: column; } /* Real flex sizing instead of a hardcoded pixel offset for #app - the topbar can wrap to multiple lines on narrow screens and #app still lands in the right place. */ .topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 18px; background: var(--panel); border-bottom: 1px solid var(--border); } .topbar-brand { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; } .tabs { display: flex; align-items: center; gap: 2px; } .tab { padding: 7px 14px; border-radius: 7px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 500; transition: color 0.15s ease, background 0.15s ease; } .tab:hover { color: var(--text); background: var(--hover-bg); } .tab.active { color: var(--text); background: var(--panel); font-weight: 700; box-shadow: inset 0 0 0 1px var(--border); } .theme-toggle { width: auto; margin: 0; padding: 6px 10px; font-size: 14px; line-height: 1; background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--text); cursor: pointer; } .theme-toggle:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--muted); } .topbar-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .topbar-form input { width: 140px; min-width: 0; margin-top: 0; padding: 6px 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; } .topbar-form button { width: auto; margin-top: 0; padding: 6px 12px; font-size: 12.5px; white-space: nowrap; } .topbar-identity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .topbar-identity a { font-size: 12.5px; white-space: nowrap; } .topbar-status { flex-basis: 100%; font-size: 12px; margin: 0; } .topbar-status:empty { display: none; } #app { display: flex; flex: 1 1 auto; min-height: 0; /* let #sidebar/#main scroll internally instead of overflowing this flex item */ position: relative; } @media (max-width: 640px) { #app { flex-direction: column; } #sidebar { width: auto; flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--border); } #main { flex: 1 1 50%; } } #sidebar { width: 340px; flex: 0 0 340px; padding: 18px; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--border); } #sidebar h1 { font-size: 18px; margin: 0 0 4px; } #sidebar h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; } section { margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--border); } .hint { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 6px 0 0; } .bbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } label { display: block; font-size: 12px; color: var(--muted); } input[type="text"], input[type="number"] { width: 100%; margin-top: 4px; padding: 6px 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; } input[type="text"]:disabled { color: var(--muted); background: var(--bg); } input[type="range"] { width: 100%; margin-top: 4px; } .slider-row, .number-row { margin-bottom: 12px; } .season-labels { display: flex; justify-content: space-between; gap: 8px; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); } .checkbox-row input { width: auto; } .checkbox-row input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); flex: 0 0 auto; margin-left: 4px; } .color-band-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 8px; } .color-band-row input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); flex: 0 0 auto; } .color-band-row input[type="number"] { width: 80px; margin-top: 0; flex: 0 0 auto; } .color-band-row select.band-type { width: auto; margin-top: 0; padding: 4px 6px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; flex: 0 0 auto; } .btn-band-remove { width: 24px; height: 24px; padding: 0; line-height: 1; flex: 0 0 auto; margin-left: auto; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--muted); cursor: pointer; } .btn-band-remove:hover { color: var(--text); border-color: var(--muted); } details { margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--border); } summary { cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } a { color: var(--accent); } /* A plain mouse click leaving a lingering browser-default focus ring on the clicked button/link/input read as a stray blue halo around the page's edges - swap it for one shown only on real keyboard navigation. */ a:focus, button:focus, input:focus, select:focus { outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button { width: 100%; padding: 10px; margin-top: 10px; border: none; border-radius: 8px; background: var(--accent); color: white; font-size: 14px; font-weight: 600; cursor: pointer; } button:hover:not(:disabled) { background: var(--accent-hover); } button:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; } #log { background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 11px; line-height: 1.5; height: 160px; overflow-y: auto; white-space: pre-wrap; color: var(--muted); } #main { flex: 1; display: flex; flex-direction: column; min-width: 0; } #map { flex: 1 1 55%; min-height: 150px; } #mapPreviewSplitter { flex: 0 0 8px; cursor: row-resize; background: var(--border); position: relative; } #mapPreviewSplitter:hover, #mapPreviewSplitter.dragging { background: var(--accent); } #preview { flex: 1 1 45%; min-height: 150px; background: var(--stage-bg); border-top: 1px solid var(--border); position: relative; } /* ---- Account / projects ---- */ .btn-row { display: flex; gap: 8px; } .btn-row button { flex: 1 1 auto; margin-top: 8px; } .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 500; } .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); background: transparent; } .btn-secondary.active-unit { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-danger { color: var(--bad); border-color: var(--bad); } .btn-danger:hover:not(:disabled) { background: var(--bad); color: #fff; } #account input[type="email"], #account input[type="password"] { margin-bottom: 10px; } .hint.ok { color: var(--good); } .hint.error { color: var(--bad); } .banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #16241d; border: 1px solid var(--good); color: var(--good); border-radius: 8px; padding: 10px 12px; margin: 18px 0; font-size: 12.5px; } .banner .btn-secondary { margin: 0; width: auto; padding: 6px 10px; font-size: 12px; } /* ---- My Projects page ---- */ .projects-wrap { max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; } .projects-wrap h1 { font-size: 22px; margin: 0 0 6px; } .project-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .project-row .project-main { flex: 1 1 200px; min-width: 0; } .project-row .project-name { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-row .project-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .project-row .project-actions { display: flex; gap: 8px; flex-wrap: wrap; } .project-row .project-actions .btn-secondary, .project-row .project-actions a.btn-secondary { width: auto; margin: 0; padding: 6px 12px; font-size: 12px; display: inline-block; text-decoration: none; text-align: center; } .empty-state { color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 24px; text-align: center; } .topbar-mini { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 13px; color: var(--muted); } .topbar-mini a { margin-left: 10px; } /* ---- Shop: wood/mount swatches, price, cart, account menu, viewer tabs ---- */ .topbar-actions { display: flex; align-items: center; gap: 6px; } .account-menu { position: relative; } .dropdown-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 2001; } .dropdown-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-panel input { margin-bottom: 8px; } .dropdown-panel .btn-row .btn-secondary { width: auto; flex: 1 1 auto; } .viewer-tabs { /* bottom offset clears the fixed feedback bubble (right:18px; bottom:18px) that floats over every page - both sit in the same corner otherwise. */ position: absolute; right: 14px; bottom: 78px; z-index: 2000; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 3px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .viewer-tab { width: auto; margin: 0; padding: 7px 16px; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--muted); border: none; border-radius: 6px; } .viewer-tab:hover:not(:disabled) { background: var(--hover-bg); color: var(--text); } .viewer-tab.active { background: var(--accent); color: #fff; } .viewer-hint { position: absolute; left: 14px; bottom: 78px; z-index: 2000; max-width: min(360px, calc(100% - 28px)); margin: 0; padding: 8px 12px; font-size: 12.5px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .viewer-hint.error { color: var(--bad); border-color: var(--bad); } .viewer-loader { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--stage-bg); color: var(--muted); font-size: 13px; } .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } } @keyframes spin { to { transform: rotate(360deg); } } .shop-price { font-size: 22px; font-weight: 700; color: var(--text); margin: 14px 0 2px; } .shop-price-note { font-size: 12px; color: var(--muted); margin: 0 0 14px; } .shop-swatches { display: flex; gap: 10px; flex-wrap: wrap; } .shop-swatch { flex: 1 1 70px; } .shop-swatch input { position: absolute; opacity: 0; pointer-events: none; } .shop-swatch label { display: block; text-align: center; padding: 10px 6px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-size: 12.5px; color: var(--muted); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .shop-swatch label:hover { color: var(--text); background: var(--hover-bg); } .shop-swatch input:checked + label { border-color: var(--accent); color: var(--text); background: rgba(var(--accent-rgb), 0.12); font-weight: 600; } #cartOverlay { /* Leaflet's map panes win normal stacking-context math against anything under ~2000 while #map is visible (see .viewer-tabs) - match that floor here too, otherwise the map shows through the cart panel on the Map tab. */ position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 2000; } #cartOverlay.open { opacity: 1; pointer-events: auto; } #cartPanel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--border); padding: 18px 20px; overflow-y: auto; z-index: 2001; transform: translateX(100%); transition: transform 0.22s ease; } #cartPanel.open { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cart-header h2 { font-size: 16px; margin: 0; } .cart-summary { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; } .cart-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; color: var(--text); } .cart-line span:first-child { color: var(--muted); } #cartConfirm h3 { margin: 40px 0 10px; text-align: center; } #cartConfirm p { text-align: center; } /* ---- Gallery ---- */ .gallery { max-width: 1100px; margin: 32px auto 60px; padding: 0 24px; } .gallery h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 14px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .gallery-grid figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); } .gallery-grid img { display: block; width: 100%; height: 160px; object-fit: cover; } .gallery-grid figcaption { padding: 8px 10px; font-size: 12px; color: var(--muted); }