/* ================================================================ Wave Wallpaper Generator — Design System v3.3.2 PALETTE (dark default) --base #0a0a0a near-black canvas --panel-deep #0f0f0f deepest surfaces --panel #141414 standard panels --panel-raised #1c1c1c raised cards, controls --panel-warm #1c1812 warm accent panels (near TF2 aesthetic) --orange #f5853f primary accent --orange-dim #b35c22 dimmer orange for borders --blue #5a9fd4 secondary accent --text #e8ddc8 warm white primary text --muted #a89870 secondary text / labels (7.0:1 on --panel) --ink #000000 hard outlines / shadows --ready #7ab38a success / ok --error #e05a4a error states FONTS --font-display Anton decorative headers, brand --font-label Bebas Neue slider labels, badges, values --font-body Oswald body text, controls --font-mono system mono numeric values, code ================================================================ */ /* ── Fonts ──────────────────────────────────────────────────────── */ @font-face { font-family: 'OpenDyslexic'; src: url('/fonts/opendyslexic-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('/fonts/opendyslexic-bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } /* ── Tokens — dark (default) ────────────────────────────────────── */ :root { /* Palette */ --base: #0a0a0a; --panel-deep: #0f0d0a; --panel: #161208; --panel-raised: #1e180e; --panel-warm: #231a0d; --orange: #f5853f; --orange-dim: #b35c22; --orange-tint: rgba(245, 133, 63, 0.15); --blue: #5a9fd4; --blue-tint: rgba(90, 159, 212, 0.12); --text: #e8ddc8; --muted: #a89870; --ink: #000000; --ready: #7ab38a; --error: #e05a4a; --border: #3a2e1a; --shadow-glow: rgba(245, 133, 63, 0.35); /* Stripe colours for hazard header */ --stripe-a: #151005; --stripe-b: #1a1508; /* Fonts */ --font-display: 'Anton', 'Impact', sans-serif; --font-label: 'Bebas Neue', 'Anton', sans-serif; --font-body: 'Oswald', system-ui, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; /* Layout — rounded squares, soft glow aesthetic */ --sidebar-w: 340px; --header-h: 52px; --radius: 5px; --shadow-btn: 0 2px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3); --shadow-glow-btn: 0 0 12px rgba(245,133,63,0.4), 0 2px 8px rgba(0,0,0,0.5); } /* ── Tokens — light theme ("aged paper") ───────────────────────── Same philosophy as TF2 site: not a plain white inversion. Warm parchment tones; orange stays as a deeper brick. */ body.light-theme { --base: #ede4d0; --panel-deep: #dfd6c2; --panel: #e8dfc9; --panel-raised: #f2ead8; --panel-warm: #e4d9c0; --orange: #8f4210; --orange-dim: #9c4a14; --orange-tint: rgba(143, 66, 16, 0.10); --blue: #3f6f8f; --blue-tint: rgba(63, 111, 143, 0.10); --text: #2a2010; --muted: #5a4a30; --ink: #2a2010; --ready: #387049; --error: #b53020; --border: #c4b898; --shadow-glow: rgba(143, 66, 16, 0.20); --stripe-a: #d8c9a6; --stripe-b: #cdbf94; } /* Hazard stripes: header/footer background */ .hazard-stripe { background: repeating-linear-gradient( -45deg, var(--stripe-a) 0px, var(--stripe-a) 14px, var(--stripe-b) 14px, var(--stripe-b) 28px ); } /* ── Dyslexia font override ────────────────────────────────────── Applied to by app.js. Scoped to body so UI chrome can still use brand fonts if we ever want that distinction. Reduce letter-spacing for better readability with dyslexic font. */ body.dyslexic, body.dyslexic * { font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important; letter-spacing: 0 !important; } body.dyslexic .slider-label, body.dyslexic .section-title, body.dyslexic .brand-name, body.dyslexic .mode-desc { letter-spacing: 0.02em; } body.dyslexic .brand-badge, body.dyslexic .slider-value { letter-spacing: 0; } /* ── Reset ───────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; } } /* ── Accessibility ───────────────────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--orange); color: var(--ink); padding: 8px 16px; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; z-index: 9999; text-decoration: none; transition: top 0.1s; } .skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* ── Base styles ─────────────────────────────────────────────────── */ html, body { height: 100%; font-family: var(--font-body); background: var(--base); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; letter-spacing: 0.02em; } /* ── App shell — full viewport, no overflow ─────────────────────── */ .app-shell { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; } /* ── Header ──────────────────────────────────────────────────────── */ .app-header { flex-shrink: 0; height: var(--header-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 3px solid var(--orange); box-shadow: 0 4px 0 var(--ink), 0 6px 18px var(--shadow-glow); z-index: 100; } /* Logo medallion */ .logo-box { flex-shrink: 0; width: 36px; height: 36px; border: 2px solid var(--orange-dim); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, var(--panel-warm), var(--panel-deep)); box-shadow: inset 0 2px 4px rgba(255,255,255,0.06), 0 2px 0 var(--ink); } /* Brand text */ .header-brand { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .brand-row { display: flex; align-items: baseline; gap: 8px; } .brand-name { font-family: var(--font-display); font-size: 1.0rem; color: var(--text); letter-spacing: 0.04em; text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-badge { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--muted); border: 1px solid var(--border); padding: 1px 5px; border-radius: var(--radius); box-shadow: 1px 1px 0 var(--ink); white-space: nowrap; } .brand-sub { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; } .header-spacer { flex: 1; } /* Header icon buttons (theme, dyslexia, shortcut hint, sidebar toggle) */ .header-btn { flex-shrink: 0; width: 32px; height: 32px; background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--muted); box-shadow: 2px 2px 0 var(--ink); display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.05em; } .header-btn:hover { color: var(--orange); border-color: var(--orange-dim); } .header-btn:active { box-shadow: none; transform: translate(1px, 1px); } .dyslexic-btn { letter-spacing: 0; font-size: 0.7rem; } /* ── App body — sidebar + canvas ────────────────────────────────── */ .app-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* ── Controls sidebar ────────────────────────────────────────────── */ .controls-panel { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #100c06 0%, #0e0b07 100%); border-right: 1px solid #3a2a14; box-shadow: 3px 0 12px rgba(0,0,0,0.4); overflow-y: auto; overflow-x: hidden; transition: width 0.2s ease, opacity 0.2s ease; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .controls-panel::-webkit-scrollbar { width: 5px; } .controls-panel::-webkit-scrollbar-track { background: transparent; } .controls-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* Collapsed state */ .controls-panel.collapsed { width: 0; opacity: 0; border-right-width: 0; box-shadow: none; overflow: hidden; } /* Sidebar section */ .ctrl-section { border-bottom: 2px solid var(--border); padding-bottom: 12px; } .section-header { display: flex; align-items: center; padding: 10px 14px 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .section-title { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; } /* ── Source tabs ─────────────────────────────────────────────────── */ .source-tabs { display: flex; gap: 0; padding: 0 12px 8px; } .source-tab { flex: 1; padding: 6px 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; margin: 0 2px; } .source-tab:first-child { margin-left: 0; } .source-tab:last-child { margin-right: 0; } .source-tab:hover { color: var(--text); } .source-tab.active { background: var(--panel-raised); border-color: var(--orange-dim); color: var(--orange); box-shadow: 0 0 8px rgba(245,133,63,0.2); } /* ── Source panes ────────────────────────────────────────────────── */ .source-pane { display: none; padding: 0 12px; } .source-pane.active { display: block; } /* ── Palette list ────────────────────────────────────────────────── */ .palette-list { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .palette-list::-webkit-scrollbar { width: 4px; } .palette-list::-webkit-scrollbar-thumb { background: var(--border); } .loading-text { color: var(--muted); font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; padding: 12px 0; } .palette-group-label { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; padding: 8px 4px 3px; border-bottom: 1px solid var(--border); margin-bottom: 3px; } .palette-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; } .palette-row:hover { background: var(--panel-raised); } .palette-row.selected { background: var(--panel-warm); border-color: var(--orange-dim); box-shadow: 0 0 8px rgba(180,80,20,0.2); } .palette-row-name { font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; color: var(--text); letter-spacing: 0.03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .palette-swatches { display: flex; gap: 2px; flex-shrink: 0; } .palette-swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.4); cursor: pointer; transition: transform 0.1s; } .palette-swatch:hover { transform: scale(1.15); } /* ── Upload area ─────────────────────────────────────────────────── */ .upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 18px 12px; text-align: center; cursor: pointer; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 5px; transition: border-color 0.15s, background 0.15s; margin-bottom: 8px; } .upload-area:hover, .upload-area.drag-over { border-color: var(--orange); background: var(--orange-tint); color: var(--orange); } .upload-hint { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; } .upload-sub { font-size: 0.65rem; opacity: 0.7; } .uploaded-files-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .uploaded-file-tag { background: var(--panel-raised); border: 1px solid var(--border); border-radius: 2px; padding: 2px 6px; font-size: 0.68rem; font-family: var(--font-mono); color: var(--muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .extract-opts { padding-top: 4px; } /* ── Hex textarea ────────────────────────────────────────────────── */ .hex-textarea { width: 100%; min-height: 100px; background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; padding: 8px; resize: vertical; margin: 6px 0; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); transition: border-color 0.15s; } .hex-textarea:focus { outline: none; border-color: var(--orange-dim); } /* ── Harmony generator pane ───────────────────────────────────────── */ .gen-header-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-end; } .gen-color-col { flex-shrink: 0; } .gen-harmony-col { flex: 1; min-width: 0; } .gen-color-picker { width: 46px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; background: var(--panel); cursor: pointer; display: block; } .gen-color-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 3px; } .gen-color-picker::-webkit-color-swatch { border: none; border-radius: 3px; } .gen-swatch-row { min-height: 36px; margin: 8px 0 4px; } .gen-hint { font-family: var(--font-body); font-size: 0.65rem; color: var(--muted); opacity: 0.7; margin: 0 0 8px; min-height: 14px; } .gen-action-row { display: flex; gap: 6px; align-items: stretch; } /* Removable swatch — shown in harmony pane only */ .gen-swatch-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; } .gen-swatch { width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.35); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; display: block; } .gen-swatch:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.5); } .gen-swatch-remove { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: #c0392b; border: none; border-radius: 50%; color: #fff; font-size: 9px; line-height: 14px; text-align: center; cursor: pointer; display: none; padding: 0; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .gen-swatch-wrap:hover .gen-swatch-remove { display: block; } .color-picker { width: 40px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; background: var(--panel); cursor: pointer; } .color-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 2px; } .color-picker::-webkit-color-swatch { border: none; border-radius: 2px; } /* ── Swatches (extracted + generated) ────────────────────────────── */ .swatch-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; margin: 6px 0; } .extracted-swatch { width: 22px; height: 22px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.4); cursor: pointer; transition: transform 0.1s; } .extracted-swatch:hover { transform: scale(1.12); box-shadow: 0 0 6px rgba(255,255,255,0.2); } .extracted-swatch:active { transform: scale(0.95); } /* ── Mode buttons ─────────────────────────────────────────────────── */ .mode-group { display: flex; gap: 4px; padding: 0 12px; margin-bottom: 10px; } .mode-btn { flex: 1; padding: 10px 8px 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all 0.15s ease; font-weight: 600; } .mode-btn:hover { color: var(--text); background: var(--panel-raised); } .mode-btn.active { background: linear-gradient(160deg, #c96010 0%, #8f3e08 100%); border-color: rgba(200,100,30,0.4); color: #fff; box-shadow: 0 0 14px rgba(200,90,20,0.4), 0 2px 8px rgba(0,0,0,0.4); font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .mode-btn:active { transform: scale(0.97); } .mode-desc { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.03em; color: inherit; opacity: 0.65; font-weight: 300; text-transform: none; white-space: nowrap; } /* ── Sliders ──────────────────────────────────────────────────────── */ .slider-group { padding: 0 12px; margin-bottom: 10px; } .slider-group.hidden { display: none; } .slider-group.half { flex: 1; padding: 0; } .slider-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; } .slider-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); letter-spacing: 0; } .slider-hint { font-family: var(--font-body); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.02em; opacity: 0.8; font-weight: 300; text-transform: none; } /* Range inputs */ input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; cursor: pointer; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: linear-gradient(160deg, #d96818 0%, #b34d10 100%); border: none; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 6px rgba(200,90,20,0.3); transition: box-shadow 0.15s ease, transform 0.1s ease; } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: linear-gradient(160deg, #d96818 0%, #b34d10 100%); border: none; border-radius: 5px; cursor: pointer; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,0.5); } input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 10px rgba(220,110,30,0.5); transform: scale(1.08); } input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--orange), 0 2px 8px rgba(0,0,0,0.5); } /* ── Filter row (side-by-side sliders) ──────────────────────────── */ .filter-row { display: flex; gap: 10px; padding: 0 12px; margin-bottom: 10px; } /* ── Select inputs ────────────────────────────────────────────────── */ .select-input { width: 100%; background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 0.8rem; padding: 6px 8px; cursor: pointer; box-shadow: 1px 1px 0 var(--ink); margin-top: 5px; transition: border-color 0.15s; } .select-input:focus { outline: none; border-color: var(--orange-dim); } .select-input option { background: var(--panel); } /* ── Custom resolution row ────────────────────────────────────────── */ .custom-res-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; margin-top: 4px; margin-bottom: 8px; } .custom-res-row.hidden { display: none; } .res-input { flex: 1; background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; padding: 5px 6px; box-shadow: 1px 1px 0 var(--ink); text-align: center; } .res-input:focus { outline: none; border-color: var(--orange-dim); } .res-sep { color: var(--muted); font-family: var(--font-label); } /* ── Rotation presets ─────────────────────────────────────────────── */ .rot-presets { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; } .rot-preset-btn { padding: 3px 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); box-shadow: none; transition: all 0.15s ease; } .rot-preset-btn:hover { color: var(--text); background: var(--panel-raised); } .rot-preset-btn.active { color: #fff; border-color: rgba(180,80,20,0.4); background: linear-gradient(160deg, #c96010 0%, #8f3e08 100%); box-shadow: 0 0 8px rgba(180,80,20,0.3); text-shadow: 0 1px 2px rgba(0,0,0,0.4); } /* ── Checkbox labels ────────────────────────────────────────────────── */ .checkbox-label { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; user-select: none; font-family: var(--font-label); color: var(--text); } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--orange); border: 2px solid var(--orange-dim); border-radius: 2px; } .checkbox-label input[type="checkbox"]:hover { border-color: var(--orange); } .checkbox-label input[type="checkbox"]:checked { border-color: var(--ink); } .checkbox-label span:first-of-type { font-weight: 600; letter-spacing: 0.05em; } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn-primary { background: linear-gradient(160deg, #ff9a55 0%, #e56a1a 60%, #c4510e 100%); border: 1.5px solid rgba(255,140,60,0.5); border-radius: var(--radius); color: #fff; font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.1em; font-weight: bold; padding: 10px 20px; cursor: pointer; box-shadow: var(--shadow-glow-btn); display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .btn-primary:hover { background: linear-gradient(160deg, #ffb070 0%, #f07820 60%, #d46015 100%); box-shadow: 0 0 18px rgba(245,133,63,0.55), 0 3px 10px rgba(0,0,0,0.5); transform: translateY(-1px); } .btn-primary:active { transform: translateY(1px); box-shadow: 0 0 8px rgba(245,133,63,0.35), 0 1px 4px rgba(0,0,0,0.4); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--panel-raised); border: 1.5px solid var(--orange-dim); border-radius: var(--radius); color: var(--text); font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.08em; padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-btn); display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; white-space: nowrap; } .btn-secondary:hover { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 10px rgba(245,133,63,0.25), 0 2px 8px rgba(0,0,0,0.4); transform: translateY(-1px); } .btn-secondary:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .full-width { width: 100%; justify-content: center; } /* ── Preview panel (canvas) ──────────────────────────────────────── */ .preview-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel-deep); overflow: hidden; } .preview-area { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--base); } /* Animated wave placeholder */ .preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); pointer-events: none; user-select: none; } .wave-idle { width: 320px; max-width: 80%; opacity: 0.55; overflow: visible; } @keyframes wave-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-40px); } } @keyframes wave-fade { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.3; } } .wave-path { animation: wave-drift 4s linear infinite; } .wave-path.w1 { animation-duration: 4s; } .wave-path.w2 { animation-duration: 5.5s; animation-direction: reverse; } .wave-path.w3 { animation-duration: 7s; animation: wave-drift 7s linear infinite, wave-fade 3.5s ease-in-out infinite; } .placeholder-label { font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; } .placeholder-hint { font-family: var(--font-body); font-size: 0.7rem; color: var(--muted); opacity: 0.65; } kbd { background: var(--panel-raised); border: 1px solid var(--border); border-radius: 2px; padding: 1px 5px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text); } .preview-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .preview-img.hidden { display: none; } /* Render spinner */ .render-spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(10, 10, 10, 0.75); backdrop-filter: blur(4px); color: var(--text); font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.1em; } .render-spinner.hidden { display: none; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--orange); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ── Action bar ────────────────────────────────────────────────────── */ .action-bar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--panel); border-top: 2px solid var(--border); box-shadow: 0 -2px 0 var(--ink); } .action-spacer { flex: 1; } .action-btn { background: var(--panel-raised); border: 2px solid var(--border); border-radius: var(--radius); color: var(--muted); font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.06em; padding: 5px 10px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); display: inline-flex; align-items: center; gap: 5px; transition: color 0.12s, border-color 0.12s; } .action-btn:hover { color: var(--text); border-color: var(--orange-dim); } .action-btn:active { box-shadow: none; transform: translate(1px, 1px); } .action-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* ── Status bar ────────────────────────────────────────────────────── */ .status-bar { flex-shrink: 0; padding: 5px 14px; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.04em; line-height: 1.4; border-top: 1px solid var(--border); transition: background 0.15s; } .status-bar.hidden { display: none; } .status-bar.ok { background: rgba(122, 179, 138, 0.15); color: var(--ready); } .status-bar.error { background: rgba(224, 90, 74, 0.15); color: var(--error); } .status-bar.info { background: var(--panel); color: var(--muted); } /* ── Utility ────────────────────────────────────────────────────────── */ .hidden { display: none !important; } /* ── Mobile — stack controls below canvas ─────────────────────────── */ @media (max-width: 700px) { :root { --sidebar-w: 100%; } .app-body { flex-direction: column; } .controls-panel { width: 100%; max-height: 55vh; border-right: none; border-top: 3px solid var(--orange-dim); box-shadow: 0 -4px 0 var(--ink); order: 2; } .controls-panel.collapsed { width: 100%; max-height: 0; height: 0; opacity: 0; } .preview-panel { order: 1; min-height: 45vh; } .preview-area { min-height: 40vh; } .filter-row { flex-direction: column; } .filter-row .slider-group.half { padding: 0 12px; } .brand-sub, .brand-badge { display: none; } .brand-name { font-size: 0.88rem; } .wave-idle { width: 80%; } } @media (max-width: 420px) { .action-bar { flex-wrap: wrap; } .action-spacer { display: none; } .btn-primary, .btn-secondary { flex: 1; justify-content: center; } .palette-list { max-height: 160px; } .mode-group { gap: 3px; } .mode-desc { display: none; } } /* ── Light theme overrides (accent-only — tokens handle the rest) ─── */ body.light-theme .hazard-stripe { box-shadow: 0 4px 0 var(--ink), 0 6px 18px rgba(90,70,30,0.18); } body.light-theme input[type="range"] { background: var(--border); } body.light-theme .render-spinner { background: rgba(220, 200, 160, 0.80); } body.light-theme .wave-idle { opacity: 0.45; }